Game States - Building JavaScript Games for Phones, Tablets, and Desktop - page 223

Overlays
A very common way of presenting information to the player is to use overlays . Overlays are basically
images that can be displayed on top of the game world to present information or to provide a user
interface such as a menu, a mini map, status information, and more. The help frame introduced in
the previous section is another example of an overlay.
Overlays can present an entirely new game state (such as a “game over” overlay), or they can
supplement the game world by providing information to the player. For example, many strategy
games provide information about the number of units selected, available resources, ongoing building
processes, items gathered, and so on. These kinds of overlays are generally always on the screen,
and together they're called the heads-up display (HUD). Jewel Jam has a very basic HUD: it consists
of a frame that displays the current score, and a help button the user can press to view a frame with
help information.
Next to the HUD, you want to show a “game over” overlay when the jewel cart moves offscreen.
You add this overlay to the game world, and set its visibility to false :
var gameOver = new SpriteGameObject(sprites.gameover, ID.layer_overlays_1,
ID.game_over);
gameOver.visible = false;
gameOver.position = gameOver.screenCenter;
this.add(gameOver);
You want to position the overlay nicely in the middle of the screen. Because this is something you'll
probably use often, let's add a few useful properties to SpriteGameObject to deal with it. First, you
can add a property that calculates the position of the sprite if you want to draw it in the center of
the screen. This is relatively easy to calculate, once you know the size of the screen, the size of the
sprite, and its origin. Here is the complete property:
Object.defineProperty(SpriteGameObject.prototype, "screenCenter",
{
get: function () {
return Game.size.subtract(this.size).divideBy(2).addTo(this.origin);
}
});
Especially in the case of HUD elements, you sometimes don't want to display a sprite squarely
in the middle; instead, for example, you may want it in the middle at the bottom of the screen.
To accommodate these kinds of situations, you can add the following two properties to
SpriteGameObject :
Object.defineProperty(SpriteGameObject.prototype, "screenCenterX",
{
get: function () {
return (Game.size.x - this.width) / 2 + this.origin.x;
}
});