"Simple GUI transitions to swap menus elegantly."
This plugin gives access to the GuiTransition
node which allows to transition multiple GUI layouts easily.
Designed for Godot 4.x (3.x version available here).
See the example scene on addons/simple-gui-transitions/example
to see this plugin in action.
Download it on Godot Asset Library
- Install the plugin through the AssetLib or copy the plugin
addons
folder to your project's directory - Enable the plugin on
Project > Project Settings > Plugins
- Reload your current project
The default transition settings can be set on Project > Project Settings > GUI Transitions > Config
(you may need to enable Advanced Settings
to see this section).
Those settings will be applied on top of any Default
property on the node GuiTransition
. This is useful to increase or decrease the speed of transitions on the whole project, for example. See each property description below.
The node GuiTransition
is responsible for transitioning a specific layout.
If the current layout will trigger its transition at startup automatically. Enabled by default.
If enabled, will fade the whole layout along with the selected animation of individual controls. The fade duration is based on the Duration
property. Enabled by default.
The animation type of the controls when entering the screen. The available animations are:
- Fade
- Slide left, right, up and down
- Scale vertical, horizontal and both
The animation type of the controls when leaving the screen. The available animations are:
- Fade
- Slide left, right, up and down
- Scale vertical, horizontal and both
The total animation duration in seconds. A negative value such as the default -0.01
will make the transition use the default value set in Project Settings
.
Delay ratio between transitions for each node contained in Group
or Controls
.
The default value is 0.5
.
- A negative value such as the default
-0.01
will make the transition use the default value set inProject Settings
. - A delay of
0.0
means no delay, that is, all controls will start and finish their animations at the same time. - A delay of
1.0
will make each control wait for the previous one to finish its animation to start its own. - A delay between
0.0
and1.0
will make controls intertwine animations, giving a smoother effect.
Note: See addons/simple-gui-transitions/example/layout_3.tscn
for an interactive and visual representation of different delay ratios.
Optional ID of layout to trigger changes on the singleton GuiTransitions
(at method parameters named id
).
If empty, will be assumed as the Layout
node name.
The main layout node. It will be hidden and shown accordingly. Should be the topmost node of the current layout. Required!
Array of individual nodes to be animated.
The order will be taken in account to apply the animation Delay
.
If empty, a Group
must be set.
A node with children controls to be animated in sequence.
The order will be taken in account to apply the animation Delay
.
Example: a HBoxContainer
or VBoxContainer
with several buttons as children will allow to animate all buttons one by one.
If not set, Controls
must be selected.
When Animation Enter
or Animation Leave
is one of the scale animations, it will center the control's pivot_offset
property.
Transition curve of the animations. Same as Tween.TransitionType
.
Ease curve of the animations. Same as Tween.EaseType
.
The singleton GuiTransitions
allows to trigger the transitions globally and swap GUI layouts.
The signal show_completed
is emited after a layout has been shown.
The signal hide_completed
is emited after a layout has been hidden.
The method go_to
hides the current layout and shows the layout with the given id
.
If function
(optional) is passed in, the function
will be executed halfway through.
Both signals hide_completed
and show_completed
are emited accordingly.
The method update
hides and shows the current layout.
If function
(optional) is passed in, the function
will be executed halfway through.
Both signals hide_completed
and show_completed
are emited accordingly.
The method show
shows the layout with the given id
.
Emits the signal show_completed
on completion.
The method hide
hides the layout with the given id
, or all visible layouts if no id
is passed in.
Emits the signal hide_completed
on completion.
The method is_shown
returns if the layout with the given id
is currently visible.
is_hidden(id: String)
The method is_hidden
returns if the layout with the given id
is currently hidden.