Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Title: Comfort and Accessibility

Objective(s):
In this lab, you will learn how to reduce the risk of simulator sickness and increase the
inclusivity or your app, allowing it to be enjoyed by as many people as possible. By the
end of this lesson, your app will be more comfortable and accessible.
Module Code
By the end of this lab, you will be able to:
GD53002FP • Explain the importance of limiting a user’s field of view to reduce the risk of
simulator sickness, especially as it relates to locomotion.
• Recognize opportunities for improving accessibility in an app to make it more
inclusive, including motor, audio, visual, and cognitive accessibility.
• Modify a project to make it more comfortable or accessible to allow it to be
enjoyed by as many people as possible.

Tools, Equipment and Materials:

Duration 1 Personal Computer with Internet access
2 hours
2 Unity 2021.3 LTS
3 Oculus Setup
4 Quest 2 VR headset

1
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Instructions:

Step 1 – Create a black canvas for fading.

When the scene loads, it can be a little jarring to just appear in a new world. It is
generally good to fade into new environments.
Module Code
GD53002FP 1. Make a new Screen Space canvas to fade in from:

• In the Hierarchy, Create > UI > Canvas and rename it “Fade_Canvas”.

2. Make the canvas render directly in front of the camera:

• In the Canvas object, in the Canvas component, set the Render Mode to
Screen Space - Camera.
• Set the Render Camera property to your Main Camera.
Duration
3. Make the canvas black:
2 hours
• Right-click your Fade_Canvas object and create a UI > Image.
• Set the Color property to black.
• Set the X Scale and Y Scale properties to a large number (e.g. 100) to make
sure the canvas covers your whole field of view.
4. Make the canvas appear directly in front of the Main Camera and in front of all
other objects:

• In the Canvas component, set the Plane Distance to 0.1.

• Then set the Order in Layer to 1.

The black canvas should now completely cover the field of view when you run the
program.

2
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Step 2 – Fade in on scene load.
Now that you have the black canvas set up, you need to fade from it on scene load.
1. Allow the canvas and all its elements to fade:

• On the Fade_Canvas object, add a Canvas Group component and a Fade

Module Code Canvas component.
GD53002FP 2. Make an event that detects when the scene has loaded:

• In the Hierarchy, add an empty object and rename it “Scene Loader”. It will
hold your scene loading events.
• Add an On Scene Load component to the Scene Loader object.
3. Fade in from black on Scene Load:

• On the Scene Loader object, in the On Load event, click the + to add a new
Duration
function.
2 hours • Assign the Canvas_Fade object.
• Select the FadeCanvas > StartFadeOut () function.
4. Hide the black image in scene view by default:

• Set the Canvas Group component’s Alpha value to 0.

The scene should now appear to fade in from black when the scene loads. You can
test this using the reset scene UI screen you made.

3
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Step 3 – Teleporting with fade.
Another opportunity to improve player comfort through fading is during teleporting.
Typically, there is a short fade to reduce the illusion of movement (“vection”) when
teleporting and improve comfort.
1. Add fading functionality to your Teleportation Area (rug):
Module Code
• On your Rug prefab, remove the default Teleportation Area component and
GD53002FP
replace it with the custom Teleport Area With Fade component.
• At the bottom of the new component, assign the same Interaction Layer Mask,
Custom Reticle and Match Orientation properties to match the original
component.
2. Add fading functionality to your Teleportation Anchor (mats):

• Enter Prefab Mode on one of your mats to apply changes to all mats at once.
Duration • Remove the default Teleportation Anchor component and replace it with the
2 hours custom Teleport Anchor With Fade component.
Edit the new component’s properties to match the original component.
• Note: make sure that you have applied the changes to all mat prefabs or prefab
variants.

Your teleportation anchors and teleportation area should now quickly fade to black
when you teleport.

4
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Step 4 – Add a settings panel.
To add some settings, you will add a new panel that can be accessed from the main
menu panel.
1. Add a new settings button:

