【UE4】UMGのクリッピングによるHPゲージ実装
「UE4、HPゲージ」といった感じで検索してみると、プログレスバーを用いたHPゲージの実装方法が主にヒットしますが、例えばオリジナルデザインの作成した画像によるHPゲージを実装しようと思った時は、プログレスバーではできません。プログレスバーでも画像設定ができます。今回はクリッピングによる画像のHPゲージ制御を実装してみます。
クリッピングによるHPゲージ実装に関して
HPゲージは現在のHPに対応して増減しますが、HPゲージの増減方法に関して例えば水平方向の画像拡縮で実装してしまうと、単色のHPゲージバーなら見た目的に問題が無いかもしれませんが、カラーグラデーションされているようなデザインのHPゲージバーだと正しい見た目にはならないと思います。
水平拡縮だと画像がギュッと縮むので、HPが少なくなっているにも関わらず満タン部分の明るい色が当然残って来ますが、クリッピングなら平気です。
また、デザインを気にしないのであればプログレスバーによるHPゲージの実装は手軽でオススメです。
ゲージの増減は詳細の「Percent」で制御でき、増減方向やHPゲージのカラーなども変更できます。
※追記
プログレスバーの「詳細」→ 「Style」項目に 「Fill Image」があり、そこのImageに画像を設定する事で今回紹介しているHPゲージの内容を、プログレスバーでも同様の実装が手軽にできる事をTwitterで教えて頂きました！
クリッピングの方法
HPゲージをクリッピングするには、HPゲージの画像をCanvas Panelの子にします。Canvas Panelの名前は「p_hpbar_Panel」にしました。
Canvas Panelのサイズと位置をHPゲージに合わせて配置します。
HPゲージ画像の親にあたるCanvas Panelである「p_hpbar_Panel」の詳細にある、「Clipping」を「Clip to Bounds」にします。
これで親のCanvas Panelの領域で子のHPゲージバーの画像をクリッピングする事ができるようになりました。
例えば敵の攻撃を受けてHPが減った時、ブループリントで親のCanvas Panelのサイズを小さくすれば、HPゲージバーの画像を縮小する事なく表示部分を減らす事ができます。
ブループリントによるCanvas Panelのサイズ変更
クリッピングによってHPゲージが減らせる事ができるようになった事がわかったので、後は敵の攻撃でダメージを受けた際に、HPゲージが減るようにブループリントからCanvas Panelのサイズを変更します。
しかし、デフォルトの状態ではCanvas Panelを含む幾つかのUMGオブジェクトにブループリントでアクセスする事ができません。
詳細の一番上にある「Is Variable」のチェックボックスをONにする事で、ブループリント上で各パラメーターにアクセスする事ができます。
例としてプレイヤーのHPゲージを更新するブループリントを見てみます。
ウィジェット作成時に確保したウィジェットオブジェクト変数から、「is Variable」のチェックボックスをONにした事によってHPゲージバー画像の親Canvas Panelである目的の「p_hpbar_Panel」が呼び出せています。
「Slot as Canvas Slot」を経由する事でCanvas Panelのサイズを変更する事ができますので、最大HP時のゲージ幅に最大HPと比較した現在HPの割合を乗算する事でHPゲージのサイズをセットしています。
後は攻撃を受けた際にHPを減らし、HPゲージが減る事を確認します。
HPゲージがしっかりクリッピングできました！
クリッピングに関してはHPゲージ以外でも使えると思うので、応用次第で色々できそうですね。