懐中電灯

Create a flashlight with Light object on Unity

In this article, I explain how to create ‘a flashlight you can turn on and off’ with Playmaker.
Once you understood how to trigger an action by using the trigger of the controller, you can also apply it to various gimmicks.

In addition, I recommend this as an introduction to Playmaker.

完成イメージ

The completion image

Sample

You can taste the sample space from STYLY GALLERY.
The Night Museum

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

Preparations

Firstly, download the sample project from Github and open it with Unity.
In this tutorial, we use the ‘Flashlight’ folder in STYLY_Examples.
STYLY-Unity-Examples

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

Create flashlight and let the player hold it

This time, we make ‘a flashlight that is turned on by pulling the trigger of the controller and turned off when releasing it’.
We build up the logic by using Playmaker.

The outline of the logic is as follows.

① When loading the scene, let the player’s controller hold the flashlight.

② When pulling the trigger, make the transition to the ‘lighting’ state.

③ When releasing the trigger, make the transition to the ‘switched-off’ state.

Overall design layout

全体設計図

Overall design layout

Create flashlight

Firstly, create a flashlight that you let the player hold when loading the scene.

Right-click in the Hierarchy window and select ‘Light > Spotlight’ to create a Spotlight. Then, name it ‘Flashlight’.

Spotlightの作成

Create Spotlight

The ‘Rotation’ value for the X-axis has been set to ’90’ by default. Please set it to ‘0’.
You need to modify the properties of the Spotlight because its range is too short and its lighting angle is too narrow for a flashlight.
I set ‘Range’ to ’15’ and ‘Spot Angle’ to ’38’ here (you can adjust them as you like).

RangeとSpot Angleの設定

The setting for ‘Range’ and ‘Spot Angle’

To cast the shadows when the flashlight illuminates objects, set ‘Shadow Type’ to ‘Hard Shadow’ and ‘Render Mode’ to ‘Important’ (Due to the specification of STYLY, the shadows won’t be drawn correctly unless you set ‘Render Mode’ to ‘Important’).

Now the flashlight has been completed.
Drag ‘Flashlight’ you created into the Project window to convert it into a prefab.

影の設定

The setting for the shadows

Let the player hold the flashlight when playing the scene

Next, create an empty object in the scene and build up the logic sequence.
The outline of the logic sequence is as follows.

① Find the controller in the scene by ‘Find game object’.
② Aquire the 3D coordinates of the controller by ‘Get Position’.
③ Aquire the angle of the controller by ‘Get Rotation’.
④ Make ‘Flashlight’ you created with ‘Create Object’ earlier appear at the position of the controller.
⑤ Set ‘Flashlight’ as the child object of the controller by ‘Set Parent’ and make it follow the controller.

Right-click in the Hierarchy window and select ‘Create Empty’ to create an empty object. Name it ‘Controller_Flashlight’.
Then, we are going to build up the logic sequence with Playmaker.

空のオブジェクトを作成

Create an empty object

Open Playmaker Editor, right-click in the window and select ‘Add FSM’ (You can also open the Playmaker window by selecting ‘Playmaker > Playmaker Editor’ in the menu bar).

FSMの作成

Create FSM

Rename the created ‘State1’ ‘SetUp’ and add five actions, ‘Find game object’, ‘Get Position’,  ‘Get Rotation’, ‘Create Object’ and ‘Set Parent’.

Use ‘Action Browser’ to add an action.
After opening Action Browser, find the five actions, ‘Find game object’, ‘Get Position’, ‘Get Rotation’, ‘Create Object’ and ‘Set Parent’, by using the Search box and add them to ‘SetUp’.

アクションの追加

Add actions

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

◆ ‘Find game object’
Enter ‘Controller (right)’ in the ‘Object Name’ field.
Next, click ‘Store’ and select ‘New variable…’. Then name it ‘Controller’.
Now this object can find the right-hand controller in the scene and store it in the ‘Controller’ variable.

Find Game Objectの設定

The setting for ‘Find Game Object’

◆ ‘Get Position’
Click the ‘Game object’ dropdown and select ‘Specify Game Object’.
It brings up the field to specify the object. Click the double-line button on the right to specify the variable.
Then, specify the ‘Controller’ variable you created earlier.

Click ‘Vector’ and select ‘New variable…’. Then, name it ‘Controller Position’.
Now the 3D coordinates of the controller in the scene are stored in the ‘Controller Position’ variable.

Get Positionの設定

The setting for ‘Get Position’

◆ ‘Get Rotation’
Click the ‘Game object’ dropdown and select ‘Specify Game Object’.
It brings up the field to specify the object. Click the double-line button on the right to specify the variable.
Then, specify the ‘Controller’ variable you created earlier.

Click ‘Euler Angles’ and select ‘New variable…’.  Then, name it ‘Controller Rotation’.
Now the 3D coordinates of the controller in the scene are stored in the ‘Controller Rotation’ variable.

Get Rotationの設定

The setting for ‘Get Rotation’

◆ ‘Create Object’
Specify the ‘Flashlight’ prefab created earlier, in the ‘Game object’ field.

Specify the ‘Controller Position’ variable in the ‘Position’ field.
Specify the ‘Controller Rotation’ variable in the ‘Rotation’ field.

Click ‘Store Object’ and select ‘New variable…’. Then, name it ‘Created Flashlight’.
It makes the flashlight appear at the position of the controller in the scene and stored the object in the ‘Created Flashlight’ variable.

