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.


  • 1
    Hi, Programmers.SE isn't exactly a place for tutorials. That said your approach should work and a valid basic setup for this problem. If you have a look at the code of some samples provided on the KineticJS page you will find they do it in similar ways. Some may use further libraries like TweenLite to help with this like this small project. – thorsten müller Apr 5 '13 at 8:52
  • And Kinetic seems to have some functions of its own like requestAnimFrame that may be helpful (see this project for some more complex animation using it) – thorsten müller Apr 5 '13 at 8:58

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.