Cutscene Animation

Bonus Part: Adding a Level Complete UI Animation

4 min read 22K+ views Apr 23, 2021
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

  1. Open your Level Base prefab
  2. Rename the existing coin UI to "UI Coin"
  3. Add a new UI → Image
  4. Name it "Level Complete"
  5. Stretch it to fill the screen (hold Alt + click stretch)
  6. Add UI → Text as a child
  7. Set the text to "Level Complete"
  8. Choose a bold font, size 80, centered

2 Creating the Animation

  1. Select the Level Complete GameObject
  2. Open Window → Animation → Animation
  3. Click Create to make a new animation
  4. Save it as "LevelCompleteAnimation"

Animating the Background

  1. Click the Record button (red circle)
  2. At frame 0: Set the Image color's Alpha to 0 (transparent)
  3. Move to 1 second (frame 60)
  4. Set the Alpha to 255 (fully visible)

Animating the Text

  1. Select the Text child object
  2. Still in record mode, at frame 0: Set text color Alpha to 0
  3. Drag the keyframe to start a bit after the background (around 0.3 seconds)
  4. At 1 second: Set text Alpha to 255
  5. 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

  1. Find your animation file in the Assets
  2. Select it and uncheck Loop Time in the Inspector
  3. This makes the animation play only once

Disable by Default

  1. Select the Level Complete GameObject
  2. Uncheck the checkbox next to its name to disable it
  3. 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

  1. Select the Level Base prefab
  2. Add a Variables component
  3. Add a new Object Variable: "Level Complete" (GameObject type)
  4. Drag the Level Complete UI into this field

Modifying the Player Graph

  1. Open the Player prefab's graph
  2. Find where you load the next level (after hitting the finish line)
  3. 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:

  1. Add a Timer unit after Set Active
  2. Set duration to 3 seconds (enough time for the animation)
  3. Connect the Timer's On Completed to Load Scene

Final Result

When the player reaches the finish line:

  1. The Level Complete UI fades in
  2. The "Level Complete" text appears
  3. After 3 seconds, the next level loads