Building JavaScript Games: For Phones, Tablets, and Desktop by Arjan Egges

Author:Arjan Egges [Egges, Arjan]
Language: eng
Format: epub
Tags: Programming, Computers, Games, Web Programming, Web
ISBN: 9781430265399
Google: E_amBAAAQBAJ
Publisher: Apress
Published: 2014-09-23T20:41:11+00:00

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.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.