Game Objects in a Structure - Building JavaScript Games for Phones, Tablets, and Desktop - page 190

Layers of Game Objects
When you want to draw a game object, you can use the worldPosition property as a convenient
way to find out where to draw the game object on the screen. The only problem is that you don't
have any idea of order in which the game objects in the hierarchy should be drawn. Looking at the
Jewel Jam game, you clearly want the background to be drawn before the playing field is drawn;
otherwise, the player will only see the background.
It would be nice if you could indicate somehow as part of the game object when it should be drawn.
One way to do this is to introduce layers . You can assign a layer to each game object, and the layer
it's assigned determines when the object should be drawn. You can represent these layers in a very
simple way by using integers. Lower layer numbers indicate that the object will be drawn earlier. So,
you can assign layer 0 to the background sprite game object and layer 1 to the playing field game
object, making sure the background is drawn before the playing field. Storing a layer is done directly
in a member variable belonging to the GameObject class:
this.layer = 0;
A minor drawback of using layers is that there is no guarantee about the order in which objects in
the same layer are drawn. So, if you want one object to always be drawn after another, that object
must be in a higher layer.
For a complete view of the GameObject class, see the code in the JewelJam3 example. Of course,
simply adding a layer member variable to the GameObject class isn't enough: you have to do
something with this information. The next section looks at a few different game-object subclasses.
One of these is the GameObjectList class, which consists of multiple other game objects. In this
class, you see how the layer variable can be used to draw the objects in the right order.
Different Kinds of Game Objects
This section introduces a few useful game objects that are all defined as subclasses of GameObject .
You start by defining a simple sprite-based game object. Then you move on to lists and grids of
game objects.
A Sprite Game Object
One of the most commonly appearing game objects is a sprite with a position and a velocity.
Because the position and velocity are two member variables available already in the GameObject
class, you can inherit from this class and then add a member variable to store the sprite and a
member variable to store the origin of the sprite. In the constructor of this class, you have to pass
the sprite as a parameter, Because you're inheriting, you have to call the constructor of the base
class so that the GameObject part of the object is constructed as well. This constructor expects a
parameter denoting the layer. Finally, you have to replace/override the draw method. This method
is empty in GameObject , because you decided game objects don't necessarily have a sprite
attached to them. In the overridden draw method, you draw the sprite on the screen, and you use