3.1 - Comfort and Accessibility

When the scene loads, it can be a little jarring to just appear in a new world. It’s generally good to fade into new environments.

1. Make a new Screen Space Canvas GameObject to fade in from:

• Right-click in the Hierarchy window, then select UI > Canvas.
• Rename it “Fade_Canvas”.

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

• In the Fade_Canvas GameObject, in the Canvas component, set the Render Mode property to Screen Space - Camera.
• Set the Render Camera property to the Main Camera GameObject.

3. Make the canvas black:

• Right-click your Fade_Canvas GameObject and select UI > Image.
• In the Image GameObject’s Image component, set the Color property to black.
• In the Rect Transform component, set the Scale property’s X and Y values to a large number (for example, 100) to make sure the canvas covers your whole field of view.

4. Make the canvas appear directly in front of the Main Camera GameObject and in front of all other GameObjects:

• In the Canvas component, set the Plane Distance property to 0.1.
• Set the Order in Layer property to 1.

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

Now that you have the black canvas set up, you need to fade from it on scene load.

1. Allow the canvas and all of its elements to fade:

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

2. Make an event that detects when the scene has loaded:

• In the Hierarchy window, add an empty GameObject and rename it “Scene Loader”. It will hold your scene loading events.
• Add an On Scene Load component to the Scene Loader GameObject.

3. Fade in from black on scene load:

• On the Scene Loader GameObject, in the On Load event, select the Add (+) button to add a new function.
• Assign the Fade_Canvas GameObject.
• Open the No Function dropdown and select the FadeCanvas > StartFadeOut () function.

4. Hide the black image in the Scene view by default:

• Set the Canvas Group component’s Alpha property 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.

In order to add some settings, you’ll add a new panel that can be accessed from the main menu panel.

1. Add a new settings button:

• In the Hierarchy window, right-click the Welcome Background GameObject and select UI > Button - TextMeshPro to add a button.
• Rename it “Settings Button”.
• In the Image component, set the Source Image property to Icon_Gear.
• Delete the default Text in the Inspector window so that it has no text on it.

• Resize and reposition the button so it fits nicely on the menu.

2. Create a new settings screen:

• In the Hierarchy window, duplicate the Welcome Background GameObject.
• Rename the copied GameObject “Settings Background”.
• Temporarily disable the Welcome Background GameObject so you can only see the Settings Background GameObject for easier editing.

3. Add placeholder content to the settings screen:

• Delete the Button and Welcome Text GameObjects from the Settings Background GameObject.
• Replace the contents of the panel with three placeholder Text GameObjects (“Setting 1” / “Setting 2” / “Setting 3”)
• Add a UI > Toggle GameObject next to each setting, deleting the default text that is generated by the toggle.
• You might want to parent each Toggle to it’s related Text GameObject to group them together.

Note: Use TextMeshPro Text for the labels instead of the default Text label that comes with the toggle.

4. Update the Settings buttons:

• In the Settings Background GameObject, change the name of the Settings Button to “Close Button”.
• In the Gear icon’s Image component, change the Source Image property from Icon_Gear to Icon_Close.

5. Allow the user to go back and forth between these menus:

• In the Settings Button GameObject’s Button component’s On Click property, enable settings screen and disable the welcome screen.
• In the Close button’s On Click event, enable the settings screen and disable welcome screen.

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

• In the XR Origin (VR) GameObject’s On Button Press component, add a new action that disables the settings screen.
• Enable the welcome screen and disable the settings screen.

You should now be able to access the Settings menu from a gear icon in the main menu, which has three placeholder toggle settings. You should also be able to return to the welcome panel from the settings by pressing a Close button.

One of the easiest ways to increase accessibility is allowing for more ways to navigate the environment. To do this, you’ll allow the user to enable or disable snap turning.

1. Replace the placeholder setting:

• 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, select the Add (+) button to add a new action.
• Assign the Snap Turn Provider to the Object slot, since it contains the Snap Turn Provider component.
• Open the No Function dropdown and select GameObject > SetActive.

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.

Another setting that can drastically improve accessibility is the ability to grab GameObjects at a distance using the NearFarInteractor.

1. Set how the toggle should appear by default:

• In the Toggle component, enable or disable the Is On property depending on whether you want distance grabbing enabled by default.
• Change the text on the toggle to "Distance Grab" to make the setting clear to users.

2. Ensure your GameObjects are grabbable:

• On each GameObject with an XR Grab Interactable component, confirm that the Interaction Layer Mask includes the Default layer so they can be grabbed.

3. Assign your NearFarInteractor:

• In the Hierarchy window, select the GameObject that contains the Near-Far Interactor component (often part of the hand/controller setup).
• Attach the ToggleNearFarAttach script to a GameObject (for example, the same one or an organizer GameObject).
• In the script’s Near Far Interactor box, drag in the NearFarInteractor reference.

4. Link the Distance Grab toggle to switch modes:

• In the Toggle component, in the On Value Changed property, select the Add (+) button to add a new action.
• Assign the GameObject that holds the NearFarModeToggle script to the Object box.
• Open the No Function dropdown and select NearFarModeToggle > SetFarAttachMode(bool).
• Make sure to select the version under Dynamic bool so the toggle’s value gets passed in.

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

New functionality:

• Fade in from black
• Teleportation fading
• Settings menu

New concepts and skills:

• VR comfort
• VR accessibility

Next lesson:

• Optimization

If you want to further develop your skills, explore new concepts, and improve your project, check out some of the optional extension activities below.

Each one is tagged as [Easy], [Medium], [Difficult], or [Expert] and will also include a [Requires Programming] tag if some coding is required.

1. Add voiceover narration [Easy]

Add audio narration that plays at the start of your scene, reading the text on the main menu:

• Use the OnSceneLoad script to trigger this.

2. Add a closed captions setting [Medium]

Add closed captions to improve audio accessibility:

• For ambient sound like the fireplace, add closed captions to indicate what the sound is at the sound’s location.
• Bonus: Have the closed caption “billboard” towards the user, so that it’s always facing towards the user and is therefore always readable (use the LookAtPlayer script from the _Course Library > Scripts > Actions folder or write your own script).
• Bonus: For your TV, use a video with words in it and add closed captions that go along with the words of the video (the Unity-shape-the-world video provided has voiceover) [Requires programming].

3. Add a continuous movement setting [Medium]

Add a setting to toggle on and off continuous movement:

• Use the same technique you did to toggle snap turning.
• You will need to add a Continuous Move Provider component and a Continuous Turn Provider component to the XR Rig.
• Bonus: You could have a single toggle or dropdown that alternates between (a) continuous movement and turning vs (b) snap turning and teleporting.