概要

UnrealEngine5 にて円型のプログレスバーを作ってみたメモです。

更新履歴

日付	内容
2023/08/07	初版

参考

以下の記事を参考にいたしました、ありがとうございます。
UE公式：UMG UIデザイナ
 UE公式：グラディエント（勾配）マテリアル関数
 UE公式：Math マテリアル関数
 Round / Radial Progress Bar - Unreal Engine 5 Tutorial [UE5]
[UE4]マテリアル表現の幅が広がる！おもしろいノード＆マテリアル関数集 1

環境

Windows10
Visual Studio 2022
UnrealEngine 5.1.1

マテリアル準備

アセット作成

コンテンツブラウザからマテリアルを作成、名前を付けます。
次にマテリアルアセットを開いて詳細から[マテリアル]->[Material Domain] を User Interfaceに、[Blend Mode]を Translucent にします。

円をつくる

テクスチャを使わずに円をつくるには Radial Gradient Exponential を利用します。これを使うと放射状のグラディエントが生成されます。

この円を大きさ違いで2つ用意し、差分を計算すると円型の出力が得られます。

Subtractが差分の計算、Thicknessが円の厚みで0.1をデフォルト値としてパラメータ変換で持っておきます。このパラメータは後にWidgetBP側で変更することができます。

進行度を表すためのマスクをつくる

まずはUV座標をVectorToRadialValueを使ってラジアル座標（基準点を中心にした角度と距離の座標系）に変換します。そのままだと左上が中心になるので 0.5 を減算し、中央を基準点にします。

このままだと右が回転の0度となるため、Custom Roratorで1/4(0.25)だけ回転させて上を0度となるようにします。

上記の結果を踏まえて、ifノードにてマスクを作成します。Percentは変数として外部から変更できるようにパラメータ化しておきます。このPercent が 0.5だと以下のようになり、上をスタートとして回転の半分だけ白部分となります。

0.7の場合は以下のようになります。

白の部分が有効で黒の部分が無効になるマスクがつくられます。

円とマスクの合成

先の円とマスクをMultiplyにて掛け合わせると以下のような結果となります。

ウィジェットをつくる

マテリアルインスタンスの作成

カラーを BaseColorとしてパラメータ化し、以下のようにします。

コンテンツブラウザからマテリアルインスタンスを作成します。

マテリアルインスタンスからパラメータ化した値を変更することができます。（外部から変更するパラメータはチェックを入れる必要があります。）

ウィジェットの準備

コンテンツブラウザから[ユーザーインターフェース]->[ウィジェットブループリント]を選択し、ウィジェットアセットを作成します。

[デザイナー]タブからレイアウトを作成します。
SizeBox を用意し、その下へimageを置きます。

次に設定用関数を作成します。
[グラフ]タブからSetPercent関数を作成し、Create Dynamic Material Instanceでダイナミックマテリアルインスタンスを作成します。作成したダイナミックマテリアルインスタンスは変数として保持します。次にSet Brash from Material でイメージを設定し、Set Scalar Parameter Valueでマテリアル変数のPercentに対して値を入れるようにします。2回目以降は設定不要でSet Scalar Parameter Valueで値を入れることができるようにします。

ウィジェットを配置

作成したウィジェットを配置します。

配置されたウィジェットのSetPercent関数を通じて値が入るように細工します。

結果は以下のようになりました。

追加機能

ゲージ分割

以下のようなコードを追加し、Multiplyをします。

SectionNumが分割数です。Vector To Radial Valueから取得した Vector Converted To Angle とSin関数を掛けることで-1.0～+1.0までの変化を分割数分繰り返します。HoleWidthは黒部分のサイズを決める値で、2倍して1を引くことで0～1への正規化を行っています。これを比較することで放射状のマスクを得ることができます。

結果は以下のようになります。（分割数32）

分割数を8にすると以下のようになります。

グラデーション

以下のようなコードを追加し、出力カラーにいれます。

Vector To Radial Valueから取得した Vector Converted To Angle を使って開始カラーBaseColorと変更カラーToColorを加算しています。IsGradationはStaticBoolParameterとしてグラデーション機能のOn/Offに使用しています。

結果は以下のようになります。

まとめ

UEのマテリアルはいろいろできていいですね。あとはきれいに書くことができれば。。