Experience with GUI?

Hi everyone. I'm searching for a way to deal with GUI system in my game which includes buttons and pop-ups. At the moment, I'm using sprite with "Touch : On tap object" trigger for buttons. With pop-ups, I put each of them on a separated layer, and show/hide pop-ups by showing/hiding their own layers. However, I get some problems:

1. Objects on a hidden layer can still trigger "On tap object". Therefore, I have to add one more condition which checks if the layer of tapped object is visible. This leads to my second problem.

2. I don't know how to sum up this, so I would describe my situation. I have a pop-up named "Pause" which is shown when player taps Pause button, and another named "Game over" when the game ends. Each of them have a "Retry" button which is the same object type. These two are put at the same position on the screen. The event for this button is

Touch: On Retry tapped AND System: retry.layer is visible -> retry action[/code:b4k8xgyz].
The problem is when "Pause" pop-up is shown and player taps "Retry" button, nothing happen. Then I figure out that C3 has picked "retry" button of "game over" layer (which is above "pause" layer) and checked its layer (which is currently hidden "game over" layer) and seen the conditions are not matched. Now I have to put them at different positions but I think this is not a good solution.
3. [b]Objects covered by others still trigger "On tap object"[/b]. My pause button, although is behind game over pop-up, still reacts when tapped then pause pop-up is shown. I therefore add one more condition that check game state to deal with it.
4. [b]Layers are not set to initial state when restarting layout.[/b] After tapping retry button and restart the layout, my pop-up is still there while other objects are reset. So, more events had to be added.
Those are what I experienced when working with GUI. Until now, I managed to solve all of them, but in not very good ways. Therefore, I want to know if there is a recommended solution for GUI system. I've searched for tutorials and other threads about this but cannot find any.

1. This is the right approach. I do the same in my games. Alternatively, you can put events into different groups and deactivate/activate groups. For example, if menu buttons are invisible and should be disabled, deactivate Menu_Events group. When player taps Menu icon, deactivate platform controls and activate Menu_Events group.

2. You can add another condition "Retry is on layer..":

On Retry tapped

and Retry is on layer "GameOverLayer"

and layer "GameOverLayer" is visible

On Retry tapped

and Retry is on layer "PauseLayer"

and layer "PauseLayer" is visible

3. I also suggest adding "Wait 0" before making layer visible/invisible.

Say, you have two buttons (MenuOpen and MenuClose) in the same position on the screen, but on different layers:

On tapped MenuOpen -> Set layer "Menu" visible

and layer "Menu" is NOT visible

On tapped MenuClose

and layer "Menu" is visible -> Set layer "Menu" invisible

With events like this, tapping MenuOpen will make layer visible, but then the same tap will be registered in the next event on MenuClose button, and the layer will immediately become invisible again. Adding "Wait 0" before changing layer visibility will fix this problem.

EDIT: you can actually optimize all these events by adding all clickable objects to a family, create a family instance variable buttonFunction, and make this generic event:

On tapped ButtonsFamily

ButtonsFamily is visible

Layer ButtonsFamily.LayerNumber is visible -> Function call (ButtonsFamily.buttonFunction)

dop2000 Thank you! The family approach sounds good and easy to control. Do you have a generic way for managing layers and their respective groups? I'm thinking about some kinds of mapping from layer to group so that when we show/hide a layer, we also activate/deactivate its group without remembering the group's name. Also, when a new pop-up is shown, can we hide currently opening pop-up no matter what it is?

Sure, you can add other instance variables to that family, say TargetGroup and TargetLayer.

When family member is tapped, deactivate all popup groups and make all popup layers invisible, then activate only ButtonsFamily.TargetGroup and set ButtonsFamily.TargetLayer visible.

Or you can create an event that runs every 0.1 seconds for example, checks layers visibility, and activates/deactivates corresponding groups.

If you have lots of layers/groups, you can name them like PopupGroup1, PopupGroup2, PopupGroup3... PopupLayer1, PopupLayer2, PopupLayer3..

and disable them in a loop:

For "x"=1 to 20 ->

... Set group "PopupGroup"&loopindex deactivated

... Set layer "PopupGroup"&loopindex invisible