Create a light that turns on as you approach using Playmaker

In this article, I create ‘a light that turns on when you approach and goes out when you get away’ by using Playmaker.
You can create not only light but also a variety of gimmicks by applying how to create an object that triggers action according to the distance.

Sample

You can taste the sample space from STYLY GALLERY.
Sensor light

You can download the Unity project introduced in this article from here:
STYLY-Unity-Examples

Preparation

Firstly, download the sample project from Github and open it with Unity.
This time, we use the ‘Sensor light’ folder in STYLY_Examples.
STYLY-Unity-Examples

This sample project requires PlayMaker (Note that PlayMaker is a paid asset).
Unity Asset Store Playmaker

How to make a light that turns on when you get closer

In this time, we make ‘a light that turns on when you approach and goes off when you get away’.
We program the logic by using Playmaker. The outline of the logic is as follows.

① When the player approaches, it makes the transition to the ‘lighting’ state

② When the player gets away, it makes the transition to the ‘lights-out’ state.

The whole layout全体設計図

The whole layout

Create Spotlight

Firstly, create a light.
Right-click on the Hierarchy window. Select ‘Light > Spotlight’ to create a Spotlight and name it ‘Sensor light’.

スポットライトの作成

Create Spotlight

To make objects cast shadows when the light illuminates them, set ‘Shadow Type’ to ‘Hard Shadow’ and ‘Render Mode’ to ‘Important’ (Due to the specification of STYLY, the shadows are not drawn correctly unless you set ‘Render Mode’ to ‘Important’).

Then, set ‘Intensity’ to ‘0’ as we need to turn the light off at the beginning of the Scene.
Now, the light has been completed.
Drag the created ‘Sensor light’ into the Project window to convert it into a Prefab.

ライトの設定

The setting for the light

Create a transition to switch the state according to the distance

Next, create a transition that switches the state according to the distance between the player (i.e. the camera) and the light.
The outline of the logic is as follows.

① FInd the camera in the Scene by ‘Find game object’ and store it in a variable.

② Acquire the distance between the camera and the light by ‘Get Distance’.
③ Make the state transition when the distance exceeds (falls below) a certain threshold by using ‘Float Compare’.

Step 1: Prepare State for Setup

With ‘Sensor light’ selected, right-click on Playmaker Editor and select ‘Add FSM’ (You can open Playmaker Editor by selecting ‘Playmaker > Playmaker Editor’ from the menu bar).

FSMの作成

Create FSM

Rename the created ‘State1’ to ‘Setup’ and add the ‘Find game object’ action to it.
Use ‘Action Browser’ to add an action.
After opening Action Browser, use the search box to find the action and add it to ‘Setup’.

アクションの追加

Add Action

◆「Find game object」

Set ‘With Tag’ to ‘Main Camera’.
Next, click ‘Store’ and select ‘New variable…’. Then, name the new variable ‘Main Camera’.
Now the action finds the right-hand controller in the Scene and stored it in the ‘Main Camera’ variable.

Find Game Objectの設定

Set up ‘Find Game Object’

Step 2: Prepare ‘ON’ State and ‘OFF’ State

Next, right-click on Playmaker Editor and add two States by selecting ‘Add States’.
Rename one to ‘OFF’ and the other to ‘ON’, and add two actions, ‘Get Distance’ and ‘Float Compare’, to each State.

Stateの追加

Add States

After adding the actions, set up each action as follows.

◆ ‘Get Distance’

Click the ‘Target’ drop-down and select ‘Specify Game Object’.
When the field to specify an object appears, press the double-line button on the right to specify a variable.
Then, specify the ‘Main Camera’ variable created earlier.
Click ‘Store Result’ and select ‘New variable…’. Name the new variable ‘Distance between cam & light’.

In this time, the distance between the camera and the light needs to be measured and updated constantly, so check the ‘Every Frame’ box.
It has set up the action so that the distance between the camera and the light is stored in the ‘Distance between cam & light’ variable.

Get Distanceの設定

The setting for ‘Get Distance’

◆ ‘Float Compare’

Click the ‘Float 1’ drop-down and select ‘Specify Game Object’.
When the field to specify an object appears, press the double-line button on the right to specify a variable.
Then, specify the ‘Distance between cam & light’ variable created earlier.

In the ‘Float 2’ field, enter the distance where the light is turned on or off. You can enter the value as you like. I set it to ‘5’ here.

In this case, the distance needs to be evaluated constantly, so check the ‘Every Frame’ box (Up to this point, the same settings apply to both the ‘OFF’ State and the ‘ON’ State).

