How to handle “animated” game where the visual should “animate” instead of abruptly change?

Question

I've been playing around and learning javascript/KineticJS by making some simple games (think like board games).

I have the game model that is relatively logically simple. When a "move" is given to my game model, it updates the properties of all the pieces.

However, I would like to make the view have some nice-looking animation. For example, when six pieces are taken I don't want them to disappear all at once, I'd rather have them animate out 1 by 1.

To solve this problem, I basically have the game model tell my view "I updated the following pieces: [list]" And my view adds them to a "visual update queue" that a timer thread is always checking and handling one by one each time it triggers.

I'm interested in any opinions on this approach, and since this has obviously been considered before, if any of you handle this problem differently.

Thanks!

Answer 1

A common approach is to have a main loop which calls all your visible game objects beginFrame(time_diff) function with a time value. That time value is the delta-time (milliseconds) since last time it was called.

What you then need is some kind of interpolation system which is based on that time_diff. For instance, you could update the alpha-value based on the time_diff and some interpolation of the alpha value. So you essentially add animations to specific scene objects. For instance:

"On piece_1 Linearly interpolate the alpha value from 0 to 1 with duration 1.5 seconds"

That way you handle all your game objects (scene objects) in the same predictable way.

Obviously, this requires a bit of work to implement so you might want to check out some existing game framework which provide this for you, for instance Sparrow. Its for ObjC but the author describes the process pretty well. Sparrow does not use a main loop, but uses events. So each game object has to register themselves with the event dispatcher, but the idea is the same.