GUI - How to make an animated window template (SOLVED)

Questions
#1

I have created a gui that acts as a ‘popup’ or a window and, as a whole, I would like to move from a position offscreen and have it slide on screen. An example of this would be in Blossom Blast Saga when selecting a level and the window slides in from offscreen with some buttons and graphics on it.

I have tried to place the gui under a gameobject within the scene, and place it offscreen when the scene starts, and then call a script that will then animate the gameobject into place on the visible screen. However, it seems the gui is not respecting its parent gameobjects position.

Is it possible to animate an entire gui template without having to animate each of its child nodes individually?

How can an artist animate UI?
#2

In the default render script the gui is rendered in a separate pass from the game objects. The solution is to have a root node in the gui and animate that node using gui.animate().

3 Likes
#3

Thanks I will try this. I was thinking that the gui and the rest of the rendering process was independent (like most other engines). I am coming from Unity/Gamemaker so I am still wrapping my head around the UI structure. Does the root node within the gui have to be any particular type of node to work? I was reading another thread that had a similar issue… I assume I can just make the root node a box with a texture for the window/modal’s background (white rectangle for example), then place my child elements, like buttons, text, etc, underneath this, and I will be able to animate the root box node and the children will move with it?

Thanks again! Your examples have been much help as well.

1 Like
#4

The root node can either be the popup background or a 0x0 sized box node. If you go for the empty 0x0 box node then make sure to still assign a texture to it or else it will result in an additional draw call on the GPU.

1 Like
#5

Awesome! I got it to work. Thanks!

1 Like
#6

I’m thinking of animating my GUI’s, do I make the 0x0 box node the parent node for all of the other GUI’s and animate the 0x0 node? I am very new to coding and Defold is my first game engine

#7

Yes, animating a parent node is good if you want to move a group of nodes. We nowadays also have a visibility checkbox that can be used to not render the parent node but still animate it.

1 Like
#8

About this, is it more performant to animate/use a node set to visible false over a node with alpha 0?

#9

I am experimenting with some animations for my GUI’s and sometimes I get expected results however sometimes I don’t, I am looking for a simple fade in transition when pressing a pause button, care to help me on this?

#10

Yes it is. An invisible node is part of the scene hierarchy but will not add to the drawcalls.

2 Likes