HOME (../../../INDEX.

HTML)
APPUS
SHOWCASE
(exercise-5-adding-a-screen-fader-effect.html#)
(../../../APP-SHOWCASE.HTML)

SAMSUNG
DEVELOPERS

(../../../INDEX.HTML)

(EXERCISE-5-ADDING-A-SCREEN-FADEREFFECT.HTML#) EVENTS (../../../EVENTS.HTML) BLOG (../../../BLOG.HTML)

DEVELOPER RESOURCES (../../../DEVELOPER-RESOURCES.HTML)

SIGN UP (../../../SIGN-UP.HTML)

EXERCISE 5: ADDING A SCREEN FADER

Samsung Developers US (../../../index.html) > Developer Resources (../../../developerresources.html) > Gear VR (../../gear-vr.html) > Apps and Games (../apps-and-games.html) >
Exercise 5: Adding a Screen Fader Effect

Your image viewer app is now fully functional, but youre not quite nished. Next, you
will create a fader object that will display a simple fade transition when you move from
the splash scene to main scene and when you switch between images in the viewer.
In this exercise, you will learn how to:
Add a fade through black transition using a Screen Fader Object
Create a prefab
Build and run the completed app on a Gear VR device
Using the catch up scenes
We recommend that you start this exercise using the Splash and Main scenes you
created in the previous exercises. However, if you wish to start with clean les, you can
use the provided catch up scenes for Exercise 5.
1. Return to Unity and close the Build Settings window.
2. In the Project view, navigate to the /Assets/Workshop/Scenes/CatchUpScenes

folder and open the 4_Main.unity le.

3. From the menu, select File > Save Scene as. In the Save Scene dialog, set the
lename to Main.unity and save it to the /Assets/Workshop/Scenes folder. When
prompted, replace the existing Main.unity le.
4. In the Project view, navigate to the /Assets/Workshop/Scenes/CatchUpScenes
folder and open the 4_Splash.unity le.
5. From the menu, select File > Save Scene as. In the Save Scene dialog, set the
lename to Splash.unity and save it to the /Assets/Workshop/Scenes folder. When
prompted, replace the existing Splash.unity le.
Create the ScreenFader object
1. Return to the Splash.unity le.
2. In the Hierarchy view, select Create > Create Empty.
3. In the Inspector view, change the name of the empty object to ScreenFader and press
Enter to register the change.
4. In the Transform component, click the Gear icon and select Reset to make sure the
object is positioned at (0, 0, 0).
5. In the Project view, open the /Assets/Workshop/Meshes folder and drag the
Sphere_Inv object onto the ScreenFader object in the Hierarchy view.
The ScreenFader object will be used to fade the Splash screen to black as it transitions to
the Main scene. It will also be used to create a fade transition between images in the
viewer.

6. With the ScreenFader > Sphere_Inv object still selected, navigate to the Inspector
view and change the Scale propertys X, Y, and Z values to 0.01. This will reduce the
size of the sphere so that it only covers the camera.

7. Review the scene in the Game view. Since the sphere is not transparent, you will only
see a gray screen.
8. In the Project view, open the /Assets/Workshop/Materials folder and drag the
ScreenFader material into the Mesh Renderer > Materials > Element 0 eld in the
Inspector view.

9. Preview the screen in Game view. You will be able to see your scene once again. The
ScreenFader material only contains a color (black) with an alpha value set to 0.
10. In the Inspector view, click the Add Component button and select Scripts > Screen
Fader Sphere.
This script controls the duration of the fade effect. By default, it is set to 0.3 seconds for
the fade to black and fade to transparent effects.
11. Click the Add Component button and select Scripts > Anim Shader Alpha.
This script tells the Screen Fader Sphere when to start modifying the alpha value over
a

specied amount of time. In this case, the scene will start the fade to black effect 1
second before transitioning to the Main scene.
Note: The duration of the Screen Fader Sphere scripts Fade to Black property should not
exceed the duration of Anim Shader Alpha script, or the scene will switch before completely
fading to black.

12. Review the timeline of events.

At 0 seconds, the Splash scene starts. The StartApp object sets the duration of the
Splash scene to 5 seconds. At the 4 second mark, the Anim Shader Alpha and Screen
Fader Black scripts are triggered and the scene begins to fade to black. At 4.3 seconds,
the Screen Fader Sphere completes. At the 5 second mark, the Main scene will start.

13. Play the scene.

You will see the Splash scene fade to black and transition to the Main scene. Notice that
Main scene does not fade to from transparent to black when it starts. You will need to
implement the ScreenFader object in the Main scene in order for this transition to
display.
14. Save the scene.
Create a prefab

1. In the Project view, open the /Assets/Workshop/Prefabs folder.

2. From the Hierarchy view, drag the ScreenFader object into the Prefabs folder.
Since a prefab named ScreenFader already exists in this folder, Unity will automatically
rename your prefab ScreenFader 1. Creating this prefab will allow you to reuse the
ScreenFader object in the Main scene.

3. Save the Splash.unity le and return to the Main.unity le.

4. In the Project view, open the /Assets/Workshop/Prefabs folder and drag the
ScreenFader 1 prefab le into the Hierarchy view.
Build and run the application
1. From the menu, select File > Build Settings.
2. In the Build Settings window, make sure the Scenes In Build section lists the
following two les in order:
Workshop/Scenes/Splash.unity (0)
Workshop/Scenes/Main.unity (1)
3. Make sure the Platform is set to Android and the Texture Compression is set to ETC2
(GLES 3.0).
4. Connect your device to your machine via USB and click the Build & Run button.
5. In the Build Android dialog, give your APK le a name and click Save.
6. Once Unity has nished building your app, you will see the Insert device dialog
appear on your device. Disconnect your device from your computer, connect it to
your Gear VR, and review your nished app.

Sign Up for Emails about Samsung's Developer Tools and Events

I have read the Privacy Policy (../../../privacy.html) and agree to the Samsung Developer Connection Terms and
Conditions. (exercise-5-adding-a-screen-fader-effect.html#modal-1)
CONNECT

Search

Latest Tweets

@SamsungDevUS (http://twitter.com/SamsungDevUS)

Follow @SamsungDevUS (http://www.twitter.com/SamsungDevUS).

Recent Posts
Announcing the Gear VR Developer Program (../../../blog/announcing-the-gearvr-developer-program.html)

Exciting New Speakers just Announced for GMIC SV 2014! (../../../blog/excitingnew-speakers-just-announced-gmic-sv-2014.html)

Nuance and Samsung Arm Developers with Innovation and Tools for the Connected
Lifestyle (../../../blog/nuance-samsung-arm-developers-innovation-tools-connectedlifestyle.html)

Win-Win: Using the Gear 2 as a Second Screen (../../../blog/win-win-using-gear-2second-screen.html)

Develop Samsung Gear and Android Apps with the Tizen IDE for Wearable (../../../blog
/develop-samsung-gear-android-apps-tizen-ide-wearable.html)

2015 samsungdevus.com (http://www.samsung.com/us/samsungdeveloperconnection/index.html)

App Showcase (../../../app-showcase.html)

Events (../../../events.html)

Developer Resources (../../../developer-resources.html)

Blog (../../../blog.html)

Privacy (../../../privacy.html)

Sign Up (../../../sign-up.html)