How can this guy do this animation with UI

I just watched the video right here

This guy used Sprite2D to make the card select UI, how can he do that?, can someone explain it to me, can someone show me a little example of the hierarchy that he used?

1 Like

He probably has a canvas layer, where he has:

–ColorRect (to give the background)
----Label2D (Title etc)
----HBoxContainer (to align the cards horizontally)
----PanelContainer x 3 (to put the Node2D card scenes and also listen for gui_input so he can send out a signal for the selected card)

Honestly there are a lot of ways to achieve this.

1 Like

how to do the 3d rotation of the card? i’m also curious about this.

It’s explained in the video.

I just did what you said, i don’t know what the ColorRect does, but can you give me an example of the signal?, i don’t know how to check if player click on it, like the panel size is like 0,0 and if i scale up the panel, sprite2d won’t stay in the center


“I don’t know what the ColorRect does”:
ColorRect gives you the background color. You don’t need this node if you don’t wanna apply a background effect while selecting a card, just FYI.

“I don’t know how to check if player click on it”
The PanelContainers have a signal called “gui_input”, you can connect to it so you know if the player has clicked on the PanelContainer aka the Card.

“panel size is like 0,0 and if i scale up the panel, sprite2d won’t stay in the center”:
If you want to center the sprite your PanelContainer tree should look like:


-PanelContainer (make sure to set a minimum custom size)
–CenterContainer (make sure to apply center alignment for both horizontal and vertical alignments)

1 Like

Thank you very much, you’re very good at explaining these, i hope you can also make a video and share this with others. But it’s gonna be hard for me to make the Title of the skill, description,… to zoom out with the Sprite2D when hover like that, think i could try to find a way

1 Like

I think the Panel Container gui_input signal doesn’t work when pause the scene, that’s weird, only the mouse entered works

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.