All Collections
Getting Started
Getting Started 5 - Creating Menus
Getting Started 5 - Creating Menus

In this guide, we will discuss menus and creating user interfaces.

Erik Juico avatar
Written by Erik Juico
Updated over a week ago

In the illustration below, we will see blue nodes and green nodes.

The blue nodes denote worlds where we build our scenes that make up our game while green nodes are menus where we design the user interfaces for your players. This is also where we design navigation screens like main menu, world select, a pause screen, a game over screen, a shop for in app purchases and of course the main user interface your player will see while playing the game.

1. How to move, resize and change other properties of user interface elements.

In the Main Menu UI you will see 3 element, a background image, a start button and a title image.

You can select these element from the tree or you can click it directly to edit. To resize these elements, click the corners and drag it to your desired size.
To rotate the object, hold the Alt button on your keyboard then click and drag the corners of your object.

You can also click and drag your elements to adjust its positioning.

You can also edit placement, rotation and size of the element in the options panel.

You can even play around with the opacity on the options panel.


โ€‹2. How to use the navigation button.

Lets create an info button for our users where we can put the credits for our game.
To do that, drag and drop a Navigation Button to your desired location.

Change the name in the options panel then drag drop a graphic to the image section.

Click the Menu Editor so we can go back to the Game Mind Map.


โ€‹3. How to create a new user interface and how to connect the two.

Now that we have an Info Button in our Main Menu UI, let us create the Info Menu where you can add all the information you want your players to see. To do that, right click on the grid and select Add New UI.

Once done, click on the newly created UI and change its name to Info UI.

Then link it to the Main Menu UI.

Inside the Info UI, I dragged a background to match the Main Menu.

Then I clicked and drag the dropped image to fit the screen.

After that I dragged a Label inside.

And created the credits. Here you can include all the information you want the info menu to show.


โ€‹4. How to create the back button so our player can navigate the game menu easily.

Drag a Navigation Button so the players can go back to the Main Menu after checking the page.ย 

Then drag an image you want to use.

The important part is to select BACK as the Function of the button. In that way, it will take you to the previous menu once you tap it.

Did this answer your question?