Game Assets - Building JavaScript Games for Phones, Tablets, and Desktop - page 43

Chapter 4

Game Assets

The previous chapters have shown you how to make a very basic game application by writing your
own game loop methods as a part of an object called Game . You have seen which instructions in
JavaScript retrieve the canvas as well as the canvas context, which is used to perform operations
on the canvas. You have seen a few simple examples where you changed the background color.
You also made a rectangle move over the screen by using the current system time in combination
with the game loop methods. This chapter shows how to draw images on the screen, which is the
first step toward making nice-looking games. In computer graphics, these images are also called
sprites . Sprites are generally loaded from a file. This means any program that draws sprites is no
longer simply an isolated set of instructions, but relies on game assets that are stored somewhere.
This immediately introduces a number of things that you need to think about:

 From which locations can you load sprites?

 How do you retrieve the information from an image file?

 How do you draw a sprite on the screen?

This chapter answers these questions.

Sound is another type of game asset. It is handled very similarly to sprites. So, at the end of this
chapter, you also see you how to play back music and sound effects in your game.

Note The name sprite comes from spriting , which is the process of creating two-dimensional, partially
transparent raster graphics that are used for video games. In the early days, creating these two-dimensional
images was a lot of manual work; but it resulted in a particular style of imagery that inspired people to create
similar images of their own, resulting in an artistic technique called pixel art or sprite art .

45