Intro Cutscene: Fade Effects

In this post, fade-in and fade-out effects (0.5 sec) will be added. UI texts will also be added.

  1. Create a “UI Image” to fill the game screen. Make sure the Canvas scales with the screen size. Select the image and set the starting color to “black”. Name the image as “Fade_img” for clarity.

2. Create a “UI text”, “Skip_txt”, Text: Press “S” to skip. Set the starting color to white.

3. Child the Canvas object to the “Intro_Cutscene” and select the “Intro_Cutscene” to open up the Timeline editor.

  • Create an Animation track and assign the Canvas to it
  • Create the first frame of black for “Fade_img”, set the alpha to maximum
  • Create the first frame of “Skip_txt”, set the alpha to zero
  • Move to the 0.5-sec mark, set the alpha to 0 for “Fade_img” to complete the fade-in effect
  • At the 0.5-sec mark, set the alpha of “Skip_txt” to maximum
  • Move to the 58:3-sec mark, anchor the alpha of “Fade_img” to 0
  • Move to the end, set the alpha of “Fade_img” to the maximum to complete the fade-out effect
  • At the end, set the alpha of “Skip_txt” to the 0

--

--

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