EXERCISE 4: ADDING FUNCTIONALITY

Samsung Developers US (../../../index.html) > Developer Resources (../../../developer-resources.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, it’s 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 speci�c 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

HOME (../../../INDEX.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.HTML#)

SAMSUNG DEVELOPERS US(../../../INDEX.HTML)

🔎 (exercise-4-adding-functionality.html#)

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 de�ne 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.

Return to Unity and close the Build Settings window.1.

In the Project view, navigate to the /Assets/Workshop/Scenes/CatchUpScenes

folder and open the

3_Main.unity �le.

2.

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.

3.

In the Project view, navigate to the /Assets/Workshop/Scenes/CatchUpScenes

folder and open the

3_Splash.unity �le.

4.

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.

5.

Add a Raycaster to the camera

Return to Unity and open the Main.unity �le.1.

In the Hierarchy view, select the OVRCameraRig > TrackingSpace >

CenterEyeAnchor object.

2.

Select Create > Create Empty Child.3.

In the Inspector view, change the name of the empty object to Raycaster.4.

Click the Add Component button and select Scripts > Raycaster. This will allow

you to cast a ray at a target.

5.

Add a Reticle to the camera

In the Hierarchy view, select Create > 2D Object > Sprite.6.

Drag the New Sprite object onto the OVRCameraRig > TrackingSpace >

CenterEyeAnchor object to nest the object.

7.

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

Objects are sometimes placed in odd locations or dif�cult 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).

9.

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.

10.

In the Transform component, change the Position property’s Z value to 5. The

reticle should be placed directly in front of the slideshow button.

11.

Change the Scale property’s X, Y, and Z values to 0.1.12.

Click the Add Component button and select Scripts > Reticle. This will use the

position of the reticle to direct the trajectory of the ray.

13.

In the Reticle component, set the Pressed Color property to green.14.

Click the Play button to preview the scene. You should be able to see the white

reticle displayed in front of the slideshow button.

15.

Click the Play button again to stop the preview.16.

Create the InputManager object

In the Hierarchy view, select Create > Create Empty.1.

In the Inspector view, change the name of the empty object to InputManager.

This object will be used to detect user input.

2.

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.

3.

Create the AppManager object

In the Hierarchy view, right-click the InputManager object and select

Duplicate.

1.

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

2.

input is registered.

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.

3.

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.

De�ning object tags

From the menu, select Edit > Project Settings > Tags and Layers.1.

In the Inspector view, expand the Tags section.2.

Click the Add (+) button to add a tag. Set the value of the Tag 0 �eld to

IncrementButton.

3.

Add two more tags set to the following values:

Tag 1: DecrementButton

Tag 2: SlideshowButton

4.

Note: The IncrementButton, DecrementButton, and SlideshowButton tags were created

speci�cally 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.

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

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

Next, change the Button_Slideshow object’s tag to SlideshowButton and the

Button_Decrement object’s tag to DecrementButton.

7.

Save the scene.8.

Add the TextureCycler script

In the Hierarchy view, select the AppManager object.1.

In the Inspector view, navigate to the Application Manager component and

expand the Texture Object branch.

2.

The Texture Object property tells the system to change the texture of a speci�c

game object. In this case, we want the texture of the Sphere_Inv object to change

every a button is clicked.

From the Hierarchy view, drag the Sphere_Inv game object onto the Element 0

�eld.

3.

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

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.

5.

Create the TextureLoader object

In the Hierarchy view, select Create > Create Empty.1.

In the Inspector view, change the name of the empty object to TextureLoader.2.

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).

Click the Add Component button and select Scripts > Texture Loader.3.

In the Texture Loader component, expand the MStartingTextures section.4.

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 speci�ed in the MStarting Textures, the

Texture Loader will begin loading in PNG and JPG �les located in the MLocal

Storage Dir Path.

In the MStarting Textures section, change the Size property value to 3.5.

In the Project view, open the /Assets/Workshop/Textures folder. Here you will

see series of images with the “360” pre�x (e.g., 360_BritishColumbia.jpg).

Choose three of these images and drag them into the three Element property

�elds.

6.

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.

7.

/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.

Save the scene.8.

Build and run the application

From the menu, select File > Build Settings….1.

In the Build Settings window, make sure the Scenes In Build section lists the

following two �les in order:

2.

Workshop/Scenes/Splash.unity (0)

Workshop/Scenes/Main.unity (1)

Make sure the Platform is set to Android and the Texture Compression is set to

ETC2 (GLES 3.0).

3.

Connect your device to your machine via USB and click the Build & Run button.4.

In the Build Android dialog, give your APK �le a name and click Save.5.

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.

6.

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 ConnectionTerms and Conditions. (exercise-4-adding-functionality.html#modal-1)

CONNECT

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

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

Announcing the Gear VR Developer Program (../../../blog/announcing-the-gear-vr-developer-program.html)

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

Nuance and Samsung Arm Developers with Innovation and Tools for theConnected Lifestyle (../../../blog/nuance-samsung-arm-developers-innovation-tools-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)

Search

🔎

Latest Tweets

Recent Posts

©2015 samsungdevus.com (/us/samsungdeveloperconnection/index.html)

App Showcase (../../../app-showcase.html) Events (../../../events.html) Blog (../../../blog.html)

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

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