Adding a Title Screen

In order to make your game a complete experience from start to finish, adding a title screen when the game first starts helps to bring it all together. The title screen can be used to share some additional information about the game - such as some hints to the controls or links to your Twitter account or webpage.

Task Definition

The requirement for this task is to add an additional ‘game state’ to your phaser game in a separate JavaScript file. When the user starts up your game they should first see the title screen and be able to click on a ‘Start Game’ label to go to the main game. You could also add some additional text to explain the game controls and an additional button to go to your personal website or GitHub account.

Hints

In order to complete this side quest you will need to setup a new game state like you did when adding the Game Over Screen.

For an example of how to add text that you can click on to your project, you can check out this Text Event Example on Phaser.io.

If you want to use the mouse to start the game instead of the regular keyboard commands, you might find the following functions useful when completing this quest;

text.inputEnabled = true;

After you have created a text object using game.add.text, you need to tell Phaser that you want that object to be able to receive input events by setting ‘inputEnabled’ to true.

text.events.onInputDown.add([callbackMethod]);

This method allows you to add a ‘callback function’ that Phaser will called whenever the user clicks the mouse button down on this piece of text. This means that you can provide a function as the callbackMethod argument such as ‘startGame’ and that function will be called when the button is clicked.

Extensions

• You could add an “Instructions” button which pops up an image and some text over the top of the Title Screen explaining how to play the game. Clicking on the screen again after showing the instructions should dismiss the popup and go back to the Title Screen.

Sample Solution

Click on the button below to see an example titlescreenstate.js file.

titleScreenState = {};

titleScreenState.onStartGame = function() {
	game.state.start("MainGame");	
}

titleScreenState.create = function() {
	var textStyle = {font: "14px Arial", fill: "#ccddff", align: "center"};

	this.startText = game.add.text(game.width * 0.75, 10, "START GAME", textStyle);
	this.startText.anchor.setTo(0.5, 0.5);
	this.startText.inputEnabled = true;
	this.startText.events.onInputDown.add(this.onStartGame);
}