Create Objectの設定

The setting for ‘Create Object’

◆ ‘Set Parent’
The purpose of this Action is ‘to set the flashlight created in the scene as the child object of the controller and make it follow the controller’.

Click the ‘Game object’ dropdown and select ‘Specify Game Object’.
Then, press the double-line button on the right to specify the variable and specify ‘Created Flashlight’ created earlier.

Next, set up ‘Parent’.
Press the double-line button on the right to specify the variable and select ‘Controller’.

It has set the Flashlight created in the scene as the child object of the controller so that it follows the controller.

Set Parentの設定

The setting for ‘Set Parent’

Detect ‘Pull’ and ‘Release’ of the trigger by Global Event

By using two global events, ‘Global_TriggerPressDown_R’ and ‘Global_TriggerPressUp_R’, you can detect ‘pull’ and ‘release’ of the trigger.

The ‘Global_TriggerPressDown_R’ event’ is activated when the trigger of the controller is ‘pulled’ in the STYLY scene, and the ‘Global_TriggerPressUp_R’ event is activated when the trigger is ‘released’.

Let’s create those two global events.
On the ‘Events’ tab, create the events with the names, ‘Global_TriggerPressDown_R’ and ‘Global_TriggerPressUp_R’.
Note that it won’t work correctly if you misspelt even a single character for the event name.

グローバルイベントの追加

Add global events

Set the trigger to switch on/off the flashlight

Firstly, create a new State with Playmaker Editor and name it ‘OFF/Waiting Trigger R’.
You need to trigger the transition to the ‘OFF/Waiting Trigger R’ state after executing the ‘SetUp’ action.

Right-click ‘SetUp’ and select ‘Add Transition > FINISHED’ to create the ‘FINISHED’ event.
When dragging it, an arrow appears. Connect the arrow to ‘OFF/Waiting Trigger R’.

Now, it makes the transition to the ‘OFF/Waiting Trigger R’ state after executing the ‘SetUp’ action.

遷移の作成

Create the transition

Next, make a logic so that you can switch on and off the flashlight by using the trigger.
The outline of the logic is as follows.

① Make the transition to the ‘lighting’ state when the ‘Global_TriggerPressDown_R’ event is triggered.
② Make the transition to the ‘switched-off’ state when the ‘Global_TriggerPressUp_R’ event is triggered.

To implement those sequences, we are going to set transitions as shown in the image below.

遷移の完成イメージ

The completion image – transitions

  • Right-click ‘OFF/Waiting Trigger R’ and select ‘Add Grobal Transition > Global_TriggerPressUp_R’.
  • Right-click ‘OFF/Waiting Trigger R’ and select ‘Add Transition > Global_TriggerPressDown_R’.
  • Create a new State and name it ‘ON’.
  • When dragging ‘Global_TriggerPressDown_R’, an arrow appears. Connect it to ‘ON’.

Now you have created the loop that makes the transition to the ‘ON’ state when pulling the trigger and the ‘OFF’ state when releasing the trigger.

After that, all you need is to add actions to turn on and off the light for each state.

Add the ‘Set Light Intensity’ action to both the ‘OFF/Waiting Trigger R’ state and the ‘ON’ state.
Select ‘Created Flashlight’ for ‘Game object’ and set ‘Light Intensity’ to ‘0’ for ‘OFF/Waiting Trigger R’ and ‘1’ for ‘ON’.

It completes the flashlight.

OFF/Waiting Trigger Rの設定

The setting for ‘OFF/Waiting Trigger R’

ONの設定

The setting for ‘ON’

Add sound effects

You can synchronize the sound effect with the timing when the flashlight is switched on or off by adding actions so that the sound effect is triggered when making the transition to the ‘ON’ or ‘OFF/Waiting Trigger R’ state.

Firstly, attach ‘Audio Source’ to ‘Flashlight’. This time, I prepared a sound effect, ‘Switch’.
Prepare a sound file and attach it by dragging it into ‘Flashlight’.
Uncheck the ‘Play On Awake’ box of the attached ‘Audio Source’, and move the ‘Spatial Blend’ slider towards the ‘3D’ side.

Audio Sourceのアタッチ

Attach ‘Audio Source’

After finishing the setting, press the ‘Apply’ button next to ‘Prefab’ at the top of the Inspector window to save the changes of the prefab.

変更をプレハブに保存

Save the changes to Prefab

Next, we are going to add an action to the ‘Controller_Flashlight’ State.

  • Add the ‘Audio Play’ action to the ‘ON’ State.
  • Select ‘Created Flashlight’ for ‘Game object’ and attach ‘Switch’ to ‘One shot Clip’.

Now, the sound effect is triggered when the flashlight is turned on (To trigger the sound effect when the light is turned off, you also need to add the ‘Audio Play’ action to ‘OFF/Waiting Trigger R’).

Audio Playの設定

The setting for ‘Audio Play’

Dim the scene

You could dim the scene by deleting the directional light, but it cannot darken the scene completely.
If you want to make it even darker, modify the setting for the ambient light.

The article below explains how to do this in detail.

Import into STYLY

To use the created gimmick in STYLY, convert the created ‘Controller_Flashlight’ into a prefab and upload it to STYLY.

This article explains how to upload an asset from Unity to STYLY in detail:

 

How did you find this article?
Once you mastered how to make an item by using Playmaker, you can apply it to various gimmicks.

Referring to this article, please try creating your original items.