Stack UI elements as they appear

Here’s the thing. I’m using the Unity 4.6 UI system, I’ve got some UI elements coming and going (each of them is a GameObject consisting of an image and some text).

Basically, when I hit some bonus objects in my game I get some effects for a short period of time and the UI elements show the timer until these effects seize to apply. There are 3 of these effects that can happen simultaneously (actually there are 5, but think of them as 3 “categories”, for each category only one of two cases can occur). These UI elements are not always visible, they only appear when the effects are active, which is easily controlled and checked with 3 boolean variables.

The easy thing to do, is set a static position for these 3 elements, one on top of another, set them as inactive in Start() and activate them each time the corresponding boolean is set to true. I’m thinking of doing something a bit more “fancy” though.

I need the first (in order of appearance, which is random) of them to appear on top, if another one needs to appear while the first is still visible to appear below the first one, and if the third needs to come up while the other two are visible it should appear below the first two. Also, if while two of the objects are visible on the same time and the one on top runs out of time and disappears, the second one should move first in place.

How can this be done?

seems like a good use for Transform.SetAsLastSibling.

just make a single Transform (panel, in UGUI terms) to contain these objects,
then when you create a new one and parent it to that transform, call SetAsLastSibling, and it should go to the bottom. … or maybe that forces it to go to the top, in which case you’d want SetAsFirstSibling.

There are two ways that I can think of that would be relatively easy.

  1. Create placeholder transforms. Position 5 empty game objects on the canvas where you want your messages to appear. Assign your message ui elements to the unused transform that ishe closest to the top of your preset positions.

  2. Do scrolling text. Instantiate your messages at the bottom of the message area and have them move up the screen. You can do this by making the default animation the movement. Then, when you instantiate the messages they’ll scroll automatically.

It seems like I’ve found another way myself, using lists and arrays.

Basically, I’ve been experimenting all afternoon on an empty test scene, instantiating 3D gameobjects at will and trying to stack them on screen like the way I described. The tricky part was to dynamically move up when another visible object above disappeared.

I took advantage of the list’s property to rearrange its contents when one of them is destroyed, so basically I created a List of gameobjects and an array of 3 placeholders, so in every frame I check the lists contents, remove any destroyed gameobjects and set their transform.position to the transform.position of the equivalent placeholder.

Don’t know if this make sense, but it seems to work. Now I’ll try to transfer the logic to my UI. Hope it works too…