How creating a Sprite from a SpriteFrame?

cocos2d-x JavaScript
1

These references are wrong

addSpriteFramesWithFile
createWithSpriteFrameName
SpriteFrameCache.getSpriteFrameByName
createWithSpriteFrame

http://cocos2d-x.org/docs/programmers-guide/3/index.html

In lib CCSpriteFrameCache.js have:

addSpriteFrames
_createSpriteFrames
getSpriteFrame

Loading Sprite Sheet worked with this:

var cache = cc.spriteFrameCache.addSpriteFrames("res/spritesheet.plist", "res/spritesheet.png");

Now:

How to access a image by name in plist?
How creating a Sprite from a SpriteFrame?
How creating a Sprite from SpriteFrameCache?

2

This here has not helped:

http://www.cocos2d-x.org/wiki/Object_Create_Functions_in_Cocos2d-JS

3

Submit a PR :smiley:

My guess is eventually they’d like both c++ and js APIs to use the same names, but @slackmoehrle can take a look and figure out. I tried to quickly go and check this and was planning to PR real quick, but you are correct that the API seems to use some JS-specific usage Sprite.create('#frame_name.png') vs others cc.spriteFrameCache.addSpriteFrames where the former may be desired and the latter should be reconciled either by adding a c++ method with same name or changing the js name.

4

Thks for reply stevetranby.

In this Flappy demo:

cc.AnimationCache.getInstance().addAnimations("Resources/flappy_frame.plist");

This “getInstance” also no exist.

5

I succeed analyzing tests:

Player:

     var cache =  cc.spriteFrameCache.addSpriteFrames(res.grossini_plist, res.grossini_png); // sprite cache

     sprite = new cc.Sprite("#grossini_dance_02.png"); // create sprite
     sprite.x = x;
     sprite.y = y;  
    var spriteBatch = new cc.SpriteBatchNode(res.grossini_png); 
     spriteBatch.addChild(sprite);         
     layer.addChild(spriteBatch);

Animation:

animFrames = [];

    str = "grossini_dance_04.png";
    frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);

    str = "grossini_dance_05.png";
    frame = cc.spriteFrameCache.getSpriteFrame(str);
    animFrames.push(frame);    

    animationRight = new cc.Animation(animFrames, animation_time);

Play

sprite.runAction(cc.animate(animationRight).repeatForever());

Stop

sprite.stopAction(cc.animate(animationRight));

Stop Error:

Uncaught TypeError: Cannot read property '__instanceId' of null

Now how stop animation?

6

How stop animation?

7

I go use this:

function playAnimeRight() {
      
    var kludge  = function () {    
        sprite.runAction(cc.animate(animationRight)); 
        play = setTimeout(kludge ,1000);
    }
    kludge ();
    
}

function stopAnimeRight() {
    
   clearTimeout(play);
  
}
8

as for first question in c++ you can do this:

mysprite->setSpriteFrame(Sprite::create("other_frame.png")->getSpriteFrame());

I guess it should be the same in js.

9

Thks piotrros

I solve the first question with spriteFrameCache:

var cache =  cc.spriteFrameCache.addSpriteFrames(res.grossini_plist, res.grossini_png); 
var sprite = new cc.Sprite("#grossini_dance_02.png");

In javascript, “get” seems be #.