UIチャレンジ振り返り

もう年末、プロジェクトは終わってないけど年内分の仕事もなんとなく納まったのでやれやれです。年々体力に自信がなくなっていくのがヤバイですね。

この７月から参加している UIチャレンジ企画 について作ったものを振り返ってみようと思い立ったので、記事にまとめることにしました。

この企画は、「皆で楽しむUIチャレンジ」をコンセプトに、デザニメ・ラボ さんがTwitte上でお題を出して作品募集、レビューを動画で配信もされています。

twitter.com

最近のから順番に振り返っていきます。

第12弾 ストアレビューダイアログ画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画、第12弾✨

参加者は、下記ハッシュタグをお願いします🙏#デザニメUIチャレンジ

YouTube配信OKな方は、@design_anime_lb
を添えてツイートして下さい。

〆切は、12/23（木）23:59です🗓️

🔽画面参考https://t.co/ReodxW3GMDhttps://t.co/aEGh3kgPlB pic.twitter.com/29mY3Qmcgk

— デザニメ・ラボ (@design_anime_lb) 2021年12月2日

四角いウィンドウはやめよう、角丸もちょっと違うな、というところまで考えてはいたものの、結局前日まで作業しなかったのはちょっとだけ後悔。

年末にかけての気ぜわしさと、ブログの記事が思うように進まなかったのもある。

ほとんどラフだけど、なんとか投稿はできた。

第12弾 今回時間切れ投稿です
RateUs がボタン感薄いのとか、星をツリーに付けるのとかやりたかったな@design_anime_lb
#デザニメUIチャレンジ pic.twitter.com/Oll5pS4RYH

— みつまめ杏仁 (@MMAn_nin) 2021年12月23日

ぼくは ある程度遊びこんでから判断したいので、ストアレビューダイアログが出てきたらすぐに閉じてしまう。なのでわざわざ専用で手の込んだダイアログが出てきたら、諸々リソースの使い方として勿体ないんじゃないかと気になったりする。１点もので１度条件を満たせば２度と出なくなるようなUIは、常駐させないようにしてなるべくエコなつくりを目指す。

とはいえせっかくのUIチャレンジなんで、普通だとやらない表現を試すのも楽しみ方のひとつだと思う。

評価の☆をつける時の雰囲気を少しでも変えられたらいいな、と考えてクリスマスツリーのオーナメントに見立てて並べられるようにしてみた。

雰囲気的に、☆をツリーにつけるときの動きを直線的にしたくなくて、いい感じのカーブにするにはどうすれば・・・と悩み始めたときにはもう締め切り前日。

投稿後にベジェ曲線で柔らかいカーブでやろうと思ったりしたので、スプライン補間について調べてUE4で実装したのがこれ。

なんとかUMGで動くようにしてみたけど、日付変わってしまった
ハッピーホリデー！#デザニメUIチャレンジ pic.twitter.com/ftV9vlvQbi

— みつまめ杏仁 (@MMAn_nin) 2021年12月25日

投稿した時の絵だと、操作方法を誘導できていないので、クリック位置を示す表示をツリーに加えた。

第11弾 武器強化のレベルアップ画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画、第11弾🎉

参加者は、下記ハッシュタグをお願いします🙏#デザニメUIチャレンジ

YouTube配信OKな方は、@design_anime_lb
を添えてツイートして下さい。

〆切は、11/25（木）23:59です🗓️

3週間と長めにとっていますので、
たくさんのご参加、お待ちしております✨ pic.twitter.com/HnqRN8Ezdj

— デザニメ・ラボ (@design_anime_lb) 2021年11月4日

演出メインか～エフェクト頑張るかな～、とちょっと余裕かましつつレイアウトを考えていたら、はたと気づいてしまった。これはビフォーアフター のいるやつや！

レベルアップ前とレベルアップ後の差分を作る必要が出てきた。そこでいろいろ流れを考えていたら、結構ガチな遷移を考えることに。結局そこそこ手間がかかることになった。

武器の名前を考えていた時に、ふとレトロな表現がやりたくなって、Photoshopのシェイプで作字にチャレンジ。

読みは キフツマル かな。赤色にしたときにそれっぽくなったので満足。

せっかくレトロ感のある武器のロゴができたので、全部昭和にしてしまえということで、昔のゲーム攻略雑誌みたいなテイストにすることに決める。

今ほど自由度の高い DTP環境がなかったので、あまり手の込んでないシェイプやグラデーションを使っていくスタイル。

仕上げとして、フィルタ的にハーフトーンの点描を加算半透明でかぶせて、昔の印刷物の雰囲気を醸してみたけどどうだろう。

武器に日本刀を選んだので結構苦労した。最近は資料が溢れまくってるので、テキトーに描くといい加減なのがすぐにバレてしまう。柄巻きは意外に奥が深いことが分かった。鍔や下げ紐のバリエーションを、武器のレベルで変えたかったけど、時間の都合で断念。結局鞘の蒔絵が描き足されていくことでグレードを表現。

最後のレベル、月に鳥（ホトトギス）は花札を参考にして描いた。

なんとか見れる形になったので投稿します。作り始めたらアレもコレもと欲張って大変なアセット量になってしまった。いつも思うけどUI担当のプログラマさんって大変だなぁ・・・
配信OKです @design_anime_lb#デザニメUIチャレンジ #UE4 #ue4UMG pic.twitter.com/PAeWYU9kUy

— みつまめ杏仁 (@MMAn_nin) 2021年11月23日

フローとしてこんな感じ。

次レベルのスペックを確認してから、上げるかどうか考える仕様。

今改めて見直すと、次のレベルを確認する際に、一時的な表示であることをあまり強調できていないので、上げた気にならないかが懸念。

用意するアセットが多くて大変だったけど、楽しかったので、ガッツリと作ってしまった。

第10弾 ハロウィンガチャの結果画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画、ついに第10弾🎉

参加者は、下記ハッシュタグをお願いします🙏#デザニメUIチャレンジ

YouTube配信OKな方は、@design_anime_lb
を添えてツイートして下さい。

〆切は、10/21（木）23:59です🗓️

たくさんのご参加、お待ちしております✨ pic.twitter.com/a1DF3sTB90

— デザニメ・ラボ (@design_anime_lb) 2021年10月7日

アイデアはありつつも手を付けるのが遅かったので、絵を描き始めてから間に合わないことに気づいて、絵コンテでの参加。

カメラ移動の都合で2枚目は下から上という変則的なナンバリング。

かぼちゃの吐く煙でちょっとだけアイデアがあったので試してみたかった。

素材に時間がかかるタイプは、まとまった時間を作らないと、思うようなクオリティに持ってくのが難しい。

多人数で開発していると、キャラや背景はお任せすることが当たり前になってしまっているので、素材を用意することを失念しがち。

割と冗長かなと思ったけど、常設のガチャと違い、ハロウィンイベント用ということで、ちょっと特別感を出せば、多少長めの演出でも大丈夫かな？という判断。

ガチャならではの「何が出るかな？」感は煙からシルエットをフェードインで演出。

煙で画面を埋めると、その後の画面遷移がラクなので。

場面は、どこか西洋の豪華な屋敷のカーペットの敷かれた広間。

古風で使い古された演出のステレオタイプだけど、なんとなくハロウィンに合いそうと思った。

第9弾 ポップな図鑑（子ども向け）画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画第9弾🎉

参加者は、下記ハッシュタグをお願いします🙏#デザニメUIチャレンジ

YouTube配信OKな方は、@design_anime_lb
を添えてツイートして下さい。

〆切は、10/7（木）23:59です🗓️

たくさんのご参加、お待ちしております✨ pic.twitter.com/KDTMKcgDuM

— デザニメ・ラボ (@design_anime_lb) 2021年9月23日

今見ると、フツーに子ども向けで、ポップさはどこに？という感じ。

ゲームが存在するとしたら、タネのグラフィックはキチンと描き込まれている想定。

お題が「子供」ではなく「子ども」だったので、勝手にターゲットの年齢を低めに設定。

純粋に図鑑を喜ぶ年頃だとしたら、小学校上がる前かなということで、操作ナビ表示をハンドサインで示そうと試してみた。

こういうシンプルにループするパターンアニメーションはシェーダーにやらせると、タイムラインを消費せず、アセットも分けなくてよくてメリットが大きい。タイムラインによるフェードイン／アウトを重ねやすいのもいい。

戻るボタンについては、押したらすぐに大きな反応があって学習コストが低いのと、押した結果に時間消費以外のリスクがほぼ無い設計なので、シンプルにピクトアイコンを採用。

結構テクスチャの作りに手間取ったのが虫眼鏡の動き。

虫眼鏡越しにチラ見せする？をいい感じにパターン化するためにPhotoshopのマスクを工夫しながら調整。

これもずーっと勝手にループしてるやつなので、タイムラインを使わずにパターンアニメーションさせるためにシンプルなシェーダーを用意。

なるべく絵の情報量をタネに集中させるために、UIの質感表現は極力減らした。

という言い訳が通じればラッキーだなと思いながら、調整に時間がかかるドロップシャドウやグラデーションは控えめにした。

UE4使って作ってみたかったのもあって、絵素材を用意する時間を減らしたかったというのも言い訳としては大きいかな。

チェレンジ第９弾 のラフができた
キャラと手を配置して何をする画面なのかをそれとなく示す感じで
#デザニメUIチャレンジ pic.twitter.com/l4DlgGBy4G

— みつまめ杏仁 (@MMAn_nin) 2021年9月30日

チェレンジって、きっと Challenge のスペルが混ざってタイプしたのだと思う。たぶん。

第8弾 VTuberのライブ配信準備中の画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画第8弾🎉

参加者は、下記ハッシュタグをお願いします🙏#デザニメUIチャレンジ

YouTube配信OKな方は、@design_anime_lb を添えてツイートして下さい。

〆切は、9/23（木）23:59です🗓️

たくさんのご参加、お待ちしております✨ pic.twitter.com/1dyCOXptTK

— デザニメ・ラボ (@design_anime_lb) 2021年9月9日

ジャンルは、ポップ、キュート の指定。

ポップさは色数をたくさん使いつつ、キュートさはお花と小鳥を、と考えたのが最初のやつ。

第8弾参加します
キャラを描けたら乗せたやつ作るかもです#デザニメUIチャレンジ #UE4 #ue4UMG pic.twitter.com/2QX5ocr4No

— みつまめ杏仁 (@MMAn_nin) 2021年9月17日

色の帯 １本毎にマテリアルインスタンスでパラメータを調整しながら絵がつながるようにした。

またこの色の帯の優先順位をばらつかせるように個別に設定して、小鳥のパーツを飛ばすと間を縫って飛ぶような見せ方ができる。

ちょっと北欧風過ぎたのと、他の方の作品を見てると、キャラが居たほうがそれっぽいなと思い立ち、急いでキャラを描いた。

なんとなく水棲生物系モチーフは少なそう、と勝手に判断。

キャラはできたものの１つ目のと全然合わない感じなので、新しく画面を作り直すことに。

ループ素材としてカラフルなウェーブを雲海に見立てて、多重スクロールで奥行き感を演出。文字は流そうかと思ったけど、魚つながりで、飛び跳ねてる方が面白そうだったので、放物線の動きをネットで調べてブループリントで実装。

キャラ描いてみたけど全然違う方向性になったので、別のビジュアルをつくってみる。
UIチャレンジ 第8弾 2本目
配信・コメントOKです @design_anime_lb
#デザニメUIチャレンジ #UE4 #ue4UMG pic.twitter.com/TCinR1KBi0

— みつまめ杏仁 (@MMAn_nin) 2021年9月19日

キャラが上下に揺れるのは、動きが単純なのと緩急が一定なのでタイムラインでやるより計算したほうが効率的と判断。

サインカーブほんと便利。

こんなに使えると知ってたら、数学の成績上がってただろうな。

そこそこ頑張って描いたので高解像度版を貼って供養。

第7弾 ファンタジーゲームのショップ画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画第7弾🎉

参加者は、下記ハッシュタグをお願いします🙏#デザニメUIチャレンジ

YouTube配信OKな方は、@design_anime_lb
を添えてツイートして下さい。

〆切は、9/9（木）23:59です🗓️

たくさんのご参加、お待ちしております✨ pic.twitter.com/ATwFjc2oDs

— デザニメ・ラボ (@design_anime_lb) 2021年8月26日

ファンタジーのショップといえば、禿頭のムキムキマッチョ親父が真っ先に浮かんだけど、ムサイ絵にしたくなかったのと、店の近くでボタンを押すとリストが出てくるタイプのはフツー過ぎるでの、ちょっとだけダイエジェティックにしたかった。

そこでアイテムの形が分かりやすく見せるには、カウンターに並べるのがよさそう。

