SAMSUNG DEVELOPERS US

(exercise-4-adding-functionality.html#)
HOME (../../../INDEX.HTML)

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

(EXERCISE-4-ADDING-FUNCTIONALITY.HTML#)
APP SHOWCASE (../../../APP-SHOWCASE.HTML)

EVENTS (../../../EVENTS.HTML)

BLOG (../../../BLOG.HTML)

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

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

EXERCISE 4: ADDING FUNCTIONALITY

Samsung Developers US (../../../index.html) > Developer Resources (../../../developerresources.html) > Gear VR (../../gear-vr.html) > Apps and Games (../apps-and-games.html) >
Exercise 4: Adding Functionality

With both scenes of your app built out, its now time to add some functionality to
the image viewer. This app uses a ray cast system, where a ray is triggered from the
camera and collides with an object. When the collision occurs, this will read out an
object name or tag that tells the system to carry out a specic event. In this app,
you will implement forward and back controls along with a image slideshow
function when the buttons are triggered.
In this exercise, you will learn how to:
Create a raycaster to trigger the buttons in the app
Create a reticle to target the button in the app
Create an object that manages user input, like clicking or tapping

Create an object that tells the app to cycle through different backgrounds when
a button is tapped
Create and implement object tags
Implement a script to dene image cycling properties, like duration and mode
Create an object that loads images onto the inverted sphere object
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 4.
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
3_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
3_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.
Add a Raycaster to the camera
1. Return to Unity and open the Main.unity le.
2. In the Hierarchy view, select the OVRCameraRig > TrackingSpace >
CenterEyeAnchor object.
3. Select Create > Create Empty Child.

4. In the Inspector view, change the name of the empty object to Raycaster.
5. Click the Add Component button and select Scripts > Raycaster. This will allow
you to cast a ray at a target.

Add a Reticle to the camera

6. In the Hierarchy view, select Create > 2D Object > Sprite.
7. Drag the New Sprite object onto the OVRCameraRig > TrackingSpace >
CenterEyeAnchor object to nest the object.

8. In the Inspector view, change the name of the sprite to Reticle.

9. Objects are sometimes placed in odd locations or difcult to place in an exact
location when added to a scene. In the Transform component, click the Gear
icon and select Reset. This will place the object at (0, 0, 0).

10. In the Project view, open the /Assets/Workshop/Textures folder and drag the
Reticle le into the Sprite Renderer > Sprite eld in the Inspector view.

11. In the Transform component, change the Position propertys Z value to 5. The
reticle should be placed directly in front of the slideshow button.
12. Change the Scale propertys X, Y, and Z values to 0.1.

13. Click the Add Component button and select Scripts > Reticle. This will use the
position of the reticle to direct the trajectory of the ray.
14. In the Reticle component, set the Pressed Color property to green.

15. Click the Play button to preview the scene. You should be able to see the white
reticle displayed in front of the slideshow button.
16. Click the Play button again to stop the preview.
Create the InputManager object
1. In the Hierarchy view, select Create > Create Empty.
2. In the Inspector view, change the name of the empty object to InputManager.
This object will be used to detect user input.
3. Click the Add Component button and select Scripts > Input Manager. When an
object is tapped in the application, the Is Pressed property will be toggled on
and off.

Create the AppManager object

1. In the Hierarchy view, right-click the InputManager object and select
Duplicate.
2. In the Inspector view, change the name of the InputManager (1) object to

AppManager. This object will be used to tell the system what to do when an

input is registered.
3. In the Input Manager component, select the target button next to the Script
eld. In the Select MonoScript window, locate and select the
ApplicationManager script.

When a user taps on one of the buttons, the background, or texture, will change.
Each of the three buttons in the scene will be tagged. This will tell the application
what to do when a button is tapped. For example, if the Button_Advance object is
tapped, the textures will cycle forward.
Dening object tags
1. From the menu, select Edit > Project Settings > Tags and Layers.
2. In the Inspector view, expand the Tags section.
3. Click the Add (+) button to add a tag. Set the value of the Tag 0 eld to
IncrementButton.
4. Add two more tags set to the following values:
Tag 1: DecrementButton
Tag 2: SlideshowButton
Note: The IncrementButton, DecrementButton, and SlideshowButton tags were created
specically for this workshop and you must use these tags in the app. If you misspell or
use different tags, the buttons in the app will not work.

5. In the Hierarchy view, select the Buttons > Button_Advance object.

6. In the Inspector view, change the Tag property to IncrementButton.

7. Next, change the Button_Slideshow objects tag to SlideshowButton and the

Button_Decrement objects tag to DecrementButton.
8. Save the scene.
Add the TextureCycler script
1. In the Hierarchy view, select the AppManager object.
2. In the Inspector view, navigate to the Application Manager component and
expand the Texture Object branch.
The Texture Object property tells the system to change the texture of a specic
game object. In this case, we want the texture of the Sphere_Inv object to change
every a button is clicked.
3. From the Hierarchy view, drag the Sphere_Inv game object onto the Element 0
eld.

4. In the Hierarchy view, select the Sphere_Inv object.

5. In the Inspector view, click the Add Component button and select Scripts >
Texture Cycler. This will tell the app the starting texture for the Main scene and
also sets a duration for each texture if the slideshow button is triggered.

Create the TextureLoader object

1. In the Hierarchy view, select Create > Create Empty.
2. In the Inspector view, change the name of the empty object to TextureLoader.
This object will tell the system what textures to load onto the AppManager
Texture Object (in this case, we are using the Sphere_Inv object).
3. Click the Add Component button and select Scripts > Texture Loader.
4. In the Texture Loader component, expand the MStartingTextures section.
When the texture on the App Manager Texture Object is ready to change, this
script will rst run through the MStarting Textures (by default, the Size is set to 1).
After running through the textures specied in the MStarting Textures, the
Texture Loader will begin loading in PNG and JPG les located in the MLocal
Storage Dir Path.
5. In the MStarting Textures section, change the Size property value to 3.

6. In the Project view, open the /Assets/Workshop/Textures folder. Here you will
see series of images with the 360 prex (e.g., 360_BritishColumbia.jpg).
Choose three of these images and drag them into the three Element property
elds.

7. In the Texture Loader branch, locate the MLocal Storage Dir Path eld and type
the path below, exactly as it is written. This will set a location for the app to look
for additional 360 images on your device, if they are available. In this case, the
app will look for a folder named Workshop in the root directory of your
device.

/mnt/sdcard/Workshop/

Note: You will need to add the Workshop folder to your device in order for this feature to
work. You can do this by opening the My Files app on your device, tapping on Device

storage > Menu > Create folder and adding the Workshop folder. If you have 360 images
you want to view in this app, you can simply add them to this folder and the app will
automatically look here for your images.
8. Save the scene.
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-4-adding-functionality.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-innovationtools-connected-lifestyle.html)

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

second-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 (/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)