When we start a level or change to a new level, a nice touch is to include a scene transition.
Films do this with fade-ins, fade-outs and wipes and so forth.
We will create two different transitions, a simple fade and then a more interesting fade effect.
Create a New Scene and use a ColorRect as the root node.
Choose a color using the Color picker in the Color property.
Add an AnimationPlayer Node as a child
This is how we will animate the fade.
In the Layout property of the ColoRect node choose Full Rect
This ensures that the rectangle occuipies the entire viewport.
Now select the AnimationPlayer node
Under the Viewport in the Animation Dock
Click on the Animation button
Then Click on New and name it Fade
You will see an animation timeline appear as below
Change the duration of the animation to the right of the stopwatch to 2.0 seconds.
Drag the magnification slider to zoom in or out of the timeline.
Select the ColorRect node and click on the key next to the color property.
A dialog will appear asking if you want to add a track to the animation player.
Now we have an animation track for the color, starting with full color at 0.0 seconds.
Move the timeline to the end of the track (2.0) seconds because we want the color to be completely transparent at the end of the animation.
Click on the Color property
Set the Alpha channel to 0
Then click on the key next to the Color property again.
Now the timeline shows the colour moving from full color, to transparent over 2 seconds.
Preview the animation by using the controls and set it to autoplay on load.
