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

What is the best option for animation in a game (HTML5 Javascript)? Put all the images in one png and change the background.

Or create each image separately and draw with DrawImage?

share|improve this question

I would suggest using Texture Atlas, or as I call it, a Sprite Map. This is especially important for Javascript as it reduces the number of HTTP requests to the server. For example, 8 frames = 8 HTTP requests for non-mapped images.

Another advantage of using a Sprite Map is the fact that canvas already supports drawing 'sliced' images. When drawing an image, you can define a sourceX & sourceY as well as a targetX & targetY. In my engine this is exactly how I handled animations.

ctx.drawImage( data, sourceX, sourceY, sourceWidth, sourceHeight, targetX, targetY, targetWidth, targetHeight);
share|improve this answer

"To measure is to know" as the saying goes. Try both methods and see what works.

Drawing each image separately


  • Lots of detail in your images.

  • Fast artistic pipeline. Adding a new image doens't take much time, because it's just an image in a folder.

  • Grouping can reduce image swapping. If your trees all use tree1.png, make a TreeGroup that attaches that image and renders all your trees.


  • Easy to go over budget. Your images might be too large for your game and fixing it might take too much time.

  • Image swapping. Constantly swapping out images can reduce framerate significantly.

Texture atlas

A texture atlas is a large texture that contains all smaller textures used in (a section of) the game.


  • No swapping of images. All your sprites use the same image, just with different coordinates. This can be a speed benefit.


  • Less detailed images. Everything has to fit in one image, so each image won't get as much space.

  • Less artistic flexibility. It's hard for artists to fit all those images on a single large image.

Most likely you'll end up with a combination of the two techniques: a texture atlas for small, static objects and high-resolution images for your dynamic objects.

share|improve this answer

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.