たくさん並べられないのが難点だけど、ファストトラベルとかがある想定なら大丈夫。

と勝手に納得して描き始めたものの、慣れないタッチで挫けそうになった。

布の色で効果のカテゴライズ、形でグレードを表す仕様。

例えば緑の布は 体力回復 とすると、どこのショップでも体力回復系は緑。効き目が大きいほど、房飾りがついたり、装飾性が上がっていく。効き目がしょぼいと、ぼろぼろになっているとか。

ゲームの世界観についても考えながらなので、それなりに時間がかかった。

カウンターの向こうにいるのは、店主兼魔法使いである黒猫（瞳しか描いてない）と店番兼魔法使いの弟子。

UI自体はシンプルで、UE4で作ろうかと考えていたけど、時間が取れずに静止画で投稿。

実際作るとなったら愛らしいキャラモデリングでかわいいボイスでいい感じにアクションしてくれると思う。

第7弾 滑り込み参加します
もうラフすぎて泣けてくるのですが、イメージ案ということで・・・
盗難防止で購入後に瓶に詰めてくれるスタイル。垂れてる布のカラーと形でポーションのカテゴリとレベルをそれとなくユーザーに刷り込む仕様
配信・コメントOKです#デザニメUIチャレンジ pic.twitter.com/aFrxoXPwHI

— みつまめ杏仁 (@MMAn_nin) 2021年9月9日

フリーカーソルで瓶を選ぶとそこでようやくアイテムの詳細と値段が分かるというのは、せっかちなDだとまぁ普通は NGが出ると思う。

表現力が上がって、世界の情報量が増えてるいるからこそ、まったり本気のロールプレイができてもいいんじゃないかと思う。

第6弾 ログインボーナス画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画第6弾🎉

参加者は、下記ハッシュタグをお願いします🙏#デザニメUIチャレンジ

YouTube配信OKな方は、@design_anime_lb を添えてツイートして下さい。

今回、制作期間を2週間にしたので、〆切は、8/19（木）23:59になります🗓️

たくさんのご参加、お待ちしております✨ pic.twitter.com/7xKbeuMhZS

— デザニメ・ラボ (@design_anime_lb) 2021年8月5日

テーマはジャンル不問。

補足に、ログインボーナスのロゴだけでもOK。キャラや背景にフリー素材を使ってもOK。

とある。

8月入って暑い盛りで、なんとなく夜祭のイメージで、お狐様かな～と思って描き始めたラフ。

ただ並べるだけなのもつまらないので、アイスを積み上げてみる。

途中で食べると、ボーナスのグレードが上がらない仕様を考えて、説明がいるなと思ったので、フキダシを乗せる。

ちょっとモルカー味を足してできたモッチリお狐様が誕生。

画面上部のカマボコ ●●●●は最初アイスクリーム屋台の庇（ひさし）のイメージだったけど、カメラに近いというか、見ている方への圧が強いので、祭りの提灯のイメージに変更。

第6弾参加します
ログインボーナス画面
逆に受け取らないことで豪華になっていく仕組み
以外に要素が多くて時間がかかってしまって力尽きた😝
作ったことない画面だったので面白かったです
コメント配信OKです
#デザニメUIチャレンジ pic.twitter.com/9WMecGRJaJ

— みつまめ杏仁 (@MMAn_nin) 2021年8月15日

このチャレンジで さくの賞 をいただくことができた。

いただいたAmazonギフトで気になってた本をゲット。

第5弾 何度も見たくなるローディング画面を作ってみよう！

お題は

皆で楽しむUIチャレンジ企画第5弾🎉

参加してくれる方は、
下記ハッシュタグをお願いします。#デザニメUIチャレンジ

YouTube配信OKな方は、好きなジャンルの「@名前」を添えてツイートして下さい☺️
(@design_anime_lb)自由
(@HanaSakuno)デザイン
(@takayuP4)アニメ

ラフでもOK👌 pic.twitter.com/lhDrWM9nFf

— デザニメ・ラボ (@design_anime_lb) 2021年7月29日

補足に、ネタ要素やストーリーを入れたりなど工夫して、「もう一度見たい」

と思わせるローディングを考えてみよう！

とある。

ヒトは同じパターンが繰り返されてるとわかったとたん興味を失ってしまう生き物。

常に新鮮な体験を求めているものなので、ランダム要素は必須。

さらに何らかの報酬が脳内に生じればカンペキ。

とはいえ、ゲームの本編を遊びたいのに遊べない時間なのはストレスでしかないので、ローディング画面が好きな人はまずいないと思うし、ローディング画面を見るためにゲームをプレイしているわけではないと怒られそうなので、できる限り簡素に作るのが基本として今まで生きてきた。実際ロード時間（+メモリへの展開時間とかモーションのセットアップとかセーブデータの反映とか諸々含んでる）を少しでも短くするするために、バックグラウンドで処理したりシビアなメモリ管理をエンジニアの手によってなされている。なかなかUIに処理を割いてくれと言いにくい。

コンソール機では、一定時間以上になればプレイヤーに有益な情報を表示しなさいとか、文言縛りとか、いろいろレギュレーションがあったりする。画面がフリーズしていないことを表すための動きが最低限あればまぁ大丈夫。

で、何が釣れるかな？というドキドキをメインに考えてみた。

釣り上げるのは、TEXTURE とか ゲームを構成する何かをテキストにしたもの。

第 5 弾参加です
ちょっと雑だけど何とか一日でここまで作れた
常駐するので容量抑えないといけなかったりするけど1024x1024 GrayScale(R8) 1枚
ネタは塊魂の影響ですね
配信・コメント OKです#デザニメUIチャレンジ #UE4 #ue4UMG pic.twitter.com/CrzdcUqQkP

— みつまめ杏仁 (@MMAn_nin) 2021年7月31日

テクスチャアトラスはこんな具合。

UVの範囲にカラーをつけるこうなってる。

竿のカーブが一番難しくて時間がかかった思い出。

もうひとつおまけで作ったのが、簡単なシェーダーで動くやつ。

テキストを動かしてゾートロープの実験してたらそれっぽい見え方をするのができた
ぴったり合う瞬間が一番最高速なので可読性は一見すると低いけど、スクロールの残像でなぜか読めてしまうという不思議#デザニメUIチャレンジ pic.twitter.com/oHcaTzUWmu

— みつまめ杏仁 (@MMAn_nin) 2021年8月1日

第4弾 夏をイメージしたフレームデザインを作ってみよう！

お題は

皆で楽しむUIチャレンジ企画第4弾🎉

参加してくれる方は、
下記ハッシュタグをお願いします。#デザニメUIチャレンジ

YouTube配信、コメントOKな方は、好きなジャンルの「@名前」を添えてツイートして下さい☺️
(@design_anime_lb)自由
(@HanaSakuno)デザイン
(@takayuP4)アニメ

ラフでもOK👌 pic.twitter.com/dOG0t4qpMl

— デザニメ・ラボ (@design_anime_lb) 2021年7月23日

テーマが、 青空・海・スイカなど夏をイメージさせるデザイン

最初に考えたラフ

雰囲気は気に入ってたんだけどうまく描ける気がしなくて断念。

夏といえば、空は青く雲は白く眩しくということで、思い切って2色で描いてみようということに決めた。

なんとなくオシャレなリゾート地のボートハウスなんかにありそうな看板をイメージ。

あとはとにかく四角いウィンドウにするのがイヤイヤ期なので、雲のシルエットを出したり、下は波のイメージでカット。

第4弾参加
Photoshopのブラシが楽しかったので、チョークアート風のシンプルフレームにしました。ダイアログウィンドウ的な用途を想定#デザニメUIチャレンジ pic.twitter.com/Q5dl8wEoQJ

— みつまめ杏仁 (@MMAn_nin) 2021年7月25日

ネタ的にカモメのスクロールバーがお気に入り。

下のでっかいヒトデや貝のモチーフは、ボタンを想定。

第3弾 ゲーム終了時の「CLEARの文字」を作成してください。

お題は

皆で楽しむUIチャレンジ企画第3弾🎉

参加してくれる方は、
下記ハッシュタグをお願いします。#デザニメUIチャレンジ

YouTubeライブ配信、コメントOKな方は、好きなジャンルの「@名前」を添えてツイートして下さい☺️
(@design_anime_lb)ラフ
(@HanaSakuno)デザイン
(@takayuP4)アニメ

ラフでもOK👌 pic.twitter.com/5fmVm6VGHl

— デザニメ・ラボ (@design_anime_lb) 2021年7月16日

テイストに サイバー風デザイン の指定。

何をもってサイバーとするかとても難しくて、よく見るのはステレオタイプのものがほとんど。仮に定義しても、「カッコイイ」「カワイイ」のように個人差が大きいので、ナンカチガウ になりがち。とりあえず、斜め線 と 半透明、グロウ（発光）の要素を入れておけばそれっぽくはなるけど、何か革新的なテクノロジーに紐づくモチーフ（最近ならHMDとかARグラスがポピュラーかな）を匂わさないと、ディスプレイ表示だけで新しさを出すのは難しいなと思う。

とかなんとか分かったような分かってないようなことを書いてるけど、とりあえず無駄そうに見える幾何学的なラインを光らせたり重ねて視差を作ればええんとちゃう？

というのが落としどころかと思いつつも、リザルト画面として使えるようにしてみた。

"皆で楽しむUIチャレンジ企画第3回"参加
ざっくりだけど雰囲気はこんな感じかな
文字は無加工
それとなくリザルト情報入れ込んでます
#デザニメUIチャレンジ pic.twitter.com/K1nPqUZLqv

— みつまめ杏仁 (@MMAn_nin) 2021年7月17日

QRコード は ３か所の 回 を1pxのブラシ（鉛筆）で描いて 2階調化したノイズ重ねる。それをニアレストネイバーで拡大して完成。

一応コードリーダー通してみて反応がなかったので（ホンモノはデータサイズが規格化されてる）、デザインモックとしてはバッチリ。バーコード的なものもサイバー風かなと思って置いた。

かつてのアーケードゲームってオンラインじゃなかったので、リザルト画面に出たQRコードを ケータイ で読むとランキング登録できるという仕組みを提案したことがあった。いろいろ大人の事情で実現しなかったけど。

今はもうスコアを勝手にアップされる時代なので、コンソールのゲーム画面でクーポンコードを発行して、それをスマホから利用できるようにするとか？

画像が小さいとちょっと見えにくいので部分拡大。

実装はできてないけど、レンダーターゲット使って、レイアウトをいったんキャッシュ。シェーダーでモザイク化したやつを加算する想定。

第2弾 ゲーム開始前の「スタートボタン」を作成してください。

お題は

皆で楽しむUIチャレンジ企画第2弾🎉

参加してくれる方は、
下記ハッシュタグをお願いします。#デザニメUIチャレンジ

YouTubeライブ配信、コメントOKな方は、好きなジャンルの「@名前」を添えてツイートして下さい☺️
(@design_anime_lb)自由
(@HanaSakuno)デザイン
(@takayuP4)アニメ

ラフでもOK👌 pic.twitter.com/wt206jTAnh

— デザニメ・ラボ (@design_anime_lb) 2021年7月9日

テイストに 和風イメージ が指定されてて、きらびやかで雅な感じのモチーフは、まぁ誰かやるでしょう、ということで趣を変えてみた。

紙の白に朱色だけを使い、全体的に紅白のめでたい感じを演出しつつ、フラットベースで大き目のモチーフをあしらうことで、地味にならないようにしてみたんだけどどうかな。

第2弾参加させていただきます。縦画面用に作ってみたけど解像度の設定がうまくいけてない気がする。シンプルに単色です。上の空白にはタイトルロゴが入ると思う。配信/コメントOKです。#デザニメUIチャレンジ #UE4 #ue4UMG pic.twitter.com/8YrvkeNhqc

— みつまめ杏仁 (@MMAn_nin) 2021年7月10日

デパートとかショッピングモールの新春初売りセール広告みたいと言われればそんな気もする。

第1弾 「スプラトゥーン２」と「ウマ娘」からインスピレーションを受けて、オリジナルの「OKボタン」を作ってください。

お題は

毎週金曜日に、自分にお題を出して、土日に制作というのをチャレンジしてみます😆

初回は、しばりのあるお題にしました。

もし一緒にやってくれる方は、ハッシュタグをつけてツイートしてもらえると嬉しいです。#ゲームUIチャレンジ#001スプラ・ウマ娘

見つけたら、リツイートなど反応します☺️ pic.twitter.com/6pui2uRqJG

— はなさくの｜ゲームUIデザイナー🎮 (@HanaSakuno) 2021年7月2日

このツイートが始まりでした。