◇ The setting for the ‘OFF’ State

  •  Specify the event for ‘Less Than’ to make it transition to the ‘ON’ State when ‘Float 1’ ( the distance between the camera and the light) becomes smaller than ‘Float 2’ (The distance where the light is turned on or off).
  •  Click ‘Less Than’ and select ‘New variable…’. Then, name the new variable ‘Switch’.

◇ The setting for the ‘ON’ State

  •  Specify the event for ‘Greater Than’ to make it transition to the ‘OFF’ State when ‘Float 1’ (the distance between the camera and the light) becomes greater than ‘Float 2’ (The distance where the light is turned on or off).
  •  Click ‘Greater Than’ and select the ‘Switch’ variable created earlier.
Float Compareの設定

The setting for ‘Float Compare’

Step 3: Connect States to create the transition

Right-click ‘Setup’ and select ‘Add Transition > FINISHED’ to add the ‘FINISHED’ event.
When dragging it by the mouse, an arrow appears. Connect the arrow to the ‘OFF’ State.

Now, the ‘Setup’ State makes the transition to the ‘OFF’ State after its action is executed.

Stateを繋いで遷移を作る

Connect States to create the transition

Next, right-click the ‘OFF’ State and select ‘Add Transition > Switch’ to add the ‘Switch’ event.
Connect it to the ‘ON’ State with drag and drop.
Now, the ‘OFF’ State makes the transition to the ‘ON’ State when the distance between the camera and the light becomes smaller than the threshold.

Similarly, add the ‘Switch’ event to the ‘ON’ State and connect it to the ‘OFF’ State.
Now, the “ON’ State makes the transition to the ‘OFF’ State when the distance between the camera and the light becomes greater than the threshold.

Stateを繋いで遷移を作る

Connect States to make the transition

Add Action to control the light

Use the ‘Set Light Intensity’ action to control the light.
We add ‘Set Light Intensity’ to both ‘OFF’ and ‘ON’ States.

  •  Add ‘Set Light Intensity’ action to each State.
  •  Leave ‘Game object’ with its default, ‘Use Owner’.
  •  Set ‘Light Intensity’ to 0 for the ‘OFF’ State, and set it to 1 for the ‘ON’ State.

Now, the light turns on/off when the flashlight turns on/off.

Set Light Intensityの設定

The setting for ‘Set Light Intensity’

Add sound effect

Step 1: Attach sound file

In order to generate the sound effect when the light turns on/off, add actions so that the sound effect is generated when the transition to the ‘ON’ or ‘OFF’ State is triggered.
This time, I prepared two sound files to play different sounds for ‘ON’ and ‘OFF’.

Firstly, add two ‘Audio Source’ components to ‘Sensor light’.

Audio Sourceコンポーネントの追加

Add the ‘Audio Source’ component

Attach the ‘ON’ sound file to one ‘Audio Source’ and the ‘OFF’ sound file to the other ‘Audio Source’.
Uncheck the ‘Play On Awake’ box and move the slider towards the ‘3D’ side for each ‘Audio Source’.

Audio Sourceコンポーネントの設定

The setting for the ‘Audio Source’ component

Step 2: Add Actions to the ‘ON’ and ‘OFF’ States

Next, we add the action to both ‘OFF’ and ‘ON’ States.

  •  Add the ‘Audio Play’ action to each State.
  •  Leave ‘Game object’ with the default, ‘Use Owner’, and attach the sound file to ‘One shot clip’

Now, the sound effect is generated when the flashlight turns on or off.

Audio Playの設定

The setting for ‘Audio Play’

Step 3: Make the sound effect not generated at the beginning

In this state of the transitions, the ‘Audio Play’ action generates the sound effect when the ‘Setup’ State makes the transition to the ‘OFF’ State at the beginning.
We need to rearrange the transitions to avoid it.

Firstly, add two actions, ‘Get Distance’ and ‘Float Compare’, to the ‘Setup’ State.
Apply the same setting as the ‘OFF’ State, to those actions.

アクションの追加

Add actions

Then, Set ‘Transition Event’ of ‘Setup’ to ‘Switch’ and rearrange the transitions as shown in the image below.
Now, the sound effect is not generated at the beginning of the Scene.

遷移の組み替え

Rearrange the transitions

Upload to STYLY

To use the created gimmick in STYLY, convert the created ‘Controller_Flashlight’ into a prefab and upload it.
This article explains more about how to upload an asset from Unity to STYLY.

 

How did you find this tutorial? This method of triggering an action according to the distance is useful to make various gimmicks.
Referring to this article, please try making a gimmick to trigger an action according to the distance, by yourself.