UE4はマテリアルで円形のゲージが簡単につくれます。公式のドキュメントに載ってるので、ここで紹介しなくてもいいかな～とか思ってたんですが、購読してるブログ、ぼっちプログラマのメモにあった
を見てて、ちょっと試してみたくなったのでそのメモです。
同じようにカギを握るこの VectorToRadialValue ノードさんですが、
せっかく面白そうな出力が３つあるので全部使ってみました。
で、できたのがこれ。
ゲージの増減は、Vector Converted to Angle の出力ピンをValueStep ノードのMaskOffset値で調整して行います。
そこはあちこちで紹介されているのと当ブログでよくお世話になってるので、ここではスルーします。
ゲージの色がただの単色だと見た目にしょぼく見えるので、グラデーションをのせたくなったりします。そこで以下のようなテクスチャを作ることになると思います。
狭い範囲にたくさんの色が入ってきて、テクスチャの圧縮がかかるとノイズがでます。
かといって大きくすると容量がもったいない感じです。
そこで使うのが、RadialCordinateの出力ピンです。
使ったテクスチャは 128ｘ16 です。
RGB
これを使うと、テクスチャが安く作れて、グラデーションの調整が捗ります。
しかも境界のハッキリしたゲージの場合、アンチエイリアス用の中間色を入れやすいので、Photoshopのグラデーションツールに時間をかけなくても済みます。
解像度が気になる場合は、そのまま横方向に伸ばすだけなのでコスパ的においしいはず。
次にリングの形にするためにアルファマスクを使うのが一般的？だと思います。そうすると、大きくなるとその分大きなマスクテクスチャが必要になって、なんかもったいない感じのテクスチャが生まれます。
これもRadialCordinate の出力ピンで解決できます。
上のグラデーションテクスチャのアルファチャンネルに入れておくだけなので結果的にテクスチャが１枚で済みます。
Alpha
左端の StaticBool ノードは、テクスチャを丸くする際の方向を決めるスイッチです。
リングの太さの調整は白い部分の幅と位置を調整するだけなので、テクスチャを更新するだけでいろいろ見た目が調整できるようになります。
これで完成してしまったのですが、
一応 ３つ目の出力ピン Linear Distance を使ってみます。
中央から放射状にグラデーションで出力しているようなので、そこを取り出すために、if ノードを使ってみました。
これ最初見たとき、「なんじゃこりゃ」と思ってたんですが使ってみると以外に便利ですね。
ようするに、AとBの値を比較した結果３つに分岐することになります。「AはB以上」なのか「AとBが同じ」なのか「AはB未満」なのか、です。
で、その該当するピンに値をつなげておくと、その分岐にもとづいて流れます。
よく使われるのが、セルシェーダー（アニメ塗りみたいになるやつ）とかデプス（深度）比較です。
これを利用して、グラデーションからリングを作ります。
まず大きめの●を作ります。B のピンを 0.75 にしました。
小さめの●を 0.6 で作って引き算します。
全部つなぐと、
この方法だと、テクスチャに依存しないのでどんな大きさでも作れますが、その代わりエッジのジャギーが気になります。
そこで最後に、リングを作るもう一つの方法を試しました。
前回の記事でも登場した、GeneratedBand ノードです。
ちょっと調整が微妙なんですが、いい感じです。
この方法も、どんなに大きなリングでも大丈夫です。
一応テクスチャでリングを描いた場合のも載せておきます。
最初に載せた３つのゲージはこのように作られたものでした。
マテリアル属性が User Interface の場合ですが処理の比較です。
左側が、if ノードと、GeneratedBand ノードで作った場合。
右側が テクスチャだけで作った場合です。
instructions は 「命令」だと思うので、テクスチャだけで作った方がほんの少し軽そうです。
というわけで、今回はこの辺にしておきます
ではでは
素敵なゲージライフを
