XR Unity Tutorial: Build Your Own VR Escape Room Experience

March 11 2022

Unityvirtual reality

I'd often ask our instructors what project a complete beginner at virtual reality development should tackle. Learning isolated scripts, tools, or switching between modelling objects while still learning the fundamentals of Unity game engine isn't efficient. And it's not fun either.
The one project I heard multiple times as a main recommendation is building a VR version of escape room. Real life escape rooms have been becoming popular in the last few years. They are great for birthday parties or company team building because teamwork is required to get out. When a person or team members walk into the room, they have to solve puzzles to get out.
Creating a digital immersive experience in the virtual world would follow the same goal - a user needs to find a way out of the room by interacting with the scenery.

-

Looking to play professional Virtual Reality Escape Rooms?

There’s no shortage of VR Escape Room Adventures. Check out the popular virtual reality escape games below.

  • Abode ↗ — a classic escape room game where you’re trying to find a way out of your cool cyberpunk apartment
  • Belko VR: An Escape Room Experiment ↗ — One of the first public VR escape room experiences on Steam. Even though the VR game was made in 2017, it still looks good today!
  • I Expect You to Die ↗ — a James Bond-themed VR experience where you’ll have to save yourself out of a burning car... which is trapped on an airplane. There’s also a Part 2 with 6 new mission!
  • Jungle Quest ↗ — You stumble upon a portal that leads you to a tropic mysterious wonderland. Now you need to find a way back!
  • Mission Sigma ↗ — Escape from a desolate skytower before the bomb explodes.
  • Sanctum ↗ — Investigate an abandoned monastery and try not to lose your soul while doing it.
  • Chernobyl ↗ — Travel back in history and prevent the nuclear disaster.
  • SVRVIVE: The Deus Helix ↗ — You’re a recruit whose mission is to obtain important helix pieces and save yourself from the aliens of the new world.

Some VR Arcades (think SandboxVR) also include a multiplayer VR Escape Room experience. Check out De-Composed by MirageVR in Canada, or book a session at Adventure Lab - a streaming VR with live actors. Into scary stuff? Check out House of Fear!

-

Building Your own VR Escape Room

For this tutorial, we’re going to build a prototype virtual reality experience using Unity. We won’t be focusing as much on the gameplay but rather just show you the technical steps to build a VR escape room experience by yourself.
If by any chance you would prefer a video walkthrough, you can visit an on-demand VR workshop here (keep in mind that the projects and steps aren’t exactly the same however the principles are).

Project Assets https://github.com/UsmanSMir/repo-CS-VR-Escape-Room-Blog

Prerequisites

Download and install the Unity Hub, and Unity Editor. For VR experience connect your VR headset however, you can also run the emulator inside Unity.

-

Technical Steps

Start an URP Project (Video 1)

  • Open Unity Hub
  • Then click new
  • Choose a name and directory
  • Select a template that mentions URP (Universal Render Pipeline supporting the most performant graphics)
  • Then click create

Create a New Scene and Import Assets (Video 2)

  • Click File > New Scene > Basic > Create
  • Create a New Folder in your Project Window in the Assets Folder
  • Bring in the assets to your project
    • Room
    • Chest
    • Flash Light
    • Key
    • Hands
    • Numbers

Set up XR Interaction ToolKit (Video 3)

1. Click Window > Package Manager > click top left “packages” and select Unity Registry

2. Search for XR Interaction ToolKit and install. Confirm all following prompts which will restart Unity

3. Go back to the package manager and select “XR Interaction Tool Kit” then expand Samples > Import Starter Assets (Optionally import Simulator for non VR Headset testing)

4. Via the Project Window go to Samples>XR Interaction Toolkit > 2.0.0 > Starter Assets then select the asset “XRI Default Left Controller” (as well as right) and in the Inspector click “Add to ActionBasedController default” at the top of the inspector window

5. Edit>Project Settings>Preset Manager then type in “Right” and “Left” to the left of the appropriate Preset input field

