Unreal Engine (UE) - Qiita Advent Calendar 2025 - Qiita
アドカレ 19日目に参加させていただきます。
ゲームUIのことで何か、ということで、最近のゲームUI開発について思うところをちょこっと書いて、キラキラしようと思います。
多分察しておられる方もいらっしゃると思いますが、自分はゲームエンジンがまだ無かったころからこの業界にいます。まずデザインがあって、どうにかしてゲームに組み込まなくちゃいけない。このハードウェアで何ができるのかわからない。といろいろ試しながら手探りで開発してました。つまり当時はとてもハードウェアに近いとこにいたわけです。UIだけの特別な作り方や技法などがあるわけもなく。おかげそれなりにグラフィックアーキテクチャにも関心を持つようになりました。
ゲームエンジンが登場して指定書の量が格段に減りました。
パーツAが X座標860 から 120まで減速しながら 16フレームで移動します。12フレームまで移動したタイミングでパーツBを透明度 0 から徐々に上げていき、20フレーム目で255にしてください。
みたいなテキストをプログラマに渡していたのが、タイムラインの登場によって、プログラマがいちいち文章を読み込まなくていい形になりました。素晴らしいですね。
しかもタイミングや細かな数値の変更をプログラマの手を止めることなく行えます。
ゲームエンジンを使った開発も、GUIの編集ツールにおいては最初から充実していたということはなかったものの、いまやこれらの開発環境が当たり前になっています。
開発がスタジオなんかの組織で開発していると、
毎年 新人がやってきて、研修でいろいろお仕事について、エンジンやツールの使い方など教わります。
先輩「このエディタを起動して仕事をするんだよ」
新人「はい！」
といったやりとり。ありふれた光景ですね。
現場に入ってもしばらくは、失敗しないマニュアルにしたがってタスクを消化するだけの仕事が振られがちです。新人に失敗させれば先輩の指導不足と言われかねないし、まずは成功体験を積ませてくじけにくい心を育てる。これはこれで致し方ないのですが、重要なマインドセットを忘れないようにしたいものです。
ゲームエンジンを使いこなすことは、組織の一員として、開発効率上げること、これはとても重要だけれど
ゲームという娯楽商品を作っている
このマインドは決して忘れてはいけないと思うんですよ。
最初から GUI制作の専用ツールがあるのはとても素晴らしいことだけど、専用過ぎて周辺の技術に目が行きにくくなっている気がします。
専用ツールがあるということはそれを駆使するのが当然であるけれど、そのツールでできないということは、やらないほうがいいんだ。というマインドはちょっと残念です。
世間にあふれているタイトルをよく見てみると、どうやって作ってるのか、ちょっと見ただけではわからないものがたくさんあります。そういったヒントをツールで試してみるのはツールを理解する手助けにもなるし、ツールでできなかったとしてもグラフィックアーキテクチャへの理解も進みます。もっとシンプルに、面白い表現、斬新な見せ方、演出なんかを見つけていけたらなと思います。ツールが扱えることは大事だけど、もっといろんな表現、ゲームグラフィクスにも目を向けてほしいな、という話でした。
というわけで、そろそろUMGの取り扱いに慣れた頃合いだと勝手に想定して簡単なスタティックメッシュを使った何かキラキラしたモノを載せておこうと思います。
ただの拡縮じゃない頂点アニメーションを頂点カラーで制御しようというものです。
一見地味ですが、アイデア次第で応用できると思います。
用意するものは Blender です。特別なことはしていないので、Mayaの操作に慣れた方でも理解できる範囲だと思います。
テクスチャを作る
まず星を作ります。テクスチャ節約のため点対称で描きます。
シンメトリーであればOK。
いったんスマートオブジェクトに変換しておきます。
中央に正方形の半透明レイヤーを重ねて置きます。
ちなみに今回のサイズの目安は 448 x 448で テクスチャは 256 x 64 にしたいので、
赤い四角は 64 x 64 にしました。
この四角で選択範囲を取り出して、
イメージ ＞ 切り抜き
で中央部のみにします。
続けて
イメージ ＞ カンバスサイズ
で右側を広げます。
スマートオブジェクトにしておくと中身が維持されます。
このPSDを保存してBlenderへ
メッシュを作る
Blenderは 4.2.1 LTSを使用しました
デフォルトのキューブを消して、パースのつかないプレーンで作業します。
エンジンに持って行ったときに、あまり手数がかからなければなんでもいいと思う。
Add ＞ Mesh ＞ Plane で 4頂点の板ポリを追加。
こういった分割を作ります。
45°回して、4頂点を伸ばします。
これに用意したテクスチャを貼ります。
ピクセルにスナップさせると正確に貼れます。
最初の点対称で描いたピクセルがずれていると、下のようになったりするので、
テクスチャを調整します。
頂点カラーをつける
で
まず中央の4頂点を選択します。
に切り替えて
ペイントするカラーを 0.5 の グレー にします。
塗のタイプを頂点に切り替えるて、Paint ＞ Set Vertex Colors を選択
に戻って頂点を選んで
で色を付けると繰り返します。
いったん Edit Mode から Vertex Paint にマウスで切り替えると、[ Tab ] キーで行ったり来たりできるので楽ちんです。直前のモードと行き来できる仕様。
つける色は
Bはすべて同じ値なので、シェーダーで固定値を入れるのもアリです。
ちょっと色味が気になる場合は、ビューポートの設定を変更します
このポップアップの一番下
スペキュラーライティングをOFFにすると、
すこし白っぽくなっていたのがクリアになります。
スペキュラーライトの設定は書き出すデータに影響はないのでお好みで。
FBXで書き出す
で モデルを選択した状態で
File ＞ Export ＞FBX
書き出しダイアログには、設定できるオプションがたくさんあります。
余計なものを書き出したくないので、Selected Object にチェックを付けます。
作業プレーンによって ここの設定を変更します。
下図は XZプレーンで作成した場合。
多分デフォルトから変えなければ大丈夫です。
設定はこれくらいで、あとはファイル名を決めて書き出します。
インポートする
書き出したFBXファイルをインポートすると設定ダイアログが出てきます。
Meshに
コリジョンは使わないのでチェック外す
Mesh ＞ Advance に
頂点カラーのオプションは Replace （デフォルトはIgnore）
マテリアルはエンジンで作ってセットするので、
探さない、作ったりしない、テクスチャ取り込まない
頭文字を取って 「サッシテ」
・・・すみません調子に乗りました。
あとは Import ボタンを押せばOK。
Blender のバージョンが 4.1以前だと下のような警告ポップアップが出ることがありますが閉じても大丈夫。
テクスチャもインポートします。
ちょっとシャープにしたやつ。
マテリアルを作る
今回の頂点カラーは、『移動方向と量を示す』という使い方をします。
「量」は カラーの輝度で表します。 最大値は 1.0 でマイナスの値は無し。
ここで -0.5 することで、0を中心としたプラスマイナスの関係になります。
Z アップ（Z軸のプラスが上向き）なので、青を縦軸にしています。
赤は水平、緑が奥行き方向です。
Zアップの状態で頂点カラーを着色したので、インポートした後の食い違いを解決するために G と B を入れ替えるようにつないでいます。
途中 2 を掛けているのは、±0.5 を ±1.0 にしているだけなので、そのあとの Multiply で掛ける値を、2倍にして扱えば、無くても大丈夫。
頂点の変形をシーンに配置したメッシュに反映させるために、
こちら↓ の記事を参考にさせていただきました。
[UE5]マテリアルでモデルを動かしてみよう｜株式会社ヒストリア
できた頂点変形の部分
カラーとアルファの部分はこんな感じ
テクスチャのタイリング設定は Clampです。
テストでTimeノードを つないでみると、
こんな動きになります。
これをたくさん表示してみようと思います。
アクターを作る
アクタークラスのブループリントを作って、用意したスタティックメッシュとマテリアルをセットします。
エディタを開いて、スタティックメッシュのコンポーネントを追加します。
左上の ＋Add ボタンから StaticMesh を選択。
エディタ右にある、Detailsパネルで、 メッシュアセットとマテリアルをセット。
あとは
Cast Shadow ・・・ False
Collision Presets ・・・ NoCollision
を設定変更しておくといいかも。
つぎはブループリントを編集していきます。
作りたい 振る舞い は 3つ
- 常にカメラを向く
- アニメーションする
- 消える
まずは常にカメラを向かせます。
ここでは Rotation Z をカメラの位置に向けて、それ以外は変化しないようにしています。Event Tick につないで毎フレーム計算します。
表示するときに、いくらかサイズにバラつきを持たせたいので、 Float型の変数をひとつ用意します。
外から書き込んで使うので、 Instance Editable と Expose on Spawn を有効にしておきます。
アニメーションには AddTimelineノードを使います
タイムラインの中身はこんな感じ。
ある程度、星の腕がある程度短くなったら、スケールを小さくして消す感じにしました。
タイムラインの実行が終わったら、Destroy ノードでサヨナラです。
AddTimeLineノードの Finished ピンに Destroy Actorノードをつなぎます。
プレイヤーの位置に置く
レベルを作成します。New Level で Basic あたりだと軽いです。
ひとまずマネキンが操作できれば大丈夫です。
レベルブループリントから一定間隔で、プレイヤーのポジションにアクターを配置します。
プレイヤーが動いていると出現して、止まっていると出さないようにしたいので、最後にスポーンしたロケーションを保持しておくための Vector型の変数を用意します。
比較して差異がなければ何もしません。
再生中は常にプレイヤーの位置を取得しつづけます。
Event Tickでもいいのですが、取得タイミングを調整できるようにカスタムイベントにしました。
つづき
数が少ないと寂しいので、2つずつスポーンするようにしています。
アクターをスポーンさせるのはこのノード
Class のところに、用意しておいた アクターBPをセットします。
セットすると、アクターBPの中の変数に Expose on Spawn を有効にしているので、自動でピンが追加されます。
スポーン場所に揺らぎが欲しいので、プレイヤーの位置にいくらかのランダム値を加えています。任意の範囲で乱数を発生させる関数を用意。
スポーンさせるときの Transform に渡すようにします。
最後は Set Timer by Event ノードでカスタムイベントを再呼び出し。これでずっとループします。
Event BeginPlay で呼び出しておくだけで、再生時に動くようになります。
再生してみる
トゥーンなキラキラエフェクトなので、漫画っぽく立ち絵に乗せたり、目や頭にあしらってみたり、してもいいかもしれない。
ちゃんとプールする仕組みを作ったりしたいところだけど、今回はカンタン頂点アニメーションを楽しもう！という謎企画なので、このあたりで許してもらえると助かります。Niagaraを試してもよかったと今になって思ったり。
今回のはただの拡縮に見えなくもないけど、ただ四角いテクスチャを画面にレイアウトする以外にも いろいろ作れるようになってほしくて、メッシュを使った UI 表現に馴染むきっかけになってくれたらいいなと願ってます。
今年はゲージの記事ばかり書いてましたが、来年は、PCも新しくなったことだし、メッシュを使ったテクニックを書いていけたらと思ってます。
ストレージも大きくなって、UEもようやくアップデートできるようになるしで、検証が捗るといいなぁ。
年末進行で慌ただしい時期だったりするかもですが、風邪などひいて貴重な冬休みがなくならないよう 皆様 お体にお気をつけてお過ごしください。
ではでは
素敵なクリスマスを！
（ゲージの外は雑でもバレない）
