Building a global user interface (UI)

  • 115 favourites


Attached Files

The following files have been attached to this tutorial:



17,429 visits, 44,287 views



This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Step 3: Advanced usage

Global objects are born in their original layout, but can be destroyed in any layout. If you return to their original layout after destroying them, they will not be there! This means that, if we have a game that sees our player going from Main Menu -> UI -> Level 1, then possibly back to Main Menu or maybe even Score Screen, Level Select or Shop, we need to manage the visibility (and interactivity) of the UI to keep it hidden from the player when it’s not required - we can't simply destroy the UI objects and expect them to return.

If your UI elements are never interactive (i.e.: the user never clicks on them), this is an easy one: simply set the “UI” layer in each screen to visible or invisible, depending on whether you want it to show up or not. For this reason, again I must stress that every layout in your game needs to have the same layer composition, even if most of those layers are left empty (which would likely be the case in your Main Menu, which might have at most just a few useful layers). Don’t forget to set your “UI” layer visible in your UI layout.

If your UI elements are interactive, then here’s an easy trick: in your interaction events (such as [Mouse: On clicked…]) add another condition [System: Layer “UI” is visible]. This will ensure that the player can never accidentally click on an invisible object (yes, this can happen). This is also a handy trick for popup dialogue screens, options screens or any other non-game interaction that might crop up during a level.

Lastly, just a mention of level selection-based games, and games where you’ll continue your progress from where you left off. I have not tested this functionality with the save game feature, but going by everything I understand of it, it should work. If you’ve made your own save game system (using WebStorage), be sure to set your UI layout change event to something like [System: On start of layout -> System: Go to “Level ”&CurrentLevel].

Now that really is it! This is a simple but often overlooked feature in Construct 2, and I wanted to highlight it as the question of user interfaces often comes up on the forums. If you have any questions or suggestions, please feel free to leave a comment below, and don’t forget to grab the capx here (Construct 2 version r136 or higher required) if you need it.


  • Order by
Want to leave a comment? Login or Register an account!