【UE4】サウンドビジュアライザを作るPart3
前回の続きです。
目次
片方だけ伸びるやつ
棒を片方だけ伸ばすようにするにはピボットの位置を調整する必要があります。BlenderなどのDCCツールが使える人はそちらでピボットが下に来るように調整してください。
今回はUE4しかインストールしてないといる人もいると思うのでUE4内で作ります。(下に動画があります)
ピボットが下にあるキューブを作る手順を書いていきます。
適当なレベル上で左側のモードタブからジオメトリを選択しボックスをレベルに配置します。
詳細タブから位置を原点に持っていき、Fキーでフォーカスして原点にカメラを持っていく
ジオメトリブラシを複製して位置Zを-100に設定
(Altキーを押しながらジオメトリブラシを移動させると複製できます。)
複製前のジオメトリブラシの詳細のBrush SettingsからXとYを100にする。
複製したジオメトリブラシを詳細のBrush SettingsのBrush TypeからSubtractiveに設定
複製したものと複製前のものを選択して詳細からスタティックメッシュを作成を押す。(選択する際に複製前→複製後の順番で選択しないとピボットの位置がずれるので注意)
作成するフォルダを選択して適当な名前を付けておきます。
分かりずらいと思うので動画を作りました。
ピボットの位置をずらせたらインスタンスメッシュを変更するだけですがこれではいちいち変更するのが面倒なので変数にして後から変更できるようにします。
前回と同様の手順で新しい列挙型を作ります。片方だけ伸ばすほかにもロケーションを更新するものも作る予定なので3つ作って置きます。
名前はスケール(両側)、スケール(片側)、ロケーションにしました。
次はサウンドビジュアライザのブループリントに戻ってコンストラクションスクリプトに処理を追加していきます。
コンストラクションスクリプトに移ったら空いている場所で右クリックして先ほど作った列挙型の名前で検索してスイッチノードを追加します。
Selectionを変数へ昇格させてインスタンス編集可能にします。
片側が選択されたときだけインスタンスメッシュをピボットが下にあるキューブに変える処理を書きます。
左上のコンポーネントタブからInstancedStaticMeshをドラッグしてきてそこからSet Static Meshと検索してSet Static Meshノードを配置します。
Set Static MeshノードのNew Meshに作ったピボットが下にあるキューブを設定してスイッチの片側の時だけつなぎます。
これで片方だけ伸ばす処理は完成です。
レベル上で確認してみます。
(音が出ます)
詳細から棒の動かす方向を変えるとちゃんと変わっていることが分かります。
円形にしたり棒の動かす方向を変えたりすれば最初の画像のようになります。
これで片方だけ伸ばす処理は終わりです。
ロケーションを更新するやつ
ここからはスケールの代わりにロケーションを更新する処理を書いていきます。
Zスケールの値をZロケーションに変えるだけなので一瞬でできます。
イベントグラフUpdata Instance Transformへ行き、更新するトランスフォームの配列のZスケールを100倍してGet Instance TransformのZトランスフォームと線形補完します。
(100倍するのはセンチメートルからメートルへ変えるためです)
そしたらMake TransformでTransform型を作り、棒の動き方でセレクトします。
これでロケーションを更新する処理は終わりましたのでレベル上で確認してみます。
ローテーションを更新はできたが円形にしたときに方向が変わらない
ローテーションは更新されますが円形にしたときに方向が変わってくれないという問題が発生します。
これからこれを解決していきますが別にこのままでも構わないという人はグリッド上のところまで読み飛ばしてください。
まずはTransform型の配列を作りコンストラクションスクリプトの最後にAdd Instanceと同じ値を追加します。
この時配列のClearも忘れずに追加しておきます。
次にローテーションから棒が動く方向を決める関数を作っていきます。
左下のマイブループリントタブから関数を新規作成し、右側の詳細タブから純粋にチェックを入れます。
後は以下のような処理を書きます。
スクリーンショットも載せておきます。
上の三角関数二つはxとyの動く向きを求めていてそこに下の三角関数で棒のPitchの値に応じてZとブレンドしています。また、xとyはこのままではローカル座標の原点からの動く向きになってしまうのでもともとの位置を足しています。
この関数をスペクトラムの強さを格納するところに入れ、セレクトでロケーションを更新するときだけこの値を使うようにします。
後はロケーションを更新する処理のところをベクトルで線形補間するように変更すれば完成です。
今度は円形にして棒の向きを変えてもうまくいくようになっていると思います。
グリッド状のやつ
今回の最後はグリッド状のものを作っていきます。
グリッド状に配置するのは直線形の応用で直線形に並べ一定の数を超えたら横に移動して再び直線形、というのを繰り返す処理を書きます。
その前に棒のタイプの列挙型に新たにグリッド状を追加しておきます。
コンストラクションスクリプトに移ってInt型の変数を二つ作ります。
一つはx座標もう一つはy座標を決める変数です。
先にこの変数と棒の間隔をかけてMake Transformでセレクトノードにつないでおきます。
次にAdd Instanceの後ろでxとyの変数の値を調整する処理を書きます。
xがグリッドの一片の長さを超えたらyをプラス1してxをリセットするようにします。棒の数だけグリッド状に並ぶのでグリッドの一片の長さは棒の数の平方根で求まります。
この値とxの値を比較し、ブランチでグリッドの一片の長さを超えたらyインクリメント
し、xを0にします。
これで完成です。
レベル上で確認してみます。
エミッシブなマテリアルとはあまり相性が良くないみたいですね。あと棒の数も多くなるので解析する周波数も少し多めに取った方がきれいに見えると思います。
今回までのBPを貼っておきます。
イベントグラフ
今回はこれで終わりです。おそらく次が最後になると思います。
次回もよろしくお願いします。
続く