この時はまだ、デザニメ・ラボ発信、というより はなさくの さんの公開チャレンジで、並走ウェルカム！といった趣の企画。

版権の絡みそうなものは避けたがる体質なので、参加しようか躊躇ったけど、水タイプと草タイプというか軸の合わなさそうなモチーフを合わせようという大胆なチャレンジに興味が湧いた。

シェーダーを使っていろいろ遊んでた頃なので、輪っかを揺らすことでスプラのリキッド感を表現。ウマ娘は、決定時の演出効果を真似る感じで。

@HanaSakunoさんの企画にチャレンジです
スプラの液体っぽさとウマ娘の決定時のエフェクトを意識してみたけどどうだろう
入力デバイスをどうするか悩んで一応マウス対応しつつタッチもいけると思うけど#ゲームUIチャレンジ #001スプラ・ウマ娘#UE4 #ue4UMG pic.twitter.com/oAlYYHoPGI

— みつまめ杏仁 (@MMAn_nin) 2021年7月3日

もう半年前になるのか、ちょっと懐かしいな。

参加してみて

第12弾まで全てに参加できた。皆勤賞！

ネタが思いつけないと「今回は不参加でもいいかな」って考えつつ日々を過ごしてしまい、締め切りが近づいてくると、そわそわしてくる。

ある時、

　─── ここで降りたら、逃げたことにならないか？

と思うようになった。使命感に目覚めたということか。

今までのUI開発経験を思うと、それなりの数をこなしてきた自負のようなものが少しはある。どんなテイストでもデザインできるのがプロってやつだとするなら、UIチャレンジのどんな弾でも立ち向かって解決できないと、あるかないか ほとんど意識したことないプロ意識とはいえマジで無かったことになってしまうとさすがにつらい。

とかなんとか、真面目そうなことを書いてみたけど、実際はそれなりに楽しみつつ、自分なりのチャレンジができて収穫もあった。

UIを好きにデザインするのは難しくて、なかなか本腰が入らない。アートディレクターやディレクターのOKが出るまでは、ラフというか仮デザインというのに慣れてしまってるのもあって、UIチャレンジも丁寧に仕上げて出せていないところが結構ある。このあたりちょっと罪悪感みたいなものが残ってたりするのはこの長年の習慣のせいだと思いたい。

あともうちょっと言い訳すると、Photoshopでレイアウトをキッチリ組んでOKもらっても、テクスチャに落とし込むときに、中途半端な大きさだったりして、調整することがほとんど。特にインタラクションで発生するエフェクト素材は、サイズが読みにくかったりする。デザインチェックの段階で、ピクセルレベルで仕上げてしまうと、実装する際に詰んでしまうこともしばしば。キッチリしたものにOKもらってるぶん変えるのをためらってしまうことになる。

この辺はプロジェクトや現場の人間関係、信頼度によるところも大きいので、環境が変われば、採れる戦略も多少変わってくる。

ぼくの場合は80点くらいの完成度でプレゼンする。OKが出たらさっさとアセット作ってエンジン上で90点くらいに整える。残りは、他のUIが出揃ってきてからゲームを触りながら調整することが多い。

何かを固定するための複数のネジを締めるとき、ひとつずつを確実に締めていくやり方は、歪みが出たときに他のネジに負荷が掛かるし、直すのが大変になって時間がかかってしまうというのを学生のころ学んで、今でも大事にしている。

決して手を抜いてるわけでもないけど、渾身かといえばそれほどでもないところはやむなしと自分に言い聞かせつつ、UIチャレンジでの自分の役割は、他の参加者に少しでも刺激になれるように、ちょっとでも大胆に、そして誰もやらなさそうな方向性を提案することだと思って作ってた。

別にコンペでもないし、優劣とかなくて気軽に参加できるのがいい。「なるほどその手があったか～」といえるものに出会えるのが楽しみでもある。

というわけで、2021年 デザニメUIチャレンジ 何とか走りきれた。

開催してくださったデザニメ・ラボさん のお二人、はなさくの さん、たかゆ さん、参加された皆様おつかれさまでした。

来年もできる限り参加したいと思います。

ではでは

ステキな UIチャレンジライフを！

みなさまお年を

3DメッシュでつくるUI ー 矢印をつくる

ゲームのUIを作っていると一度くらいは矢印をデザインすることがあると思います。今回は動きのある矢印を3Dメッシュでつくります。動きといってもUVのスクロールです。テクスチャのUVを移動させることで絵が流れて見えるやつです。

前回の記事で使ったカーブを応用するとこんな矢印も作れます。

ひとつのメッシュから法線の向きを反転させたもう一つのメッシュを作り、それぞれ違う色のマテリアルをセットし同じ位置に表示すると、裏表で色が違うという表現ができます。Backface Culling（陰面消去）でそれぞれの裏面は描かれないというのを利用しています。

このウネウネはテクスチャの歪みを抑えるために頂点数は結構多いですが、

テクスチャサイズは64ｘ64です

←実寸

テクスチャを繰り返して並べることをタイリングといいます。前回の記事で書いたWrap（ラップ） と Clamp（クランプ） の設定で、Wrapを使っています。

矢印の作り方はいろいろあって、手間 と 容量 をどう案配するかがカギで、クオリティに差が出ます。

とりあえず一番上で紹介したシンプルなアニメーションの矢印を作ってみます。

簡単なカタチの矢印をポリゴンで用意します。

いろんな作り方がありますが、ぼくなりの一例をご紹介します。

作業する面は XY （テンキーの［7］）

プレーンな四角形を追加

Object Mode > Add > Mesh > Plane

Edit Mode にしてエッジを１本だけ選択。

［E］キーを一回だけ押して、選んだエッジの方向に［G］キーを押して移動すると、ポリゴンが増えます。

移動の際、途中で［Ctrl］キーを押すか、中ボタンで移動開始すると移動方向を拘束できて便利。

そのまま エッジを 分割します。

Edit Mode > Edge > Subdivide

見た目にわかりにくいですが、エッジの中間に頂点が増えてます。

その増えた頂点に向かって、ナイフツールでエッジを引きます。

ナイフツールは、マウスカーソルが頂点に近づくと、大き目の □ が表示されるので、それを手掛かりにクリックしていきます。最後に［Enter］キーを押して確定。

あとは頂点を動かして形を調整します。

長さもいい感じに調整。

テクスチャを作ります。

  ↑

白黒半分ずつ塗り分けた 32ｘ8 です。

これを Blender で読み込みます。

まずメッシュの頂点を全部選んでマテリアルをアサイン（割り当て）します。

上図では、デフォルトのマテリアルを選んでますが、Newボタンをクリックすると新しいマテリアルが作成できます。

① Use Nodes ボタンが青くなっているのを確認

② Surface を Emmision に変更

③ Color を Image Texture に変更すると テクスチャ選択フォームが出てくる

④ フォルダアイコンをクリックしてダイアログからテクスチャを選択

UV展開します

頂点をすべて選択した状態で

Edit Mode > UV > Project from View(Bounds)

ビューポートを UV Editing に切り替えて確認

テクスチャいっぱいに展開されます。

このUVを縦方向に潰します。

UV > Align > Align Y

または右クリックしてコンテキストメニューからも Align Y が選択できます。

ちなみに、UV展開の前に、カメラの向きを変えるのも同じような結果にできます。

テンキーの［1］を押してメッシュの見えてる角度を変えてから

Edit Mode > UV > Project from View(Bounds)

すると、UVがこうなります。

どちらの方法でも結果オーライなら問題なし。

UV展開完了。

この段階で、エンジンに持っていけます。

せっかくなんで、Blenderでシミュレーションします。

ビューポートを戻して、シェーディングモードをマテリアルに切り替えます。

もうお気づきだと思います。

端っこの白い部分。

UV展開の際には含まれていませんよね。

テクスチャの端っこにも。

反対側もうっすらと黒くなっています。

これはBlenderでもテクスチャのタイリングで繰り返し（Repeat）が設定されているためです。

今回はこのままで矢印を作っていきますが、繰り返さない設定も可能です。

テクスチャを読み込んだ際にいじったパネルにあります。

なんのラベルもないのですが、 Repeat（リピート） のところを Clip（クリップ）にするとテクスチャを繰り返さなくなります。

余談ですが

テクスチャのサイズより画面で大きく描画すると、テクスチャのピクセルがボケて滲みます。バイリニアフィルタのおかげなんですが、3Dでは、キャラとか背景とかテクスチャが素直にまっすぐ描画されることがまず無いです。またカメラとの距離が一定じゃないので、バイリニアなどのフィルタがないと、Photoshopの ニアレストネイバー（近傍補間）で変形させたような見た目になります。オノマトペで言うと「じゃりじゃり」とか「ざらざら」という感じ。

通常のメッシュに貼ったテクスチャにはありがたいバイリニアフィルタですが、文字などのエッジがシャープなものは、ボケやすいので解像度を落とせなくなります。

予期せず近隣の色が入り込むので、ゆとりを持ったテクスチャ作成が求められます。

今回のように低解像度のテクスチャを使う場合で、UVの端っこが気になる場合は、

これで一応解決します。

バイリニアの滲みは回避できたけど、見た目が想定通りじゃない。

テクスチャをいじらずに回避するには、

UV座標にゆとりを持たせる。

あとは、テクスチャの解像度をめっちゃ上げるのも効果ありますが、費用対効果をもとに要相談です。

この際バイリニアフィルタを効かなくするのも手です。

Linear（リニア） のところを Closest（近接） にすると滲まなくなります。

さてさて

今回の矢印は、タイリングは Repeat（繰り返し）で進めます。

Blenderのシェーダーを使って繰り返しの回数を調整します。

ビューポートを Shading に切り替えると専用のエディタが開きます。

画面下にノードが並ぶエリアがあるので、ここを編集していきます。

Add > Vector > Mapping

紫色のノードが現れるので、テクスチャノードの Vectorピン 同士をつなぎます。

次に、

Add > Input > UV Map

赤色のノードが現れるので、UVピンと、Vectorピンとをつなぎます。

必要なノードが揃いました。

パラメータをセットしていきます。まずは UV Map ノード。

ノード下部にあるフォームが空なので、クリックしてリストから選びます。

メッシュに設定されるUVは普通は１つですが、複数のUVマッピング情報を持つことができます。

確認するには、ここのリスト。

右の +ボタンを押すと増やせます。

次にMappingノード。

Scale の X を大きい数字に変えてみます。

いい感じの間隔になったら、次は Location の X を触ります。

フォームをマウスで左右にドラッグすると、動きます。

Xの値がマイナスになるように動かすと、矢印の先端に向かって動くことがわかります。

これで重要な情報は揃いました。

タイリングの回数は Scale X（=U） で 10倍

スクロールの方向は X（=U）軸で マイナス方向。

この情報を持ってエンジンでマテリアルやシェーダーを用意すれば実装できます。

スピードと色は、エンジンで調整するほうが確実です。

できました！

実装した矢印を見てもらったところ、フィードバックが返ってきた、という想定で、

もう少し手を入れていきます。

ぐぬぬ。

ということで、動くところと動かないところを分けることになりました。

とはいえ、UVを動かすと、すべての頂点が動いてしまいます。

そこで、テクスチャを上下に分けて考えます。

上のレーンは、白と黒が交互に並び、下のレーンは、ずっと白のまま。ということになります。

メッシュの UVをうまく分けられればなんとかなりそうです。

テクスチャを更新します。

Photoshopで上書きしても、Blenderではすぐに気づいてくれないので、テクスチャを開きなおします。

ついでに UV座標を動かしておきます。

動くところと動かない部分を分けるために、エッジを追加します。

Edit Mode で上下２本のエッジだけを選択して、

ヘッダーメニューから Edit Mode > Edge > Subdivide

この増えたエッジを右に寄せます。

シェーディングモードをワイヤーフレームにしていたのでマテリアルにしてみると・・・

なんと、テクスチャがひきつれてバランスがおかしくなってしまいました。

もう一度UV展開し直してもいいのですが、こういう時は、Option設定の
Correct Face Attributes（面の属性を修正）を利用します。

アンドゥ （Ctrl+Z）してエッジを元の位置に戻すか、エッジを削除（Dissolve Edges）します。

改めて、エッジを動かします。

動かしたくない頂点を選択します。

UV Editor 画面で確認します。

下図のようになっていればOK。

なっていなければ、UV Sync Selection（UVの選択を同期）を無効にします。

下のレーンに移動します。

すべての頂点を選択して下図のようになればバッチリ。

これをエンジンに持っていって確認します。

これなら大丈夫そうです。

ついでにもうひとパターンも試してみる。

メッシュを分割してから、Correct Face Attributes（面の属性を修正）を無効にした状態で、エッジを動かすことで、スクロールスピードに緩急を付けることができます。

