【UE5】区切り付きゲージのUIパーツを作ってみましょう

区切り付きのゲージは色々なシーンで使いたいと思います。さくっと作ってみましょう。

UIパーツ用のウィジェットブループリントを作成してCanvasパネルとProgress Barを追加します。

Progress BarのサイズX,Yを300.0と25.0に設定します。

Progress Barの下にimageを追加してサイズX,Yを300.0と25.0に設定します。

ゲージ区切り用のテクスチャをインポートします。

マテリアルを作成して画像のようなマテリアルのノード構成にします。

マテリアルインスタンスを作成して、区切り数を8.0にしてみましょう。

UIパーツ用のウィジェットブループリント画面に戻り、imageにインスタンスマテリアルを設定します。

通常だとはみ出てしまうので、imageをRetainer Boxの子にして位置、サイズを設定し、次の作業のために、Texture ParameterをTargetにします。

縁をカットするためのテクスチャをインポートします。

マテリアルを作成して画像のようなマテリアルのノード構成にします。

TargetとTextureSampleに先程のテクスチャを設定します。

Retainer BoxのEffectMaterialに先程のマテリアル(インスタンス)を設定します。

UIパーツ用のウィジェットブループリントのグラフを画像のように編集します。

別のウィジェットブループリントにUIパーツを配置すると画像のようになります。

完成しました！