Part 4 of 5 - Visual Scripting Series (Bonus)
This bonus tutorial adds a "Level Complete" cutscene that plays when you finish a level. It uses Unity's Animation system to create a fade-in effect.
1 Creating the Level Complete UI
- Open your Level Base prefab
- Rename the existing coin UI to "UI Coin"
- Add a new UI → Image
- Name it "Level Complete"
- Stretch it to fill the screen (hold Alt + click stretch)
- Add UI → Text as a child
- Set the text to "Level Complete"
- Choose a bold font, size 80, centered
2 Creating the Animation
- Select the Level Complete GameObject
- Open Window → Animation → Animation
- Click Create to make a new animation
- Save it as "LevelCompleteAnimation"
Animating the Background
- Click the Record button (red circle)
- At frame 0: Set the Image color's Alpha to 0 (transparent)
- Move to 1 second (frame 60)
- Set the Alpha to 255 (fully visible)
Animating the Text
- Select the Text child object
- Still in record mode, at frame 0: Set text color Alpha to 0
- Drag the keyframe to start a bit after the background (around 0.3 seconds)
- At 1 second: Set text Alpha to 255
- Stop recording
Animation Tip
Switch to Scene view to preview your animation while the Animation window is playing. The Game view may not show changes during editing.
3 Configuring the Animation
- Find your animation file in the Assets
- Select it and uncheck Loop Time in the Inspector
- This makes the animation play only once
Disable by Default
- Select the Level Complete GameObject
- Uncheck the checkbox next to its name to disable it
- The animation will play when we enable it via script
4 Triggering the Animation
We need to enable the Level Complete UI when the player reaches the finish line.
Setting Up the Variable
- Select the Level Base prefab
- Add a Variables component
- Add a new Object Variable: "Level Complete" (GameObject type)
- Drag the Level Complete UI into this field
Modifying the Player Graph
- Open the Player prefab's graph
- Find where you load the next level (after hitting the finish line)
- Before loading the next level, add:
- GameObject Find - find "Level Base"
- Get Object Variable - get "Level Complete"
- GameObject Set Active - set to True
5 Adding a Delay
Wait for the animation to finish before loading the next level:
- Add a Timer unit after Set Active
- Set duration to 3 seconds (enough time for the animation)
- Connect the Timer's On Completed to Load Scene
Final Result
When the player reaches the finish line:
- The Level Complete UI fades in
- The "Level Complete" text appears
- After 3 seconds, the next level loads