Menus and Settings - Building JavaScript Games for Phones, Tablets, and Desktop - page 249

Chapter 19

Menus and Settings

In the Jewel Jam game, you saw a few basic examples of adding GUI elements to a game such as
a button or a frame. In this chapter, you add a few more GUI elements to the Penguin Pairs game,
such as an on/off button and a slider button. You also see how to read and store game settings,
such as music volume and whether hints are allowed.

Setting Up the Menu
When thinking about menus, you may think of a pull-down menu (like File or Edit) or buttons at the
top of an application. Menus can be flexible, though, especially in games, where a menu is often
designed in the style of the game and may in many cases cover part of the screen or even the entire
screen. As an example, let's see how you can define a basic options menu screen containing two
controls: one for switching hints on or off, and one for controlling the volume of the music. First you
need to draw the elements surrounding these controls. You add a background to the menu and then
add a text label to describe the Hints control. You use the Label class from the Jewel Jam game for
that. You define the text that should be drawn and place it at the appropriate position (the following
code is taken from PenguinPairsGameWorld ):

var background = new SpriteGameObject(sprites.background_options,
ID.layer_background);
this.add(background);
var onOffLabel = new Label("Arial", "60px", ID.layer_overlays);
onOffLabel.text = "Hints";
onOffLabel.position = new Vector2(150, 360);
onOffLabel.color = Color.darkBlue;
this.add(onOffLabel);

Similarly, you add a text label for the music volume controller. For the complete code, see the
PenguinPairs2 example belonging to this chapter.

257