3 techniques to manage complex UI with construct 2

Favourite 35 favourites
Tutorial written by ValerienOriginally published on 29th, July 2014 - 3 revisions

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 long list of button objects
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.

Setting up the right animation in the event sheet


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)”.

Reloading every sprite from the disk

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):

An event that affects all of the buttons on the pause layer
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.

Unlock your full gamedev potential

Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!

View deals

Plus, it's got a lot of additional features that will help you save time and make more impressive games!

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

1
panku 594 rep

Hi Valerien and all you people!

I'm new to construct2 and game design. I was looking for a way to have "Multiple elements in one object" so I found your tutorial. Very good indeed.

What I want to do is to have several buttons with same background and different texts. But I'd like to have a way to update the background only one time. Your trick is very nice (I think I'm going to use it latter :)..), but in my case is not useful because I should to have all the sources of all of my buttons, And what I need is to have only one png image as one source for all of the buttons.

Do you know if there's a way to do it in construct2?. Am I misunderstanding something?.

Thanks a lot for your feedback. Keep your great work! :)

Friday, November 18, 2016 at 10:26:10 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.