Finishing the Painter Game - Building JavaScript Games for Phones, Tablets, and Desktop - page 155

CREATING SPRITES
Even if you're not an artist, it helps to be able to make simple sprites yourself. It enables you to quickly make a prototype
of the game—and maybe find out there also is an artist inside you. To create sprites, you first need good tools. Most
artists use a painting program like Adobe Photoshop or a vector drawing program like Adobe Illustrator, but others work
with such simple tools as Microsoft Paint or the more extensive and free GIMP. Every tool requires practice. Work your
way through some tutorials, and make sure you get some insight into the many different features. Often, the things you
want can be achieved in an easy way.
Preferably, create very large images of your game objects and then scale them down to the required size. The advantages
are that you can change the required size in your game later and that you get rid of aliasing effects due to images
being represented by pixels. When scaling images, anti-aliasing techniques blend the colors so the image remains
smooth. If you keep the outside of the game object in the image transparent, then, when you scale, the border pixels will
automatically become partially transparent. Only if you want to create the classic pixel style should you create the sprites
in the actual size required.
Finally, look around on the web. There are lots of sprites that you can use for free. Make sure to check the license terms so
the pack of sprites you're using are legal for what you're building. You can then use them as a basis for your own sprites.
But in the end, realize that the quality of your game increases significantly when you work with an experienced artist.
Adding Sounds and Music
Another way to make the game more enjoyable is to add some sound. This game uses both
background music and sound effects. In order to make dealing with sounds a bit easier in
JavaScript, you add a Sound class that allows you to play back and loop sounds. Here is the
constructor of that class:
function Sound(sound, looping) {
this.looping = typeof looping !== 'undefined' ? looping : false;
this.snd = new Audio();
if (this.snd.canPlayType("audio/ogg")) {
this.snd.src = sound + ".ogg";
} else if (this.snd.canPlayType("audio/mpeg")) {
this.snd.src = sound + ".mp3";
} else // we cannot play audio in this browser
this.snd = null;
}
Because not all browsers are capable of playing all different kinds of music, you added an if
instruction that loads different sound types depending on which type the browser can play. Similar to
creating Image objects (for representing sprites), you create an Audio object and initialize its source
to the sound file that needs to be loaded. In addition to the sound file, you add a looping variable
that indicates whether the sound should be looped. In general, background music should be looped;
sound effects (such as firing a paint ball) shouldn't.