Game Development Stack Exchange is a question and answer site for professional and independent game developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am coding a simple 2D engine to be used with HTML5. I already have classes such as Picture, Scene, Camera and Renderer, but now I need to work on Animations.

Picture is basocally a wrapper for a normal image object, with it's own draw method, but this is unrelated, I'm interested in how animation in 2D games is usually done.

What I planned to do, is to have the Animation class as well act like a wrapper for a few image objects, and then have methods such as getCurrentImage, next and animate (which would use intervals to quickly change the current image). I meant to feed the animation a couple of PNG's at inicialisation.

Is quickly swapping PNG images acceptable for 2D animation? Are there some standard ways of doing this, or are there flaws in my ways?

share|improve this question
Are you using the canvas element to render all your graphics? – NoobsArePeople2 Jun 22 '12 at 23:00
Yes, I am using canvas. – jcora Jun 23 '12 at 20:17
up vote 1 down vote accepted

The specific answer depends a lot on your specific needs. Your approach will in general work quite fine. It can potentially be made faster using a texture atlas (aka sprite sheet) depending on how you're doing the rendering, and faster still by using batching rather than having the objects draw themselves, but the actual approach to loading and running the animations is generally the same.

More advanced games sometimes need more advanced animation techniques. Multi-part sprites allow for a single character to transform and move in independent ways. A basic example of that is to have the legs and torso of a character separate, so you can animate walking and aiming a weapon independently. Again, though, the core of the animation system there is the exact same a your idea.

More complex systems exist that use techniques usually seen only in 3D. Flash games sometimes make use of these techniques as Flash has som excellent 2D skeletal animation packages. Even some non-Flash games use such approaches, often by importing the Flash assets (so artists can keep using the familiar high quality tools they already have). The math and rendering techniques for these kinds of animations are much more complex, and you almost certainly don't want to use them unless you've got a team dedicated just to graphics and art pipeline code and a mob of artists to produce content for it.

share|improve this answer
My engine actually has the abillity to combine more animations on top of eachother. Might add that skeletal stuff as well later. Thanks for the answer, I'll stick to my method. – jcora Jun 23 '12 at 20:16
"Even some non-Flash games use such approaches, often by importing the Flash assets" what setting would you do this? – expiredninja Jun 25 '12 at 9:25

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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