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

Local vs. Global Positions
As you know, each game object has a variable containing its position. Until now, each game object
was directly positioned in the game world. Although this approach works fine, it may not be the ideal
solution. Consider the playing field game object. In order to align the playing field to the background
sprite, you want to place it at position (85,150). However, all the child objects (the jewels in the grid)
probably also have this same position offset of (85,150). In fact, you had to apply this offset to all the
items in the grid in the previous example:
var position = new Vector2(85 + col * 85, 150 + row * 85);
Canvas2D.drawImage(this.getGridValue(col, row), position);
Although it's a bit of work to apply that offset to all game objects that are children of the playing field
object, it's doable. It becomes more problematic once the child objects become more complicated
and have child objects themselves that also need to be positioned correctly. And what happens if
you change the position of the playing field? You would have to update the position of all the game
objects that hang under it. There is a better way to do this: you have to differentiate between local
and world positions . The world position of a game object is its absolute x - and y -coordinates in
the game world. The local position of a game object is its position with respect to the position of
the parent game object. So, do you need to store both these positions in each game object? No:
you only need to store the local position . You can calculate the world position by adding the local
position of the game object to the world position of the parent. If there is no parent, then the local
position is the same as the world position. You can add a property to the GameObject class that does
this work for you:
Object.defineProperty(GameObject.prototype, "worldPosition",
{
get: function () {
if (this.parent !== null)
return this.parent.worldPosition.addTo(this.position);
else
return this.position.copy();
}
});
Using this property, you can now obtain both the local position of the game object (which is stored in
the position member variable) and the world position, which is accessed through the worldPosition
property. As you can see, you calculate the world position by adding the local position to the world
position of the parent. The world position of the parent is, in turn, calculated by taking its local position
and adding it to the world position of its parent. This goes on until you reach a game object that
doesn't have a parent, in which case the world position is a copy of the local position. As an example,
the world position of a jewel is calculated by adding the (local) position of the root object, the local
position of the playing field object plus its own local position. This is exactly the behavior you get when
you access its worldPosition property. It may seem strange that you're calling the worldPosition
property in the worldPosition property itself, but this is perfectly valid JavaScript code. In fact, you're
using a programming technique called recursion (you'll learn more about that later).