【UE5】ProgressBar（プログレスバー）の各種設定について【ゲーム開発】

14 3月, 2025

基本情報

Progress Bar（プログレスバー）は、進行状況を視覚的に表示するウィジェットです。ゲーム内では、以下のような用途でよく使われます。

✅HP（体力）やMP（マナ）バー
✅ロード進捗の表示
✅経験値ゲージ
✅スキルのクールダウン時間の表示

項目	内容
正式名称	Progress Bar
略称	なし
用途	進行状況をバーで可視化
主なプロパティ	Percent（割合）、Fill Color and Opacity（色と透明度）、Style（スタイル）

プログレスバーは、値を0～1で制御する必要があるため、気を付けてください。

過去に動画でHPバーについて実際に作っていますので、興味がある方はご視聴どうぞ！

Style項目について

・Background Image（背景画像）
背景部分の見た目を変更する設定。
デフォルトでは透明だが、カスタムテクスチャを適用すると枠をつけたり、特定のデザインにできる。

・Fill Image（塗りつぶし画像）
バーの進行部分の見た目を変更する設定。
テクスチャやカラーを変更することで、よりリッチな見た目にできる。

・Marquee Image（マーキー画像）
バーがアニメーションで動くときの見た目を変更する設定。
進行状況を示すロードバー（例：読み込み中のUI）に使われる。

・Enable Fill Animation（塗りつぶしアニメーション）
バーの値が変化するときにアニメーションで滑らかに動くようにする設定

Style項目の詳細

Image SizeやMarginなど、さらに細かいカスタマイズができる項目があります。

これらを理解すれば、より自由にプログレスバーのデザインを調整できる。

項目名	説明	設定例	用途例
Image	設定するテクスチャ画像	T_Progressなど	HPバーの背景デザイン
Image Size	画像のサイズ（X、Y）	200,20	背景画像の大きさを調整
Margin	画像の四隅を切り取る比率	0,0,0,0	角の装飾を保ちつつ拡大縮小
Draw As	画像の描画方法	Box,Border,Image	背景の表示スタイル変更
Tint Color	画像に適用する色	0,0,0,0.5	背景の半透明カラー
Tiling	繰り返しの適用方法	Notile,Horaizontal,Vertical	背景のテクスチャ繰り返し
Mirroring	画像を反転するか	NoMirror,Horizontal,Vertical	左右・上下の反転設定

Bar Fill Type

Bar Fill Typeはプログレスバーの進行方向を制御する設定です。

通常はLeft to Right（左から右）に設定されていますが、さまざまな方向や形状で塗りつぶすことが可能です。

✅Bar Fill Typeはプログレスバーの塗りつぶし方向を決める設定
✅ゲームのUIデザインに応じて最適なタイプを選択する
✅エネルギー・HP・スキルゲージの演出を強化できる

活用テクニック

・HPゲージの遅延アニメーション
2つのプログレスバー（現在HP用＆減少HP用）を使って滑らかに減るエフェクトを作る

・スキルのクールダウンゲージ
Elapsed Time / Cooldown TimeをSet Percentで適用

・UIの最適化
Tickで毎フレーム更新せず、HPが変わったときにだけSet Percentを実行

まとめ

✅Progress Barは進捗やHPを表示するUI要素

✅PercentをバインドするorSetPercentで制御

✅HPの割合に応じてFill Colorを変えられる

✅２つのバーを重ねてHPゲージを滑らかに減らすアニメーションも可能

One thought on “【UE5】ProgressBar（プログレスバー）の各種設定について【ゲーム開発】”