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