【Unity/Playmaker】STYLY Studioで使用できるワープシステムの作り方

ワープ移動完成イメージ

ワープ移動完成イメージ

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

ワープする元の位置とワープ先をSTYLY Studio内で自由に決めることができるようにします。 VRのコントローラで特定のボタンに触れている時にトリガーを押すと指定した場所にワープする仕組みを作っていきます。 有料アセットのPlaymakerを使用していきます。

Playmakerのインストールはこちらから

サンプル

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

 

記事で紹介している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の追加

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

State1をWaitにする

  新しくStateを追加します。

Stateを追加

  新しくEventを追加します。ボタンを入力して、インタラクションを実装します。

ボタン入力に関しては、以下の記事を参照します。

最初に、Eventsタブから、Global_TriggerPressDown_Rと入力し、イベントを追加しましょう。

 

Eventの追加

Eventの追加

名前を”Global_TriggerPressDown_R”とします。 これで右コントローラのトリガーボタンが押されたことを取得できます。   State1のGlobal TransitionにTRIGGER ENTERを追加します。

TRIGGER ENTERを利用したTRIGGER EVENTに関しては、以下の記事を参照します。

Global Transitionの設定

Global Transitionの設定

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

Transitionの設定

Transitionの設定

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

新しくStateを追加する

新しくStateを追加する

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

Cubeを作って名前をそれぞれWarpposition_A・Warpposition_Bとします。 Warpposition_Aをワープできる場所として使用し、Warpposition_Bの位置にワープするようにします。 これらもプレハブ化します。

Warppositionの作成

Warppositionの作成

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

Colliderの削除

Colliderの削除

 

Check Cameraの設定

カメラ情報を取得します。

カメラ情報を取得するには、以下の記事を参照します.

以下のようにStateを設定します

Stateを作成し、名前をCheckVIVEに。FINISHEDのイベントを付け加えて、waitのStateにつなげます。

 

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

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

UnityからSTYLYにアセットをアップロードする方法は以下の記事をご参照ください。

STYLYへアップロード

STYLYへアップロード

  アップロードが出来たらMy Modelsを開きます。 画像を上で右クリックを押して”画像のアドレスをコピー”をします。 .pngの前の文字列がObject Nameになります。 それをコピーします。

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

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

 

Find game ObjectでWarppositionを取得する

waitのStateに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点間の距離を取得します。

 

カメラを移動させる

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 Studioで配置する

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

Editorで配置

STYLY Studioで配置

    UnityからSTYLYにアセットをアップロードする方法は、以下の記事を参考にしてください。

この記事ではUnityのPlaymakerを使ってVRカメラを瞬間移動する方法を紹介しました。 わざわざアップロードしたアセットの名前を取得したりして面倒くさい感じになっていますが、 STYLY Studio上でワープ先を自由にレイアウトできるようにしたかったのでこのような仕様になりました。 STYLYでは別のシーンへの遷移はできませんが、ひとつのシーンに違う世界観のエリアを作って ワープさせることでシーン遷移のような表現ができそうですね。  

↓続きの記事↓

×