Skip to main content

XRCC Tutorial - Crime Scene

Overview​

In this tutorial, we'll guide you through on how to build a mini crime mystery VR experience, where we'll have the player hold a camera, find and take pictures of some evidence in order to reconstruct the events happened at the scene.

Warning: Photosensitive seizure

This tutorial project contains visual effects, including flashing lights and rapid changes in brightness, which may trigger photosensitive epilepsy in some individuals.

If you are sensitive to flashing lights or have a history of seizures, please proceed with caution.

Techniques Covered​

What you'll learn after this tutorial:

  • How to make and equip handheld tool in XRCC
  • How to use start / end contact to simulate ray cast from camera
  • How to use sound, image and light objects in XRCC to enhance storytelling
  • How to use string operation to build simple UI in XRCC

Advanced challenge:

  • How to create a police siren light with sine function

Resources Download​

You can download the project files for this tutorial in two formats: a starter project for step-by-step guidance and a completed project for your reference.

Download Project

Download Project Files for the Crime Scene Tutorial

Planning: What You'll Build​

This tutorial will guide you through building a game that:

  1. Drops the player into a crime scene.
  2. Asks them to take photos of all evidences using a camera.
  3. Pieces together a coherent story.
Tips

You are encouraged to make adjustments to the project as you see fit — part of the fun in game-making is bringing your unique concepts to life!

Step 1: Set Up the Camera​

Add the Flash Visual Effect​

We know that a real life camera flashes briefly when taking a photo. In XRCC, we can achieve this by turning the camera on, adding a small delay, and then turning it off.

  1. Select Camera > Flashlight.

  1. Switch to the Behavior tab.

  1. Go to Groups then click "+" icon to add new behavior group.

  1. For the new behavior group, set Toggle Action to true and rename it as Flash. We have just added a Flash action to the camera flashlight. Then, implement the flash logic with the following nodes:

Equip the Camera​

To allow the player to hold the camera and take pictures, we need to utilize the Equip node in XRCC.

  1. Click on the sky so that your inspector now focuses on the Main scene.

  1. Switch to the Behavior tab
    • Implement the equip camera logic with the following nodes:
      • Start -> Show Tool (enable=false) -> Equip (position=vector3(-.0635, .04, -.01), targetEntity=RightHand, targetItem=Camera)

Checkpoint

Run your project. Check that:

  • The camera mesh is equipped to your hand in XRCC.

Tips

It is a good practice to run your project once in a while to check if you have done anything wrong, so that you can fix it now rather than later.

Step 2: Set Up the Clipboard and UI​

After setting up the camera, it'd be nice if our game has a way to tell the player how many remaining photos that still need to be taken in the crime scene.

Add the Clipboard Mesh​

  1. Open the Asset Panel and select the clipboard mesh at 3D Model > clipboard.fbx, then click Add Asset.

  1. Select the clipboard mesh, click the link icon, then hover your cursor to Stand and left-click to parent the clipboard mesh under Stand.

  1. Adjust the clipboard mesh to top of the Stand, as long as it's at a place where the player can see the clipboard clearly, it'll be fine. In the picture below, we have set the clipboard's position to (0, 0.5, -0.3), rotation to (0, 0, 0), scale to (1.5, 0.45, 1.5).

Display Number of Remaining Photos​

  1. Click on the sky so that your inspector now focuses on the Main scene. Then:
    • Switch to Behavior tab.
    • Open up Variable panel at the top-left corner of canvas. Click on Add Variable to add a number variable then rename it as Remaining. For this project, we will have 3 pieces of evidence so set its default value to 3.

  1. Add two text objects into the scene and parent them both to the clipboard mesh clipboard.fbx. Rename one as Remaining and another as Label.

  1. Set Label text object's text to "Photo(s) Left", font size to 5. Set Remaining text object's text to "0", font size to 40.

  2. Adjust the two text objects to align with the clipboard. Any alignment of the two text objects would be fine as long as they look like writings on the clipboard.

    • In the picture below, we have set:
      • Remaining text object - position to (0, 0.0600, 0.2), rotation to (270, 0, 0), scale to (2.2222, 2.2222).
      • Label text object - position to (0, 0.0600, 0.5750), rotation to (270, 0, 0), scale to (2.2222, 2.2222).
    • Feel free to style the font to your likings.

  1. Select Remaining text label in the scene and open up its Behavior tab. Implement the number display logic with the following nodes:

