Standard single image sprite sheets?

[Ptero]

Hi, I am porting a game over from Slick2D (a java game library) to pixi.js. Things are going smoothly except that all of my animations are in standard spritesheets where each frame is next to each other in a single .png image. The most common way I see sprite sheets done here are by using JSON. Is there a way to create sprite sheets like i.e. using this fake function

var spritesheet = new PIXI.SpriteSheet(pathToImage, widthOfEachFrame, heightOfEachFrame, millisecondPerFrame);spritesheet = new PIXI.SpriteSheet('/res/spritesheet.png', 16, 16, 17);

or something like that? I don't really feel comfortable using JSON seeing all my sprites are already ready.

[xerver]

Have you looked at MovieClip?

http://pixijs.github.io/docs/PIXI.extras.MovieClip.html

You need to use your .png as a base texture, and create a texture for each frame from that base texture. Then pass all those frames into a movie clip.

[d13]

 spritesheets where each frame is next to each other in a single .png image. 

This might help you out:

 

https://github.com/kittykatattack/learningPixi#tileset

[Ptero]

Thanks guys!

[Ptero]

Uhh, I've been trying multiple ways to achieve this but none of them seem to work (i'm new to javascript), can anyone think of a sample method how to achieve this? Changing the frame object and pushing the texture into an array doesn't seem to work at least.

 

Edit: will the crop function work? I'm gonna test it...

Edit2: nope

Edit3: perharps this will help me http://www.html5gamedevs.com/topic/1278-loading-uniform-sprite-sheets-not-texturepacker-based/

[xerver]

If you make a jsfiddle if what you are trying it is a lot easier to help you.

[d13]

Uhh, I've been trying multiple ways to achieve this but none of them seem to work 

 

Both methods that Xerver and I suggested do definitely work, so maybe there's something else going on with your code?

If you post some live code that would help us figure out what might be wrong. 

[Ptero]

Yayy, I solved it! I guess I didn't read your replies well enough the first time, I read them again tonight and figured out what you guys meant. Basically what I wanted to do was to take a single image sprite sheet (only horizontal for now since all my spritesheets are sideways) and convert it into an array of smaller textures for each frame. Then you can create a movie clip.

 

Am I doing anything redundant here though?

PIXI.loader.add('img/upperbody.png').load(onLoad);function onLoad() {    var upperbody = new PIXI.extras.MovieClip(getFramesFromSpriteSheet('img/upperbody.png', 42, 51));    upperbody.gotoAndPlay(0);    stage.addChild(upperbody);}//only works for horizontal spritesheetsfunction getFramesFromSpriteSheet(imagePath, frameWidth, frameHeight) {    var texture = PIXI.utils.TextureCache[imagePath].baseTexture;    var frames = [];    for(var i = 0; i < texture.width-frameWidth; i+=frameWidth) {        var temp = new PIXI.Texture(texture);        temp.frame = new PIXI.Rectangle(i, 0, frameWidth, frameHeight);        frames.push(temp);    }    return frames;}

[xerver]

The loader callback gets the resources you loaded passed in, you don't have to look them up manually.

http://www.html5gamedevs.com/topic/15492-trying-to-create-a-sprite/?p=87742

Also, you can pass the frame directly to the texture constructor.

Together you can simplify a bit:

 

PIXI.loader.add('upperbody', 'img/upperbody.png').load(onLoad); function onLoad(loader, resources) {    var upperbody = new PIXI.extras.MovieClip(getFramesFromSpriteSheet(resources.upperbody.texture, 42, 51));    upperbody.gotoAndPlay(0);    stage.addChild(upperbody);} //only works for horizontal spritesheetsfunction getFramesFromSpriteSheet(texture, frameWidth, frameHeight) {    var frames = [];     for(var i = 0; i < texture.width-frameWidth; i+=frameWidth) {        frames.push(new PIXI.Texture(texture.baseTexture, new PIXI.Rectangle(i, 0, frameWidth, frameHeight)));    }     return frames;}

[Ptero]

Ah, figured it was redundant having to write the path twice. Oh and thanks for the help guys!

[d13]

Oh and thanks for the help guys!

Glad we could help!

I ran into exactly the same problem as you did this past week, so I created some simple sprite utility functions to make doing this kind of thing a bit easier:

 

https://github.com/kittykatattack/spriteUtilities