DrawImage doubt

Question

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?

Answer 1

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);

Answer 2

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

Drawing each image separately

Advantages:

• 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.

Disadvantages:

• 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.

Advantages:

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

Disadvantages:

• 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.