Checkpoint

Run your project. Check that:

  • The clipboard displays the number of remaining photos.

Display Number of Remaining Photos (UI Screen Alternative Approach)​

note

This section is an alternative approach that utilizes the UI Screen instead of the clipboard to display the number of remaining photos.

This is an optional route.

  1. (Optional) Add a 2D text object in the scene and set its size as 15. Rename it as Remaining Text.

  1. (Optional) Open its Behavior tab. Implement the following nodes:

  1. (Optional) Go back to the scene and switch to Entity tab. Then tick UI Screen to enable the UI entity.

  1. (Optional) Switch back to Item tab. Parent Remaining Text under UI Screen.

  1. (Optional) For Remaining Text, adjust its position, rotation and scale so that when we run the game, the player can see the UI text on the screen.

Checkpoint (Optional)

If you have chose to use the UI screen approach, check that:

  • You can see the UI text on the top right corner of your game.

Step 3: Set Up the Evidence​

We have provided 3 evidence items in the crime scene. Let’s implement these so players can interact with them.

Add the Pointer Mesh​

  1. Open Asset Panel > Special Objects. Then add an Empty Cube into the scene and rename it as Pointer. This object will act as a ray for the camera.

  1. Parent Pointer under the Camera mesh. Set Pointer's position to (0, 0, 0.1), rotation to (0, 0, 0), scale to (0.02, 0.02, 200), offset to (0, 0, 0.5).

Implement the Collision Check​

One of the evidence items will be the huge train in the scene. By utilizing the contact triggers in XRCC, we can know when the player is pointing their camera toward the train.

  1. Select the Train in the scene.

  1. Open the train's Behavior tab. Create a Pointing boolean variable and set its default value to false.

  1. Add a new Behavior Group (Toggle action to false) and rename it to CollisionCheck.
    • Implement the collision check logic with the following node:

note

Remember to set the target of both Start Contact and Stop Contact as Pointer.

  1. Let's add an outline to the object when Pointing is true. Switch to Main Behavior Group of the same object. Implement the logic as shown in the picture below:

Implement the Capture Behavior​

  1. Select the Train and open the Behavior tab. Create a new Captured boolean variable and set its default value to false.

  1. Add a new Behavior Group and rename it as Capture.

  1. When the player points their camera to an evidence item that has not been captured yet, we will allow them to take a picture of it. Switch to Capture Behavior Group and implement this logic:

  1. When the player has not captured an evidence yet, we want to highlight them to give them a hint. Switch to Main Behavior Group and implement this logic:

Checkpoint

Run your project. Check that:

  • The evidence is outlined when camera points to them.

Step 4: Combine Everything​

At this stage, the only thing left to do is to combine every key components to finish our game.

Add Sound Effect​

Add in the right sound effect can make the camera in our VR game feels a lot more lively.

  1. Select Train in the scene and open its Behavior tab. Switch to CollisionCheck Behavior Group and implement the logic shown in picture below.
note

Set both the loop and spatial fields of Play Sound node to False.

  1. For the Play Sound node, click on the magnifying glass icon then select the camera_focus.wav.

  1. Switch to Capture Behavior Group and add Play Sound to the end of our previous behavior.
note

Set both the loop and spatial fields of Play Sound node to False.

  1. For this Play Sound node, click on the magnifying glass icon then select the camera_capture.wav.

Call the Camera Flash​

  1. At Capture Behavior Group, add a Call Action node after the Player Sound node.

  1. For the Call Action node, select Flash action under Flashlight. Then click Select Item.

