前回の続きです
ゲージの見た目を改造していきます
まずはテクスチャを使ったアレンジ
といってもグラデーションを乗せるだけ
用意したのは 128ｘ16px のテクスチャ。
← 実寸
インポート時にタイリングの設定を変更しておきます。
UVを動かしたときに、狙った状態にするためです。
前回のマテリアルで、囲みの部分を消します。
空いたとこに テクスチャを
VTilingの値を小さくして、ScalarParameterの値で上下に移動することで、見た目をチェンジ。
テクスチャを使ったアレンジは以上です。
つぎはテクスチャではなくカーブアトラスを使ってみます。
まずはコンテンツブラウザで右クリック ＞ ミソレニアス ＞ カーブ
カーブタイプを訊かれるので、CurveLinearColor を選択。
これを編集してグラデーションを作ります。
アニメーションカーブみたいなグラフなので戸惑いますが、慣れれば面白くなります。
同じように、チャージ中のグラデーションも用意します。
カーブアセットを２つ作ったら、次はカーブアトラス。
コンテンツブラウザで右クリック ＞ みそれにあす ＞ カーブアトラス
開くと、ウィンドウ右側のペインで、カーブをセットすることができます。
Texture Size は 大きいとメモリがもったいないので、カーブの細やかさに合わせて加減します。今回は 128 にしました。 64 とかでもよかったかも。
これでグラデの準備は完了。
マテリアルに組み込んでいきます。
前回のマテリアルから、囲みの部分を消します。
ノードを消すと、 if ノードにエラーが点灯しますが慌てない。
ここに CurveAtlasRowParameter ノードを２つ取り出します。
それぞれに適当な名前を付けてつなぎます。
CurveTime ピンには、 TexCood と UV の Uを取り出す ComponentMask（R）をつなぐことで、水平方向のグラデーションテクスチャとして扱えます。
カーブパラメータノードの中身はこんな具合。
アトラス と カーブ をペアにしてセットします。
これで完成。
テストしてみます。
カーブアトラスについてはヒストリアさんのブログで取り上げられています。
[UE4]カーブアトラス（Curve Atlas）アセットを使ってみる
最後におまけ
上下方向にタイリングするテクスチャを用意。
256ｘ32
容量節約のため グレースケールでインポートします。
これを前回のマテリアルに追加します。
どうなるかというと・・・
回復中であることを強調できました。
マテリアルしかいじってないので、プログラマと分業しているなら、前回の Widgetブループリントはプログラマに預けてしまって、見た目のポリッシュに専念できると思います。
開発プロジェクトの規模が大きくなると、まずは最低限の仕様を満たしたアセットをサクッと作ってコミット。そして組み込んでもらって使えるかどうかの検証をしてもらっている間に、様子を見つつブラッシュアップ。というのが僕がよくやるスタイル。
データを差し替えるだけで見た目がアップするのはステキじゃないですか？
しかもアセット編集がぶつからないのが理想的！
おまけのオマケ
タイリングテクスチャを作っているときに偶然発見した錯視
青い枠線のタテの線が平行じゃないように見える。
というわけで今回はこの辺で。
ステキなゲージライフを！
