O'Reilly logo

Building HTML5 Games with ImpactJS by Jesse Freeman

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Optimizing Sprites

Now that we have our script for generating sprite sheets, we should talk about optimizing them. Impact is really good at working with 8-bit and pixelated artwork. That doesn’t mean that you have to use this style for your own games but, if you do, there are a lot of great optimization tricks you can use in order to cut down on the file size of your assets. It’s important to keep in mind that every single image of your game is loaded at run time, so you will want to make sure the file sizes are as small as possible.

In order to do this, we can use a great feature of Photoshop called Save for Web & Devices.

The Save for Web & Devices window, where you will make sure that your file sizes are as small as possible.

Figure 2-9. The Save for Web & Devices window, where you will make sure that your file sizes are as small as possible.

As you can see, the output window offers you several ways to preview the file size of different file compression types. I tend to use GIF or PNG-8 for simple artwork with no complex transparency. I use PNG-24 only when I have to. Remember, every KB counts.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required