Show the Evidence Tag​

To remind the player that they've taken the photo of an evidence, we will place a tag in front of it.

  1. At Capture Behavior Group, add another Call Action node after our previous behavior.

  1. For the Call Action node, select Show action under Tag 3. Then click Select Item.
note

For this tutorial, we have positioned the train to use Tag 3 in advance.

  1. We also have to subtract the remaining number of evidence by 1 when player captures a photo. Implement the logic shown below to update the number:

Checkpoint

Run your project. If you have followed the instructions correctly, you should be able to:

  • Point your camera to the train and (left click to) take a photo
  • Hear camera focus and capture sound effect (You'll need to plug in an earphone to test this)
  • See a tag appears after you've taken the photo
  • See the remaining number of evidence has been updated on clipboard

Show Images on Camera Screen​

Up until now, our camera doesn't really show anything on its screen. We can utilize Set Image node to display the result image on the camera screen.

  1. Select Camera > Image in scene.

  1. Open up the Behavior tab. Since building this part of the game is a bit redundant, you'll see that we have already prepared 3 actions in this object for setting 3 seperate evidence images. You'll only have to remember that we'll call these actions from other objects in the game.

  1. Select Train in the scene again and open up its Behavior tab. Go to Capture Behavior Group then add two Call Action nodes.
    • For the first one, set to "3" action under Camera > Image.
    • For the second one, set to "3" action under Camera > Text.

Checkpoint

Run your project. Check that when you (left click to) take photo:

  • The camera screen displays the result image

Extend the Behavior to All Evidence Items​

We have finished the behavior of one evidence. By duplicating objects and doing slight changes, we can extend the behavior to all 3 evidences: the train, bottles and body outline.

  1. Select Train in the scene. Duplicate the Train and rename it as Bottles.

  1. Set to 3D model of Bottles to a cube and set its color overlay to FFFFFF 0% (transparent). Then, adjust the position, rotation and scale of Bottles so that it covers the three bottles in the scene. This will be the "hitbox" of our bottles in the scene.

  1. Open up its Behavior tab. Go to Capture Behavior Group and modify the following node:
  • For the "Tag 3: Show" Call Action node, set target to Show action under Tag 2.
  • For the "Image: 3" Call Action node, set target to "2" action under Image.
  • For the "Text: 3" Call Action node, set target to "2" action under Text.

  1. Now do the same (from 1 to 3) for the body outline.

Checkpoint

Run your project. Check that:

  • You can take pictures of the train, bottles and body outline.
  • You can see the tag appears in front of the evidence.

Step 5: Create a Thanks For Playing Message​

Finally, let's create a Thanks For Playing message for player when the game has ended.

  1. Add a 2D text object in the scene and rename it as Victory.

  1. Let's edit the text object so that it shows Thx for Playing (Or any messages you'd like to show e.g. Credits: Made by XXX).

  1. Switch to its Behavior tab. We can implement the display logic with the following nodes:

Checkpoint

Run your project. Check that:

  • Thanks for Playing message is shown when the remaining number of photos reaches 0

Advanced Challenge: Police Siren​

Challenge

This section requires understanding in trigonometry maths.

In this section, we are going to utilize sine function to build a police siren lights. This subtle environmental light can add another layer of immersion to our game.

  1. Add a light object to the scene and rename it as Police Siren Light. Then, position it near the end of track inside the tunnel.

  1. Set light type to Point, set intensity to 2 and set range to 20.

  1. Open up the Behavior tab. Add two number variables - MaxRange and Frequency, then set their default values to 20 and 1.5 respectively.

Did you know...

Police siren lights typically flash at a frequency of 1 - 4 Hz

  1. By utilizing the sine function, we can implement the periodic flash behavior of a police siren light in this way:

  1. We can also implement the red and blue colors of the siren. Add the following nodes after the previous behavior:

Mission Complete​

Congratulations! You have completed this tutorial. Take what you have learnt from this tutorial and go on to create other amazing VR experience in XRCC.