こんにちは!今日はSensitiveCubeについての記事です!PlaymakerとUnityを使って、C4Dの“Target”やMaya、3dsMaxの“look at”機能のようにオブジェクトがSTYLYでプレイヤーの方を向くように設定する方法を解説します。あわせて、ShaderForgeを使ったシンプルなテクスチャアニメーションについても話します。楽しんでもらえると嬉しいです!:D
![Screenshot_20180530_082549 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screenshot_20180530_082549.jpg)
まず、モデルやテクスチャマップなどのアセットを紹介します。2章では、Playmakerを使ってレーザーの設定を行う(リギングを行う)手順について話します。3章で、ShaderForgeを使ったシンプルなテクスチャアニメーションについて解説します。そして最後に、STYLYでそれらを確認し、完了です!
01. Cinema4d、Photoshop、Aftereffectsを使って準備をする
では始めましょう。このチュートリアルで使用するアセットを確認していきます。今回のシーンでは、オブジェクトとマテリアルを3つずつ使用します。FBX形式でエクスポートするには、File から menu > Export… > FBX(.fbx)を選択します。 ![Screen Shot 2018-05-28 at 12.13.41 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-28-at-12.13.41.png)
エクスポート設定ウィンドウでは、Generalのチェックボックスはすべてチェックを外し、AdditionalのTexturesとMaterialsにチェックを入れましょう。ファイル名を“Lase01.fbx”とし、保存します。それぞれのモデルに、3つのテクスチャが必要となります。これらはすべてグレースケールのイメージです。
![Screen Shot 2018-05-28 at 12.13.41 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-28-at-12.13.41.png)
![Screen Shot 2018-05-29 at 16.11.26 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-16.11.26.png)
![Screen Shot 2018-05-28 at 12.17.34 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-28-at-12.17.34.png)
![Screen Shot 2018-05-28 at 12.17.42 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-28-at-12.17.42.png)
![Screen Shot 2018-05-29 at 16.13.06 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-16.13.06.png)
![Screen Shot 2018-05-29 at 16.19.28 - STYLY Laser bySensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-16.19.28.png)
![Screen Shot 2018-05-29 at 16.19.05 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-16.19.05.png)
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オプションが選択されていることを確認してください。
![Screen Shot 2018-05-29 at 16.35.17 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-16.35.17.png)
![Screen Shot 2018-05-29 at 16.37.21 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-16.37.21.png)
![Screen Shot 2018-05-29 at 16.42.18 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-16.42.18-1.png)
Playボタンをクリックし、Sceneタブを開くことで、簡単にシーンの確認ができます。シーンの再生中に、Main Cameraを移動させることで動きを確認できます。再生が終わると、位置情報はリセットされることをお忘れなく。ここで、方向が間違っていることに気づくかと思います。再生を停止し、HierarchyウィンドウのCylinderを選択、inspectorウィンドウのRotation Xを90へ変更しましょう。もう一度再生を押すと、Cylinderがカメラに向かっていることが確認できるかと思います。
![Screen Shot 2018-05-29 at 17.22.49 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-17.22.49-1.png)
これらの設定を、レーザーに当てはめましょう。Cylinderを削除し、LaserParent_pm配下へLaser01を追加します。方向が間違っている場合、先ほどと同じく、Rotationの値を変更することで修正が可能です。
![Screen Shot 2018-05-29 at 17.52.40 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-17.52.40.png)
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つのノードが必要となります。
![Screen Shot 2018-05-29 at 19.20.52 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-19.20.52.png)
![Screen Shot 2018-05-29 at 19.21.01 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-19.21.01.png)
![Screen Shot 2018-05-29 at 19.21.41 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-19.21.41.png)
![Screen Shot 2018-05-29 at 19.22.16 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-19.22.16.png)
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倍になります。![Screen Shot 2018-05-29 at 19.24.27 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-19.24.27.png)
![Screen Shot 2018-05-29 at 19.24.27 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-29-at-19.24.27.png)
最後に、ShaderForgeウィンドウを閉じる前に、シェーダー設定のOpenGL ES 3.Xがチェックされていることを確認してください。
![Screen Shot 2018-05-31 at 17.12.25 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-31-at-17.12.25.png)
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”を向いているためなので、問題ないです。![Screen Shot 2018-05-30 at 8.18.31 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-30-at-8.18.31.png)
![Screen Shot 2018-05-30 at 8.18.31 - STYLY Laser by SensitiveCube](https://styly.cc/wp-content/uploads/2018/05/Screen-Shot-2018-05-30-at-8.18.31.png)