How to make a teleporter on STYLY Editor #1

In this article, I will show how to create an asset to teleport to the specified point in VR space. The asset makes it possible to set the origin and the destination for teleportation in STYLY Editor as you like. We make a mechanism to teleport to the specified point by pulling the trigger with the specific button touched by VR controller. We use a paid asset, Playmaker. Unity Asset Store Playmaker


The completion image –  teleportation


You can experience the sample space in STYLY GALLERY. To teleport,  pull the trigger with the button touched with the right controller. TeleportSystemSample You can download the Unity project used in this article. TeleportSystem_Sample  

Model the button to teleport

Firstly, model a button. The shape is a simple cube. Make two cubes, the one for appearance and the one for collision detection.


Modelling work in Maya

Delete the top face of the cube for collision detection.   We use the laser from the controller to detect the collision.


Use the laser from VIVE controller.

Although the laser pointer is invisible when the menu is hidden, the Ray is still ‘cast’ so that it can detect the collision.  

Create the button to teleport

Create a button in Unity

Import two cubes created above and place them in the Hierarchy view.


Import to Unity.

Drag the cube for appearance(WarpBox) onto the cube for collider (WarpBoXCol). Add ‘Mesh Collider’ to make a Collider with the same shape as the mesh. Add ‘Rigidbody’. Check ‘Is Kinematic’ in the Rigidbody component.


The setting for Collider and Rigidbody


Create a stand for the button

Create a stand for the button. Create a Cube in Unity and adjust the width and length to make it look a stand for the button. Drag it onto ‘WarpBoxCol’ as a child.


Add a Cube.

  Delete the ‘Box Collider’ component added to the Cube by default.


Delete ‘BoxCollider’.

  Convert it into a Prefab at this state.


Convert it into a Prefab.


The implementation of Playmaker

With the Prefab selected, select ‘Add FSM’.


Add FSM.

  Rename State1 ‘wait’.


Rename State1 ‘wait’.

  Add a new State.


Add a State

  Add a new Event.


Add an Event.

Rename it ‘Global_TriggerPressDown_R’. It can detect the trigger button on the right controller being pulled.   Add ‘TRIGGER ENTER’ to State1’s Global Transition.

Global Transitionの設定

The setting for Global Transition.

  Select Add Transition > Custom Event > Global_TriggerPressDown_R.


The setting for Transition.

  Add ‘Trigger Event’ to State1.

Trigger Eventの追加

Add ‘Trigger Event’.

Set Trigger to ‘On Trigger Enter’. Set ‘Send Event’ to ‘Global_TriggerPressDown_R’.   Create a new State and connect State1 to it.


Add a new State.


Create the assets for the origin and the destination to teleport

Create two Cubes and rename them ‘Warpposition_A’ and ‘Warpposition_B’. We use ‘Warpposition_A’ as the origin to teleport from, and ‘Warpposition_B’ as the destination to teleport to. Convert them into Prefabs.


Create ‘Warpposition’.

Delete the ‘Box Collider’ component.


Delete ‘Collider’.


The setting for Check Camera

Create States between ‘START’ and ‘wait’ to check VR camera.

Check Cameraの設定

The setting for ‘Check Camera’. ↑I skip the details as I referred to the article above to configure them.

Get Object Name of Asset

Upload the Prefabs of ‘Warpposition_A’ and ‘Warpposition_B’ to STYLY. How to upload assets from Unity to STYLY: Read the article.


Upload to STYLY.

  Once you finished uploading them,  open ‘My Models’. Right-click on the image and select ‘Copy image address’. The character string without the extension, ‘.png’, is the Object Name. Copy it.


Get the address of the asset


Get ‘Warpposition’ by ‘Find Game Object’

Add the ‘Find Game object’ Action. Paste the character string copied above in the ‘Object Name’ box.

Object Nameに貼りつける

Paste the Object Name.

Set ‘Store’ so that each result is stored to the corresponding variable, WarpA or WarpB.  

Get the position by the ‘Get Position’ Action

Store the acquired Vector in the corresponding variable, ‘WarpAposition’ or ‘WarpBposition’.

Get Positoin で位置を取得

Get the position by the ‘Get Position’ Action.


Calculate the distance between the two positions  by ‘Vector3 Subtract’

Calculate the distance between the two positions by subtracting the ‘WarpApositon’ vector from the ‘WarpBposition’ vector.


Calculate the distance between the two positions.


Move camera

Add ‘TRIGGER EXIT’ to ‘wait’ as Global Transition.



  Add an Action to move to State2. ‘Global_TriggerPressDown_R’ triggers the transition to State2 when the trigger on the right controller is pulled. Add ‘Translate’ and set ‘Game Object’ to ‘camera’, which is obtained when the VR camera is checked by the States. Set ‘Vector’ to the ‘WarpBposition’ vector after the subtraction.


Add ‘Translate’.

Place assets in STYLY Editor

Place ‘Warpposition_A’ and ‘WarpButton’ at the same place. You can teleport to the ‘Warpposition_B’ position by pulling the trigger on the right controller with the button touched with the controller.


Place assets in STYLY Editor.

    How to upload assets from Unity to STYLY. Read the article.   In this article, I explained how to teleport VR camera by Playmaker. You might find it painful since we should upload some assets just to get the Object Name, for example. However, this approach is required to make a mechanism so that the user can change the destination in STYLY Editor. Although you cannot make the transition to another Scene in STYLY, you could make a similar expression by teleporting the viewer to a different area in the same Scene where you made a different atmosphere.   The next article – Apply PostProcessing after the teleportation