一度割り当てたUVをそのままに、メッシュを変形することで、意図的にUVを引きつらせるテクニックです。

UVのスクロールをV方向に動かせるようにすると、アニメーションのON/OFFができます。

今回のテクスチャでは タイリングのY方向 を Clamp する必要がありますが、上図 OffsetV（ScalarParameter） の値を、0 で アニメーションあり。 1.0 でアニメーション無しにすることができます。

テクスチャが Wrap（またはRepeat）になる場合は、縦方向にゆとりを持たせ、移動量を +1ではなく +0.5 とかにするだけです。

スクリプト制御で値を書き換えてもいいし、マテリアルインスタンスを別々に用意しておいて差し替える方法だと色の調整とかもまとめてできるのでラクです。

いかがでしたか？

ただの矢印ですが、ちょっとした工夫でいろいろ遊べます。

ジャギー（エッジのガタガタ）の消し方とかも紹介したかったのですが、さすがに長くなったのでこの辺にしておきます。

メッシュとUVスクロールを組み合わせるといろいろ面白い表現ができるので、ぜひお試しあれ。

ではでは

ステキな3DUIライフを！

3DメッシュでつくるUI ー カーブ利用編２

ちょっと間が空いてしまいましたが、前に書いた記事では、ウィンドウ下敷きのような、そこそこ面積のあるものを描画する場合、テクスチャを節約する目的のメッシュをカーブから作る流れを紹介しました。

カーブを作ってから、いったんメッシュにしてFace（面）張ってから縁取りをするという手法です。

今回はカーブを使って作るメッシュでUVスクロールを楽しもうという内容で書こうと思います。

引き続きBlenderを使います。

使用しているのは Ver 2.93.5

まずはカーブを用意します。

よく見るアレを参考にしました。

カーブを追加した際のビューポートのプレーン（面）はで XY です。

テンキーの［7］を押した状態でカーブを作りました。

このカーブをリボン状にするのですが、調整の具合を確認しやすくするために、カメラを斜めから見下ろすアングルにします。

ObjectModeで選択しておいて、カーブの設定を変更します。

Shape > Resolution Preview U が セグメント間の分割数

Geometry > Extrude がリボンの幅になります。

Extrude を ０ 以上の値にするときしめん状になります。

値の入ったフォームの上で、マウスの左ボタンドラッグ（左右）すると感覚的に変化を確認できて便利です。

メッシュにするまではいつでも幅を変えられます。

メッシュにしても、カーブを残す設定にしておけば、いろんな幅のメッシュを作ることができます。

適当な幅に落ち着いたら、この タリアテッレをペタっと寝かすことにします。

Edit Mode にしてセグメントをすべて選択します。

Item > Transform > Mean Tilt を 90 にします。

Tilt はセグメントの傾き（ねじれ具合）を調整します。

ちなみに セグメントを複数選択すると、Mean（平均）Tilt になって、単体だと Tilt です。

フォームの上をマウスで左ボタンドラッグ（左右）すると下図のように動くので、ひねる方向を確認しやすいです。

Z軸方向に Extrude（押し出し）されているので、90度傾けると カメラのある側（+Z）がオモテ（表）面 になります。マイナス90度に傾けると ウラ（裏）面になります。

ポリゴンには オモテ面 と ウラ面 があるのです。

ゲーム画面では BackfaceCulling（バックフェイス・カリング）といってウラ面を描画しないのがデフォルトになっているのが割とフツーです。このウラ面を描かない設定のことを忘れていて、エンジン等にインポートした際に姿形が見えないと、エクスポート＆インポート操作をミスったかと慌てることになります。

UIの場合、ライティングしないことがほとんどだと思うので、インポート後にアサインするマテリアルや描画設定などで、Two Side（両面）描画を有効（もしくはバックフェイス・カリングを無効）にできるので、エクスポート＆インポートをやり直さなくても解決できます。

将来的に UIでもライティングするようになると、オモテとウラで色に違いがでるので、面の向きに注意するよう心掛けておくのは良いことです。

面の向きを確認する方法はいくつか用意されています。

一番確実なのが  法線 で確認する方法です。法線は "Normal" と英字表記されます。

ビュー設定から

法線表示と面の向きを色分けを同時に設定することもできます。

表示してから「あ、逆だった」という場合は法線の向きを逆にするだけで解決できます。

ペラポリゴンを扱う場合にウラオモテ問題はしばしば遭遇すると思われるので、記事にしておこうと思った次第。

さてさて

Tilt で 平打ち麺 を寝かせることができました。

ちょっと太すぎたので、Extrude を調整します。

よく見るとカーブの曲がり具合が急なところは尖ってるうえに重なりが生じています。

設定の、 Resolution Preview U（分割数） と Extrude（幅） の値を調整してみます。

分割数を増やしたのでカーブの尖りは丸くなりました。

分割数は、セグメント間を距離に関係なく一律に割るので、密なところとスカスカのところが出てきます。

分割数は64が最大なので、分割数を増やすより、セグメントをいい感じに増やしたほうがよさそうです。

セグメントを増やすのは、増やしたい区間のセグメントを2つ以上選んで、Subdivide

増えすぎたセグメントは、選択して ［Del］キーを押して Dissolve Vertics（頂点を溶解）を選択。

いい感じになりました。

直線に見える部分は、メッシュにコンバートしてから削ることにします。

あえて分割数を少なめにして、セグメントを増やすのも有効ではあるのですが、カーブの調整がやりにくくなるのでほどほどでメッシュ化します。

Object Mode > Object > Convert > Mesh

実行した直後に、画面隅に小さなポップアップが出ています。

そこで Keep Original（オリジナルを保持）にチェックをつけると、カーブが残って、新しくメッシュが生成されます。

名前が同じで、ピリオドの後のナンバーが違うだけのものが新しく増えます。

できたメッシュの頂点を整理します。

Edit Mode にして、 選択モードを Edge（辺）にします。

ショートカットキーでの切り替えが便利です。

［1］ バーテックス（頂点）

［2］ エッジ（辺）

［3］ フェイス（面）

無くしたいエッジを選んで［Del］キー

Dissolve Edges（辺を溶解） を選ぶと消えます。

ポップアップの上にある、Edges（辺） を選ぶと、見た目にエッジは無くなりますが、頂点は残され、ファイス（面）も消失するので注意。

ひたすら無駄そうに見えるエッジを消していきます。

この作業をするうえで、表示設定の Statistics（統計） を有効すると、モチベーションを高めてくれるのでおすすめです。

チェックをつけて有効にするとビューポートの左上に、選択中のアクティブなオブジェクトについての情報が表示されます。

自分の頑張りが見える化されているので、この数値がどれだけ減ったかを見て悦に入ることができます。

最近のスペックだと、数十頂点減った程度じゃ焼け石に水で、体感できるほどの効果がでなくなってきました。いいことなんですけど、開発途中の処理上げで、UIを非表示にして、描画あり、なしの差分から UIの描画処理がこんなに！とか言ってドヤ顔してくる輩がいると結構面倒くさかったりします。

ぼくは、やらないよりはやったほうがマシ程度のチリツモ教信者なので、劣化がバレないラインを探りながら節制するのをモットーとしております。

さてさて

曲線の流れを崩さないように気を付けながら多すぎるエッジを削ってみました。

もっと大胆にいけそうな気もしますが、画面に表示される大きさなどと相談しながら判断します。

つぎにUV展開していきます。

Edit Mode で頂点かエッジか面をすべてを選択した状態で、

UV > Cube Projection（キューブ投影） を選択。

ビューポートタイプ を UV Editor に切り替えてUV展開の状況を確認します。

このぐにゃぐにゃのUVをまっすぐにします。

左端のポリゴンを一つ（頂点４つ分）だけ選択します。

ヘッダーメニューから

UV > Unwrap > Follow Active Quads（アクティブ四角形面に追従） を選択。

確認のポップアップがでるので OKボタンをクリック。

Edge Length Mode（辺の長さモード） はデフォルトでOK。大事なのは、四角形ポリゴンのサイズ比率が維持されることです。

しゃきーん！

このへんでテクスチャを読み込んで、UVのサイズを調整します。

テクスチャはゲームエンジンで組み合わせるので、まずはテクスチャ内の使用範囲を分かりやすくしたアタリだけで十分。

512ｘ64 で用意してみました。上部に 512ｘ16 の範囲に青色の四角があるだけです。

縦16px は 4の倍数だったら圧縮耐性が高くなるので、 12 でも 8 でもOK。

このテクスチャを読み込みます。

Open（開く）ボタンを押してダイアログからテクスチャファイルを選択。

テクスチャが読み込まれたら、サイズと位置を調整していきます。

ここで大事な確認が２点。

１点目

ヘッダーメニューから

UV > Constrain to Image Bounds（画面の範囲に拘束）のチェックが外れていることを確認して、ついていたら外します。

これは、テクスチャの外にまでUVがはみ出さないようにする設定で、とても重宝するのですが、すでにはみ出ている場合は、操作に制限が付きます。なので、テクスチャの中に収まるまではチェックを外しておいて、収まったらチェックを入れるといいです。

もう１点は、UVのピクセルにスナップする設定。

こちらもヘッダーメニューから

UV > Snap to Pixels（ピクセルにスナップ）

これも大変重宝するので、普段から有難く使わせてもらってる設定なのですが、今回のようなUVのサイズ比率が重要で、UVの各頂点の距離が繊細な場合は、ピクセルにスナップされると、繊細さが消えてしまうので、UVが確定するまではDisabled（無効）にしておきます。

UVの頂点をすべて選択した状態で、［S］キーを押してスケールモードしたら、マウスでスケールを調整します。

［S］キーでサイズ、［G］キーで移動 を駆使してなんとかぴったりさせます。

上の Constrain to Image Bounds（画面の範囲に拘束）を有効にすると、移動させるときに、雑にマウスを動かしてもテクスチャの端でぴたっと止まるので安心です。

これでメッシュは完成です。

StaticMesh（スタティックメッシュ）として、FBX形式とかで書き出してゲームエンジンに持っていくことができます。

テクスチャも描いて持っていきます。

UE4に持っていって、マテリアルでアニメーションさせてみました。

ライティングは無し（Unlit）で、加算半透明（Additive）です。

動画はツイッターに貼りました。

カーブからメッシュ作ってUVスクロールするサンプル#b3d #UI制作 pic.twitter.com/ymyMdq5qh8

— みつまめ杏仁 (@MMAn_nin) 2021年12月5日

今回、テクスチャのタイリング設定を Clamp（クランプ）にして制作しています。

諸事情で、Clamp設定が使えない場合は、テクスチャに余白を作ることで解決できます。

メッシュのUVをあらかじめスタート位置にセットしておきます。

テクスチャの幅が 512px なので、キリの良い ところで3等分して 170px。余りが 2px 出るけどやむなし。

マテリアルで、 170ｘ2 = 340px マイナス方向に移動したらスタート位置に戻すことでクランプ設定のつくりと同じ見た目になります。

違いは、テクスチャの作りやすさと、グラデーションの長さによる滑らかさです。

ちなみに余白なしでラップ設定にすると、

余韻がなくせわしない感じになります。

ホントの心拍って結構速いのでこのくらいのほうがリアルかもしれません。

テクスチャの内容とUVのあて方次第で、いろんな見せ方ができます。

今回は ソナー風の古典的な表現を目指してみました。

次回はこのメッシュとUVスクロールを使ったネタをもう少し紹介してみようと思います。

シェーダー寄りの内容になりそうな予感。

今回はこの辺で。

ではでは

ステキな 3DUI ライフを！

3DメッシュでつくるUI ー テクスチャを斬る

前回は、ダイアログウィンドウみたいな大きい絵を作るのに、メッシュを使うとテクスチャ用のメモリを効率よく使えるよ。という内容で書きました。

今回は矩形（四角）で描画すると透明部分の描画処理がもったいないから、メッシュでいらない部分をカットする方法について書こうと思います。

使ったことはないのですが Anima2D 面白そうですよね。SpriteMeshEditor使えばオートでメッシュ化してくれるし。今回の記事で取り上げる操作も、いずれ自動化のアドオンやプラグインが出てきそうです。

さてさて

引き続き Blender を使います。

この記事で紹介している操作方法に関しては、なるべくショートカットに頼らない操作で進めています。Blenderにおいてもほぼインストール直後に近い状態ですので、不慣れな方でも特に迷わずに試していただけるかと思います。

まずはこんな絵を用意しました。

白色の部分は基本的に透明になるようにテクスチャを作るのですが、

シンプルに矩形で描くとものすごくもったいない気がしてきます。

表示範囲全てが、しっかり計算されるので ■色 のところをうまく削りたいなと。

