Using Frame Animated Sprites from Cocos Studio in js v3.3

cocos2d-x JavaScript
#1

It is my understanding that we are now able to use frame-animated sprites, published from Cocos Studio as JSON in our Cocos2d-js v3.3 projects. Unfortunately, I cannot seem to find instructions for how to preload and then use these resources in the javascript code.

I’ve seen the example parkour game that uses frame animated widgets and skeletal animation, but neither of those is exactly what I’m looking for.

I am looking for a sample of code, or a link to an example or tutorial that will convey an understanding of how this is done.

#2

See if this helps Cocos Studio 2 Feedback.

#3

yeah, you have to create a new node in Cocos Studio 2.1 and call its node’s name (Node.csb) to animate itself.

auto node = CSLoader::createNode(“res/MainScene.csb”); <— this is main scene (must be called)
this->addChild(node, 1);

auto action = CSLoader::createTimeline(“res/Node.csb”); <— this is the Node
node->runAction(action);
action->gotoFrameAndPlay(0, true);

That node contains Animations created of Serial Frames
(Right Click Several Images to put them in one layer and animate it)

by using that way, u can have animated nodes as if u have Flash Animation in there.
Not armature (bones).

#4 
var obj = ccs.load(res.Card_json);
this.addChild(obj.node);
obj.node.runAction(obj.action);
obj.action.gotoFrameAndPlay(0, true);

[Edited based on @helo478]

#5

gOzaru, it seems like that information is about cocos2d-x, rather than cocos2d-js. El_Jorge, even though the title of that thread refers to js, it looks like the answers are about x, as well.

nite, thank you for the sample code. If you change the second line to: this.addChild(obj.node) it runs without error. It does not however result in an animation appearing on the screen.

#6

Does the node show up after you do addChild ?

#7

No, it’s just a black screen

#8

Hmm, It should as least show up, do you see any warning on the chrome console?

Take a look at the dogfood project we’re working on, I use cocos studio to create all the ui here.

#9

This code working on web only and not on Mac or iOS, any idea why?

#10

I figured it out, if anyone interested…
If you using Cocos Studio v2.2.8 do not create project in it, it will use Cocos2d-JS 3.5, create project using CLI Cocos2d-JS v3.6.1
Then, copy paste .json from res of Cocos Studio project into res of project you created using Cocos2d-JS v3.6.1
Code will work perfectly in Xcode for MAC and iOS.

Enjoy.

#11

For people having a black screen: Make sure that the plist and png used by your animation is within the searchpath of cocos2dx.

At least for me it was a big problem that I exportet the animation from Cocos Studio and copied it into a subfolder within my resourcefolder of cocos2dx. The animation wouldn’t find the plist and png file since it didn’t know about the subfolder. Anyway, my code:

// adjust the search path FileUtils::getInstance()->addSearchPath("Animation");

// create and place the node
std::string filename = “Animation/animation.csb”;
Node* node = CSLoader::createNode(filename);
node->setPosition(Point(
origin.x + visibleSize.width / 2,
origin.y + visibleSize.height / 2));

// create the animation and add it to the node
cocostudio::timeline::ActionTimeline* action = CSLoader::createTimeline(filename);
node->runAction(action);

// start the animation (and enable loop)
action->gotoFrameAndPlay(0, true);

this->addChild(node);
1 Like
#12 
    var catAnimNode = ccs.csLoader.createNode(res.Cat_json);
    var catAnimAction = ccs.actionTimelineCache.createAction(res.Cat_json);
    catAnimNode.animasyon = catAnimAction;
    catAnimNode.runAction(catAnimAction);
    catAnimNode.animasyon.gotoFrameAndPlay(0,40,true);
#13

@tufantalan I tried the code you posted, it loads the animation and plays it. My animation is a simple walk cycle, so I’d like the node to move its position around as well, but I can’t seem to change the position. I’ll use the variable names you posted to make things easier.

catAnimNode.setPosition(catAnimNode.getPositionX() + 10, catAnimNode.getPositionY());

But this just does nothing. No errors, the character just stays in 1 spot running the animation.

Any idea what I need to do?

#14

Is your setPosition function trigerred in a loop or etc? If you do not trigger many times setPosition it does notihing. It works only once.
Edit: Actually you can use moveBy or moveTo methods. They serve your purpose.

#15

In the update function, I check the movement direction of the character and add 10px in the appropriate position.

Using set position() worked with sprites. Why not with this?

What about setPositionX() and setPositionY()? Could they possibly work?

Creating an action to move 10 pixels to the right every frame seems like overkill. Is that really the best practice?

#16

ccs.csLoader.createNode() function returns a node note sprite. Maybe cause of that. I touchMove event and I am changing x property of node like the following;

onTouchMoved: function (touch, event) {            
                cc.log("tasinimyor");
                var target = event.getCurrentTarget();
                var delta = touch.getDelta();
                target.x += delta.x;
                target.y += delta.y;
            }
#17 
var HelloWorldLayer = cc.Layer.extend({
ctor:function () {
    this._super();

    var Gary = ccs.csLoader.createNode(res.s_Gary_json);
    var catAnimAction = ccs.actionTimelineCache.createAction(res.s_Gary_json);
    Gary.animasyon = catAnimAction;
    Gary.runAction(catAnimAction);
    Gary.animasyon.gotoFrameAndPlay(0,68,true);
    Gary.setScale(.2);
    Gary.setPosition(300,100);
    this.Gary = Gary;

    this.addChild(this.Gary);

   
    this.schedule(this.update);

},

update: function(dt){
    this.Gary.x += 5;
}

});

This code will place the animation on the screen and animate, but I can’t move it won’t move across the screen

#18

Is this give any error?

#19

No errors. Any suggestions?

#20

Update: So as I said before, the animation does play, but the node stays still. However, I noticed when I resized my Chrome window, the node was in a different place. Noticing this, I “wiggled” the screen size and my node was moving like it was supposed to.

So it appears to be some issue with cocos not updating the node values or not repainting the screen correctly. Does that make sense? What can I do about it?