This is a short tutorial that will show you how to create a user interface (UI, also known as a heads-up display or HUD) in a single, dedicated layout that carries across your entire game. The advantage of building your UI like this, as opposed to duplicating your UI objects in each level, is that when you need to make changes later down the line, you only need to make those changes to a single layout. This system also allows you to customise your look and feel within the editor, as opposed to using events to build your UI at the start of each game screen.
This tutorial assumes at least a beginner’s level of knowledge of Construct 2, in particular the use of multiple layouts and event sheets.
If you'd like to download the completed capx for this tutorial, you can get that here (requires Construct 2 r136 or higher).
Overview
In this tutorial we will assign our UI elements (whether they’re text, sprites, 9-patch, tiled backgrounds or anything else) the global property. When an object is set to global it will not be destroyed upon changing layouts, and will continue to the next layout with its same position, instance variables and behaviours intact.
For the purpose of this tutorial, I will assume that you are building a game based around multiple layouts (one per level). If you use another system, this tutorial will still apply, but in the second page where I cover more advanced uses of this feature, you may need to adjust your game accordingly.
Building the foundation
Create three layouts, each with their own event sheet. Call them “Main Menu”, “UI”, and “Level 1”.
In the Main Menu layout, create a text object called “NewGame” and type that text into it. Also create a mouse object.
Now, in your UI layout, rename the default layer to “UI” and create another layer below it called “Game”. Add whatever objects you want to the UI layer, such as text objects called PlayerHealth, PlayerLives and CurrentScore. Position them how you’d like. Now, go to each UI object you’ve created and, in the properties pane, set each object to “Global: yes”.
Select the “UI” layer, and then in the properties pane on, set its Parallax property to 0,0.
Now jump over to your Level 1 layout. Again, set the layers to “UI” and “Game”, and set the “UI” layer’s Parallax property to 0,0. It’s critical that your game layouts and UI layout have the exact same layer structure. It’s also a good habit to get into to create more layers than you need, such as “Background1”, “Background2”, “Game1”, “Game2, etc”.
The events
The logic that we’ll create here tells our game to go from the main menu to the UI screen, pick up the UI elements, and then go to our actual game screens. So let’s do this in these steps:
Starting at your Main Menu, create an event [Mouse: On Left button Clicked on NewGame -> System: Go to “UI”]. This event will differ in your own game, but the point here is to bring the game to the UI layout first, before going off to the game layout.
Next, in UI, create an event [System: On start of layout -> System: Go to “Level 1”]. This will take our player to the game layout itself.
And that’s it! You’ve successfully built a global UI with just two events! The key is understanding the logic, and how global objects work. With them, you could do much more than just UI elements. Players, enemies, weapons and NPCs can all benefit from the global property, as long as these objects are correctly managed. This leads us to our next, entirely optional step…