Game Screens

Learn how to create new game screens

The Screen View

On the Editor top-right, you have a toggle button called Screen View allowing you to enable or disable the Editor Screen View. Once in Screen View, you can check the current view at the Canvas bottom-right.

The Screen View is a special mode of the Editor where you can create all your Game Screens. Game Screens are used to create the Menus of your Game (Start Menu, Pause Menu, Game Over Menu, Option Menu, Head-up Display, etc.).

Game Screens are always drawn on top the Game World. Their surfaces are fixed and equal to your Scene Resolution .You can use only one Game Screen to create a simple menu or you can use multiple Screens at the same time to create a more complex menu, for example a menu that has several sub-menus.

Learn how to add objects to your Screens in the Tutorial UI-Objects.
Learn how to change the color of your Screen’s background in the Tutorial Color Selection.

Add & Select Screens

You can add a new Screen by going to the Tab Screen at the Editor top-left. First you have to set the name of new Screen then, you can click on the button Add. Two Screens cannot have the same name.

Once a Screen is added and you want to work on it, you can select it using the drop-down button on the Editor top-right.

Delete & Rename Screens

Once a Screen is added, you can rename it or delete it. To do so, first select the Screen with the drop-down list inside the Tab Screen then,

If you want to delete the screen just click on the button Delete.
If you want to rename the Screen, write the new name inside the text entry like you did while creating the screen then click on the button Rename.

You cannot delete a Screen while you are working on it. So before to delete a Screen make sure it is selected with the second drop-down on the Editor right. Also if you have only one Screen, you cannot delete it because the Engine expect at list one Screen to exist.

Screen Size & Grid

Your Game Screens have a fixed era. If you add any Object outside that era it won’t appear in your Screens. Now how do you find that era within the Canvas ? Well, you simply need to use the Grid to delimit that era in each Screen.

Your Game Screens era is defined by two things. An origin always at (0, 0) and a size equal to your Game Resolution.

You set the origin of your grid at (0, 0) simply by setting x-Offset and y-Offset to zero (0).
You set the size of your grid by choosing the right cell size and the number of cell on each direction

Learn how to use the Grid in the Tutorial Canvas Grid.

The picture below shows the Screen era for a resolution of 1280 by 720. The grid uses only one cell for simplicity. The complete grid configuration is as follows :

Width = 1280
Height = 720
X-Count = 1
Y-Count = 1
X-Offset = 0
Y-Offset = 0

If you want a Screen era with more cells, you can compute the grid parameters as follows :

Screen Width = Cell Width * X-Count
Screen Height = Cell Height * Y-Count

Render Screens

When you play your Scene inside the Editor, you won’t be able to see your Screens. If you want to test your Screens, your need to render your Scene instead.

Learn how to render your Scene in the Tutorial Play & Render Scene.