【UE4】UMGでUIの制御、戦闘中のUIを表示する
UMG( Unreal Motion Graphics)で戦闘画面にUIの表示を行っていきたいと思います。まずは基本的な操作と表示方法を押さえるために、戦闘中UIを表示するまで行っていきます。
UIに画像を表示する準備
jpeg、png、tga等のUIとして表示したい画像をUE4のコンテンツプラウザにドラッグ＆ドロップする事で、「.uasset」形式のファイルに変換されます。pngに含まれるアルファ情報もしっかり保持されるので、特にUE4上で何かする事も無く直ぐに使用する事ができます。
ウィジェットブループリントの作成
コンテンツプラウザ上で右クリック→「ユーザーインターフェース」→「ウィジェットブループリント」を選択して作成します。
ウィジェットに画像を配置する
作成したウィジェットブループリントをダブルクリックして開き、UI用の画像を置いていきます。
アンカーの設定
配置した画像の詳細にある、アンカーを設定します。アンカーを設定する事で、例えば画面解像度が1280×720から1920×1080へと解像度が大きくなったりした場合でも、UIの配置やサイズを相対的に見た目を維持してくれます。
今回はどの解像度でも見た目が変わらないように、画像のアンカーを全て真ん中に設定します。
ZOrderの値設定
配置した画像の奥手前の制御は詳細のZOrderの値で制御します。重なる必要がある画像は、手前に来る方の画像のZorderの値を大きくします。
例でHPゲージ枠の上にHPバーを置いた状態が下の画像になります。
ゲーム中にウィジェットを表示
作成したウィジェットに画像を配置し終わり、下の画像のような状態にしました。
このウィジェットを表示するための制御をブループリントに作っていきます。今回はレベルブループリントにウィジェットを表示する制御を用意しました。
右クリックを押して検索欄に「create widget」で「ウィジェットを作成」を配置し、Classに先程作成したウィジェットを指定します。
今後HPの増減をコントロールしたりすると思うので、Return Valueで帰ってくる値を変数にセットして確保します。
「Add to Viewport」のターゲットに作成したウィジェットの値をセットする事で画面に表示されます。
これでUIのウィジェットを画面に表示する事ができました！