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

みつまめ杏仁

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

ラバランプ風のゲージ

UE4 マテリアル UMG ゲージ

スプラトゥーンのフェス楽しかったです。もうないのかと思うとさみしい。開発スタッフおつかれさまです。

で、そのスプラトゥーンのバトル結果ゲージをつくってみようと思い立ってそれっぽくなったのでメモ。

今回はマテリアルがメインです

 

まずはテクスチャ。

シームレスなパターンなのですが、ぼかしが強いのでちょっとだけ工夫します。

Photoshopで 1024x512のテクスチャに大小の●を描きます。この段階でハミ出さない無いように注意しながらいい感じに配置します。

f:id:hiyokosabrey:20160724115907p:plain

これをタテ2倍にします。拡大ではなくコピーで。

f:id:hiyokosabrey:20160724120056p:plain

これをぼかします。

f:id:hiyokosabrey:20160724120145p:plain

これを カンバスサイズ 1024x512 で真ん中をだけを残せば出来上がり。

f:id:hiyokosabrey:20160724120406p:plain

これを24bitのTarga形式で書き出します。

 

UE4のインポート設定は以下。

f:id:hiyokosabrey:20160724120828p:plain

テクスチャをもう一枚用意します。1024*512です。

f:id:hiyokosabrey:20160724121010p:plain

ゲージごときにでかいテクスチャですが、RGBAフルで持ってないので512KBです。

圧縮するとノイズ(ゴミ)が出るので非圧縮でグレースケール(輝度情報のみ)なのです。まだサイズを小さくできますが説明が増えるので、今回はこのサイズでいきます。

 

できたテクスチャアセットからマテリアルを作成します。

右クリックから Create Material が便利。

 上の操作だと一つ目は最初からつながれてます。TextureSampleノードにエラーが出てたら、設定 Sampler Type を LinearGrayscale に変更します。

f:id:hiyokosabrey:20160724192911p:plain

そこにもう一つのテクスチャアセットをドラッグ&ドロップします。

 

この2つのテクスチャに必要なノードをつないでいきます。

f:id:hiyokosabrey:20160724212315p:plain

Addすると、1.0以上の値になる部分がでてくるのでクランプしています。

TextureCoordinateノードのTiling値は、●が正円になるように見た目で調整します。

 

次にこのグレーのモヤモヤした状態を2階調化します。

上のクランプした値を ValueStep ノードの Gadient ピンにつないで、

Mask ピン には、サインカーブを調整しながらつなぎます。

f:id:hiyokosabrey:20160724202601p:plain

基本の部分はだいたい完成です。

ラバランプっぽくするためにリニアグラデーションを加算しておきます。

f:id:hiyokosabrey:20160724203217p:plain

 

ここでいったんこの部分はここまでにしておいて、カラーの部分を作っていきます。

f:id:hiyokosabrey:20160724203906p:plain

ここに、ゲージの割合を調整する部分をつなぎます。

f:id:hiyokosabrey:20160724204442p:plain

LinearGradientValueStep は棒ゲージを作る際はとても便利な組み合わせです。

OneMinus ノード(1-x) で白黒反転です。

 

最期の仕上げにテクスチャと合体です。

f:id:hiyokosabrey:20160724205455p:plain

全体にだいぶ大きくなりました。

f:id:hiyokosabrey:20160724205517p:plain

マテリアルエディタのプレビューではこんな感じです。

f:id:hiyokosabrey:20160724205634p:plain

かなり もにゅ~ って感じになりました。

マテリアル完成です。

 

あとはこれをUMGのImageパーツにでも貼り付ければ出来上がり。

スカラーパラメータをつないであるので、Widgetブループリントからいじってやればゲージらしく色の割合が左右に変化します。

f:id:hiyokosabrey:20160724211426j:plain

Photoshopのグラデーションのきめ細やかさと、サインカーブの具合で滑らかになったり雑になったりするので、調整次第ですがこういった見た目にちょっとひと工夫入れるだけでUIもゴージャスになります。