Combine two sprite sheets and play in sequence

[MichaelD]

Hello,

 

What I'm trying to achieve and I am sure that it can be done is the following: I have two sprite-sheets one with the entity animation and one with some explosion. Can I combine these two (not in the same image but programmatically) so that the explosion plays when the entity is killed? 

I thought to add them to the same group and simply animate the "explosion instance" of that group in which the entity dies, but I wanted to ask if there is a more "refined" way to do this. 

 

Also how can I sequence these animations (entity killed and then explosion plays)?

 

Thanks for your time!

[lewster32]

An obvious answer would be to have the explosion in the same sprite sheet as the thing that's exploding (and indeed as much of the rest of the game as you can in a single sprite sheet or atlas for best performance) and play it as an animation of that sprite, but your alternative suggested method of creating explosions is perfectly valid.

 

A compromise between the two is to have a 'pool' of dead explosions, and then when an enemy dies, revive one of those explosions, place it at the same position as the dying enemy and play its animation. This is shown in the getExplosion method of the following example:

 

http://gamemechanicexplorer.com/#homingmissiles-4

[marvster]

 

I thought to add them to the same group and simply animate the "explosion instance" of that group in which the entity dies, but I wanted to ask if there is a more "refined" way to do this.

 

For the sake of perfomance I would aim for a single sprite sheet, with both entity animation and explosion.

 

 

Also how can I sequence these animations (entity killed and then explosion plays)?

 

This might work:

 

sprite.events.onAnimationComplete.add(function, context); 

Within the context you will be able to check for the previous animation and choose the next one contextual.

[MichaelD]

Thank you for your answers, I was also thinking about onAnimationComplete. I will try merging the sprites into one for best performance as you both suggested.

[lukaMis]

An obvious answer would be to have the explosion in the same sprite sheet as the thing that's exploding (and indeed as much of the rest of the game as you can in a single sprite sheet or atlas for best performance)

 

So performance wise it is better to have as little spritesheets as possible even if they get big in pixel dimension? Why is that?

[lewster32]

With WebGL it's because every separate texture causes a draw call on the GPU (along with a few other things such as different tints) - if you have all of your imagery on a single large texture, that texture is only sent once to the GPU and multiple sprites just reuse the same texture, resulting in a single draw call. The performance then is limited mainly by fill rate, which isn't really a concern for most situations on a GPU.

 

On the other hand, because canvas is just a rasteriser - it works entirely by just copying lots of rectangles of pixels to the screen - there's no real performance benefit, but does allow you to at least have your assets nicely packaged together and reduces the number of HTTP requests made during loading.

[lukaMis]

lewster32 tnx.

You are a wealth of knowledge.