Jump to content

One sprite, several sprite sheets


ecv
 Share

Recommended Posts

Can I use different sprite sheets in one sprite? Looks like a sprite will only use one, then you'd define your animations by setting the frame range within that sprite sheet. But that's not very comfortable, so can I define different animations that use different sprite sheets?

Thanks

Link to comment
Share on other sites

Thanks for all the answers. I guess I'll do it the uncomfortable way then :) I still have no idea what atlas are exactly so... 

Also, is using different sprites for a given character a good idea? I haven't given it much thought, but maybe it's a pretty common thing to do. To be honest, aside from fiddling a little with the provided examples, I have hardly coded anything with Phaser yet... :unsure:

Thanks for the link. I'm tempted to add to such request, but it stands to reason one should first understand what the concept of a sprite and its extents really involves, so I guess I'll refrain from asking for something I don't genuinely understand to start with :D For the time being I'm for the most part considering a sprite as a character, and maybe that's not a good idea...

 

Edited by ecv
typo
Link to comment
Share on other sites

A sprite atlas maps the individual sprites within a sprite sheet to some meta, usually to define the name of a frame and its bounds. Whereas a sprite sheet is a rigid, ordered collection an atlas is defined by its meta-data. A sprite sheet can be iterated over as it is consistent i.e. it contains only 32x32 sprites so you know there is a new one every 32px, you'd have to add another system on top for picking specific ones. An atlas contains lots of arbitrarily sized sprites (or can contain, you can use regular squares or rectangles if you want) and you reference them by name.

For example,

A sprite sheet is imperative, you might assign a sprite the graphic at 1, 1, given a 32x32px sprite sheet you'd grab the graphic at 32, 32 to 64, 64 (32 x 1, 32 x 1, 32 x 2, 32 x 2).

An atlas is a little more declarative, each frame is named so you might assign a sprite the frame labelled 'run', the meta-data describes the 'run' frame to be at 32,32 to 64,64.

The beauty of the atlas is that each sprite can have different characteristics. It's like the difference between an array and a tuple in structured languages, the sprite sheet contains only 1 type, whereas the atlas can contain any type.

There are other advantages of an atlas such as minimising dead-space in a texture, known as packaging. 

It's not a Phaser specific term, have a read up on texture atlases.

Link to comment
Share on other sites

http://phaser.io/examples/v2/loader/load-texture-atlas

http://phaser.io/examples/v2/loader/load-starling-atlas

http://doc.starling-framework.org/current/

http://www.joshmorony.com/how-to-create-animations-in-phaser-with-a-texture-atlas/

These are pretty good starting resources. The last link for the tutorial is pretty well explained also, and it should help you on what direction to take.

BUT. Inflating and deflating files takes resources. Having one huge compressed file might not be the best choice in a mobile game for instance. I personally like the "normal" spritesheet, but atlas do use space efficiently. Basically if you're using different sized sprites you should atlas, but you could also use different spritesheets for different sizes and chars/items/objects.

Link to comment
Share on other sites

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