Sprite animation and playing with parameters

This morning I put together the death animation handling for my sprite system. It was something of a no-brainer in that it’s just a couple of flags (isDying, isAlive) and the system just looks to a different set of resources for the death animation frames. But something struck me about the beauty of handling everything with numbers.

Whilst testing performance I once again ramped up the amount of sprites on screen. Partly for a visual treat (I love countless explosions going off at once) and partly to test for slow down or sudden speed bumps. (I have a simple [if !alive return] type thing going on so as to avoid unnecessary processing.)

I tweaked the parameters a bit and found that the faster moving aliens looked daft going through their death animation frames. In some cases they were thrashing across the screen whilst exploding. I scratched my head for a while and then decided to just have all dying entities stop dead whilst they play through their death sequence.
I still have no collision detection to talk of so I just had them die on hitting the screen edges. The results were beautiful. Dozens of simultaneous explosions rippled around the screen. The whole thing just looked tidier and a ton more satisfying.

Whilst I was at it I also decided to play with the number of ticks between frames. With this added flexibility I can now slow sprite animations at any given time based on their circumstances. The decision to completely ignore native .gif animation is certainly paying off.

Whilst I’m updating here I thought I might also add a note about sprites disappear off screen and re-emerging on the other side.
Initially I had it set so that the moment the sprite (plus it’s width) had gone beyond the screen limit the sprite would re-emerge on the opposite side. But something looked bad. It all looked a bit too snappy.

So I modified the CSS to have the playing area (or Canvas as I call it) Overflow set to Hidden. I then re-wrote the screen edge detection for anything that was set to not bounce to test for screenEdge + spriteWidth (or screenHeight + spriteHeight) before re-positioning it on the other side.

What this basically means is that the sprite would have to fully disappear off the edge of the screen before the code moved it. The results are simple but highly effective.

Post a comment or leave a trackback: Trackback URL.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: