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.
- 1 View the sample asset by WebEditor
- 2 Sample
- 3 Model the button to teleport
- 4 Create the button to teleport
- 4.1 Create a button in Unity
- 4.2 Create a stand for the button
- 4.3 The implementation of Playmaker
- 4.4 Create the assets for the origin and the destination to teleport
- 4.5 The setting for Check Camera
- 4.6 Get Object Name of Asset
- 4.7 Get ‘Warpposition’ by ‘Find Game Object’
- 4.8 Get the position by the ‘Get Position’ Action
- 4.9 Calculate the distance between the two positions by ‘Vector3 Subtract’
- 4.10 Move camera
- 4.11 Place assets in STYLY Editor
View the sample asset by WebEditor
※If you have your STYLY account, you can view the sample asset created in this article by WebEditor. If you don’t, create a new STYLY account and then press the button above.
You can experience the sample space in STYLY GALLERY.
To teleport, pull the trigger with the button touched with the right controller.
You can download the Unity project used in this article.
Firstly, model a button.
The shape is a simple cube.
Make two cubes, the one for appearance and the one for collision detection.
Delete the top face of the cube for collision detection.
We use the laser from the controller to detect the collision.
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.
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.
Check ‘Is Kinematic’ in the Rigidbody component.
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.
Delete the ‘Box Collider’ component added to the Cube by default.
Convert it into a Prefab at this state.
The implementation of Playmaker
With the Prefab selected, select ‘Add FSM’.
Rename State1 ‘wait’.
Add a new State.
Add a new 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.
Select Add Transition > Custom Event > Global_TriggerPressDown_R.
Add ‘Trigger Event’ to State1.
Set Trigger to ‘On Trigger Enter’.
Set ‘Send Event’ to ‘Global_TriggerPressDown_R’.
Create a new State and connect State1 to it.
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.
Delete the ‘Box Collider’ component.
The setting for Check Camera
Create States between ‘START’ and ‘wait’ to check VR 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.
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.
Get ‘Warpposition’ by ‘Find Game Object’
Add the ‘Find Game object’ Action.
Paste the character string copied above in the ‘Object Name’ box.
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’.
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.
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.
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.
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.