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
- 1 Sample
- 2 Model the button to teleport
- 3 Create the button to teleport
- 3.1 Create a button in Unity
- 3.2 Create a stand for the button
- 3.3 The implementation of Playmaker
- 3.4 Create the assets for the origin and the destination to teleport
- 3.5 The setting for Check Camera
- 3.6 Get Object Name of Asset
- 3.7 Get ‘Warpposition’ by ‘Find Game Object’
- 3.8 Get the position by the ‘Get Position’ Action
- 3.9 Calculate the distance between the two positions by ‘Vector3 Subtract’
- 3.10 Move camera
- 3.11 Place assets in STYLY Editor
Sample
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
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.
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 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.

The setting for Global Transition.
Select Add Transition > Custom Event > Global_TriggerPressDown_R.

The setting for Transition.
Add ‘Trigger Event’ to State1.

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.

The setting for ‘Check Camera’.
https://styly.cc/ja/tips/movecamera/ ↑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.

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 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 ‘TRIGGER EXIT’.
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