[SOLVED] A simple sprite sheet animation in Cocos2d-JS

cocos2d-x JavaScript
#1

Based on the helloworld example and the cocos-2d-x docs (http://www.cocos2d-x.org/wiki/Sprite_Sheet_Animation) I tried to make a simple sprite sheet animation. Here is the code:

    this.mostafa = cc.Sprite.create(res.Mostafa_png);        
    this.mostafa.attr({
        x: size.width / 3,
        y: size.height / 3,
        scale: 0.2,
        rotation: 180
    });
    this.addChild(this.mostafa, 0);
    var rotate = cc.RotateTo.create(2, 0);

    cc.spriteFrameCache.addSpriteFrames(res.Mostafa_plist);
    
    var animFrames = [];
	var str = "";
	for (var i = 1; i < 9; i++) {
    	str = "mosquito_fly" + (i < 10 ? ("0" + i) : i) + ".png";
    	var frame = cc.spriteFrameCache.getSpriteFrame(str);
    	animFrames.push(frame);
	}
	var animation = cc.Animation.create(animFrames, 0.04);
	var animate   = cc.Animate.create(animation); 
    
    this.mostafa.runAction(animate);  // shows nothing
    //this.mostafa.runAction(rotate);   // shows turning sprite

It doesn’t show anything. But if I put in the last line and put out the second last, then it shows a rotating sprite. (the sprite frame cache is loaded correctly)

What is missing?

Cocos creator js animate sprite
Cocos creator js animate sprite
#3

@lavizrap

There should be nothing wrong in your code, maybe check whether the sprite frames have been correctly loaded with this:

cc.spriteFrameCache.addSpriteFrames(res.Mostafa_plist);
this.mostafa = cc.Sprite.create("#mosquito_fly1.png");
#4

Thanks. It works now. The image was loaded correctly, but the problem was, that I had to add a texture and that there was only one circle of animation and that went so fast, that I overlooked it. My working code now is:

    // Create sprite and set attributes
    this.mostafa = cc.Sprite.create(res.Mostafa_single_png);        
    this.mostafa.attr({
        x: size.width / 3,
        y: size.height / 3,
        scale: 0.5,
        rotation: 0
    });
    this.addChild(this.mostafa, 0);
    
// Load sprite frames to frame cache, add texture node
    cc.spriteFrameCache.addSpriteFrames(res.Mostafa_plist);
    var mostafaTexture = cc.textureCache.addImage(res.Mostafa_png),
   	mostafaImages  = cc.SpriteBatchNode.create(mostafaTexture);
this.addChild(mostafaImages);
    
    var animFrames = [];
	var str = "";
	for (var i = 1; i < 9; i++) {
    	str = "mosquito_fly" + (i < 10 ? ("0" + i) : i) + ".png";
    	var spriteFrame = cc.spriteFrameCache.getSpriteFrame(str);
    	var animFrame = new cc.AnimationFrame();
            animFrame.initWithSpriteFrame(spriteFrame, 1, null);
    	animFrames.push(animFrame);
	}
	var animation = cc.Animation.create(animFrames, 0.08, 100);
	var animate   = cc.Animate.create(animation); 
    
    this.mostafa.runAction(animate);
1 Like
#5

Great, glad that you solved it

#6

Hey pandamicro,

the code is running in Firefox now, but not in Android. I analysed the code and found that the

var animFrame = new cc.AnimationFrame();

line seems to crash on Android. In the Chrome browser in Android it is working. Unfortunately I can’t debug Android yet. I would if I could. Where and how do I post such errors the best?

Michael

#7

@lavizrap

I will test it, thanks for the feedback

#8

@lavizrap, I tested it, it does work on our Android device, can you retry and give us a more detailed issue description?

#9

I retried now with version 3.0a2 and it works fine. Thank you.