Module Code • In the Hierarchy, right-click Welcome Background object and select UI >
Button - TextMeshPro to add a button.
GD53002FP
• Rename it “Settings Button”.
• Set the Source Image property to the gear icon
• Delete the default Text so that it has no text on it.
• Resize and reposition the button so it fits nicely on in the bottom-right corner
of the menu.
2. Create a new settings screen:
Duration • In the Hierarchy, duplicate the Welcome Background object.
2 hours • Rename the copied object “Settings Background”
• Temporarily deactivate the welcome panel so you can only see the settings
screen for easier editing.
3. Add placeholder content to the settings screen:

• Replace the contents of the panel with three placeholder text objects (“Setting
1” / Setting 2” / “Setting 3”)
• Add a Toggle object next to each setting, deleting the default text that is
generated by the toggle.
• You may want to parent each text object to group them together.
• Note: Use TextMeshPro Text for the labels instead of the default Text label
that comes with the toggle.
4. Replace the settings gear icon with an “X” icon:

• In the Gear icon’s Image component, change the Source Image property from
Icon_Gear to Icon_Close.

5
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
5. Allow the user to go back and forth between these menus:

• In the Settings button’s On Click event, set the settings screen as active and
the welcome screen as inactive.

Module Code
GD53002FP

Duration
2 hours • In the Close button’s On Click event, set the settings screen as inactive and
the welcome screen as active.

6. Make the reset menu hide the settings menu when it appears:

• In the XR Rig’s On Button Press event, add a new action that disables the
settings screen.
You should now be able to access the Settings menu from a gear icon in the main
menu, which has 3 placeholder toggle settings. You should also be able to return to
the welcome panel from the settings by pressing a Close button.

6
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Step 5 – Add a snap turning setting.

One of the easiest ways to increase accessibility is allowing for more ways to navigate
the environment. You will allow the user to enable or disable snap turning.

Module Code 1. Replace the placeholder setting:

GD53002FP • Edit the first setting text to “Snap Turning”.

• In the Toggle component, make sure the Is On property is enabled, since Snap
Turning is enabled by default.
2. Link the toggle to the Snap Turn component:

• In the Toggle component, for the On Value Changed event, click the + to add
a new action.
Duration • Assign the XR Rig to the Object slot since it contains the Snap Turn provider
component.
2 hours • Select the Action Based Snap Turn Provider > enabled (Dynamic Bool)
function.
• Note: Make sure to select the “enabled” property that is a dynamic bool
(boolean) - this means that it will be affected dynamically by the state of the
toggle.

You should now have a functional check box that enables and disables snap turning.

7
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Step 6 – Add a distance grab setting.

Another setting that can drastically increase accessibility is the ability to grab
objects at a distance using rays.

Module Code
1. Set up how your setting should appear by default:

GD53002FP • In the Toggle component, enable or disable the Is On property.

• Change the text of the Toggle to “Distance Grab”.

2. Make sure all grabbable objects can be accessed on the same layer:
• In each object’s XR Grab Interactable component, make sure the Interaction
Layer Mask property includes the Default layer.

3. Give your rays the ability to change to a different set of layers:

Duration
• In the Hierarchy, select both the LeftHand Ray and RightHand Ray objects.
2 hours
• Add a Set Interaction Layer component to both objects.
• Set the Target Layer property to include the Default layer and the Raycasts
layer, which would allow them to grab objects.

4. Make the “Distance Grab” toggle trigger these target layers:

• In the Toggle component, in the On Value Changed event, click the + two
times to add two new actions (one for each hand).
• Assign the RightHand Ray to one object slot and the Lefthand Ray to the
other object slot.
• For both actions, select the SetInteractionLayer > ToggleTargetLayer
(Dynamic bool) function.
• Note: You must select the Dynamic bool option in the upper section of the list
in order to tie the function to the value of the toggle.

8
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications

Module Code
GD53002FP

Duration
2 hours

You should now have a toggle that enables and disables the ability to grab objects
with rays from a distance.

9
Copyright © ITE 2023
 Higher Nitec in Immersive Applications & Game

LABSHEET 3A
Module
Immersive
Applications
Summary
New Functionality:

• Fade in from black.

• Teleportation fading.
• Settings menu.
Module Code
New Concepts & Skills:
GD53002FP
• VR comfort.
• VR accessibility.

Submission

• Make sure your Unity Project folder is named as IndexNo_VR Room_[Your

Duration Name]
• Zip the Unity Project folder.
2 hours
• Submit on to MyConnexion.

- End -

10
Copyright © ITE 2023