0.0.3 - Animations ๐Ÿ’ซ and Settings โš™๏ธ


Additions

Animations

I wanted to get familiar with minor UI Animations and the Godot Tween System, which is used to Animate Objects via script pretty easily.

I added three different Animations for now:

  • The Top Toolbar Buttons are animated on Mouse hover
  • The Overlay Windows have a Closing Animation
  • The Background in the Main Window (Not my work)

(Overlay Window) Settings

I needed the possibility to resize the Overlay Windows and didn't want to add resize borders so you would not actually resize it by accident while playing a Game. (Happened to me actually while playing an MMO, constantly resized the Cooldown Tracker meh)

That actually gives me the Idea to add a setting to lock the window positions somehow, maybe next update.

So I just added new basic settings windows to each Overlay Type which can be opened by clicking the Gears โš™๏ธ Button on the Info Tile of the specific Overlay.

Pretty ugly, but works for now


Technical Stuff

Button Hover Animations

I created a Component called "AnimateHover" which you can put under any Node of the Type Control. It will then grab a reference to it's parent and check if it's of type Control. If so, it will then Hook Up the MouseEntered and MouseExited Signals and creates a Tween Animation Object within the Event Handler.


This is how the Tween is created:


It really is that simple.

This is how the Scene looks like with three animated Buttons:


You can Tweak the Animation Properties in the Node Inspector:


It's really not hard and barely any work because the Tween System pretty nice and I think it looks quite good. Just maybe I will slower the animation speed at some point because its quite fast. (I just love this Elastic Transition Type)

Window Closing Animation

This is just very similiar to the Button Hover animation, just created in the WindowCloseRequested Event but created the same way, so I won't go into much detail.

The only difference is, it is a two-step Animation, but that is luckily very easy to do with Tweens. You just call the TweenProperty Method twice for the same Tween Object and it will run in sequence.

Files

overlayer.zip 65 MB
1 day ago

Get Overlayer

Download NowName your own price

Leave a comment

Log in with itch.io to leave a comment.