見える見えないは、ピクセルごとのアルファ値で決まるので描こうとするすべてのピクセルでアルファ値の計算が必要です。

例えば表示サイズが 1024 x 1024 の場合 1,048,576ピクセル分の処理が行われます。

4Kモニタ解像度だと 8,294,400 のピクセルが存在します。

重ねれば重ねるほど、また解像度が大きければ大きいほど、計算するピクセル量が増えるので描画処理の負荷を見過ごせなくなってゆきます。

ポリゴンにテクスチャを貼って描画すると、画面に対してポリゴンのある所しか計算しないので、明らかに透明で不要な部分の計算をカットすることができます。

ただ、ピクセルの計算が減ったからといって素直に喜べないというのも事実で、UIでは光源計算など陰影処理とは縁遠いとはいえ、ジオメトリの計算やらバッファへの書き込みやらなんやらで、それなりには計算処理が必要になります。グラフィックチップの性能によるところも大きかったりしますが、精密なキャラクターモデルや、情報量の多いエンバイロメント系モデルをいかに高速に美しく描画するか、またPBRというところに重点を置かれて進化してきているので、UIで扱う頂点数なんて雀の涙にすら足りてないような状態。3DでのUI表現においては心配の種は小さくなっていくと思います。逆に、4Kや8Kとった高解像度方向へ進化が続くと、2Dをメインに扱うUIにとっては、まだまだ気が抜けないのです。

前置きが長くなってしまいました

さっそくテクスチャを斬っていきます

Blenderを使います バージョンは 2.93.5

流れとしては

1. テクスチャを用意
2. 四角のメッシュを用意
3. マテリアルを用意
4. テクスチャを読み込む
5. メッシュを分割

となります。

起動したら、作業する面に切り替えます。

そこで平面メッシュを追加します。

Object Mode > Add > Mesh > Plane

XY面で Z軸のプラス方向を向いた状態で生成されます。

利用するゲームエンジンや開発環境に合わせて最適な面で作業することになると思いますので、作用しやすいように適宜回転させます。

下図は作業面が XZの場合。（テンキーの [ 1 ] ）

正面を向かせるために X軸に 90度回転させて適用(Apply)。

　3Dでのモデルやメッシュといったオブジェクトは、形状を決める頂点の位置情報とは別に、オブジェクトの位置(Location)や回転(Rotation)、拡縮率(Scale)というの情報を持ちます。適用(Apply)するということは、位置や向き、大きさを固定してしまうことです。見た目の状態のままに数値を初期状態にします。

　たとえば上図のように 90度回した状態で適用しないままで扱うと、『常に90度回った』状態なので、0度にすると向きが変わってしまいます。Blender上ではそれほど大きな問題になりませんが、開発環境に持っていった時にいちいち90度回った前提で扱うことになると手間が増えることになるので、この角度でOKとなったら、迷わず適用してしまいましょう。

　適用する前なら、位置や向き、大きさをいくら変えても元の形状は維持されます。

Photoshopでいうところのスマートオブジェクトに少し似ている気がしないでもない。

適用（Apply）は、

Object Mode > Object > Apply > Rotation

次にサイズを調整します。

画面に表示したい大きさ、もしくはテクスチャサイズ にメッシュを合わせます。

Object Mode でメッシュを選んだ状態で、アイテムパネルを表示します。

[ N ]キーで開閉できます。

アイテムパネルを開くと、Transformカテゴリの一番下に、寸法(Dimensions) という項目があります。

ｍ は単位です。初期値ではメートル(Meters) に設定されています。

プレイヤーのすぐ近くに表示される場合は、しっかり合わせる必要が出てきますが、たいていの場合 UI はカメラの距離依存なので、気にしなくても大丈夫です。

ひとまず、ｍ を ピクセルとみなして扱うことにします。

テクスチャが 1024x1024 なので、 1024ｍ と入力します。すべて半角英数です。

1024cm とするとセンチメートルに、 mm とつければミリメートルになります。

 作業している面に合わせて入力します。

メートルだと、めちゃくちゃでかくなるので、[ . ] キー（テンキーのピリオド）を押して、ビューポートに収まるようにカメラを引きます。

この状態で大きさを適用しておきます。

Object Mode > Object > Apply > Scale

前回の記事では UVマッピングしてから、テクスチャを読み込んでましたが、今回は先にマテリアルをアサインすることにします。どちらが先でも問題はありません。

+Newボタンの左にある ｖプルダウンリストを開くと、

デフォルトのマテリアルが用意されているので、それを選択します。

 Material をリストから選択すると、パネルが一気に賑やかになります。

上の方にある、Surface のところを変更します。PrincipleBSDF をクリックすると、そのほかのシェーダーを選ぶことができるので、 Emission を選択します。

カラーを触れればなんでもOKなんですが、ひとまずテクスチャの色味がしっかりでるのでEmissionにします。

Surface を Emission に変えたら、Color のところにある、黄色い小さな●の部分をクリック→⑥

ポップアップリストから Image Texture を選択します→⑦

現れた Open ボタンで テクスチャ用の画像ファイルを読み込みます→⑧

↓今回テクスチャとして保存した画像

シェーディングタイプを切り替えます。

この時点でUVも当たっています。便利 Blender。

テクスチャに他のパーツも一緒に置いている場合は、このタイミングで、UVの範囲を調整しておきます。

さっそくナイフツールで斬ってみましょう。

EditModeに切り替えます。

ツールメバーから ナイフツールを探してアクティブにします。

クリックして青くしたら、マウスカーソルの形状が変化します。

この状態で左クリック（ドラッグではない）すると、そこを始点にしてマウスカーソルの位置までカッティングラインを引くことができます。左クリックするたびに、クリックした位置が次の始点となります。

Photoshop の多角形選択ツールと同じ操作感覚です。

操作のキャンセルは 右クリック。

確定は [ Enter ] キー

コツは、メッシュの外から初めて、外で確定させると斬りやすいです。

あとで微調整できるので、まずはおおざっぱに斬っていっても大丈夫。

削れてしまっても問題ないです。

とりあえずぐるりと斬ってみたところ。

ナイフモードを終了するには、ツールバーから選択ツールをクリック。

あー削れちゃったなー

というわけで、頂点を動かしてしまいましょう。

イメージはこう

動かしたい頂点だけを選んで、[ G ] キーを押してマウス移動（ドラッグじゃない）。

OMG!!  まさかの斬り直し!?

ここで落ち着いて 右クリック で 移動をキャンセルします。

Optionで設定を変更します。

ビューポート右上にある Options をクリックしてトランスフォームのところにある Correct Face Attributes （面の属性を修正）を 有効にします。

このオプションを有効にしてから頂点を動かすと、

斬り直さずに済みます。

他の頂点も少し整えたら、ここでいったん 4隅の ポリゴン を削ります。

選択モードを Face（面）に変えます。

削りたい ポリゴン を選択します。

選び終わったら [ Del ]キーを押すと、ポップアップメニューがでるので、 Faces（面） を選択します。

この要領でどんどん斬っていきます。

エッジの途中を斬ると、当然頂点が増えます。

そこで、すでにある頂点から斬り始めるにはどうするか。

例えば下図のような場合。

マウスを動かしているときに、目的の頂点に近づくと、マグネット的に吸い付く瞬間があります。新しく生成される頂点を表す緑の ■ が大きくなってさらに赤いフチドリがつくので、そのタイミングで左クリックすると狙った頂点を経由することができます。

この調子で続けます。

やっぱこの頂点いらんなー

となったら、

不要な頂点を選択して、[ Del ]キーを押します。

ポップアップメニューで Dissolve Vertices（頂点を溶解）を選択します。

Vertices（頂点） の方を選ぶと、ポリゴンが成立しなくなって Face（面） が消失してしまうので注意。

さらにこの調子で続けます。

やっぱ ここ頂点いるよなー

となったら、

エッジ選択モードに切り替えて、

増やしたい区間のエッジを選択します。

ヘッダーメニューから Edge> Subdivide

見た目に変化がないので、頂点選択モードに切り替えてみます。

どんどんこの調子で続けます。

いい加減、テクスチャの黒い部分がなー

え？今更？となったら、

テクスチャのPSDに一時的な細工をして更新します。

Blenderで再度読み込みなおします。

ちなみにBlenderを再起動しても更新されます。

Blender は一度読み込むとリアルタイムにテクスチャの更新状況を監視しているわけではないのです。

黒い点が見やすくなった！

できた！

あまりぴちぴちにすると、テクスチャの変更調整に耐えられないし、頂点が増えるので、ほどほどのところで止めます。

これで完成にしてもいいのですが、メッシュで UI を作る場合に大事なことがあります。

それは、「中心」です。

Pivot（ピボット） とも言ったりしますが、そのメッシュの基準点のことです。

画面に表示する際に、頂点ひとつひとつに座表を指定するようなことはしません。メッシュのデータには、中心から頂点がどれだけ離れているか、という情報が格納されています。頂点の位置はあくまでも中心からの相対的な位置なので、中心を移動したり回転しても、形状を保ったまま動かすことができるのです。

表示するだけだったらそれほど問題にはならないんだけど、中心の場所によっては、回転や、拡大縮小したときにおかしな見た目になったり、逆に面白い演出ができたりします。

その中心位置の設定方法ですが、Blenderにはいくつも方法があります。

ペラペラメッシュならではの簡単な方法を紹介しようと思います。

まずObjectModeにして、アイテムパネルから今の表示位置を確認します。

ポジションチェックします。

Location のところに今配置されている座標が表示されます。

メッシュをエクスポート（FBX等での書き出し）の直前にここで値の確認をするのは大事です。

おっと、Dimensions（寸法）のところにアヤシイ値が。

XZ面で作業しているので、Y軸方向にブレが出るのはオカシイ。

Edit Mode で作業していると割と起こりうるので、スケールの Y に ゼロを入れて、Object > Apply > Scale することで、キレイな平面になります。

XYZの各軸線が交差するところが原点です。

Object Mode のままで、ここを中心となるように、メッシュを移動させます。

オレンジの小さな点が、メッシュの中心です。

これを Object > Apply > Location すると

できあがり！おつかれ！

あとは、エクスポートして、ゲームエンジンや開発環境に持っていって、そこでテクスチャを合わせてあげます。

これで、テクスチャを自由に切り出して画面作りができます。手数が多いのは、スプライトとは比べものにならないですが、表現の幅が広がる可能性と、パフォーマンスとクオリティの向上に貢献できるので、ぜひ初めてみてはいかがでしょうか。

Blenderのショートカットを覚えると、さらにサクサクと作業できるようになるので、慣れれば手軽さもアップします。

今回はこの辺で。

ではでは

素敵な 3DUI ライフを！

3DメッシュでつくるUI ー カーブ利用編

　日が落ちるのが早くなってきましたね。帰宅中に夜道を歩いていると、ふいに稲の枯れた匂いが漂ってきたので、見ると田んぼの稲がすっかり刈られていました。昼間はまだ暑いので意識していなかったんですが、なんだか急に夏の終わりを感じて寂しく思うと同時に、美味しい食べ物がいろいろ出てくる季節なのでワクワクもしています。

　さてさて、この頃はゲームエンジンが身近になって、3Dを利用するためのハードルがものすごく下がった、もはや無いのではないかとさえ思います。2Dアセットを扱うことが圧倒的に多いUIデザイナーとしては、周りのモデラーさんと比べてしまったり、手を付けるとしても今一つ成果物のイメージがUIと結びつきにくいとか、習得するのも時間がかかりそうだとか、サブスクやライセンス料が高いDCCツールだと家でコッソリというのも難しかったり、いろいろと心理的ハードルが高く、キビシさを感じておられる方も多いのではと思います。

　そこでぼくは、あくまでも 2DUI の延長線上で、部分的に3Dに置き換えていくという作り方を提案したいなと思った次第。

　イラレや手書きじゃなくて、リアル質感のあるUIを作りたいから3Dを勉強したい、というのは残念ながらぼくでは力不足なので、技術書か他のサイトをあたってもらうしかないですね。ゲーム画面の中で、リアルタイムレンダリングで、無理なく表現できる少しリッチなUI表現を実装するために というコンセプトで書いていきます。

今回サンプルとして用意したのはモーダルウィンドウです。

画面に対してかなり大きな面積を占めるうえに、常駐させることが多く、何度も目にするのであまりテクスチャの解像度を低くすることもできないので、メッシュで作るのにちょうどいいからです。

　このウィンドウベース（下敷き）を3Dメッシュで作ることで、テクスチャの解像度を稼ぎつつ、効率のよいテクスチャアトラスを作ろうぜ、というのが目的です。
中央の単色ベタの部分を有効利用したいなと。

