Make your own Menu Screen

Knowledgebase / Make your own Menu Screen

In your game, you can create extra levels to use as Menu screens, such as a Start screen or a Game Over screen. In this example we’re going to create both. Note: This tutorial assumes you have already created a playable level, and want to add menu screens to that.

We’ll begin by making a Start Screen. This will be the first screen the player will see before they actually start playing the game. 

First, we’ll create a new level. Click the + button in the Levels bar to create a new level. Double-click on the level’s name to rename it to “Start screen”. Then drag it to the left until it becomes your first level.

start screen level

 

We’ll set up the level’s world size to match the game’s resolution. To set the world size, open the Game Properties tab in the sidebar (the cog icon at the top-left).

ezgif.com-video-to-gif

 

The game resolution is 768 x 512 by default, so change the world size to 768 x 512 (if you have changed the resolution, then make your world size the same as that). Now the level’s world size has shrunk and you can see how much space you have to work with in your level.

Next we’ll start placing game objects in our level to build the start screen. You can use any objects you want, and in this example I’m going to use objects from the Tappy Plane pack from the Marketplace.

 

Screen Shot 2016-03-11 at 4.23.49 pm

 

Make sure to use a large image as a background for this level by placing it on the lowest layer. And don’t forget to name your layers to help keep them organised! (Alternatively, you can change the level’s background color if you don’t want to use a background image).

One of the objects in this level needs to be scripted to act as a button that will send the player to the next level. To create this script, right-click on the object you want to use as a button, and select “Add script”.

Screen Shot 2016-03-11 at 4.54.59 pm

 

The first script block we need is an Event named “When the player presses myself”. This block detects when the object is clicked on. Drag that block out into the workspace.

Screen Shot 2016-03-11 at 4.34.27 pm

 

Then grab a block from Flow named “Go to next level”, and drag it inside the event block.

Screen Shot 2016-03-11 at 5.00.16 pm

 

Save this script and close the script editor. Now play your game! Congratulations, you’ve made a Start Screen with a functional button.

Repeat the same process for the Game Over screen by making a level and keeping it in the last position in the levels bar. The button on the Game Over screen should send you to the first level instead of the next level. To do this, click on “next” inside the “go to next level” block, and select “first”.

 

Note: if your start screen takes you to the wrong level, it’s probably because you have multiple objects with the script that tells the game to go to the next level: so they are saying something like “NEXT, NEXT, NEXT” which will send you further along than you want. To fix this problem, have only ONE object with this script. Right-click on the other objects with this script, and choose Remove Script.