6. In the Hierarchy window add XR > XR Origin (Action Based)

7. Add an “Input Action Manager” Component to the XR Rig

8. Add to the action assets list the “XRI Default Input Actions” asset

9. Edit>Project Settings>XR Plug-in Management and enable desired platforms

Add The Direct Interactor To Our Hands (Video 4)

  • Add hand models
    • In the Hierarchy window expand XR Origin > Camera Offset then select a hand
    • From your Hands folder drag and drop the model into the “Model Prefab” property of the XR Controller Scripts (Attached to the Left and Right Hand Controller GameObjects)
  • Remove the Ray Interactors, XR Interactor Line Visual and line renderer components from the controller GameObjects
  • Add colliders to the controller objects and adjust the size/radius/center properties to fit (In this example we have added sphere colliders but a box collider may fit better) (You could also use Mesh Colliders but make sure to enable the convex checkbox if you do)
  • Enable the “Is Trigger” checkbox of each collider
  • Add Direct Interactor scripts to each controller

Prepare Room (Video 5)

  • Reset the Position of the XR Rig by right clicking on the Transform Component and click Reset
  • Bring the Room model into the Scene by dragging and dropping it from the project window into our Sceneour Hierarchy window
  • Reset the position of the Room
  • Testing at this point should allow you to look and move around in the scene in VR

Add Interactions (Videos 6)

  • Bring in Key model and FlashLight models into the scene
  • Scale Down and position the models in the room
  • Add Colliders to the Key, the FlashLight, the Room and the Door Objects
    • Add a Mesh Colliders to each and make them Convex (Except the room) (You can add simple colliders to some instead such as a capsule collider to the Flashlight)
  • Add a XR Grab Interactable Script to the Key and FlashLight

Add Color to the Key and FlashLight(Videos 7)

  • Create 4 materials by right Clicking in your Project window and selecting create then material
  • Choose the colors you’d like to create for the Key, The FlashLight Handle, it’s bulb and its switch

First Puzzle (Hidden Key) (Videos 8)

  • Bring in Book Model Asset and its texture
  • Place Book into scene and scale and position on top of the Key
  • Add a XR Grab Interactable Script and a mesh collider that is convex
  • Position Key under Book