　スプライトやImageで複数のパーツに分割するとテクスチャの容量を節約できるけど、いくつかのパーツに分けてくっつけて表示するというのも、ちょっと組み合わせるのが手間なうえに、圧縮によるピクセルの荒れを回避する必要があったり、アニメーション時に隙間やズレが出たり、フェード時に重なりが見えてしまったり、というのを心配してしまうのだけれど、最近あまりそういった悩みを聞かなくなった。容量の心配しなくていいほど余裕があるのか、9スケールグリッドみたいなデザインを選択して回避しているのかもしれない。

　デザインでグリッドに縛られすぎるのも、ゲームの雰囲気によってはお行儀が良すぎて絵的に面白くないし、容量の負担を大きくせずに大胆な形状を採用できるのはメッシュが向いていると思うのです。

　スプライト等の2Dでは矩形でしか描画できないのに比べて、ポリゴンのあるとこしか描画しないので、不要なピクセルの半透明ブレンドの計算を減らすことができます。また9スケールグリッドのような部分的にテクスチャを伸ばすことも楽勝なので、柔軟なデザインに対応できます。どんなに複雑な形状でもOneオブジェクトとして扱える。

　テクスチャの容量が節約できると、テクスチャのロード時間が減るし、常駐量が少なくなれば、メモリ管理に余裕ができるし、もっと他にリッチな表現が欲しいときの貯金としてやり繰りできます。

　さすがにメリットばかりじゃなくて、レイアウトがカメラ基準だったり、色味の調整に悩んだり、メッシュ内のポリゴン順で悩んだり、扱うツールが増えたりするので「なにがなんでもは3Dメッシュじゃい！」とは言わないですが、3Dメッシュによって表現の幅やできることが広がるのは自信を持って言うことができます。タイトル名は書けないのですが自分のかかわったタイトルでは結構な頻度で3DでUI作ってます。

　3DでUI作ってるというと、ほぼ例外なく立体的な見た目を想像されるのですが、ぼくは テクスチャ容量節約 と 描画負荷削減 のために使うことが多いです。なので、3Dであることを気づかれないのは寂しくもあるけど、ある意味自慢です。最近は頂点アニメーションもやりやすくなったので楽しいですね。そのうちUVアニメーションの楽しさとかも記事にしていきたいと思ってます。

　というわけで、今回作ったテクスチャはスカスカですが、下図の斜線部分も余すことなく使っていきたいのです。

メッシュの作成は Blender を使用します。ver 2.92 を使って記事を書いていますが、ver2.93でも問題なく進められます。

今回作るものに必要な操作は書いていますが、インストール方法や基本操作については省かせていただきます。

まず、カーブを使ってみるところから。

カーブを使わなくても問題ないのですが、いろいろ便利に使える手法なので、記事にしておきます。

ObjectModeで Add > Curve > お好きなカーブタイプ

カーブを選ぶとビューポートにオブジェクトが配置されます。

カーブは、厚みなどのボリュームがないので、作成時のカメラの角度によっては追加されたことが分かりにくいことがあります。
テンキーの [ 1 ]、[ 3 ]、[ 7 ]、を押して探します。

これでも見えない場合はカメラが離れすぎているかもしれないのでピリオド [ . ] キーを押してみると見つかることもあります。サイズが大きくないので、スケールで大きくするのもありです。

パースペクティブビュー（奥行きのある視点）で作業すると歪みが出やすいので、

平行投影にします。切り替えは テンキーの [ 5 ]

向きは後から回せるので、とりあえずXY面で作業していくことにします。

[ Tab ]キーを押して、ObjectMode から EditModeに切り替えます。

カーブの両端に方向線が出てきます。（ベジェ曲線を選択した場合）

カーブを伸ばす

カーブを伸ばしたいどちらか一方のアンカーポイントを選んで [ E ] キーを押す。

そしてすぐにドラッグすると新たなアンカーポイントが増えます。

カーブを閉じる

閉じるには両端のアンカーポイントを選択して、[ Alt ] キー押しながら [ C ]キー

無事閉じたら、形を整えていきます。

アンカーポイントと方向線の端の点が選択できるので、[ G ]キーを押していい感じの位置に移動させていきます。

アンカーポイントや方向線を選んだ状態で、[ R ]キーを押すと、方向線を回転、[ S ]キーで長さを調整してカーブの流れを整えていきます。

マウスで対象を直接ドラッグする方法に慣れてると、結構戸惑うと思います。

Blenderの場合、

1. 対象を選ぶ
2. アクション（何をするか）を決める
3. 操作する（アクションによっては追加で設定や調整までできるものがある）

という3段構えで触ることが多いです。

対象の種類や状態によってできることとできないことの差が大きくて、状況依存としてコンテキストから選ぶほうがユーザーにとっては選びやすかろうという配慮だと思います。

アンカーポイントの追加

アンカーポイントを後から増やすには、セグメントの分割という操作になります。

２点を選んで

ヘッダーメニューから Segments > Subdivide

アンカーポイントの削除

削除したいアンカーポイントを選択した状態で

 [ X ]キーを押すとポップアップが出ます

Vertices を選ぶと消えます。

アンカーポイントを2点選んでこの操作を行うと、間のセグメントを削除できます。

ショートカットキーを使いましたが、ヘッダーメニューからも同じ操作が可能です。

大体カーブの扱い方がわかってきたところで、

画面デザインからテクスチャを作って、Blenderに持ってきます。

まずテクスチャはこんな具合に入れました。

1920x1080の画面サイズを想定しているので、テクスチャのサイズは 2048x1024 と巨大です。画面デザインからダイレクトに移植しました。

作業しやすいように、背景は真っ黒です。
PSDで書き出したらBlenderのウィンドウに直接ドロップします。

ObjectModeじゃないとドロップできないので注意。

あと、作業するビューにドロップしないと、カメラの向きを変えると回転してしまいます。

色が濃すぎるので、半透明にします。

ドロップした画像オブジェクトを選択した状態で設定パネルから調整できます。

実はこれ、テクスチャではなく、下絵として使います。

ここにカーブを追加したら、この絵を下敷きにして形を整えていきます。

少し外側を通る感じ。

この「カーブ」は「メッシュ」にしないとゲーム画面で描画できません。

アウトラインフォントがすでに実装できているので、いずれはそのままアセットとしてレンダリングできる時代が来るとは思いますが、いましばらくはメッシュと仲良くするしかないようです。

さて、モードを ObjectMode に切り替えます。

カーブからメッシュに変換する方法は２つ

一つは ヘッダーメニューから Object > Convert to > Mesh

もう一つは、カーブの上で右クリック > Convert to Mesh

この操作をした直後に、オプション設定のポップアップが画面左下に出るので、

その中にある Keep Original を有効にすると、カーブをバックアップできます。

コンバートしても見た目に変化しないので、EditModeに切り替えます。

 ↓頂点をすべて選んだ状態。

頂点の数が結構多い印象だけど、後で減らすのでひとまずこれで進めます。

画像がちょっと分かりにくいので下敷きはいったん非表示で説明していきます。

まだ、頂点とエッジ（頂点同士を結ぶ線）しかないので、面を張ります。

頂点すべてを選択した状態でヘッダーメニュー Face > Fill

Fill のショートカットは [ Alt ] + [ F ]

たくさんの三角形ポリゴンで面を構成されています。

おそらく計算やデータの順番やらいろいろな処理の効率が最大になるよう考慮して三角形分割されてると思うので、人間が手で分割するよりは無駄がない、はず。

ここまでくると頂点を減らすモディファイアが使えるようになります。

モディファイアは、例えるならPhotoshopのレイヤー効果みたいな位置付けのものです。元のオブジェクトを非破壊なまま、さまざまな形状、状態に変化させてくれるという大変ありがたい存在。パラメータ調整で最終結果をいつでも確認できるので重宝します。

今回使うモディファイアは、Decimate

ObjectModeで確認しながら減らすことができます。

上図の設定パネルから Ratioを調整します。Ratioのところにある棒グラフの先端付近をマウスで左右にドラッグするとリアルタイムに頂点数が変化します。

Convert to Mesh したときの 96頂点 から 34頂点 に減らしてみました。

下絵を表示してみます。

大丈夫そうです。ここでハミ出していてもあとから簡単に調整できます。

さて、このポリゴンに対して、縁取りをつくります。

次に進む前に、モディファイアを適用する必要があります。

これで形状をFIXできます。

ちなみに上図の 〇の右にある × ボタンをクリックすると、モディファイアを破棄して、なかったことにできます。「レイヤースタイルの破棄」みたいなものです。

これで後戻りはUndoのみ。

EditModeで頂点すべてを選択した状態でヘッダーメニュー Face > Inset Faces

Inset Faces を選択したら、クリックしないようにマウスを移動（ドラッグしない）させて幅を検討します。

このとき、なんだか幅が均等じゃないな思ったら、カーブが歪んでいた可能性があります。

真横から見てまっすぐになっていない場合に、縁取りが不均一になります。

ObjectModeで、スケールを 0 （上図の場合青い軸線方向につぶすので Z軸を 0）にしてつぶしてからヘッダーメニュー Object > Apply > Scale

これでOK、となったらクリックしてFIX。

適当にクリックしても、直後であれば詳細設定のポップアップが出ているので、そこで微調整できます。

Thicknessが縁取りの太さです。フォームの上でマウスでドラッグが便利。

Select Outer にチェックをつけるとハイライトされているポリゴンが反転します。

ポップアップ以外をクリックすると完全にFIXします。それまでは自由に調整できます。

縁取りのポリゴンを選択した状態で『UV展開』します。

こういった 『ぺらい』メッシュだと、UV展開という言葉がしっくりこないのですが、各頂点ごとの、テクスチャUV座標を決める操作のことを指して言う言葉だと、覚えておくといいですよ。

トップメニューにある UV Editing ボタンをクリックして、ビューポートのレイアウトをUV編集レイアウトに切り替えます。

右側のビューポートが、デフォルトな感じに戻された場合は、テンキー[ 7 ] を押して、[ 5 ]キーで平行投影にしたり、ワイヤーフレーム表示にしたりして、見た目を整えます。

ポリゴンの選択が外れてしまったときは、

編集対象をポリゴンにして、

ひとつだけ選択します

ヘッダーメニューの Select > Select All by Trait > Faces by Sides

全部のポリゴンを選択していても特に問題はないのですが、この操作を覚えておくと後でラクができます。

ヘッダーメニューから UV >  Unwrap

UVエディタが下のようになります。

まだ、何もテクスチャを読み込んでいないので、デフォルトの正方形のイメージが表示されています。

90度回った状態になるのですが一旦置いておいて、テクスチャを読み込みます。

テクスチャを読み込んでから、Unwrap する方が手間が減っていいのですが、UV座標の特性を説明したくてこのような流れにしています。

UVエディターのヘッダーメニューにある +New ボタンの左側にあるプルダウンからテクスチャ画像を選択。下絵としてドロップした画像がリストアップされているはずです。

プルダウンリストの中に見つけられなければ、Open ボタンから探して読み込みます。

アスペクト比が変わったので変形してしまいました。

これがUV座標空間の特徴です。

最初に Unwrap した際に展開したUV座標から何も変わっていないのです。

UV座標は、座標と言いつつもテクスチャの形状に関係なく、端から端までを0～1.0 で扱います。

※環境によっては、左下が 0原点で扱われることがあります

このため、テクスチャのアスペクト比が変わると、変形してしまうのです。

メッシュの形には影響しませんが、テクスチャ作成がちょっと面倒なことになります。

余談ですが

この特性を利用すると、プラットフォーム等による解像度の変更作業がとても簡単になります。

例えば 2Kで作ってきたところで、あとから4K対応することになった場合。

テクスチャの解像度を変えるだけで対応完了です。スプライトのようにピクセル座標で管理していると、大変な手間になります。

※エディタ上ではピクセル座標は整数で扱いつつも、内部のデータではUV座標という開発環境もあると思われるので確認は必須

いくらUV座標が効率的とはいえ、小数を扱うので、苦手な人は辛いかもしれません。

さて、変形した比率を正常なアスペクト比にします。

UVエディターで作業します。

ここで頂点をすべて選択して [ S ]キーを押すか、

Scaleボタンをクリックするとスケール調整モードになります。

[ S ]キーを押した場合はマウスを動かすだけでとサイズが変更できます。操作パネルからスケール調整モードにした場合は、マニュピレーターをドラッグします。

ここはアナログな調整ではなく、数値でサクッとリサイズします。

スケールを少し触ってクリック（マニュピレータの場合はマウスボタンから指を離す）すると、UVエディタのビューポート左下に Resize のポップアップが出るので、そこで数値を入力します。

Scale X を 0.5 にして YとZ は 1.0 にします

つぎに [ R ] キーを押すか、Rotateボタンを押して回転モードにします。

