Jump to content

Standard single image sprite sheets?


Ptero
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.  :)

Link to comment
Share on other sites

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;}
Link to comment
Share on other sites

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;}
Link to comment
Share on other sites

  • 3 weeks later...

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...