SSJX.CO.UK
Browser Games | Cybiko | Amiga | Applications | Windows Games | Python | Guides | Site Map

Improving Your Web Games - Graphics

This guide will give you tips and ideas on how to improve your Javascript / HTML5 games. For more general programming tips, click here.

Use Sprite Sheets

The first release of the ColourFall web game used many individual gif images for the graphics:

FilenameSize in Bytes
block.gif1,014
blue.gif958
bomb.gif976
border.gif917
cross.gif884
explo1.gif876
explo2.gif922
explo3.gif898
green.gif958
orange.gif958
over.gif936
pink.gif992
purple.gif958
target.gif881
yellow.gif992
14,120 bytes

So, 15 files totalling about 14KB. Not much really but we can do better.

For the first update, all the coloured blocks were combined into one large image (all.gif), this is how things looked afterward:

FilenameSize in Bytes
all.gif3,834
border.gif917
cross.gif884
over.gif936
target.gif881
7,452 bytes

We now have 5 files coming in at about 7.5KB, almost half the size! Although this is a very favourable example, the reasons for this drop can apply to any graphics set:

There are many advantages to using a sprite sheet over individual sprite/image files:

It should be noted that these advantages can apply to games not hosted on websites too. All games benefit from being smaller, more efficient and with faster load times...

15/09/2018

Play-Asia.com - Buy Games & Codes for PS4, PS3, Xbox 360, Xbox One, Wii U and PC / Mac.
Support this site : Visit Play-Asia for games and accessories for new and classic games consoles!