Five Scene Transitions in Godot
In this article, we will look at five different ways to transition between scenes in Godot.
Spending time in the docs I ran across this article about custom scene switchers.
At first looking at it, I thought it was about singletons, but they give an example of how to use a singleton to switch scenes.
So for this article, I will use the basic example and create a custom scene switcher with scene transitions.
Once I get the base working I want to learn and create create 5 different scene transitions.
Scene Transition
First let's create a script called scene_transition.gd. This will just be a simple script of providing a way to play an animation. By default, it will be a CanvasLayer, so we will hide and show it when it's needed. Doing it this way we can have any number of scene transitions in the scene tree.
class_name SceneTransition extends CanvasLayer
@onready var animation_player: AnimationPlayer = $AnimationPlayer
@export var animation_name : String
func _ready():
hide()
func play():
show()
animation_player.play(animation_name)
await animation_player.animation_finished
hide()
Scene Manager
This will be a singleton that will handle the scene transitions.
extends Node
@export var ready_scene_transition : SceneTransition
@export var load_scene_transition : SceneTransition
@export var goto_scene_transition : SceneTransition
var current_scene = null
func _ready():
var root = get_tree().root
current_scene = root.get_child(-1)
ready_scene_transition.play()
func goto_scene(path: String):
# This function will usually be called from a signal callback,
# or some other function in the current scene.
# Deleting the current scene at this point is
# a bad idea, because it may still be executing code.
# This will result in a crash or unexpected behavior.
# The solution is to defer the load to a later time, when
# we can be sure that no code from the current scene is running:
call_deferred("_deferred_goto_scene", path)
func _deferred_goto_scene(path):
await goto_scene_transition.play()
# It is now safe to remove the current scene
current_scene.free()
# Load the new scene.
var s = ResourceLoader.load(path)
# Instance the new scene.
current_scene = s.instantiate()
# Add it to the active scene, as child of root.
get_tree().root.add_child(current_scene)
# Optionally, to make it compatible with the SceneTree.change_scene_to_file() API.
get_tree().current_scene = current_scene
await load_scene_transition.play()
I took from the docs, but I added the scene transitions to the scene manager.
The scene transitions are optional, however they are customizable and can be used to create a more seamless transition between scenes.
It's important to note that the scene manager is a singleton and will be loaded automatically when the game starts. So I have setup different scene transitions for the ready, load, and goto scenes.
- Ready Scene Transition -- This will be the first scene transition to play when the game starts. It will only be played once.
- Load Scene Transition -- This will be the second scene transition to play when the game is loading a new scene.
- Goto Scene Transition -- This will be the third scene transition to play when the game is switching to a new scene.
Once we have this all setup we can start create our actual transitions and play whatever animations we want.
1. Brand Screen
The brand screen is a very important scene. It's the first thing the player sees when they start the game and will set the tone for the game.
This transition will be a simple fade out of black to the name of the company, will wait for a few seconds and then fade to black.
It will then load the next scene which will be the title scene.
2. Game Balloons Start
When the player starts the game, balloons will start to appear and float up on the screen. and then fade to black.
3. Game Start
The game start scene transition will start with a black screen and the then fade out to show the game scene.
4. Game Over
When the player loses the game, it will put an overlay on the screen and slow the game down showing a restart button.
5. Game Restart
The game restart scene will fade to black, reload the game scene and then fade in to the game scene.
Conclusion
In this article, we looked at five different ways to transition between scenes in Godot.
I hope you found this article helpful and that you will use this in your own projects.
Happy coding!