Jump to content

animation without spritesheet


Recommended Posts

hi all,

i'm new in the forum and in using phaser framework.

i'm try to move my first step in this fantastic technology, but i have some newbie difficulty.

my today problem is about animation.

in all the example or tutorial that i have seen/read,

it seems that to perform an animation i have to pass through load some spritesheet ( or atlas, or similar ).
it's not possible to program an animation with simple preloaded images?

i have texture packer, and for small frame it's ok.
but if i have some huge sprite to animate, i can't made spritesheets. every spritesheet contain only two huge frame.
so i don't see the point to made a lot of spritesheets insted of use a lot of images.

so my questions are two:

1) is possbile to made sprite animation using single images and not spritesheets?

2) and if not, how can i made an animation with sprites divided in multiple spritesheets?


thanks a lot


Link to comment
Share on other sites

You could dynamically create your own spritesheet I think.. See last post


Swapping spritesheets is going to give you some performance hit... It's better if its all on the same texture


Link to comment
Share on other sites

I don't know what you exactly try to accomplish but it sounds like you are moving in the wrong direction.

Each of the sprite sheets will consume a severe mount of memory (2048x2048 = 16 MB) at runtime and loading time.

You should avoid this if possible.


You have 2 main options for this:


1) Your animation affects the whole frame 

Use a video codec to play the animation - not sprites.


2) Your animation affects only part of the scene, the rest is static

Try to create layers: So your animation should consist of 2 things:

- a static background

- the foreground with the animation

Choose the same frame size for the background and the foreground. 

In TexturePacker use TrimMode = Trim

I assume that the foreground layers contain a lot of transparency - so you should be able to pack it tightly.

You might even split the foreground into different sub-animations.

Playing the animation in Phaser should be easy because of trimming - it preserves the relative position of the animation and background. 

Setting both to the same position should suffice.





Link to comment
Share on other sites

thanks all for your replays.


i try to explain better my needs, because i have had a similar problem two years ago ( other project but similar situation )
when i was trying to made a native application for ipad, and never solved it.


the project is a children interactive book.
usually this kind of projects have tablets in mind ( usually ipad ).


children need big object on screen. and all ipads ( but not only ipad ) have

retina monitor. ( i’m really scared when apple will switch all his tablets with

3x screen )

so the graphical assets will be very huge.


in my case i have a dinosaur. i’am lucky this time is b&w, 

so every frame isn’t too much heavy. approximately 170kb for 1920*1082px dimension.

but i have 46 different frame. only for this first scene.


texture packer, with multipack option activated, give me 6 sprite sheets 4096*4096

every one with 8 dino’s frame.


it’s a foolish thing to do to load for every scene 6 or 7 sprite sheets like that?


i really don’t know how to accomplish this, and if it could be accomplished.

Link to comment
Share on other sites

You could try to scale your game up. Do smaller assets (2 or 4 times smaller), and scale them up. This way you could greatly reduce the weight of your assets. I'm not sure it will keep a sharp and crisp look though.


You could also use Dragonbones. See post here : http://www.html5gamedevs.com/topic/6666-phaser-dragonbones/

And example here : http://www.alexh.org/phaser_bones/


This way you would just have to load the character once, and make it do whatever you want. If it's just a story for kids, the performances should be fine.


You could even couple both (scaling + dragon bones).

Link to comment
Share on other sites


  • Recently Browsing   0 members

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