Overview

This document describes how to change the appearance of a Screen Message inside of Unity. This same process can be used for any Motive Screen included in the Motive SDK. This allows you to customize the look of the UI screens for your VR experience.

Screen customizations will include:

• The background image

• Fonts and font colors

• The border colors

Note: The text of a Screen Message is dynamically populated from Storyflow. More information on how that works can be found in the Knowledge Base in the Screen Message Resource section.

Locate the Screen Message Prefab

You will need to have installed the Motive SDK into your Unity project.

1. In the Project window, open the Motive folder and follow this path: Motive > Apps >VR >Prefabs > UI :

Open

2. Open the Default VR UI Prefab. The Scene window will look something like this:

Open

The Hierarchy will contain a number of elements and prefabs. Under Default UI Canvas there are three main sections

• Playables - The screens used for Playable Content resources

• Error - The screens for Error messages

• Admin - The screens for the Motive Menu, the VR Editor and other Admin functions

Any of these screens can be customized.

3. In the Playables section, locate Default Playable Screen Message and expand it:

4. Locate and highlight the Screen Message in the Scene window by doing the following:

   1. In the Hierarchy Window, select Default Playable Screen Message

   2. Click inside the Scene window

   3. Press 'F' on the keyboard

The Screen Message window will now be selected and centered in the Scene window. It may be stacked on another screen. You can adjust its position for now to make the results of your editing easier to see.

The Screen Message will look like this before any changes are made:

Background Appearance

The appearance of the background can be modified by selecting the Background element shown in the picture below:

The Inspector window will then display the properties of the background. Find the Image section in the Inspector window.

• Source Image - Change this image to customize the background of the Screen Message

• Color - Controls the outer border color of the Screen Message:

Fonts & Font Colors

The font and font color can be changed in the same way. In this example, we show how to change the font and font color of the Title of the Screen Message. The same steps can be followed for any text on this or any other screen.

1. In the Hierarchy window, expand and select Title Text:

2. In the Inspector window find the Text section:

The font related settings are under the Character section. The text color settings are below the Paragraph settings. You can change these values and see the result in the Scene window in the Screen Message title bar.

As you can see, there are other font and text settings which can be modified in this same section.

Border Color

There are three places to change the color of the border for a Screen Message. Change all three to the same color for a consistent look:

A. The outer boarder color setting

B. The inner Title Bar Border color setting

C. The inner Button Border color setting

Outer Border Color Setting

1. In the Hierarchy window, select Default Playable Screen Message > Container > Background:

2. Find the Image section in the Inspector window

3. Modify the Color field to change the color of the outer border:

Inner Border - Title Bar

1. In the Hierarchy window, select Default Playable Screen Message > Container > Title Bar > Border:

2. Find the Image section in the Inspector window

3. Modify the Color field to change the color of the outer border:

Inner Border - Button

1. In the Hierarchy window, select Default Playable Screen Message > Container > Button > Border:

2. Find the Image section in the Inspector window

3. Modify the Color field to change the color of the outer border:

Related Articles

Walkthroughs