Adding animation

cocos2d-x JavaScript
#1

I have two sprites.

var magic1 = cc.Sprite.create(magic11);
var magic2 = cc.Sprite.create(magic12);

and I want to show this sprites 10 times in turn.
like magic1 > magic2> magic1 > magic2>magic1 > magic2>magic1 > magic2>magic1 -> magic2

can I make this with animation?
if I can, how do I make it?…

I tried like
var magiceye = cc.Sprite.create(magic11);
var magiceye = cc.Sprite.create(magic12);
var ani = cc.Animation.create();
ani.setDelay(1);

looking the API but I’m so new in cocos2d-x so I cant find out the solution…T_T

#2

Here is the sample code for you.

        var ani = cc.Animation.create();   // create the animation

        var sprite = cc.Sprite.create(magic11);  // create the object
        sprite.setPosition(cc.ccp(100, 100));   // set position
        this.addChild(sprite);    // add it to the layer or scene

        ani.addSpriteFrameWithFileName(magic11);   // add frame 0
        ani.addSpriteFrameWithFileName(magic12);  // add frame 1
        ani.setDelayPerUnit(1);   // set the delay time, in seconds
        ani.setLoops(5);  // repeat the animation 5 times,
        var action = cc.Animate.create(ani);   

        sprite.runAction(action);
#3

Thanks for your response.
However the sample code that you gave me just adds the child of the sprite.
And the animation doesn’t works….
This is a part of my code.
In the layer I made button1

var bt = cc.Sprite.create(button);
var bt_pressed = cc.Sprite.create(buttonpressed);

var button1 = cc.MenuItemSprite.create(bt,bt_pressed,this,this.func);
button1.setPosition(cc.ccp(winSize.width - button1.getContentSize().width*2.01, winSize.height/5.6));
this.addChild(button1);

and here is the func that when the button is pressed, I want to make the animation start.

func:function (sPender){
var ani = cc.Animation.create();

var sprite = cc.Sprite.create(magic11);
sprite.setPosition(cc.ccp(300, 300));
this.addChild(sprite);

ani.addSpriteFrameWithFileName(magic11);
ani.addSpriteFrameWithFileName(magic22);
ani.setDelayPerUnit(1);
ani.setLoops(5);
var action = cc.Animate.create(ani);

sprite.runAction(action);
},
});

but it just adds the sprite as a child…
I can’t find what is wrong.,…

#4

Shun Lin, I didn’t see setLoops() function. Is that available in the current version? I use alpha 2 version.

#5

Shun Lin, I do a bit of research and found that although I can’t find setLoops() function the number of loop argument can be provided in “Repeat” action class via

// example var rep = cc.Repeat.create(cc.Sequence.create(jump2, jump1), 5);

Thanks for your code and let me find this out!

#6

Hello

I’m sorry the question, and my English XD, but I’m two days with an error and I am unable to solve it.

As I have not run the animation, I used the example of the url (http://www.gamefromscratch.com/post/2012/07/11/Cocos2D-HTML-Tutorial-5-Menus-and-sounds-and-music.aspx), and added your code, but I always get this error:

**TypeError: ani.addSpriteFrameWithFileName is not a function @ http://localhost/MyFourthApp/MyFourthApp.js:33
**

I am using Cocos2d-html5-v0.5.0-alpha2

This is the code I put (the rest of the files can be found here: http://www.gamefromscratch.com/post/2012/07/11/Cocos2D-HTML-Tutorial-5-Menus-and-sounds-and-music.aspx

@cc.LayerColor.extend MyFourthApp var = ({
init: function ()
{
this.initWithColor (cc.ccc4 (0,0,0,255));
var size = cc.Director.sharedDirector (). getWinSize ();

cc.AudioManager.sharedEngine (). setEffectsVolume (0.5);
cc.AudioManager.sharedEngine (). setBackgroundMusicVolume (0.5);

menuItem1 var = new cc.MenuItemFont.create (“Play Sound”, this, this.playSound);
MenuItem2 var = new cc.MenuItemFont.create (“Play Song”, this, this.playSong);
MenuItem3 var = new cc.MenuItemFont.create (“Stop Playing Song”, this, this.stopPlayingSound);
menuItem4 var = new cc.MenuItemFont.create (“Exit”, this, this.exit);

menuItem1.setPosition (cc.ccp (size.width / 2, size.height / 2 +50));
menuItem2.setPosition (cc.ccp (size.width / 2, size.height / 2));
menuItem3.setPosition (cc.ccp (size.width / 2, size.height/2-50));
menuItem4.setPosition (cc.ccp (size.width / 2, size.height/2-100));

var menu = cc.Menu.create (menuItem1, MenuItem2, MenuItem3, menuItem4);
menu.setPosition (cc.ccp (0,0));

this.addChild (menu);

cc.Animation.create var ani = new (); / / create the animation

var sprite = cc.Sprite.create (“images/mario1.png”) / / create the object
sprite.setPosition (cc.ccp (100, 100)); / / set position
this.addChild (sprite) / / add it to the layer or scene

ani.addSpriteFrameWithFileName (“images/mario2.png”) / / add frame 0
ani.addSpriteFrameWithFileName (“images/mario3.png”) / / add frame 1
ani.setDelayPerUnit (1), / / ​​set the delay time, in seconds
ani.setLoops (5) / / repeat the animation 5 times,
var action = cc.Animate.create (ani);

sprite.runAction (action);

return this;
}
PlaySound: function () {
cc.Log (“Playing sound”);
cc.AudioManager.sharedEngine (). playEffect (“Resources/effect2”);
}
playSong: function () {
cc.Log (“Playing song”);
cc.AudioManager.sharedEngine (). playBackgroundMusic (“Resources / background”, false);
}
stopPlayingSound: function () {
cc.Log (“Done playing song”);
if (cc.AudioManager.sharedEngine (). isBackgroundMusicPlaying ())
{
cc.AudioManager.sharedEngine (). stopBackgroundMusic ();
}
}
exit: function () {
document.location.href = “http://www.gamefromscratch.com”;
}
});

MyFourthApp.scene = function () {
var scene = cc.Scene.create ();
var layer = MyFourthApp.layer ();

scene.addChild (layer);
return scene;
}

MyFourthApp.layer = function () {
pret MyFourthApp var = new ();

if (ready && pRet.init ()) {
pret return;
}
return null;
}

Can you help?
Thank you!
Edu