Create Hidden Number Clue (Video 9)

  • Navigate to the Numbers Folder in which there is a model for every number from 0 to 9
  • Position and scale number models onto the wall or book etc(Customizable)
    • The numbers you choose is also customizable, here we use 7,1 and 9
  • Create a New Layer Called Numbers by clicking on the Layer drop down on the top right and selecting Add Layer
  • Enter “Numbers” into an empty input field
  • Select all the numbers in the scene and change their Layer to “Numbers”
  • Select the “Directional Light” in your Hierarchy window and click on the dropdown besides “Culling Mask” and unselect “Numbers” (This will prevent the directional light from creating shadows from any model in the “Numbers” layer and it won’t provide any lighting to them
  • Select all the numbers again and in their Renderer component alter the “Cast Shadows” Property in the “Lighting” section to “shadows Only” (At this point they will be invisible as there is no lighting applied on them and their only method to be rendered is via the shadows they cast)

Setup FlashLight and Hide in Chest (Video 10)

  • Create Spot Light as a child of the FlashLight
  • Alter the light color property
  • Move spotlight forward in front of the lens of the flashlight
  • Increase the outer spot angle property
  • Bring in Chest model into the scene, scale, rotate and position to where you would like
  • Position FlashLight into Chest
  • Disable XR Grab Interactable Script on Flash Light (This will be enabled at runtime when the chest is unlocked)

Setup Chest Animator (Video 11)

  • Create an Animator Controller
  • Double click the animator asset to open an Animator window
  • Create an empty state in the controller and name it “Closed”
  • Expand the Chest model asset in the project and drag and drop the “Animation clip file” into the animator window

  • This will create another “State” change its name to “Open”
  • Go to the “Parameters” tab in the Animator window and click the + symbol and add a “Trigger” parameter and name is “Open”

  • Right click on the “Closed” state and create a Transition to the Open state
  • Select the white transition line and uncheck the “Has Exit Time” property in the inspector
  • Click the + symbol under the “Conditions” section and it should default to “Open” as a condition

  • Select the chest and drag and drop the “Animator Controller” asset into the Inspector

Add Tag and Trigger (Video 12)

  • Add a Box collider component to the chest
  • Then click the Edit Collider button to alter its position and size to fit the position of the lock

  • Enable the Is Trigger checkbox
  • Select the Key and click the “Untagged” dropdown and select “Add Tag”
  • Click the + symbol to add a new Tag and name it “Key”
  • Select the key again and click “Untagged” once again but this time select our new tag “Key”

Program Chest Opening (Video 13)

  • Create a C# Script in your project. Right click in the project window and select Create then C# Script and name it UnlockChest
  • Add the following code to your script

This code is taking advantage of Unity Events which will allow you to alter its functionality a lot in the Unity inspector.

  • Select the chest and attach this script it
  • Click the + symbol that appears under the Unity event property in the inspector
  • Drag and drop the Chest into the None field

  • Click the No Function Dropdown and select the Animator option and choose SetTrigger(string)
  • Type in “Open” into the Input field
  • Click the + symbol again and drag and drop the Flashlight into the None Field
  • Click the No Function Dropdown and select the XR Grab Interactable option and choose bool enabled and tick on the checkbox

Using Code To Unlock (Video 14)

  • Bring Numbers into the scene
  • Position on door and scale/rotate as needed
  • Make the numbers Children of the Bone object (Grandchild of the Room object such that as the door opens the numbers will swing with it)
  • Add Colliders to the Numbers
  • Add a Rigidbody on each controller (OnTriggerEnter Function needs it to work)
  • Enable the “IsKinematic” check box on those Rigidbbody components as well as disable the “Use Gravity” check box
  • Tag each controller as “Player”

Prepare Door Animator (Video 15)

  • Create Animator
  • Set up state machine
  • Apply to Room GameObject
  • Create an Animator Controller and name it Door
  • Double click the animator asset to open an Animator window
  • Create an empty state in the controller and name it “Locked”
  • Expand the Room model asset in the project and drag and drop the “Animation clip file” into the animator window

  • This will create another “State” change its name to “Unlocked”
  • Go to the “Parameters” tab in the Animator window and click the + symbol and add a “Trigger” parameter and name is “Unlock”

  • Right click on the “Closed” state and create a Transition to the Open state
  • Select the white transition line and uncheck the “Has Exit Time” property in the inspector
  • Click the + symbol under the “Conditions” section and it should default to “Unlock” as a condition

  • Select the Room and drag and drop the “Animator Controller” asset into the Inspector

Pressing Keys (Video 16)

  • Create the KeyPad Script

  • Attach KeyPad script to each number
  • Add an AudioSource component to the Bone and disable the “Play On Awak” property
  • Select all the numbers and reference the Bone in the Audio Source Property
  • Then Drag and drop all the appropriate Audio Clips into the Sound exposed variables
  • Go through each Number and enter the appropriate value for the “thisKey” exposed variable in the inspector

Now We’re done! Let’s test it out!

Notes:
You may want to adjust your Hand colliders to allow for easier use of smaller Keypads

What's Next?

That’s it! You’ve made it. Just kidding. The path for a developer is long and it never ends. If you like this sort of project and you’re looking to acquire the fundamental skills for AR or VR development check out our blog and or our workshops page regularly.

If you are interested in getting into the field of XR, make sure to check out our 10-week XR Development with Unity and our 10-week Interaction Design and Prototyping for XR.

-

Interested in XR Unity development or learning about AR and VR?

Take a look at our course content and syllabus.

Download the XR Development with Unity Syllabus

WRITTEN BY

Usman Mir

Lead Instructor, AR/VR Developer

Receive our newsletter to stay on top of the latest virtual reality and augmented reality info.