Creating a fading UI in cut scenes with Timeline

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store