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

みつまめ杏仁

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

円形ゲージのアレンジとテクスチャの節約

UE4はマテリアルで円形のゲージが簡単につくれます。公式のドキュメントに載ってるので、ここで紹介しなくてもいいかな~とか思ってたんですが、購読してるブログ、ぼっちプログラマのメモにあった

pafuhana1213.hatenablog.com

を見てて、ちょっと試してみたくなったのでそのメモです。

 

同じようにカギを握るこの VectorToRadialValue ノードさんですが、

f:id:hiyokosabrey:20160811041208p:plain

せっかく面白そうな出力が3つあるので全部使ってみました。

で、できたのがこれ。

f:id:hiyokosabrey:20160811044028p:plain

ゲージの増減は、Vector Converted to Angle の出力ピンをValueStep ノードのMaskOffset値で調整して行います。

そこはあちこちで紹介されているのと当ブログでよくお世話になってるので、ここではスルーします。

 

ゲージの色がただの単色だと見た目にしょぼく見えるので、グラデーションをのせたくなったりします。そこで以下のようなテクスチャを作ることになると思います。

f:id:hiyokosabrey:20160811050900p:plain  f:id:hiyokosabrey:20160811051056p:plain

狭い範囲にたくさんの色が入ってきて、テクスチャの圧縮がかかるとノイズがでます。

かといって大きくすると容量がもったいない感じです。

そこで使うのが、RadialCordinateの出力ピンです。

f:id:hiyokosabrey:20160811050301p:plain

使ったテクスチャは 128x16 です。

f:id:hiyokosabrey:20160811044118p:plain  RGB

 

これを使うと、テクスチャが安く作れて、グラデーションの調整が捗ります。

しかも境界のハッキリしたゲージの場合、アンチエイリアス用の中間色を入れやすいので、Photoshopのグラデーションツールに時間をかけなくても済みます。

解像度が気になる場合は、そのまま横方向に伸ばすだけなのでコスパ的においしいはず。

 

次にリングの形にするためにアルファマスクを使うのが一般的?だと思います。そうすると、大きくなるとその分大きなマスクテクスチャが必要になって、なんかもったいない感じのテクスチャが生まれます。

f:id:hiyokosabrey:20160811045819p:plain

これもRadialCordinate の出力ピンで解決できます。

f:id:hiyokosabrey:20160811051946p:plain

上のグラデーションテクスチャのアルファチャンネルに入れておくだけなので結果的にテクスチャが1枚で済みます。

 

f:id:hiyokosabrey:20160811044213p:plain Alpha

 

左端の StaticBool ノードは、テクスチャを丸くする際の方向を決めるスイッチです。

リングの太さの調整は白い部分の幅と位置を調整するだけなので、テクスチャを更新するだけでいろいろ見た目が調整できるようになります。

 

これで完成してしまったのですが、

一応 3つ目の出力ピン Linear Distance を使ってみます。

中央から放射状にグラデーションで出力しているようなので、そこを取り出すために、if ノードを使ってみました。

f:id:hiyokosabrey:20160811053239p:plain

これ最初見たとき、「なんじゃこりゃ」と思ってたんですが使ってみると以外に便利ですね。

 ようするに、AとBの値を比較した結果3つに分岐することになります。「AはB以上」なのか「AとBが同じ」なのか「AはB未満」なのか、です。

で、その該当するピンに値をつなげておくと、その分岐にもとづいて流れます。

よく使われるのが、セルシェーダー(アニメ塗りみたいになるやつ)とかデプス(深度)比較です。

f:id:hiyokosabrey:20160811095220p:plain

f:id:hiyokosabrey:20160811094520p:plain f:id:hiyokosabrey:20160811094525p:plain

これを利用して、グラデーションからリングを作ります。

 

 まず大きめの●を作ります。B のピンを 0.75 にしました。

f:id:hiyokosabrey:20160811184120p:plain

小さめの●を 0.6 で作って引き算します。

f:id:hiyokosabrey:20160811184604p:plain

全部つなぐと、

f:id:hiyokosabrey:20160811185044p:plain

 この方法だと、テクスチャに依存しないのでどんな大きさでも作れますが、その代わりエッジのジャギーが気になります。

f:id:hiyokosabrey:20160811185234p:plain

 

そこで最後に、リングを作るもう一つの方法を試しました。

前回の記事でも登場した、GeneratedBand ノードです。

ちょっと調整が微妙なんですが、いい感じです。

f:id:hiyokosabrey:20160811190029p:plain

f:id:hiyokosabrey:20160811190200p:plain

この方法も、どんなに大きなリングでも大丈夫です。

 

一応テクスチャでリングを描いた場合のも載せておきます。

f:id:hiyokosabrey:20160811190720p:plain

最初に載せた3つのゲージはこのように作られたものでした。

 

マテリアル属性が User Interface の場合ですが処理の比較です。

f:id:hiyokosabrey:20160811191146p:plain  f:id:hiyokosabrey:20160811191156p:plain

左側が、if ノードと、GeneratedBand ノードで作った場合。

右側が テクスチャだけで作った場合です。

instructions は 「命令」だと思うので、テクスチャだけで作った方がほんの少し軽そうです。

 

というわけで、今回はこの辺にしておきます

ではでは

素敵なゲージライフを