Warpアイキャッチ

STYLY Editorで使用できるワープシステムの作り方_part1

ワープ移動完成イメージ

ワープ移動完成イメージ

この記事ではSTYLYでのVR空間内で特定の位置に一瞬でワープするアセットの作り方を紹介します。

ワープする元の位置とワープ先をSTYLY Editor内で自由に決めることができるようにします。

VRのコントローラで特定のボタンに触れている時にトリガーを押すと指定した場所にワープする仕組みを作っていきます。

有料アセットのPlaymakerを使用していきます。

Unity Asset Store Playmaker

サンプルアセットをWebEditorで確認する

サンプルアセットをWebEditorで確認するLaunch the WebEditor

※STYLYに登録していれば、本TIPSで作成したサンプルアセットをWebEditorで確認することができます。
アカウント未登録の場合、新規登録を行ってから再度、本ボタンをクリックしてください。

アカウント登録はこちらから
Click here

 

サンプル

STYLY GALLERYからサンプル空間を体験できます。
右コントローラーがボタンに触れているときにトリガーを押すとワープします。
WarpSystemSample

記事で紹介しているUnityプロジェクトのダウンロードはこちらからできます。
WarpSystem_Sample

 

ボタンのモデリング

最初にボタンになる部分のモデリングをします。

形状はシンプルなキューブです。

見せる用のキューブと当たり判定用のキューブを2つ作ります。

mayaでのモデリング

mayaでのモデリング

コライダー用のキューブは上のフェースを1枚削除したものです。

 

当たり判定はコントローラから出ているレーザーポインタを使用します。

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

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

レーザーポインタはメニューが非表示ときには非表示になりますがRayは出ているので判定は取ることができます。

 

触るとワープするボタンを作る

Unityでボタンを作る

2種類のキューブをUnityでインポートしてヒエラルキーに配置します。

Unityでインポート

Unityでインポート

コライダー用のキューブ(WarpBoxCol)を親にして同じ位置に重ねます。

Mesh Colliderを追加してメッシュと同じ形状のColliderを作ります。

Rigidbodyも追加します。

RigidbodyのIs Kinematicにはチェックを入れておきます。

ColliderとRigitbodyの設定

ColliderとRigitbodyの設定

 

ボタンの台を作る

ボタンの台になる部分を作ります。

UnityのCubeを作成してボタンの台になるように幅や長さを調整します。

それを子要素に入れます。

Cubeの追加

Cubeの追加

 

CubeについているBox Colliderは削除しておきます。

BoxColliderの削除

BoxColliderの削除

 

この状態で一度プレハブ化しておきます。

プレハブにする

プレハブにする

 

Playmakerの実装

プレハブを選択した状態でAdd FSMを選びます。

FSMの追加

FSMの追加

 

State1をwaitに名前を変更します。

State1をWaitにする

State1をWaitにする

 

新しくStateを追加します。

Stateを追加

Stateを追加

 

新しくEventを追加します。

Eventの追加

Eventの追加

名前を”Global_TriggerPressDown_R”とします。

これで右コントローラのトリガーボタンが押されたことを取得できます。

 

State1のGlobal TransitionにTRIGGER ENTERを追加します。

Global Transitionの設定

Global Transitionの設定

 

Add TransitionのCustom EventからGlobal_TriggerPressDown_Rにします。

Transitionの設定

Transitionの設定

 

State1にTrigger Eventを追加します。

Trigger Eventの追加

Trigger Eventの追加

Triggerには”On Trigger Enter”

Send Eventには”Global_TriggerPressDown_R”を指定します。

 

新たにStateを作成してつないでいきます。

新しくStateを追加する

新しくStateを追加する

 

ワープ元とワープ先のアセットを作る

Cubeを作って名前をそれぞれWarpposition_A・Warpposition_Bとします。

Warpposition_Aをワープできる場所として使用し、Warpposition_Bの位置にワープするようにします。

これらもプレハブ化します。

Warppositionの作成

Warppositionの作成

Box Colliderを削除しておきます。

Colliderの削除

Colliderの削除

 

Check Cameraの設定

STARTとwaitの間にVRカメラをチェックするStateを作ります。

Check Cameraの設定

Check Cameraの設定

 

Create animation to move camera by PlayMaker in Unity

↑コチラの記事を参考にさせていただきましたのでこの記事での紹介は省きます。

アセットのObject Nameを取得する

WarppopsitionA,BのプレハブをSTYLYにアップロードします。

UnityからSTYLYにアセットをアップロードする方法
記事を読む

STYLYへアップロード

STYLYへアップロード

 

アップロードが出来たらMy Modelsを開きます。

画像を上で右クリックを押して”画像のアドレスをコピー”をします。

.pngの前の文字列がObject Nameになります。

それをコピーします。

アセットのアドレスを取得

アセットのアドレスを取得

 

Find game ObjectでWarppositionを取得する

Find game objectのActionを追加します。

Object Nameにコピーした文字列を貼りつけます。

Object Nameに貼りつける

Object Nameに貼りつける

それぞれWarpA・WarpBに格納します。

 

Get Positionで位置を取得する

取得したVectorをWarpAposition・WarpBpositionに格納します。

Get Positoin で位置を取得

Get Positoin で位置を取得

 

Vector3 Subtractで2点間の位置を比較する

BからAのVectorを引いて2点間の距離を取得します。

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

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

 

カメラを移動させる

waitにTRIGGER EXITをGlobal Transitionとして追加します。

TRIGGER EXIT追加

TRIGGER EXIT追加

 

State2に移動するためのアクションを追加します。

Global_TriggerPressDown_Rで右コントローラのトリガーが押されるとState2に遷移します。

Translateを追加してGame ObjectにはチェックカメラのStateで取得したcameraを

VectorにはSubtractしたあとのWarpBpositionを指定します。

Translateの追加

Translateの追加

 

STYLY Editorで配置する

配置するときはWarpposition_AとWarpButtonを同じ場所にします。
ボタンに触れているときに右コントローラのトリガーを押すとWarpposition_Bの位置に瞬間移動します。

Editorで配置

Editorで配置

 

 

UnityからSTYLYにアセットをアップロードする方法
記事を読む

 

この記事ではUnityのPlaymakerを使ってVRカメラを瞬間移動する方法を紹介しました。

わざわざアップロードしたアセットの名前を取得したりして面倒くさい感じになっていますが、

STYLY Editor上でワープ先を自由にレイアウトできるようにしたかったのでこのような仕様になりました。

STYLYでは別のシーンに遷移することはできませんが、ひとつのシーンに違う世界観のエリアを作って

ワープさせることでシーン遷移のような表現ができそうですね。

 

続きの記事 ワープした後にPostProcessingを適用する