これもスケール同様にして操作すると Rotate のポップアップが出ます。

-90 と入力すると元の向きになります。

あとは、テクスチャのデザインに合うようにサイズと位置を調整します。

[ S ]キーで スケール

[ G ]キーで移動

[ホイール] ズームイン/アウト

[中ボタン]ドラッグでスクロール

　　※Blenderのデフォルト操作設定

完成まであと少し。

縁取りを除いた中身をほったらかしにしてるので、残りの頂点をUV展開します。

3Dビューポート側のヘッダーメニューから Select > Invert

で選択箇所が反転します。

再び  UV > Unwrap

この頂点をマウスドラッグで矩形選択して、[ S ]キーで適当に小さくします。

これも Resize のポップアップから、Scale X と Y に数値を入力。

スケールを ゼロ にすると １点に集約されます。

これを、邪魔にならない場所に移動します。[ G ]キー

メッシュはこれで完成です。

FBXとかで書き出してエンジンに持っていくことができます。

UVが思った通りにあたっているか、確認しておきます。

まずシェーディングタイプをマテリアルにします。

マテリアルがアサインされていないので、生ポリゴンの状態です。

新しいマテリアルをアサインします。

Base Color のところにある 黄色の丸をクリック ③

ポップアップウィンドウが出てくるので、Image_Texture を選択 ④

表示内容が変化するので、UVエディターのときと同様に、プルダウンからテクスチャ画像を選択します ⑤

デフォルトのマテリアルとシェーダーで描いているので色味がおかしいですが、ここではUVが正しく展開できているかが大事なので、歪みが出たりしていなければOK。

メッシュはこれで問題なくエクスポート（書き出し）できます。

エクスポート方法については、開発環境に依存するので、今回説明は省かせていただきます。

 UE4とUnityは、FBXをサポートしているので、ぼくはFBX形式で書き出します。

残るはテクスチャ。

テクスチャに、メッシュで使用するUVの範囲をわかるようにしておくと、ギリギリまでスペースを使うことができます。

うっかりUV展開している範囲に他の余計なピクセルが侵入しないようにしたいので、UVレイアウトを画像で書き出す機能を利用します。

UVエディタ上で、UVの頂点を選択した状態で、

UVエディタのヘッダーメニューから UV > Export UV Layout

ファイル書き出しのダイアログが出るので、指定した場所にそのままPNGフォーマットで書き出します。

この書き出した画像をPhotoshopで開きます。

半透明なのと黒色で分かりにくいですが、このレイヤーをテクスチャ用のドキュメントに移植します。

Photoshopでドキュメント間でレイヤーを移すとき、

[ Ctrl ]+[ Alt ]+[ Shift ]を押しながらドロップすると、まったく同じ位置に配置できます。

　　　　　　　　　　　※UVレイアウトの画像が見えにくいのでカラーを反転しています

ぴったり。同じサイズのドキュメント間で有効な隠し技です。

このUVレイアウトを避けてさえいればぎりぎりまで使えます。

書き出す際は、レイヤーを非表示にします。

仕上げに圧縮対策をします。

アルファチャンネルで透明になるピクセル付近のカラーを広げて塗りつぶしておく感じで。

↓今はまだ周りに何もないので手を抜いて矩形で塗ってる状態。

RGBチャンネルは ↑

アルファチャンネルは ↓

これでテクスチャも用意できました。

　あとは、エンジンでマテリアルとかシェーダーを用意してくっつければ画面に表示できると思います。

　エンジンの環境によっては、描画のタイミングや思ったような色にするのに設定が必要な場合もありますが、結構手軽に表示させることができます。慣れてくると5分もかからないです。マテリアルやシェーダーについては、一度汎用的なのを用意すれば、特殊なことをしない限り使いまわせます。

　インポートやエクスポートの方法については、エンジンや開発環境に依るところが大きいので書くのをやめました。DCCツールに書き出すためにスクリプトを用意する開発現場もあるかと思います。余計なデータをくっつけて書き出さない、余計なデータを取り込まない、というのに気を付けて、パラメータやスイッチ等のパラメータを試行しながら最適な手順を見つけることになると思いますが、UIの場合アニメーション関連（スケルトンとかボーンとか）は不要でいいと思う。マテリアル関連も、エンジンで組むのでそれほど必要になったことはないかな。

　ちょっとしたUIパーツを、わざわざ3Dメッシュで作るのは、手間が増えるだけなので、オススメはしませんが、見た目に驚きを与えたり、データ効率が良くなるのであれば、技術習得も兼ねて積極的に使っていきたいですね。

今回は以上になります。

次回は、カーブを使わずに四角形を分割しながら作る方法か、カーブで作ったゲージのどちらかを書いてみようかと考えています。

ではでは

素敵なメッシュUIライフを！

HPゲージをいろいろいじってみよう ー もっと動きをつける

前回の記事でいろいろ見た目をアップさせる小技を紹介しましたが、今回はいろいろ動きのあるものを入れたものを紹介していきます。

あくまでも一例にしかならないのですが、いくらかヒントになれば幸いです。

先の記事からの続きとなっていて、値を変える関数や表示のテストについては解説は省いていますので、いきなりこの記事からだとわかりにくい箇所があると思いますので、過去記事のリンクを貼っておきます。

limesode.hatenablog.com 

HPゲージをいろいろいじってみよう ー 成長するゲージ - みつまめ杏仁

HPゲージをいろいろいじってみよう ー 見た目を工夫する - みつまめ杏仁

INDEX

ダメージを受けると揺れるやつ

揺らすためのカスタムイベントを用意します。

UMGのタイムラインでアニメーションを作成した場合、以下ようになります。

他のアニメーションと被る場面があると、気軽にタイムラインアニメーションを使えないということもあるかもしれません。ということでノードでランダムな動きを作ってみます。

ひとくちにランダムな揺れというと、ランダム揺らし警察に職質されそうなのでビビリながら書くのですが、実際いろんなアルゴリズムや手法があって、結局のところこだわりポイントの差がすべてのような気はしています。

ということで今回は円を使ったランダム座標です。

矩形の範囲内の座標をランダムにチョイスする方法だと、シンプルですが、原点からあまり動かない可能性があります。ある程度原点から離れた位置にぶっ飛んでほしいという気持ちがあったので強制的に中心から離そうと考えて円の動きに決めました。

サインとコサインに渡しているのは ラジアンです。ラジアンは円1周で 2π なので -3.14～3.14 でランダム値をゲットしています。0～6.28 とかでも同じになります。

角度(Degree)に変えることもできます。

サイン、コサインノードに掛け算しているのは半径に相当します。サイン、コサインは基本的に -1 ～ 1 の値を返すので、そのままだと小さすぎるのを大きくして使っています。ここを加減することで、揺れ幅が調整できます。

UMGで位置を変えるのは2種類の方法があります、元の位置に戻すことを想定すると Canvas Slot の Position を変えるのではなく、 Render Transform の Translation を使うのがベスト。

これについては画像付きで解説している過去記事を貼っておきます limesode.hatenablog.com

 上に伸びてる赤いラインは、いつものアイツ、 Set Timer by Eventノードです。

一定回数揺らすと終了するようにしたいので、回数をカウントする Int型の変数を用意して利用します。

このカスタムイベントをゲージの長さを変更する際に呼び出される関数に追加します。

減らすときだけ揺らしたいので、このイベント呼ぶ側にその選択をさせるため、カスタムイベントにBoolean（ブーリアン型）のピンを追加。

テストの際にレベルBPからこのイベントを呼び出しているので、カーソルキーの左を押したときだけ True にします。

揺れるゲージは以上です

こんな揺れで満足できないという方はぜひいろんな手法を試す冒険に出かけてみてください。

一応オマケとして、配列を使った揺れの一例を紹介します。

XY座標の2軸を扱うので、Vector2D型の変数を配列で用意します。

この配列から順次取り出してやります。

配列の数と、カウント数の判定に注意。

これでランダムならではの不安定さはなくしつつタイムラインを使わなくてもいい感じにできます。

この配列に、若干のランダム値を加えると連続した際にワンパターン感が減らせます。

配列から取り出した値に -3.0 ～ +3.0 の揺らぎを与えるカタチになります。

バフ・デバフ等でエフェクトが乗るやつ

ゲージに影響がある ステータス異常であることをプレイヤーにわかりやすく伝えるための表現として古くから親しまれているやつです。

その昔、シェーダーがまだ使えなかったころは、数種類のパーツを適宜差し替えたりしていました。

ナウい今はモダンに１パーツでやってみます。

今回作った状態変化対応は 毒状態と自動回復の2種。

色だけだと伝わりにくいので、テクスチャを用意しました。

サイズはちょっと小さめに 64x64px  シームレスになっています。

Photoshopだとパターンプレビュー機能を使うと作りやすくなります。

エンジンにインポートして GrayScale として扱います。

ゲージのカラーについては、前回の記事でも紹介したカーブアトラスを使ってゲージのカラーを３本用意して使っています。

 

キモになるのはマテリアル。

（※ゲージのMAX値が伸びない想定です）

Panner ノード使って常時スクロールアニメーションをさせています。

Multiplyノード は ピクセルの値を 掛け算します。白＝1.0 黒＝0.0

白は変化しません。

Add ノードはピクセルの値を加算します。黒は変化しません。

この 2つのカラーを振り合分けているのが Lerp (Linear Interpolate)ノード。

ScalarParameterノードをつないで、 0 か 1 を受け取るようにします。

通常時のカラーとの切り替え。

これも Lerp ノードのお世話になってます。

ScalarParameterで 0～1.0 で切り替えます。

ゲージの長さは、Step ノードを利用して可変できるようにします。

このパターンはマテリアルを使うゲージの場合よくお世話になってます。

3つのパラメータ(ScalarParameterノード)を仕込みました。

TypeSwitch ・・・ 0=デバフ / 1=バフ

Fade ・・・ 通常ゲージとのフェード

Value ・・・ ゲージの長さ

フェードアニメーションを用意します

UMGのタイムラインからマテリアルのアクセスはちょっと分かりにくい操作になります。

アニメーションを追加→① して適当にリネーム →②

ゲージ本体の Image をヒエラルキーから選んだ状態で ＋Track ボタンを押す →③

選んだゲージ本体の Image の名前が出てくるので選択 →④

選ばずに +Track ボタンを押すとこうなります。

All Named Widget にマウスオーバーすると一覧が出るので、そこから選択してもOK。

選んだ Image が追加されるので、右にある＋Trackボタンをクリック →⑤

Materialsの Beush.Brush Material を選択 →⑥

トラックが追加されるので同様に右にある ＋Parameterボタンをクリック→⑦

マテリアルのパラメータ一覧が出てくるので、Fade を選択 →⑧

これでようやくタイムラインにキーが打てるようになりました。

Details（詳細）タブから数値を触れないので、このタイムラインエディタからキーを編集します。

キャンバスの編集はここまでになります。

さっそくWidgetブループリントに組み込んでいきます。

マテリアルをゲージ本体の Image にセットしたら、ブループリントからマテリアルにアクセスするために、ダイナミックマテリアルインスタンスを作るようにノードをつなぎます。

Return Value ピンから変数に昇格(Promote to Variable)しておきます。

バフ・デバフがかかった際に呼び出されるカスタムイベントを用意します。

マテリアルのパラメータをセットするだけのイベントです。継続する系の演出については、発動時のタイムラグは不要なので即時見た目をチェンジします。派手にアピールする場合は、トッピング的に煙やスパークなどのエフェクトを乗せるといい感じになります。

2種類しかないので、ひとまずブーリアン型の入力を受け取るようにしています。

Select Floatノードで、True なら 1.0、 False なら 0.0 になるようにしています。

あとは バフ・デバフが解除された際のフェードアニメーションを再生するカスタムイベントを用意したら編集完了です。

ゲージWidgetができたので、テストしてみます。

レベルブループリントでキー入力をトリガーにします。

バフ・デバフを切り替えるためのイベントを２つ用意するのが面倒だったので、ブーリアン型の変数を一つ追加して、フラグとして利用することにします。

Ｘキーを押すたびに、バフとデバフが切り替わります。

Ｚキーを押すとデフォルトの見た目に戻ります。

表現したい種類が増えるとそれなりに対応が変わりますが、マテリアルを改造してパラメータを増やすと、より汎用的に扱えるようになって拡張性がアップできます。少々作りがややこしくなるので今回はここまでにします。

変わり種ゲージ

レベルメーターぽいやつ

動きは特にないのですが、ゲージの方向が縦になったのと、段階的に変化するのが特徴のゲージです。横のものが縦になったという劇的な概念的変化をもって動きをつけたというか、まぁ平たく言えばついでです。ちなみに漢字を使うと 「序で」と書きます。

