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)
Click Window > Package Manager > click top left “packages” and select Unity Registry
Search for XR Interaction ToolKit and install. Confirm all following prompts which will restart Unity
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)
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
Edit>Project Settings>Preset Manager then type in “Right” and “Left” to the left of the appropriate Preset input field
In the Hierarchy window add XR > XR Origin (Action Based)
Add an “Input Action Manager” Component to the XR Rig
Add to the action assets list the “XRI Default Input Actions” asset
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.
