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. In the Project window, open the Motive folder and follow this path:
Motive → Apps → VR → Prefabs → UI
Open the Default VR UI prefab. The Scene window will look something like this:
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.
In the Playables section, locate Default Playable Screen Message and expand it.
Locate and highlight the Screen Message in the Scene window by doing the following:
In the Hierarchy Window, select Default Playable Screen Message
Click inside the Scene window
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.
In the Hierarchy window, expand and select Title Text.
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.
Important to note: The text is for Screen Messages is populated dynamically from Storyflow. It will use these settings to display the text. There is no need to change the text in the Unity project as it will not be visible to the user.
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.
The outer boarder color setting
The inner Title Bar Border color setting
The inner Button Border color setting
Outer Border Color Setting
In the Hierarchy window, select Default Playable Screen Message → Container → Background
Find the Image section in the Inspector window. Modify the Color field to change the color of the outer border.
Inner Border - Title Bar
In the Hierarchy window, select Default Playable Screen Message → Container → Title Bar → Border
Find the Image section in the Inspector window. Modify the Color field to change the color of the outer border.
Inner Border - Button
In the Hierarchy window, select Default Playable Screen Message → Container → Button → Border
Find the Image section in the Inspector window. Modify the Color field to change the color of the outer border.