日が落ちるのが早くなってきましたね。帰宅中に夜道を歩いていると、ふいに稲の枯れた匂いが漂ってきたので、見ると田んぼの稲がすっかり刈られていました。昼間はまだ暑いので意識していなかったんですが、なんだか急に夏の終わりを感じて寂しく思うと同時に、美味しい食べ物がいろいろ出てくる季節なのでワクワクもしています。
さてさて、この頃はゲームエンジンが身近になって、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の場合、
- 対象を選ぶ
- アクション(何をするか)を決める
- 操作する(アクションによっては追加で設定や調整までできるものがある)
という3段構えで触ることが多いです。
対象の種類や状態によってできることとできないことの差が大きくて、状況依存としてコンテキストから選ぶほうがユーザーにとっては選びやすかろうという配慮だと思います。
アンカーポイントの追加
アンカーポイントを後から増やすには、セグメントの分割という操作になります。
2点を選んで
ヘッダーメニューから Segments > Subdivide
アンカーポイントの削除
削除したいアンカーポイントを選択した状態で
[ X ]キーを押すとポップアップが出ます
Vertices を選ぶと消えます。
アンカーポイントを2点選んでこの操作を行うと、間のセグメントを削除できます。
ショートカットキーを使いましたが、ヘッダーメニューからも同じ操作が可能です。
大体カーブの扱い方がわかってきたところで、
画面デザインからテクスチャを作って、Blenderに持ってきます。
まずテクスチャはこんな具合に入れました。
1920x1080の画面サイズを想定しているので、テクスチャのサイズは 2048x1024 と巨大です。画面デザインからダイレクトに移植しました。
作業しやすいように、背景は真っ黒です。
PSDで書き出したらBlenderのウィンドウに直接ドロップします。
ObjectModeじゃないとドロップできないので注意。
あと、作業するビューにドロップしないと、カメラの向きを変えると回転してしまいます。
色が濃すぎるので、半透明にします。
ドロップした画像オブジェクトを選択した状態で設定パネルから調整できます。
実はこれ、テクスチャではなく、下絵として使います。
ここにカーブを追加したら、この絵を下敷きにして形を整えていきます。
少し外側を通る感じ。
この「カーブ」は「メッシュ」にしないとゲーム画面で描画できません。
アウトラインフォントがすでに実装できているので、いずれはそのままアセットとしてレンダリングできる時代が来るとは思いますが、いましばらくはメッシュと仲良くするしかないようです。
さて、モードを ObjectMode に切り替えます。
カーブからメッシュに変換する方法は2つ
一つは ヘッダーメニューから 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 に数値を入力。
スケールを ゼロ にすると 1点に集約されます。
これを、邪魔にならない場所に移動します。[ 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ライフを!