【Unity/Playmaker】レーザー機能を作る

こんにちは!今日はSensitiveCubeについての記事です!PlaymakerとUnityを使って、C4Dの“Target”やMaya、3dsMaxの“look at”機能のようにオブジェクトがSTYLYでプレイヤーの方を向くように設定する方法を解説します。あわせて、ShaderForgeを使ったシンプルなテクスチャアニメーションについても話します。楽しんでもらえると嬉しいです!:D

Laser by SensitiveCube
まず、モデルやテクスチャマップなどのアセットを紹介します。2章では、Playmakerを使ってレーザーの設定を行う(リギングを行う)手順について話します。3章で、ShaderForgeを使ったシンプルなテクスチャアニメーションについて解説します。そして最後に、STYLYでそれらを確認し、完了です!
 

01. Cinema4d、Photoshop、Aftereffectsを使って準備をする

では始めましょう。このチュートリアルで使用するアセットを確認していきます。今回のシーンでは、オブジェクトとマテリアルを3つずつ使用します。FBX形式でエクスポートするには、File から menu > Export… > FBX(.fbx)を選択します。 Laser by SensitiveCubeLaser by SensitiveCubeエクスポート設定ウィンドウでは、Generalのチェックボックスはすべてチェックを外し、AdditionalのTexturesとMaterialsにチェックを入れましょう。ファイル名を“Lase01.fbx”とし、保存します。それぞれのモデルに、3つのテクスチャが必要となります。これらはすべてグレースケールのイメージです。
Laser by SensitiveCubeLaser by SensitiveCubeLaser by SensitiveCube Go to unity and import these assets. Select Laser01 in Project window and hit the Extract Materials in Inspector window.
Laser bySensitiveCubeLaser by SensitiveCube
 

02. Playmakerを使って設定する

レーザーは、常にプレーヤーへ向かっているように設定します。ここで必要となるのは、プレーヤーの位置情報の取得と、各フレームでプレーヤーへレーザーの方向を変更する設定です。そのためには、“Find Game Object”と“Look at”アクションを使用します。
最後のモデルを編集する前に、これらの設定を行いましょう。Hierarchyウィンドウを左クリックし、Create Emptyで空のオブジェクトを作成します。“GameObject”ができるので、名前を“LaserParent_pm”へ変更してください。サイドHierarchyウィンドウを左クリックし、3D Object > Cylinderを選んでください。このCylinderは、“LaserParent_pm”の子オブジェクトとして作成してください。そして、“LaserParent_pm”を選択肢、Playmaker editorを開き、add stateからState 1を追加してください。このステートには、2つのアクション“Get Main Camera”と“Look at”を追加します。
最初にカメラ情報を取得します。取得の方法は以下の記事を参照します。
“Find Game Object”を選択し、Object Nameの項目を”[VRTK]_VIVE”とし、Storeをクリックし、New variablesをクリックし、”mainCamera”と入力して、Create Variableをクリックします。次は、“Look at”アクションを選択し、Target Objectの左にある“=”アイコンをクリックします。ここでmainCameraを選択肢、“Keep Vertical”をオフにします。Every Frameオプションが選択されていることを確認してください。
Laser by SensitiveCube
Laser by SensitiveCube
Laser by SensitiveCube
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Playボタンをクリックし、Sceneタブを開くことで、簡単にシーンの確認ができます。シーンの再生中に、Main Cameraを移動させることで動きを確認できます。再生が終わると、位置情報はリセットされることをお忘れなく。ここで、方向が間違っていることに気づくかと思います。再生を停止し、HierarchyウィンドウのCylinderを選択、inspectorウィンドウのRotation Xを90へ変更しましょう。もう一度再生を押すと、Cylinderがカメラに向かっていることが確認できるかと思います。
 
Laser by SensitiveCube
これらの設定を、レーザーに当てはめましょう。Cylinderを削除し、LaserParent_pm配下へLaser01を追加します。方向が間違っている場合、先ほどと同じく、Rotationの値を変更することで修正が可能です。
Laser by SensitiveCube
 

03. ShaderForgeを使用して、シンプルなテクスチャアニメーションを作成する

この章では、ShaderForgeを使用してマテリアルやシェーダーを作成する方法を紹介します。今回のシーンでは、2種類のシェーダー、simple emissive shaderとsimple animated shaderが必要となります。この記事では、後者のsimple animated shaderのみ解説します。前者の詳細が知りたい方は、前回の記事を参照してください。
まずUnityで、ShaderForgeのウィンドウを開き、New Shaderをクリックします。左端のUnlitを選択し、“laserCone”と名前をつけます。2D texture propertyを追加し、RをOpacityへ接続します。2D texture nodeの名前を”alphaTexture”へ変更し、煙のテクスチャを追加します。ウィンドウの左側にあるConsole areaの黄色い三角形をクリックしてください。このシェーダーを、シーンビューのcone material checkへ適用してください。
もう一度ShaderForgeウィンドウへ戻ってください。次に、アニメーションの設定を行います。ようするに、時間の経過とともに、このテクスチャがスライドしていくように設定をします。そのために、追加で5つのノードが必要となります。
Laser by SensitiveCubeLaser by SensitiveCubeLaser by SensitiveCubeLaser by SensitiveCube
1. External Data > Time
2. Geometry Data > UV Coordinates
3. Constant Vectors > Vector 2
4. Arithmetic > Add
5. Arithmetic > Multiply
次のスクリーンショットで、これらのノードをどうやって接続するか確認してください。ポイントは、UV valueをTimeで変更していることです。アニメーションの速度を上げたい場合、Vector 2の値を変更します。例えば、“2.0”と設定すると、アニメーションの速度は倍となります。または、Timeのt/20ではなく、tをMultiplyへ接続しても良いです。この場合、速度は20倍になります。Laser by SensitiveCube
最後に、ShaderForgeウィンドウを閉じる前に、シェーダー設定のOpenGL ES 3.Xがチェックされていることを確認してください。
 
Laser by SensitiveCube
 

04. STYLYで動きを確認する

それでは、STYLYへアップロードを行いましょう。“LaserParent_pm”をProjectウィンドウへドラッグアンドドロップし、Prefab化します。“LaserParent_pm”Prefabを右クリックし、“Upload prefab to STYLY”を選択します。しばらく待ち、STYLYエディターを開いてください。アップロードしたPrefabは、‘My Models’(Asset > 3D Models > My Models)にあるはずです。エディターでは、アセットは“Start Position”へ向かっているかと思います。これは、レーザーがeditor viewの“Main Camera”を向いているためなので、問題ないです。Laser by SensitiveCube