ゲームのUIを作っていると一度くらいは矢印をデザインすることがあると思います。今回は動きのある矢印を3Dメッシュでつくります。動きといってもUVのスクロールです。テクスチャのUVを移動させることで絵が流れて見えるやつです。
前回の記事で使ったカーブを応用するとこんな矢印も作れます。
ひとつのメッシュから法線の向きを反転させたもう一つのメッシュを作り、それぞれ違う色のマテリアルをセットし同じ位置に表示すると、裏表で色が違うという表現ができます。Backface Culling(陰面消去)でそれぞれの裏面は描かれないというのを利用しています。
このウネウネはテクスチャの歪みを抑えるために頂点数は結構多いですが、
テクスチャサイズは64x64です
←実寸
テクスチャを繰り返して並べることをタイリングといいます。前回の記事で書いたWrap(ラップ) と Clamp(クランプ) の設定で、Wrapを使っています。
矢印の作り方はいろいろあって、手間 と 容量 をどう案配するかがカギで、クオリティに差が出ます。
とりあえず一番上で紹介したシンプルなアニメーションの矢印を作ってみます。
簡単なカタチの矢印をポリゴンで用意します。
いろんな作り方がありますが、ぼくなりの一例をご紹介します。
作業する面は XY (テンキーの[7])
プレーンな四角形を追加
Object Mode > Add > Mesh > Plane
Edit Mode にしてエッジを1本だけ選択。
[E]キーを一回だけ押して、選んだエッジの方向に[G]キーを押して移動すると、ポリゴンが増えます。
移動の際、途中で[Ctrl]キーを押すか、中ボタンで移動開始すると移動方向を拘束できて便利。
そのまま エッジを 分割します。
Edit Mode > Edge > Subdivide
見た目にわかりにくいですが、エッジの中間に頂点が増えてます。
その増えた頂点に向かって、ナイフツールでエッジを引きます。
ナイフツールは、マウスカーソルが頂点に近づくと、大き目の □ が表示されるので、それを手掛かりにクリックしていきます。最後に[Enter]キーを押して確定。
あとは頂点を動かして形を調整します。
長さもいい感じに調整。
テクスチャを作ります。
↑
白黒半分ずつ塗り分けた 32x8 です。
これを 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は普通は1つですが、複数のUVマッピング情報を持つことができます。
確認するには、ここのリスト。
右の +ボタンを押すと増やせます。
次にMappingノード。
Scale の X を大きい数字に変えてみます。
いい感じの間隔になったら、次は Location の X を触ります。
フォームをマウスで左右にドラッグすると、動きます。
Xの値がマイナスになるように動かすと、矢印の先端に向かって動くことがわかります。
これで重要な情報は揃いました。
タイリングの回数は Scale X(=U) で 10倍
スクロールの方向は X(=U)軸で マイナス方向。
この情報を持ってエンジンでマテリアルやシェーダーを用意すれば実装できます。
スピードと色は、エンジンで調整するほうが確実です。
できました!
実装した矢印を見てもらったところ、フィードバックが返ってきた、という想定で、
もう少し手を入れていきます。
ぐぬぬ。
ということで、動くところと動かないところを分けることになりました。
とはいえ、UVを動かすと、すべての頂点が動いてしまいます。
そこで、テクスチャを上下に分けて考えます。
上のレーンは、白と黒が交互に並び、下のレーンは、ずっと白のまま。ということになります。
メッシュの UVをうまく分けられればなんとかなりそうです。
テクスチャを更新します。
Photoshopで上書きしても、Blenderではすぐに気づいてくれないので、テクスチャを開きなおします。
ついでに UV座標を動かしておきます。
動くところと動かない部分を分けるために、エッジを追加します。
Edit Mode で上下2本のエッジだけを選択して、
ヘッダーメニューから 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ライフを!