さてさて

これもマテリアルで作りますが、まずはテクスチャ。

64x256px のテクスチャに、パスでラインを置いていきます。

10px間隔で全部で 25Lines

ゲージ本体用と少し大きくした下敷き用の2枚用意しました。

エンジンにインポートして GrayScale として扱います。

次にグラデーション。

カラーはカーブアトラスを利用します。

マテリアルを用意します。

レベル 0～25 までのFloat値を受け取る仕様。

1レベル分の高さが10ピクセルで、テクスチャの縦方向の解像度256ピクセル。

10/256 を 受け取った値に対して掛けることで、ゲージの閾値が決まります。

このゲージは下から上に向かって伸びるゲージなので、1-x (OneMinus)ノードを使っています。

 背景の作り方によりますが、このゲージは色を変えることで増減の変化を見せるようにしています。アルファ値はテクスチャを使用しています。

このテクスチャアルファにStepノードの値を乗算するようにすると、色を変えずにOpacityで削れます。

キャンバスに下敷きのテクスチャと、マテリアルを配置します。

下敷きテクスチャは、カラーを暗くして、本体のマテリアルの下に敷します。

Widgetブループリントでは ↓このように ０～１で管理している値を x25 してマテリアルに渡しています。

この辺はゲームの設計に合わせて構成を変えることになると思います。

これで完成です。

上限が増えない想定ですが、ゲームシステム上の最大値分をテクスチャで用意しておき、表示する際にレベルの未達部分をマスクするように作るとゲージの成長が表現できます。

最後に

今回は以上の３本です。いかがでしたでしょうか。

まだまだいろんなタイプというか仕様のゲージがあると思いますが、もとは UE4イベント ぷちコン 制作への応援として書こうという動機だったので、あまりニッチなゲージを作ってもややこしくなりそうだし、そもそも読む気も失せるだろうということで、HPゲージを作ろうシリーズはここまでにしておきます。

今まで作ってきたゲージの長さを全て足すと月まで行けるんじゃないかと思ってみたりもしていますが、そもそも実寸がないので計測不能でした。ゲームともに進化するゲージ。人類が海の底で暮らすようになり視力を失わない限り恐らく永遠にゲージは無くならないだろうと思います。なんか無理やり壮大な話に持っていこうとしていますが、しんどくなってきたので、少しでもゲージづくりの魅力を感じてもらえれば幸いと願いながら筆をおくことにします。

ではでは

すてきなゲージライフを！

HPゲージをいろいろいじってみよう ー 見た目を工夫する

　ゲージのデザインは、ゲーム進行においてとても重要な役割なのに、UIの主役には絶対なれないし、主張するとウザがられ、空気読めよ邪魔だよとか言われて面積を大きくとれなかったり、え？いつの間に体力ゼロ？なんで？今の攻撃結構減ったな、ヤバい！回復しないと！などなど、細い見た目でもそれなりに情報量を込めないといけなかったりと、とても悩みどころが多いです。

そのくせ、 ただの棒じゃん、そんなの秒でつくれるんじゃね？とかもっとカッコよくして、安っぽくならないようにして、とか気軽にコメントされると切なくなります。

　この安っぽくならないように というのが結構重要で、ゲージに手を加えてないゲーム画面はどうしても「仮感」（システム上必要になったのでとりあえず置いてみたけどまだゲーム画面に馴染めてなくて仮っぽく見える感覚）が漂ってしまいます。見た目に情報強度はめちゃくちゃ強いのですが、立ち位置がそこじゃない感（メタ視点から見て）が滲んできて開発途中な印象を与えかねないので、開発終盤ではそれなりに手を入れられるとクオリティアップにつながります。

　最近は、ゲームグラフィックの描画スペックが上がって、画面情報量も格段に増えているので、そこに埋もれないようなUIを考えると、フラットデザインは結構フィットしている印象です。逆にUIに色を使わずシンプルにシルエットと位置、動きで勝負するので、デザインも実装もなかなかの難易度になってると思います。

　とはいえ、ゲームの世界観にふさわしいUIデザインというのがゴールなので、トレンドも意識し通つつ、『色・カタチ・動き』に意味を与えながら試行していくしかないですけどね。

　前置きが長くなってしまいましたが、一応続きの記事になります。

limesode.hatenablog.com

limesode.hatenablog.com

　UE4でゲージを作る記事は探すとそれなりに出てくる今日この頃。いまさら感が否めないのを気にしつつ、今回はちょっと切り口をかえて書いてみようと思います。

　ゲージは実にいろんな作り方があって、どの方法が正解とかないのですが、あるとしたら処理負荷の少ないエコなつくりで見た目がいい感じ、あたりでしょうか。

フワッとした言い方しかできないので、提案になってしまいますが、ざっと眺めてもらって試してみたいのが見つかればいいな。

INDEX

テクスチャ作るのめんどい

そろそろ仮UIを脱したい。でも今はまだデザインに時間を割きたくない。ちゃちゃっとエンジンコンテンツだけでどうにか。デザイナーに依頼かける前に検証。というような状況を想定。

カーブアトラスでちょっとリッチに見えるグラデーションゲージ

カーブアトラスと書きましたが、実際はカーブをカラーとして格納したテクスチャということになります。グラデーションは別途カーブアセットを使って作ります。

コンテンツブラウザで右クリックして Miscellaneous > Curve を選択。

Curve を選択すると、ポップアップが出るので、CurveLinearColor を選択。

カーブエディタが開くので、RGB各チャンネルにカーブをつけていい感じのグラデーションを作ります。

保存したら、次にカーブアトラスを作って編集します。

テクスチャサイズはデフォルトで 256 になっています。ちょっと贅沢なのでメモリ節約のため小さくします。べき乗サイズがオススメなので、 32、64、128 あたりで。

すぐ下、Gradient Curves のところに + ボタンがあるので、ここに作ったグラデーションカーブをセットします。

これを保存して準備完了。

続いてマテリアルを用意します。

コンテンツブラウザで右クリック ＞ Material

エディタを開いたら、さっそくカーブアトラスを扱うノードを取り出します。

CurveAtlasRowParameter ノードです。

ノードを選択して、Detailsタブで、カーブとカーブアトラスをセットします。

セット完了したら、その他必要なノードを以下のようにつなぎます。

Mask(R) は  Component Mask ノードの Rチャンネルのみ有効にした状態。

あとはこのマテリアルを保存して、UMGのHPゲージにセットするだけ。

テクスチャをセットする場所に、マテリアルがセットできます。

カラーはまっ白にしておかないと、乗算されてカラーが思った通りに出ないので注意。

ここから少し改造

グラデーションの向きを縦にしてみます。ComponentMaskを Ｒ → Ｇ に変えるだけ。

手っ取り早く上下反対にしたい場合は OneMinus ノード

Mask(R) に使うと 左右反転します。

計算が増えるので、最終的にカーブエディットで解決するのをおススメします。

ここで、もうひとネタ

カーブを追加します。

両端がグレーで真ん中が真っ黒です。

カーブアトラスに追加登録します。

これをマテリアルで合成します。

こんな感じになります

さらに おまけでこんなカーブ

これ色として使ってなくて・・・

こうなります

赤をハイライト、緑をシャドウとして合成しています。

テクスチャを使わなくてもリッチな見た目をつくることができます。



 

グラデーションゲージを活かしたピンチな点滅

カーブアトラスでもうひとネタ絞り出しました。

以下のようなグラデーションを用意します。

ゲージ本体のマテリアルを複製して下敷き用のマテリアルを用意します。

タイマーとサインカーブで点滅させています。

点滅のための単色グレー（図の一番上にあるノード）は、グラデーションのグレー部分と同じ明るさです。

常に点滅はしているのですが、ある程度減らないと見えてこない仕様です。
特に残り体力の判定等はしていないので、どの辺でヤバみを主張するかは、カーブで調整できます。

テクスチャ用意できた

ただの棒はイヤだ！なんとかしてテクスチャを用意するぜぇ！せっかくテクスチャが用意できたんでなんかこういい感じの・・・、という状況を想定。

定番のフレームを載せるやつ

説明用にちょっと贅沢な作りですが、フレーム（上）とゲージ本体（下）の2枚。

重ねやすさを優先して余白が多めです。

これをインポートして、ゲージ本体用のみマテリアルに持っていきます。

コンテンツブラウザでインポートしたテクスチャアセットアイコンの上で右クリックするとラクに取り込めます。

stepノードを使って、ゲージの長さを塗り分けています。

こういったテクスチャを使った自由な形状のゲージは、余白があるため、テクスチャの端から端までを使ってデザインされていないことがほとんど。

そこで大事な部分。

ゲージとして扱うときに 0で空っぽ、1.0で満タン というのがよくあるケース。というかグラフィックで表現するときに効率的な扱い方。

同じように扱おうとすると、ゼロになってないのに、ゲージの見た目は空っぽ。満タンじゃないのにゲージの見た目は満タンということが起こります。

そこで、Lerp（Linear Interpolate）ノードを使って 0 ～ 1 に補正します。

例えばテクスチャの幅が 512px で左端から 8ピクセル余白があったとします。

すると、 8 ÷ 512 = 0.015625 付近の数値が Lerpノードの A になります。

同様に右から 12ピクセル余白があったとしたら、

(512-12) ÷ 512 = 0.9765625 付近の数値がLerpノードの B になります。

電卓で計算してもよいですが、UE4は直接計算式を入力できるので便利。

入力してEnterキー押したら、どこか別の場所をクリックすると計算結果に変わります。

テクスチャの解像度と余白の取り方によって数値が違ってくるので、実際の表示を確認しながら微調整します。

スカラーパラメーターノード Value の値に 0 と 1 を入れて加減します。

ゲージの増減をマテリアルで行うので、ブループリントからマテリアルにパラメータを渡すための準備が必要です。

Dynamic Material Instance を作成して変数に昇格(Promote to Variable)

これに対してSet Scalar Parameter Value ノードを使って数値を渡します。

この関数は、前の記事で作ったものの使いまわしです。

デザイン性が高くオリジナリティが出しやすいのですが、ちょっとだけ扱いが面倒になるのが難点。

キャラ絵を使ったゲージ 

頑張って描きました。これをマテリアルでゲージにします。

四隅がもったいない作りですが、実装スピードを重視してます。描画負荷がキビシイ場合は45度回転しておくという手がありますが、ピクセルが若干荒れるので解像度と相談になります。

 これもゲージの増減をマテリアルで行うので、ブループリントからマテリアルにパラメータを渡すための準備が必要です。

Dynamic Material Instance を作成して変数に昇格(Promote to Variable)

これに対してSet Scalar Parameter Value ノードを使って数値を渡します。

この関数は、前の記事で作ったものの使いまわしです。

できたのはこれ

 満タン ←→ 空っぽ の変化の向きは、UとVの計算をちょっといじってやると変えられます。画像を回転する場合は効果ないですが、画面内の位置が決まってから、絵の感じ、視線の流れを見て選択するといいと思います。

OneMinusノードの使い方がポイント

キャラ絵の一部を切り出して使う

どこか別の場所でアイコンなどで使っているテクスチャを流用します。

これは直接ゲージにするのではなく、ゲージに重ねて使います。

 

この彩色されたテクスチャを加工します。

 複数キャラの切り替えを想定していて、切り取る位置だけを変えられるようにスカラーパラメータにしてあります。

このマテリアルをマスターにして、あとはキャラごとのマテリアルインスタンスを量産すると、絵に合わせた素材が簡単に用意できます。

 ネガポジ反転したみたいになっていますが、これに着色してゲージに後乗せするといい感じになります。

　ひとまずこの辺にまでにしておきます。テクスチャ作成とマテリアル作成については、作る人のスキルに依るところが大きいのと、テクスチャ制作はエンジン以外のエディタ環境が必要だったりで、説明が難しいのがもどかしいですね。うまくフィットするのがあればぜひ試してみたりアレンジしてください。同じような表現でも違うアプローチで作ることができたりするので、ゲージ作りは奥が深いです。

　UMGを使わないという選択肢もあります。ただ、これは見た目のコントロール難度が格段に上がるので、3D描画の仕様にある程度慣れてないと調整に大変時間がかかります。

　逆にUMGのほうが慣れるの大変そうという方は、テキスト表現だけをUMGにして、あとはMeshで、というのも可能です。アンリアルエンジンでは使う人次第で、いろいろな作り方ができるのも魅力のひとつです。

 操作についてはかなり端折っているので、わからない点やツッコミ等々あればTwitterかブログコメントでお気軽にお尋ねください。レスポンスは速いとはいえないですが対応します。

次回はちょっと特殊な演出で遊んでみようと思います。

ではでは

すてきなゲージライフを！