UE4 マテリアルだけでゲージを表現したい
ホラーゲームのバッテリーゲージを実装した時、覚えておいたら便利だなと思ったことが多かったので備忘録として。
↓今回の内容↓
ホラーゲームで使えそうな電池型のゲージをMaterialだけで実装してみた pic.twitter.com/lBCGZ0QCZg
— わかです (@wakaGameStudio) 2020年8月9日
UE4ver.4.24.3
①テクスチャをペイントで書く
- 前面に表示する枠用（左）
- 色を付ける部分用（右）※背景を抜くために白黒でデザインします
②マテリアルを作る
- MaterialDomainをUserInterfaceに変更
- BlendModeをMaskedに変更
③パラメータを追加しておく
- s+左クリックでパラメータを追加する。
- 最終的にBlueprintから値を代入するパラメータです。
- DefaultValue：１
- SliderMin：0
- SliderMax：1
④ゲージにする準備
- LinearGradient：上方向か下方向の勾配を返します。今回はU方向→横です。
- 今回は右から左へ減っていくようにしようと思うので値を1-xします。
- ValueStepでパラメータの割合を適用します。
公式ドキュメント↓
グラディエント（勾配） | Unreal Engine Documentation
⑤色の設定
- LerpのAに減った部分（背景）の色を設定。
- Bに残り部分の色を設定。
⑥前面の枠テクスチャを設定
- 設定した色に白(1)黒(0)をAddで足すことで白い枠を表示しています。
- １を超えるのは何となくよくない気がするのでClampしておきます。
⑦FinalColorとMaskを設定
- オパシティマスクに繋げるテクスチャは背景を抜くために用意したテクスチャです。
\Material完成/
⑧WidgetBlueprintのImageにMaterialを設定
- WidgetBlueprintにImageを追加してBrushのImageにMaterialを設定します。
⑨値の代入
- グラフにカスタムイベントを追加してFloat値を受け取ります。
- イメージからMaterialを取得します。
- Material内のParameterに値を代入します。
- Nameには、MaterialBPで追加したParameter名を入力します。
⑩WidgetBlueprintを設定したBPからイベントを呼ぶ
- 今回はデバッグ用にコントローラのスティック入力値を代入しておきます。
実行すると、、。
ホラーゲームで使えそうな電池型のゲージをMaterialだけで実装してみた pic.twitter.com/lBCGZ0QCZg
— わかです (@wakaGameStudio) 2020年8月9日
