This tutorial is part of my series on productivity and project management in Construct 2. In one of my previous tutorials, “How to improve your Construct 2 code with Callbacks”, I showed a technique to reduce the necessary amount of input events for UI elements. Today, we will take a look at a couple of techniques to create and maintain user interfaces with ease. And if you like what I'm doing, you can follow me on twitter and on facebook!
1- Multiple elements in one object
This elegant trick was suggested by jayderyu.
Usually, for small projects, we tend to drag and drop UI assets from the disk one by one. This results in the creation of a separate sprite object for every button in Construct 2. This is alright as long as there aren't too many elements to manage. But as your projects grow, you will most likely need a more flexible approach.
A solution to that issue is to import every button as an animation of a unique sprite object. This way, we are left with a single object to care about in our explorer view! In order to get each button to showcase the right animation, we need to use a variable. We’ll call this one either “animation” or “name”. At the start of our layouts, for each button, we can now set the button’s animation by name using this variable.
Since R175, it is now possible as well to quickly reimport all of the animations of s sprite object, making this trick even more useful! Now, if we make changes to any amount of buttons on our computer, it will take a single operation to reimport them all: right click in the animation frame views and select the “Reload files from -> original sources (for all animations)”.
2- Global User Interfaces
Global UIs have been covered by GeometriX already. I invite you to read his slick tutorial if you haven’t already: building a global user interface. The idea is to use the power of global objects for UI elements in Construct. For example, we can have a pause layer containing our pause menu, and a GUI layer containing our Game User Interface (health bar, energy bar, score...). If we want to have them on every single level, we would rather have it positioned and setup properly on a single layout. That way, we can come back to it any time, make some changes, and see those changes working straight away in all of our levels.
Once the objects we want to see transferred from level to level are set-up, we simply have to set them to “global”. There are two limitations with this choice to be aware of though:
- Construct will actually transfer global objects from a layout to the next not using the layer's name for those objects. Instead, it will use their layer index. This means that you need to have the same amount and order of layers in every following layout if you want your object hierarchy to be preserved. Thus, organization is very important when using global objects.
- You cannot set a single instance of an object to be global. It’s all or nothing here: if you have all of your buttons stored in a single object, every new instance will be global.
Global UIs are the way to go if either:
- Your game is small.
- Your game starts in the action right away; the menu is blended within the game (if there are but a few menus).
3- Split UI layers
There is a very simple way to have your UI elements pop in and out of the screen at runtime: using layers. You can quickly set its visibility on or off, and fade the whole UI in or out at once. It’s particularly cool in the case you have a few small menus to manage: a pause menu, a level end menu… you only need to setup a single layer for each, hidden at first. Then, in the event sheet, you only need to toggle a layer’s visibility and buttons’ active state in order to show or hide menus.
But there is more! You can actually loop through all of the object’s instances in a given layer, to easily modify them. This is a trick I use to set my buttons active or not (using a Boolean):
You can activate an effect, start a tween, start individual timers (to tween your buttons with a per-object delay)… all of this with ease, using a “for each” loop!
Last words
Would you like me to cover something specific? Drop me a message! You can follow me and ask me questions directly on twitter, facebook and google plus.
You can find all of my articles and tutorials about game design directly on my website: http://GDquest.com/ ! Finally, you can find all of my Construct 2 tutorials on this forum post.
In need for UI assets? Take a look at the GDquest - freebies section of my website! This page contains public domain game assets made by yours, truly. They should cover some of your needs for UI game assets.