animation without spritesheet

[microchip]

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

 

[jmp909]

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

http://www.html5gamedevs.com/topic/17770-creating-a-spritesheet-with-a-render-texture/?hl=frame#entry100303

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

http://www.html5gamedevs.com/topic/9728-best-way-to-load-multiple-animation-sprite-sheets-on-one-sprite/

[AndreasLoew]

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.

 

 

 

 

[alex_h]

Depending on the content of the animation you might be able to use skeletal animation instead which would be a way better option.

Two options are spine:

http://esotericsoftware.com/

 

or DragonBones

http://dragonbones.github.io/

[microchip]

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.

[Skeptron]

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