【UE4】サウンドビジュアライザーを作るpart2
前回の続きです。
まずは直線形の調整をしてから円形を作っていきます。
前回作ったものはスペクトラムの強さをそのままスケールの値にしていましたが、そのままでは低周波帯に対応している棒のスケールが大きすぎるのでスケールを調整していきます。
前回作成したブループリントFor Each Loop からトランスフォームのZスケールに値を入れている部分に対数を追加します。しかしこれだけでは値が小さくなりすぎるので適当な数値をかけてやります。
この数値は後でいじれるように変数化してインスタンス編集可能にします。
Logの前にMax 1 を入れてオーバフローを防ぐ処理を忘れずに追加してください。
Logの代わりにClampを使うのもありだと思います。この辺は好みの問題もあると思うのでどれがいいが自分で試して決めてみてください。
(音が出ます)
Clampを使う場合の処理です。
これで直線形の処理は終わりなので確認用のブループリントを張っておきます。(コピペもできます。)
イベントグラフ
次にマテリアルの設定をしていきます。
コンテンツブラウザの適当な場所で右クリックからマテリアルを作成してダブルクリックで開いてください。
簡単なグラデーションをする処理を書いていきます。
始めにTime、Sine、ConstantBiasScaleを追加します。
Timeで受け取った時間をSineで-1~1の正弦波に変えて、ConstantBiasScaleで0~1の値にしています。
このConstantBiasScaleというノードは入力値に1を加算して割る2を返すノードです。(つい最近までこのノードを知らず、毎回＋1してから0.5を掛けるという処理を書いていました。)
この値でLerpしてグラデーションをするので次に3ベクターとLerpを追加します。
3ベクターはキーボードの3を押しながら左クリックで出せます。LerpはLと左クリックで出せます。
次にこの3ベクターをインスタンスで編集できるようにパラメータ化しておきます。(右クリックからパラメータに変換)
それっぽい色を選んだらMakeFloat3を使ってグラデーションする色を作っていき、Lerpにつなぎます。
次に光る強さを設定します。 Sキーと左クリックでパラメータを出してLerpとMultiply
してエミッシブカラーにつなぎます。
これで光ったと思いますがグラデーション速度が速いのでSineをクリックして左下の詳細タブから周期を変更しておきます。
これでいい感じになったと思います。
ついでにもう一色追加してみました。
マテリアルはできたので適用を押してからコンテンツブラウザに戻りこのマテリアルを右クリックしてマテリアルインスタンスを作っておきます。
マテリアルインスタンスができたらサウンドビジュアライザーのブループリントを開き
InstancedStaticMeshのマテリアルに設定します。
これで直線形は完成です。
早速レベルで確認してみましょう。
(音が出ます)
後はパラメータをいろいろいじって自分好みにしてください。
それではここから円形を作っていきます。
(音が出ます)
まずは動画の左側のものを作っていきます。
作ると言っても棒を動かすロジックは直線形と同じですのでコンストラクションスクリプトを変えるだけです。
新たにブループリントを作ってもいいのですが、私は1つにまとめたいのでそのための下準備をしていきます。(コピペしてコンストラクションスクリプトだけ書き換えるという人は読み飛ばしてください。)
棒のタイプを選択できるように列挙型(Enum)を作っていきます。
コンテンツブラウザから右クリック、ブループリントから列挙型を作ります。
ダブルクリックで開いたら右上の新規を押して名前を定義していきます。
(直線と円を追加しました。)
名前を付けたらサウンドビジュアライザのブループリントのコンストラクションスクリプトに戻ってSelectノードを追加します。Indexには先ほど作った列挙型を選択します。(作った列挙型の名前 で検索すると出てきます。)
あとはIndexを変数に昇格してインスタンス編集可能にすることで詳細タブから棒のタイプを選択できるようになっていると思います。
これからここを切り替えると形も変わるようにしていきます。
SelectノードをMake TransformとAdd Instanceの間につなぎます。
これで直線形を選択したとき直線形に配置されるようになりました。
下準備が終わったのでここから円形に配置する処理を書いていきます。
円形
円形に配置する処理は高校で習う円の媒介変数表示を使います。
半径rの円の媒介変数表示はx=rcosθ、y=rsinθ なのでこれをそのまま使います。
三角関数はradiansとdegreesがありますが今回はdegreesを使います。半径になる変数は新たに作っておいてください。
次に棒がどの角度にあるのかを指定します。
Indexと棒の数で除してそれに360をかけてsinとcosにつなぎます。
この時Float型にしてからでないと正しい値にならないので注意してください。
これで円形に配置することはできますがこのままでは縦方向に棒が伸びるのでRotationの値をいじります。
Rotationのところで右クリックして構造体ピンを分割してPitchを変数化します。この値が伸びる方向になります。ついでに中心を向くようにしておきます。
最後にMake TransformのピンをSelectノードの円につなげば完成ですが、
とりあえずこの状態でレベル上で確認してみると
(音が出ます)
方向を90度に設定したはずが何故かおかしな方向を向いてしまうのでこれを修正していきます。
イベントグラフに移ってUpdate Instance TransformにつながっているZスケールとLerpの間にMaxを追加してスケールが0になることを回避します。
これで再度確認してみると
(音が出ます)
うまくいきました！
パラメータをいい感じに調整すると最初の動画の左側のと同じものを作れます。
円形の配置ができたので今回はここまでにします。
次回は最初の動画右側のような片方だけに伸びるものとグリッド状のものを作っていく予定です。
次回もよろしくお願いします。
続き
