Can you explain why you want to do this? It seems awkward to me. Take a look at a C++ example of how this works. Also have you looked in the Creator sample projects? I am sure there is a code example in those.
http://www.cocos2d-x.org/docs/cocos2d-x/en/actions/basic.html
I have animated a sprite using a sprite sheet and the update function.
like so;
Note: i have dragged the plist into the atlas field of the sprite node (the same node the monster.js script is attached to) in the cocos creator ui
//monster.js
onLoad: function(){
// change monsters face
this.faces['1'] = 'monster1';
this.faces['2'] = 'monster2';
this.faces['3'] = 'Rmonster1';
this.faces['4'] = 'Rmonster2';
}
update: function (dt) {
this.timekeep += dt;
if(this.timekeep > 0.1){
var self = this;
cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
self.getComponent(cc.Sprite).spriteFrame = atlas.getSpriteFrame(self.faces[self.monstersN]);
});
this.timekeep = 0;
this.monstersN++;
if(this.monstersN > 4){
this.monstersN = 1;
}
}
It actually works fine. I have already thought i should export the cc.loader.loaderRes into the onLoad function and save the atlas as a global var instead of loading every time the update is called.
However…seeing that there are built in animation functions, this can’t be the correct solution. So i tried this…
onLoad: function () {
// change monster face
this.faces['1'] = 'monster1';
this.faces['2'] = 'monster2';
this.faces['3'] = 'Rmonster1';
this.faces['4'] = 'Rmonster2';
var self = this;
cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
var sprite = self.getComponent(cc.Sprite);
var animFrames = [];
for (var i = 1; i < 4; i++) {
var spriteFrame = atlas.getSpriteFrame(self.faces[i]);
var animFrame = new cc.AnimationFrame();
animFrame.initWithSpriteFrame(spriteFrame, 1, null);
animFrames.push(animFrame);
}
var animation = sprite.Animation.create(animFrames, 0.2, 100);
var animate = sprite.Animate.create(animation);
sprite.runAction(animate);
});
},
i get this error;
cc.AnimationFrame is not a constructor
So then i tried this…
onLoad: function () {
// change monster face
this.faces['1'] = 'monster1';
this.faces['2'] = 'monster2';
this.faces['3'] = 'Rmonster1';
this.faces['4'] = 'Rmonster2';
var self = this;
cc.loader.loadRes('monsters', cc.SpriteAtlas, function (err, atlas) {
self.atlasA = atlas;
});
var sprite = this.getComponent(cc.Sprite);
var animFrames = [];
for (var i = 1; i < 4; i++) {
var spriteFrame = this.atlasA.getSpriteFrame(this.faces[i]);
var animFrame = new cc.AnimationFrame();
animFrame.initWithSpriteFrame(spriteFrame, 1, null);
animFrames.push(animFrame);
}
var animation = sprite.Animation.create(animFrames, 0.2, 100);
var animate = sprite.Animate.create(animation);
sprite.runAction(animate);
},
i get this error;
Cannot read property ‘getSpriteFrame’ of undefined
Please can someone show me how i use cc.animate to change the sprite using the spritesheet i have. All i want to achieve is to move through the plist in the order the images are in the plist, repeated until the monster is put back into the pool it came from.
Help ASAP is appreciated greatly
Can you translate this into JS for me please?
auto mySprite = Sprite::create(“mysprite.png”);
// now lets animate the sprite we moved
Vector<SpriteFrame*> animFrames;
animFrames.reserve(12);
animFrames.pushBack(SpriteFrame::create(“Blue_Front1.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Front2.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Front3.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Left1.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Left2.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Left3.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Back1.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Back2.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Back3.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Right1.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Right2.png”, Rect(0,0,65,81)));
animFrames.pushBack(SpriteFrame::create(“Blue_Right3.png”, Rect(0,0,65,81)));
// create the animation out of the frames
Animation* animation = Animation::createWithSpriteFrames(animFrames, 0.1f);
Animate* animate = Animate::create(animation);
// run it and repeat it forever
mySprite->runAction(RepeatForever::create(animate));
My sprite sheet is loaded through the cocos creator ui.
so this is what im thinking;
var mySprite = this.getComponent(cc.sprite);
var animframes = [];
//////
animframes.reserve(4)
(this gives the error "Uncaught TypeError: t.reserve is not a function")
///////
/// having removed the above line;
animframes.push(SpriteFrame.create(“monster1.png”, Rect(0,0,65,81)));
// (this gives the error Uncaught ReferenceError: SpriteFrame is not defined)
animframes.push(SpriteFrame.create(“monster2.png”, Rect(0,0,65,81)));
animframes.push(SpriteFrame.create(“Rmonster1.png”, Rect(0,0,65,81)));
animframes.push(SpriteFrame.create(“Rmonster2.png”, Rect(0,0,65,81)));
var animation = Animation.createWithSpriteFrames(animframes, 0.1);
var animate = Animate.create(animation);
// run it and repeat it forever
mySprite.runAction(RepeatForever.create(animate));
Is anybody in the know here or is everyone just guessing Chinese lol
Do you know how this can be done in JS?
I’m sorry?
The code is is from this page [SOLVED] A simple sprite sheet animation in Cocos2d-JS from this site.
Does nobody know how to do this?