How to use spritesheet without plist in js?

cocos2d-x JavaScript
1

How to use spritesheet like this

75d49f81cecb9358.png720×80

without .plist in js?

2

A spritesheet usually comes with an image and a plist which says how to divide that image up into different frames. When you load a spritesheet, it will load the image and plist. When you set the frame for your sprite, it will (I imagine) set the texture rect for the sprite that the plist contains. (This is the X and Y the frame is located in the image, and the width and height of the frame within the image.)

Because you don’t want to use a plist, you must use math to calculate what the plist would normally contain. Because your image is 9 frames of equal width and height, the formula is easy: cc.rect(textureWidth / 9 * frameNumber, 0, textureWidth / 9, textureHeight).

Here is some code:

// the sprite to display the current frame; remember to replace Spritesheet.png with
// the name of your spritesheet image
var spr = cc.Sprite.create("res/Spritesheet.png");
this.addChild(spr);

// the size of the spritesheet
var size = spr.getTexture().getContentSize();
// the frame you want to use. the first frame is number 0 and as there are 9 frames in
// your spritesheet image, the last frame will be number 8
var frame = 0;
// the total number of frames
var frames = 9;

// sets the sprite to whichever frame you specified with the variable frame
spr.setTextureRect(cc.rect(frame * size.width / frames, 0,
  size.width / frames, size.height));

You could also split your spritesheet into different images using a program like Photoshop and load the frame you want as you need it. That way you can choose the frame by using the filename of the frame.

Using a plist is best because you can load the one spritesheet image and then switch frame by name, rather than having to use maths.

3

You can also assemble SpriteFrames manually and create a cc.animation from that… it’s what we do since animation editors didn’t support the features we needed (custom frame timings, etc.) when we started creating our game.

for (var i = 0; i < frames.length; ++i)
    {
        var frame = frames[i];

        spriteFrames.push(new cc.SpriteFrame(imageSource, cc.rect(frame.x, frame.y, frame.w, frame.h)));
        var animFrame = new cc.AnimationFrame(spriteFrames[i], frame.delay);

        animationFrames.push(animFrame);
    }

    var animation = new cc.Animation(animationFrames,1);

    //animation is an action like any other cc.action. you can do anySprite.runAction(animation) and it will play the animation

Of course, how you get the actual frame data is another matter. We wrote a custom little spritesheet animation editor, but are now switching to simulating the same feature set using Spriter, since maintaining our editor is becoming too much of a hassle.

Also, I don’t know if the last frame of your fetus is supposed to be an aborted fetus or if it’s some kind of rotation in order to save image space (which some tools like TexturePacker do when they output spritesheets). If it’s the latter, you somehow have to deal with that also, but I have no idea how.