Phaser for Beginners

Adding a title screen with sound/mute options

The first thing we need to think about when turning the prototype into a real game, is the title screen, which means giving the game a name, create a visual look and feel that has something to do with the title, and a couple of nice sound/mute buttons to place in the title screen.

Since we are about to create a cross platform game which will be able to run on phones and mobile devices everywhere, and since it’s a quick casual game, you can expect it to be played at the office or at school. That said, it’s very important to start with a muted title screen where the player can clearly choose whether to play with sounds or not. So we will first need to create a new variable called playSound. Here we will store the player decision.

Remember that at the very beginning when the game was being created I introduced game states?? We only have one state at the moment, but now it’s time to add more states and add complexity to our game in only a couple of lines.

This would have been way more difficult if you didn’t learn how to manage states. We are going to add a new state called TitleScreen which points to titleScreen object, and start the game launching it rather than PlayGame.

Now, in the same way we created playGame object with all its preload and create methods at the beginning of this journey, we are doing the same with titleScreen. Most of the concepts you’ll see here have been already explained.

A lot of code as you can see, but you already know most of the concepts used.

Let me highlight the most interesting parts:

I created another sprite sheet with two 80×80 pixels images, one representing “sound on” button, and one representing “sound off”. Then I preloaded it.

Sound buttons are then added to the stage, inside create function:

This is the standard code used to create a button. Just have a look at the callback function – startGame – and at a new concept called anchor point.

The anchor sets the origin point of the texture. The default is 0, 0 this means the texture’s origin is the top left. Setting than anchor to 0.5, 0.5 means the textures origin is centered. Setting the anchor to 1,1 would mean the textures origin points will be the bottom right corner. Two equal values can be written only once. anchor.set(0.5, 0.5) can be written as anchor.set(0.5).

In this case with we want buttons to have their anchor points in its horizontal and vertical center. Just remember the image should have an even with and height, or the final result will look a bit blurred. Now, let’s use some text to give the game a name: “Crack Alien Code”, something more catchy than “Concentration”.

First, let’s decide the look of the text: an object called style which contains fontfill and align properties. Once the style has been defined, it’s time to write the text on the screen:

Adding text is not that different than adding images or buttons.

add.text(x, y, text, style) adds a text in x,y position, writing text string using style style.

Launch the game, and have a look at the brand new game title screen:

Game name and two big buttons to choose sound preferences. This starts to look like a real game.

Do you remember those two buttons calling startGame function? Here it is:

The first frame – remember, frame zero – represents the “sound on” icon, while the second frame – frame one – represents the mute button. By checking the frame of the selected button we can set playSound to true or false.

A variable which can have only true or false values is called a Boolean variable.

The last thing to do when the player presses sound buttons is starting the game:

That’s it, in a single line of code using states. Oh, and I changed tiles symbols:

Now they look less like “my first Photoshop graphics” and more like alien runes. During the making of your games, you will often find yourself changing the graphics again and again, especially when you are turning a prototype into a playable game, so don’t be surprised I made it on the article, it’s part of the game creation process.

Download Source

File: adding-title-screen-with-sound-mute-options.zip


Next Tutorial →

Preloading sounds

← Previous Tutorial

Shuffling the tiles