ついにこの時が来た。2024年の6月16日から書き始めてから１年以上かかってしまった。途中ネタ募集したり余裕がなくなったりして継続が危ぶまれたけど、それなりに楽しめたので、頑張った甲斐があったなとしみじみ思う。
今までの集大成といえるかは怪しいけど、99本目までを頑張ってこなしてきたからには、これくらいのUI表示はもう作れるよね？という考えで、100本目はいろいろ盛り付けました。
ガッツリやるとボリュームがありすぎて、公開まで日が開いてしまいそうな気がするので、構成としては２部に分けようかと思います。
今回は 作ったものの紹介とヒントを書くにとどめて、詳細は次回ということでネタバラシ編とします。
テクスチャを #100 - Google ドライブ で公開しています。
チャレンジしてみたいけど、アセット用意するのがちょっと・・・という場合にご利用ください。
ファイル名については本文中に "faile_name.tga" のように表記しています。
ではさっそく
100. ゲージ
普通の棒ゲージはつまらないので、リボンをモチーフにしたり、ポップさを出したくてキャラを描きました。ゲームだからダメージを受けるのは当たり前ということで2枚用意したりして時間がかかりましたが、かなりゲームぽくできたと思う。
前回みたいに、ガッツリ仕様を考えたりはしてなくて、とにかくイロイロ作って盛り合わせました。
要素は以下の5種盛り
- 体力ゲージ（遅れて減る2段式で回復あり）
- 数値（体力の数値化）
- レベルメーター風の謎のチャージゲージ（ダッシュ系？）
- チャージ式のお花アイコン（スキル？）
- キャラ２パターン（汗はオマケ）
体力ゲージ
間にキャラを挟み込むのでパーツが手前と奥で分かれています。
さらに、ゲージ、ゲージじゃない塗り部分、黒い枠線という構成。
テクスチャはグレースケールで作成して、シェーダーとブループリントで着色しています。
サイズは 256 x 512px のグレースケールテクスチャ "tex_100_Gauge.tga"
立体ぽく見せるためにも全体にカーブしていますが、両端を垂直にしているので、ゲージとしての分かりやすさを担保しています。
遅れて減るタイプのゲージです。
ゲージじゃない塗りの部分はデザイン的に連続しているように見せつつ、ゲージとしてはつながっていないので、トーンを落としています。
とはいえ、ゲージの増減に連動させることで、ささやかながら満タンと空っぽの状態をフォローするようにしています。
カラーの変化に段階は無く、満タンかどうか、空っぽかどうか、で判定してグレーにしています。
パーツが分かれているので、ゲージとは別にブループリントで制御しています。
回復するときに、エフェクトを重ねるようにしました。
タイリングさせるので、テクスチャは小さく作っています。
サイズは 32 x 32px のグレースケールテクスチャ "tex_100_GaugeUp.tga"
フェードはWidgetブループリントからの制御です。
数値
桁は3桁Maxです。
ゲージのカーブに合わせて、ちょっとカーブさせています。
幅は変えてもよかったかもしれない。
数字の変更は、ブループリントで桁を分解して変更しています。
マテリアルのパラメータにアクセスするには、Dynamic Material Instanceを取得しないといけないのですが、毎回やるのはコストが高いので、事前に変数化しておきます。
11/8 追記：「毎回やるのは」と思い込んでいたのですが、Dynamin Material Instanceがまだ作成されていなければ作成するという仕様で、複数個所でこのノードを配置している場合、最初に処理した場所で作成されるようです。なかったら作るということは、毎度有無をチェックしているということなので、ループ処理でこの判定はどれくらいコストになるんだろうか。変数化なんて考えずに Get Dynamic～をじゃんじゃんつないだらいいよ、というEpicのやさしさ？てことかな。個人的に、変数化しておくこのやり方が、明示的に準備して扱う感じがして好きです。恒吉星光さん情報ありがとうございます。
とりあえず３桁分。
ゼロ埋めにしたので、100以下と10以下で不要な桁のゼロを暗くするようにしました。
数値を受け取ったらマテリアルパラメータに送って数字のUVを変更しつつ、カラーを変更するカスタムイベント。
Selectノードにセットするアルファをゼロにすると見た目に消すこともできます。
サイズは 512 x 64px のアルファ付きカラーテクスチャ "tex_100_Number.tga"
数字の下の余白は、シェーダーで湾曲させてやろうと思って、意図的に確保しました。
余白なしでも湾曲させることはできますが、シェーダー内の計算が増えるので、ひとまず余裕を持たせた形で進めました。
湾曲には、カーブアトラスを使っています。
詳細は次回。
レベルメーター風の謎ゲージ
テクスチャはHPゲージの下部分が空いていたのでそこを利用。 "tex_100_Gauge.tga"
パーツは 枠 と ゲージ に分けて重ねて表示。
ゲージのサイズが小さく、分割線の間隔や角度が均等ではないので TexCoodノードのグラデーションを利用せず、テクスチャを使って増減させています。
あとから分割数や形状が変わると描き直さないといけないのがリスクになるけど、形のユニークさや位置は、プレイヤーのUI操作において学習コストを下げる効果があるので手間を惜しまないようにしたいものです。
カラーの変化に カーブアトラスを使っています。
詳細は次回。
チャージ式のお花アイコン
多分ボムみたいな一発スキル系だと思う。
自動でチャージして、満タンになると使用可能になる。
満タンになったことをアピールしたいのでエフェクトを2種類。
貯まった瞬間の大きいのと、準備OKという意味のループするやつ。
今回 2個並べました。
仕様として １つ目が貯まってから ２つ目を貯めるというふるまいをそのままストレートに作ると大変です。
そこで １つ分のふるまいをWidgetブループリントを作って、USER CREATED パーツとして配置しています。
サイズは 128 x 64px のアルファ付きカラーテクスチャ "tex_100_Bomb.tga"
エフェクトのテクスチャは数字の右のほうが空いていたので拝借。"tex_100_Bomb.tga"
1/4しかないので、復元しています。動きは UMG で拡大とフェード。
テクスチャのアルファチャンネルは真っ黒にしてあるので注意。
ループするやつは 64 x 64px のアルファなしカラーテクスチャ "tex_100_BombEff2.tga"
解像度が低くアルファブレンドだと色が濁るので、
BlendModeを 加算（Additive）にして重ねています。
この Blend Mode 設定は UMGからできないので、Materialエディタで設定します。
中心から外に向かって放射する動きは VectorToRadialValueノードで。
100本ノック企画で紹介していなかったので、載せておきます。
キャラ
テクスチャは 512 x 256px のアルファ付きカラーテクスチャ "tex_100_Char.tga"
ダメージを受け時の効果はこんな感じ。
256 x 256px のカラーテクスチャ "tex_100_CharEff.tga"
将来的にバフやデバフのエフェクトパーツを追加する想定で大きめです。
2パターンの絵を切り替えています。ひとつの大きさは 80 x 72px
シェーダーで常時動き続けています。
普段は非表示で、ダメージを受けたときだけキャラの切り替えにタイミングを合わせて一定時間表示します。
ゲージ残量がゼロになると、キャラのカラーを変化させています。
シェーダーでモノクロの見た目を作って、Lerpノードで切り替えています。
切り替えの動きはWidgetブループリントで制御しています。
要素の説明は以上です
テクスチャ素材を公開しているので、目コピにチャレンジしてみてはいかがでしょうか。次回の記事で答え合わせを書く予定です。
UIとしてそれっぽく動かそうとすると、シェーダーだけではどうにもできないふるまいがたくさんあるので、ブループリントに慣れていないと難しいかもしれません。でも、マテリアルのパラメータをいじって、想定通りの動きを見せれば、UI向けのシェーダーの理解に自信を持っていいと思います。指定書（指示書）でエンジニア（プログラマ）に渡せます。
キャラや背景などの3Dモデル用のシェーダーに比べたら、かなり限定的な使い方ですが、ライトやカメラ、ポストと無縁なUI表示にはこれくらいで十分です。あとはひたすら応用とトンチです。
というわけで次回最終回
ではでは
ステキなゲージライフを！
