Best way to load multiple animation sprite sheets on one sprite

[laurie]

I'm working on a prototype in which I have a "hero" character with a pretty large number of animations; there are multiple animation sets (walk, run, fire, etc), and each set is rendered in 16 directions. The animation sets have a varying number of frames, from (currently) just 1 for the idle animation set, up to as many as 16 for the walk/run sets. Because of the sheer number of frames, I have each animation set on a different sprite sheet. The largest of them contain 16 frames * 16 directions = 256 frames. (And no, I can't reduce that using mirroring, as the sprite includes baked in lighting/shadows.)

 

My question is, what's the best way to set up multiple animations, each backed by a different spritemap? I understand that Sprite#loadTexture() is an expensive operation so, instead of calling that each time I switch to a different animation set, what I'm doing at the moment is creating a 'root' sprite with no image and adding child sprites for each animation set, with the animations from that set defined on the child:

 

    hero: Sprite <no texture>

        anim-walk: Sprite <anim-walk.png>

            animations

                anim-walk-N

                anim-walk-NNE

                anim-walk-NE

                ...

        anim-run: Sprite <anim-run.png>

        ...

 

The child sprites are set to enabled:false, visible:false, except the one for the current animation. When I switch between animations within a set, I just call ...animations.play(name) on the active child sprite; when I switch to an animation in a different set, I disable the current child; enable the child with the new animation on it; and play the new animation.

 

It would be much simpler, code wise, to define all the animations on the root sprite and just call loadTexture() when switching to an animation with a different spritemap. Would the cost/overhead of that actually be more than setting up and managing all these child sprites and enabling/disabling them on the fly?

 

Alternatively, if anyone has suggestions for better ways to manage this, I'm all ears -- just don't tell me to use less animations / less frames per animation / less directions per animation, since part of the point of this prototype is to explore how well Phaser can support this scenario :-)

 

Thanks,

 

Laurie

 

[j0hnskot]

What about putting all the animations in a texture atlas?

To do that, split every frame in the spritesheets , give them a proper name (for example "player_run_left_01.png" , "player_run_left_02.png" etc)

 

 

Assign your texture atlas to your player sprite:

var player= game.add.sprite( x ,y , 'textureAtlas_key');

and finally set all the animations like this :

player.animations.add( 'move_left',  Phaser.Animation.generateFrameNames('char_left_ ' , 1 ,  4 ,  '.png'), 100, true);player.animations.add( 'move_right',  Phaser.Animation.generateFrameNames('char_right_ ' , 1 ,  4 ,  '.png'), 100, true);//repeat for all animations

About the Phaser.Animation.generateFrameNames  :

 

The way i set every animation , Phaser will look in the json file loaded with the texture atlas i assigned to the player for those image names :

 

char_left_1.png

char_left_2.png

char_left_3.png

char_left_4.png

 

and the same for the move_right   animation.

 

Be sure to check the documentation for Phaser.Animation.generateFrameNames

[laurie]

True, a texture atlas would allow me to use a single sprite and simplify things. I had concerns, though, that a single texture atlas would just be too large. Especially on older mobile devices the GPU only has so much memory available. At least with separate images, only the one being used currently needs to be loaded -- although switching animations could then end up being as expensive as calling loadTexture()...

I guess it's something I should definitely try out and see how it works in practice on older hardware. Thanks for the suggestion (and the detailed explanation on how to implement it).

Laurie

[Strateg]

Hello, Laurie!

 

Did you find answer on your question?

 

I have same problem with game heroes. I did one huge spritesheet with all animations on it. Its good for perfomance but easily reach memory limits.

 

Today i was trying to create separate spritesheets for animations and change it when needed. But this method bad for perfomance.

[laurie]

Hello, Laurie!

 

Did you find answer on your question?

 

I have same problem with game heroes. I did one huge spritesheet with all animations on it. Its good for perfomance but easily reach memory limits.

 

Today i was trying to create separate spritesheets for animations and change it when needed. But this method bad for perfomance.

 

I've tried the multi-sprite approach described above, and the single sprite texture switching approach; I haven't tried a single, combined texture atlas yet due to the size of the images involved. I also haven't compared performance for the two approaches I have implemented. It's always going to be a tradeoff between memory and performance, though; you'll have to pick the approach that makes the best tradeoff for your particular game.

[Strateg]

Thank you for answer.

 

My problem in memory limits. One animation hero or mob spritesheet is 8192х2048 pixels so it 67 108 864 bites in memory.

If I split it and use loadTexture i got awful FPS spikes.

 

I thought may be you already solved this problem with smooth memory management.