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
?
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It only takes a minute to sign up.
Sign up to join this communityWhat 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
?
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);
"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:
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.