読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

ゲージの長さに合わせてカラーを変える

UE4 Widget UMG マテリアル ゲージ

Lerp を使うと、AとB2つを線形補間して途中地点の値を拾うことができます。

似たようなやり方で、ちょっと変わったゲージの作り方を紹介します。

 

まずグラデーションでカラフルにしたテクスチャを作ります。

f:id:hiyokosabrey:20160728231044p:plain

サイズは小さくていいので 256x16です。

このテクスチャをインポートする際は、ピクセルが荒れないように Compression SettingsUserInterface2D(RGBA) にします。あと、X-axis Tiling MethodClampにします。Clampはタイリングしないという意味です。

f:id:hiyokosabrey:20160728231636p:plain

インポートしたテクスチャアセットから Create Material します。

マテリアルは下のようにつなぎます。

f:id:hiyokosabrey:20160728232118p:plain

左上の赤いノード TexCoordinate の設定値を変更します。Detailタブから変更できます。UTiling の値を 0.0001 にします。テクスチャの大きさがヨコ256pxなので、1ピクセルの大きさは、1/256で 0.00390625 になります。それよりも小さい数字にしています。

f:id:hiyokosabrey:20160728232423p:plain

Value と書かれたノードは、Scalar Parameterノードです。

f:id:hiyokosabrey:20160728233040p:plain

パラメータ名は、あとでWidgetブループリントから触ります。

ゲージが満タンからスタートするので、初期値は 1.0 をセットしておきます。

溜まっていく方のゲージだと 0.0スタートです。

線形グラデーションを生成する LinearGradient と 2階調化する ValueStep ノードは、直線型のゲージを作るときにのド定番です。

マテリアルはこれで完成です。Saveして閉じます。

 

マテリアルができたら、次はWidgetです。コンテンツブラウザの右クリックメニュー、

User Interface から Widget Blueprint を作成して編集します。

Imageパーツをキャンバスにドラッグ&ドロップします。適当な大きさにしたら、

f:id:hiyokosabrey:20160728234032p:plain

作ったマテリアルをセットします。

DetailsタブにAppearance という項目を探します。中に Brush > Image という設定項目があるのでここにセットします。

f:id:hiyokosabrey:20160728234440p:plain

 

次はブループリントです。

編集モードを、Designer から Graph に切り替えます。

最初から置かれている Event Constructionノードに以下のようにつなぎます。

f:id:hiyokosabrey:20160728235312p:plain

右端は、Get Dynamic MaterialノードのReturnValueから、Promote to Variable して変数化したノードです。

次にゲージの長さを変えるための関数を用意します。

上で変数化したものから Set Scalar Parameter Value ノードを取り出してつなぎます。

f:id:hiyokosabrey:20160729044700p:plain

パラメータ名のところに、マテリアルを作ったときのScalar Parameterノードに設定した名前を間違えないように入力しておきます。大文字小文字は区別されません。

出来上がりです。コンパイルして問題なければ保存します。

 

確認するためにレベルブループリントを編集します。

まずは画面に表示するところ。

f:id:hiyokosabrey:20160729045645p:plain

Float型の変数を一つ用意します。それをEvent Begin PlayノードにSetでつないで初期値を入力しています。変数の初期値はDetailsタブでできますが、あえてノードで指定しておく方が、ブループリントの構造が分りやすくなって便利です。

このFloat型の変数を使ってキー操作で増えたり減ったりする部分を作ります。

f:id:hiyokosabrey:20160729050433p:plain

最後にゲージの長さを変える関数を呼び出しでつないで完成です。

関数は Create WidgetノードのReturn Value から取り出します。

f:id:hiyokosabrey:20160729050809p:plain

完成です。

Playしてみましょう。

f:id:hiyokosabrey:20160729051616p:plain

ゲージの長さに合わせてカラーが変化します。

グラデーションテクスチャの内容次第なので、調整してみてください。

 

ではでは

素敵なゲージライフを