Creating a fading UI in cut scenes with Timeline

Hernando Nieto Jaramillo
2 min readJul 31, 2021

After finishing the shots for the Level complete cut scene (here), we want to show a fading image with a text image and some buttons

Creating the fading UI

  • While LevelComplete_Cutscene selected, create a new Canvas
  • Set its UI scale mode to Scale with screen size
  • Create a new image and rename it as Camera fade
  • Set its Rect transform values as shown below and choose a color
  • Drag and drop the Camera fade game object into the Timeline. Select Add animation track
  • Start recording and configure its Alpha to fade the image as desired. Later, stop recording

Adding congratulations text and buttons

  • Add one image, 2 buttons and rename them
  • Remove the text in both buttons
  • Set their values as shown below

Creating the UI’s animation

  • Select the canvas. Drag and drop into the Timeline. Select Add animation track
  • Place the time line in a time, for instance, 5:30
  • Start recording
  • Select the Congrat_image, Restart_button and Quit_button.
  • Set its Alpha value to 0
  • Move the time line to the end of the whole tracks
  • Set the Alpha value to 255
  • Stop recording

Preview the result in Timeline

Hope this blog is helpful for you!

--

--