こんにちは！今日はSensitiveCubeについての記事です！PlaymakerとUnityを使って、C4Dの“Target”やMaya、3dsMaxの“look at”機能のようにオブジェクトがSTYLYでプレイヤーの方を向くように設定する方法を解説します。あわせて、ShaderForgeを使ったシンプルなテクスチャアニメーションについても話します。楽しんでもらえると嬉しいです！:D
まず、モデルやテクスチャマップなどのアセットを紹介します。２章では、Playmakerを使ってレーザーの設定を行う（リギングを行う）手順について話します。３章で、ShaderForgeを使ったシンプルなテクスチャアニメーションについて解説します。そして最後に、STYLYでそれらを確認し、完了です！
01. Cinema4d、Photoshop、Aftereffectsを使って準備をする
では始めましょう。このチュートリアルで使用するアセットを確認していきます。今回のシーンでは、オブジェクトとマテリアルを３つずつ使用します。FBX形式でエクスポートするには、File から menu > Export… > FBX(.fbx)を選択します。 
エクスポート設定ウィンドウでは、Generalのチェックボックスはすべてチェックを外し、AdditionalのTexturesとMaterialsにチェックを入れましょう。ファイル名を“Lase01.fbx”とし、保存します。それぞれのモデルに、３つのテクスチャが必要となります。これらはすべてグレースケールのイメージです。
エクスポート設定ウィンドウでは、Generalのチェックボックスはすべてチェックを外し、AdditionalのTexturesとMaterialsにチェックを入れましょう。ファイル名を“Lase01.fbx”とし、保存します。それぞれのモデルに、３つのテクスチャが必要となります。これらはすべてグレースケールのイメージです。
Go to unity and import these assets. Select Laser01 in Project window and hit the Extract Materials in Inspector window.
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を追加してください。このステートには、２つのアクション“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オプションが選択されていることを確認してください。
Playボタンをクリックし、Sceneタブを開くことで、簡単にシーンの確認ができます。シーンの再生中に、Main Cameraを移動させることで動きを確認できます。再生が終わると、位置情報はリセットされることをお忘れなく。ここで、方向が間違っていることに気づくかと思います。再生を停止し、HierarchyウィンドウのCylinderを選択、inspectorウィンドウのRotation Xを90へ変更しましょう。もう一度再生を押すと、Cylinderがカメラに向かっていることが確認できるかと思います。
これらの設定を、レーザーに当てはめましょう。Cylinderを削除し、LaserParent_pm配下へLaser01を追加します。方向が間違っている場合、先ほどと同じく、Rotationの値を変更することで修正が可能です。
03. ShaderForgeを使用して、シンプルなテクスチャアニメーションを作成する
この章では、ShaderForgeを使用してマテリアルやシェーダーを作成する方法を紹介します。今回のシーンでは、２種類のシェーダー、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ウィンドウへ戻ってください。次に、アニメーションの設定を行います。ようするに、時間の経過とともに、このテクスチャがスライドしていくように設定をします。そのために、追加で５つのノードが必要となります。
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倍になります。
最後に、ShaderForgeウィンドウを閉じる前に、シェーダー設定のOpenGL ES 3.Xがチェックされていることを確認してください。
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”を向いているためなので、問題ないです。