ゆるめるモ!VR衣装展示空間の作り方をご紹介します。第3弾は「生きろ!!」です。生きろ!!の空間は、モデル以外すべてUnityからSTYLYにアップロードして作っています。また、反対側にメンバが描いた生きろの文字が、数秒毎に入れ替わるようになっています。こういうアクションは、PlayMaker(Unity)を使って作っています。では、コンセプト設計~空間ディレクション、空間作成方法についてご紹介していきます。
コンセプト設計~空間ディレクション
ゆるめるモ! “生きろ!!” (Official Music Video)
生きろ!!のMVの空間をそのまま再現しようと思いました。このとき8人メンバーいますね。Youtubeに2014/07/17に公開されて、振付:ももぴ になっています。ゆるめるモ!の歴史を感じますね。
![ikiro2 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiro2.png)
動画 0:24
![ikiro1 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiro1.png)
動画 0:22
動画 0:22のシーンをそのまま再現し、動画 0:24で出てくる各メンバが描いた生きろ!!を空間に出して、そこにシンプルにゆるめるモ!のメンバを配置しようと決めました。生きろ!!というメッセージを視覚化して、認識したら面白いのではと思いました。
空間作成方法
![FireShot Capture 38 - STYLY Editor - https___webeditor.styly.cc_built_ - STYLY](https://styly.cc/wp-content/uploads/2018/06/FireShot-Capture-38-STYLY-Editor-https___webeditor.styly_.cc_built_-1024x517.png)
STYLY WebEditor 生きろ!! 制作画面
この空間の作り方をご紹介します。このカーテンついた部屋はUnityで作りました。
![ikiro_unity1 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiro_unity1-1024x528.png)
Unity画面
Unityで四角形の部屋を作り、カーテン毎に色を変えて配置します。Directional Lightを4つ各カーテンに当てて照明を強めます。次に、生きろ!!パネルが秒ごとに入れ替わる仕組みを作ります。その仕組みをつくるためにPlayMakerを使います。PlayMakerについては以下を参照してください。
![a - STYLY](https://styly.cc/wp-content/uploads/2018/06/a-300x289.gif)
Unity 生きろ!!パネル 切り替え
次は、生きろ!!パネルを5秒ごとに入れ替わる仕組みをご紹介します。
![ikiropanel1 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiropanel1-1024x713.png)
生きろ!!パネル作り方1
Hierarchyメニューで右クリック → [3D Object] → [Quad]クリックして、Sceneにパネルを作ります。
![ikiropanel2 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiropanel2-1024x896.png)
生きろ!!パネル作り方2
Projectに画像ファイル(今回はikiro.jpg)に入れておきます。フォルダからProjectにドラック&ドロップで入れられます。次に、Hierarchyメニューで作ったQuadに、Projectにあるikiro.jpgをドラック&ドロップします。するとQuadに画像が貼り付けられます。同じように3つのパネルを作ります。
![ikiropanel3 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiropanel3.png)
生きろ!!パネル作り方3
パネルを3つ作ったら、3つを重ねます(X軸を3つとも0にします)。重ねた後、パネル2とパネル3のチェックボックス(赤丸部分)のチェックを外して、非表示にします。パネルの切り替えの最初の部分を作っておきます。
![ikiropanel6 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiropanel6.png)
生きろ!!パネル作り方4
GameObjectを作って、その中にパネル1~3をドラックドロップで入れてグループ化します。
![ikiropanel7 - STYLY](https://styly.cc/wp-content/uploads/2018/06/ikiropanel7.png)
生きろ!!パネル作り方5
GameObjectのInspectorから[Add Component]をクリックして、PlayMakerFSMを選択します。次にPlayMakerにどういうアクションを追加していくか、説明していきます。アクション内容の概要を説明します。パネル1を5秒表示 → パネル1を非表示 パネル2を表示 → パネル2を5秒表示 → パネル2を非表示 パネル3を表示 → パネル3を5秒表示 → パネル3非表示 パネル1表示(始めに戻る)。これをPlayMakerで作っていきます。
![playmaker1 - STYLY](https://styly.cc/wp-content/uploads/2018/06/playmaker1.png)
Playmaker State 1
State1ではWait(待ち)アクションを使います。Time 5に設定して、Real Timeにチェックを入れます。パネル1を5秒間表示しますという意味です。
![playmaker2 - STYLY](https://styly.cc/wp-content/uploads/2018/06/playmaker2.png)
Playmaker State 2
State2ではActivate Game Objectアクションを使います。Activate Game Objectアクションはオブジェクトを表示/非表示の切り替えができます。パネル1を非表示にしたいので、Activateのチェックを外します。パネル2は表示させたいので、Activateのチェックを入れます。これの繰り返しをState3~State6に追加していきます。 PlayMaker(Unity)を使うことによって、自分の実現したいアクションをプログラムを組まずSTYLYで実現できます。