HTC Vive, HTC Vive, Masanori Takano, playMaker, Unity,
ワープ移動完成イメージ

The completion image –  teleportation

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

View the sample asset by WebEditor

View the sample asset by WebEditorLaunch the 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 create a new STYLY account >>
Click here

 

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.

mayaでのモデリング

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.

VIVEコントローラのレーザーポインタを使う

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.

Unityでインポート

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.

ColliderとRigitbodyの設定

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.

Cubeの追加

Add a Cube.

 

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

BoxColliderの削除

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

FSMの追加

Add FSM.

 

Rename State1 ‘wait’.

State1をWaitにする

Rename State1 ‘wait’.

 

Add a new State.

Stateを追加

Add a State

 

Add a new Event.

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.

Transitionの設定

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.

新しくStateを追加する

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.

Warppositionの作成

Create ‘Warpposition’.

Delete the ‘Box Collider’ component.

Colliderの削除

Delete ‘Collider’.

 

The setting for Check Camera

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

Check Cameraの設定

The setting for ‘Check Camera’.

 

Create animation to move camera by PlayMaker in Unity

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

STYLYへアップロード

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.

2点間の位置を比較して距離を取得する

Calculate the distance between the two positions.

 

Move camera

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

TRIGGER EXIT追加

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.

Translateの追加

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.

Editorで配置

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

Masanori Takano

牧場厩務員→家具職人→大工を経て現在はフリーランスの3DCGアーティスト

Share this article

Shares
Facebook Twitter Google+ Pinterest hatebu

About STYLY

STYLY is a cloud-based service for creating high quality,beautiful VR spaces that doesn’t require any coding. By using STYLY, creators can express their imaginations indefinitely and build a variety of virtual spaces. Through these spaces, we can share experiences that are unachievable in the real world.