Unity VR Flashlight

Let’s make a flashlight in VR!

To follow along with this tutorial in Unity, first download the VR template I provide here.

Once downloaded and booted up, you’ll be a be able to download the specific resources needed for this project found here. Just add them to the VR template project and you’ll be ready to follow along!

Fixing the skybox

If we’re going to use a flashlight, it helps to be in a dark environment. Inside of the resources that we’ve added to the project, we should find a skybox material that we can drag and drop into the scene. I’ll go over lighting and skyboxes in more depth in a later tutorial, but for now, our scene should look like this.

Adding a Flashlight to the Scene

Included in the scene is a model for a flashlight. Lets go ahead and drag that into the scene.

This is a simple game object comprised of multiple cylinders with a few materials slapped on top of it. Now that we have our flashlight in the scene, let’s start make it omit light!

Adding light!

There are a few lights to pick from with Unity, but for the flashlight, the Spotlight is the perfect choice. To add it to our flashlight object, do the following.

Open up the prefab for the flashlight
Right click in the hiegharchy and go to Light -> Spotlight
Transform
- Position: (0, .15, 0)
- Rotation: (-90, 0, 0)
Light
- Range : 10
- Spot Angle: 70
- Intensity: 5
- Locate the Flashlight Tutorial folder and drag the Flashlight-Cookie sprite into the empty box where it says cookie.

To explain some of this, the range is how far out our flashlight reaches, the spot angle helps change the angle of our light from the start to end, the intensity will amplify the light emitted and the cookie sprite will help put a mask on our light so it doesn’t just come out as a plain white light.

We’ve now added light to our flashlight! If we save our prefab and go back to our scene, we should be able to see the light coming from our flashlight.

Making our light Grabbable

Now we need to be able to grab out light and have it be held in the correct position.

Add Component – XR Grab Interactable
Add an Empty Object as a child of Flashlight and name it “AttachPoint”
On XR Grab Interactable
- Expand Colliders, click plus sign and drag the Body component into Element 0.
- Drag the AttachPoint to the Attach Transform empty slot.
On AttachPoint
- Rotation (270, 0, 90)

If we remember from previous tutorials, the attach point transform can be used to adjust how we want our objects to attach to our hands when we grab things. That’s why we adjust the rotation on the AttachPoint.

The Y Axis should be pointing up in the direction we want our object to point up.
The X Axis should be pointing towards where we want the palm of our hand.
The Z Axis we want to have facing in the direction we want our object to face.

The flashlight is the same in all directions so it shouldn’t matter what is considered “up”. We do want the flashlight to point forward in our hand, which is why we adjust the Z axis to point forward. (If your arrows don’t look like this, make sure to change your editor view from global to local.

Lights on/off with sound

Let’s finish off our flashlight by adding on/off and sound to our flashlight.

Add the Flashlight script from the resources to the Flashlight object
Add Component Audio Source
On Audio Source
- Play On Awake = False
- Spatial Blend = 3D
On XR Grab Interactable
- On Interactable Events
  - Select Entered -> Flashlight -> LightOn
  - Select Exited -> Flashlight -> LightOff
On SpotLight
- Turn Light component to off

Now when we walk up and grab the Flashlight, it will turn on and play a sound. When we let it go, it will turn off and play a sound again.

Here’s a picture of the script. It’s pretty simple, so hopefully you don’t mind me not explaining. The picture should help put into context the things that we changed in our flashlight object.

Conclusion

There you have it! A flashlight just in time for October!