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

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  

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.

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.  

Create the button to teleport

Create a button in Unity

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. Add ‘Rigidbody’. Check ‘Is Kinematic’ in the Rigidbody component.

 

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.

  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.

  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.

  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 ‘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.

 

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.

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.   The next article – Apply PostProcessing after the teleportation