Easy UI Animation in the Godot Engine
StayAtHomeDev StayAtHomeDev
42.6K subscribers
9,213 views
496

 Published On Jul 17, 2024

In this Godot 4 tutorial, we're creating a custom animation component that can easily animate any control node or ui element in the Godot Engine. For now, we'll focus on scaling our menu buttons but we will add position, scale, and rotation options in the next video.

🔥 GET THE SOURCE FILES ►►   / stayathomedev_  
👉🏼 CHECK OUT MY GODOT 4 FPS TUTORIAL SERIES ►►    • Make An FPS in Godot 4  

-----------------------------------------------------------------------------------

0:00 - Introduction and Overview
0:32 - Creating a New Class for the Animation Component
0:57 - Extending Node and Creating the Class
1:44 - Adding the Animation Component to a Button
2:08 - Setting Up Export Variables
2:47 - Discussing Control Nodes and Origin Points
3:57 - Adding a Tween for Animation
4:50 - Setting Up Hover and Off-Hover Functions
5:45 - Creating the Add Tween Function
7:47 - Setting Transition Types for Tween
8:38 - Using the Add Tween Function in Hover Functions
9:59 - Setting Up Default Scale and Center Issues
10:59 - Running Setup Function After Everything Is Loaded
11:56 - Connecting Signals for Mouse Events
13:32 - Testing the Animation Component
14:32 - Expanding Animation Capabilities

-----------------------------------------------------------------------------------

This series is part of my sponsored User Interface (UI) and Control Node tutorial series where we will walk through how to create various user interfaces, heads up displays, and more in Godot 4, step by step. I won't be skipping any steps in the process and everything will be sequential video to video.

Joining my Patreon in one of the 3 tiers will give you:

- access to the private Discord channel
- your name in the project README
- early access to tutorial videos
- power to vote on what mechanics get covered in future videos
- full access to the project source files to use in your own projects

-----------------------------------------------------------------------------------

STAYATHOMEDEV â–şâ–ş https://stayathomedev.com
TWITTER ►►   / stayathomedev  
MY GODOT ASSETS â–şâ–ş https://stayathomedev.itch.io/

#godot #godotengine #ui

show more

Share/Embed