>   >  UIデザイナーのためのUE4 Niagara入門
UIデザイナーのためのUE4 Niagara入門

UIデザイナーのためのUE4 Niagara入門

Unreal Engine 4.20(以下、UE4)からアーリーアクセスとして使用可能になったエフェクトツールのNiagara。「エフェクトだけでなく、UIデザインの進化にも寄与します」と、フリーランスのUIデザイナーで、UE4愛好家でもあるAquaria@UE4-Vtuber氏は語る。そんな同氏に、Niagaraを使ったダイナミックなテキスト演出の方法を解説してもらった。

※本記事は月刊『CGWORLD + digital video』vol. 250(2019年6月号)掲載の「UIデザイナーのためのUE4 Niagara入門」を再編集したものです。

TEXT_Aquaria@UE4-Vtuber (Twitter:@Aquaria901C
EDIT_尾形美幸 / Miyuki Ogata(CGWORLD)

WidgetとNiagaraの連携で、ダイナミックなテキスト演出を実現

UE4のエフェクトツールが従来のCascadeからNiagaraに一新され、話題を集めています。未だアーリーアクセスの段階ですが、すでに多くの人が使用し、様々な機能を用いたサンプルやチュートリアルが続々と発表されています。UIデザイナーの私が何より特筆したいのは、Widgetブループリント(以下、Widget)を介して、任意のデータと、パーティクルの位置・色・スケール・加速度などのパラメータをリンクできるようになったことです。これにより、UIのクオリティをさらに高められるようになりました。

これまでも、Widgetにマテリアル設定やアニメーションを組み合わせることで、UIのクオリティアップを図る工夫は、多くの人が試し、紹介してきました。ただ、そこにランダム性をもたせたり、よりダイナミックな動きをさせることは、特にローカライズの観点から難しい場合もありました。しかしNiagaraが追加されたことで、ローカライズなどの事情で動的に変化するテキストに対しても、例えばプレイヤーが触れた瞬間に砂のように崩れて消えるといったダイナミックな演出を適用できるようになりました。

▲【左】本作例では、ワールド座標を色情報として扱っています。様々な情報をパラメータとして使用できるため、ワールド座標の変化に応じて見た目が変わるUIも作成可能/【右】本作例では、WidgetとNiagaraを組み合わせ、任意のタイミングで表示内容を取得し、変化させています。パーティクルで書かれたテキストはWidgetの機能によりほかの言語に切り替え可能。本記事の2ページ目では、これを実現するための導入を紹介します


さらにゲーム内のフェイクUIへの適用など、様々な利用方法が考えられます。前述したようにブループリントを介して任意のデータをNiagaraに送れるため、例えばサウンドの波形をパーティクルを使って視覚化し、インタラクションを加え、立体的なサウンドイコライザをつくることも可能です。NiagaraはHoudiniとの親和性が高いので、少し敷居は上がりますが、Houdiniと連携した複雑で高品質な演出も夢ではありません。「テキストのフェードだけではもの足りない」「ローカライズに対応しつつ、テキストにエフェクトを適用したい」と考えているUIデザイナーは、ぜひNiagaraに触れてみてください。以降では、WidgetとNiagaraを連携させる具体的な方法を紹介します。

▲本作例では、サウンドのPitchをブループリントで取得し、パーティクルの移動値とスケール値に代入しています。音と歌詞に合わせてパーティクルを動かすことも可能

ノードを順にたどれば、パーティクルのしくみがわかる

NiagaraがCascadeと大きく異なる点として、ビジュアルスクリプトを用いたエフェクト作成が可能になったことが挙げられます。これにより、プログラマーの助けを借りることなく、アーティストがノードベースでエフェクトをコントロールできるようになりました。描画や物理、基本の計算式の知識さえあれば、自分の思い描くようにパーティクルを制御できるため、エフェクトアーティストではない人でも試してみる価値があると言えます。

エフェクトツールに限らず、新しいツールを使うときには見知らぬ機能や特有の名前を理解する必要があるため、敬遠してしまう人が少なからずいると思います。その点、NiagaraのUIや基本機能はUE4のそれと同様なので、比較的導入しやすいのではないでしょうか。基本的な作成のながれと機能さえ理解できれば、簡単な計算で面白い表現ができることや、WebGLの知識が流用できることなど、Niagaraの様々な利点に気がつくと思います。

Niagaraでは、ノードを順にたどればパーティクルの動くしくみがわかるようになっているので、エフェクト作成を始めたばかりの人でも、既存のモジュールをカスタマイズすることで自分が思い描くパーティクルの挙動と見た目を表現できます。カスタマイズを通して各モジュールの理解を深めることは上達の足がかりにもなるでしょう。サンプルアセットを加工したり、自分でもつくったりして試すことが上達への一番の近道なので、本記事の2ページ目で紹介するテキスト演出も、ぜひ実践してみてください。

Niagaraエディタの概要

▲【A】Niagaraエディタ内のエミッタに格納されるモジュールには、パーティクルの挙動や見た目を制御するプログラムが入っています。各々がアセットとしてコンテンツブラウザに表示され、複数のエミッタで使用できます/【B】ブループリントからパラメータを呼び出す場合は、名前空間で管理されたInVariableNameに指定します/【C】Niagara Module Scriptからパラメータを呼び出す場合も、ブループリントと同様、名前空間を指定します

UIデザインに活用できる代表的な機能

▲【左】グリッド状にパーティクルを並べる機能で、範囲と個数を決めるだけで簡単に作成可能。汎用性が高く、UIをNiagaraでつくる際に役立ちます/【右】回転の値、円のサイズ、中心位置を設定すると渦状にパーティクルを配置できます。これにノイズを加えれば、円形のローディングバーも作成可能


▲【左】GPUシミュレーションを使うと、非常に多くのパーティクルを扱えます。この図はパーティクルを10万個発生させた場合のサンプル/【右】スタティックメッシュの面からパーティクルを発生させることも基本機能で可能。この図ではテクスチャから取得した色をパーティクルに適用しています

次ページ:
NiagaraによるUIのテキスト演出

特集