みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

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

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

f:id:hiyokosabrey:20211211105058g:plain

 

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

f:id:hiyokosabrey:20211211115531g:plain

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

 

f:id:hiyokosabrey:20211217202348g:plain

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

f:id:hiyokosabrey:20211217201530p:plain

 

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

f:id:hiyokosabrey:20211217185422p:plain ←実寸

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

f:id:hiyokosabrey:20211205220858g:plain

 

 

 

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

 

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

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

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

 

作業する面は XY (テンキーの[7])

f:id:hiyokosabrey:20211219133401p:plain

プレーンな四角形を追加

Object Mode > Add > Mesh > Plane

f:id:hiyokosabrey:20211219101759p:plain

f:id:hiyokosabrey:20211219103049p:plain

 

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

f:id:hiyokosabrey:20211219103142p:plain

 

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

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

f:id:hiyokosabrey:20211219103219p:plain

 

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

Edit Mode > Edge > Subdivide

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

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

f:id:hiyokosabrey:20211219104433g:plain

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

 

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

f:id:hiyokosabrey:20211219104831p:plain

長さもいい感じに調整。

f:id:hiyokosabrey:20211219105801p:plain

 

テクスチャを作ります。

f:id:hiyokosabrey:20211219111230p:plain

  ↑

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

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

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

f:id:hiyokosabrey:20211219113426p:plain

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

 

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

SurfaceEmmision に変更

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

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

f:id:hiyokosabrey:20211219133024p:plain

 

 

UV展開します

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

Edit Mode > UV > Project from View(Bounds)

 

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

f:id:hiyokosabrey:20211219133847p:plain

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

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

UV > Align > Align Y

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

f:id:hiyokosabrey:20211219134152p:plain

 

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

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

f:id:hiyokosabrey:20211219134456p:plain

Edit Mode > UV > Project from View(Bounds)

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

f:id:hiyokosabrey:20211219134723p:plain

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

 

UV展開完了。

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

 

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

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

f:id:hiyokosabrey:20211219135004p:plain

 

f:id:hiyokosabrey:20211219135255p:plain

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

端っこの白い部分。

f:id:hiyokosabrey:20211219142630p:plain

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

f:id:hiyokosabrey:20211219142423p:plain

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

f:id:hiyokosabrey:20211219142825p:plain

 

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

f:id:hiyokosabrey:20211219145644p:plain

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

 

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

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

f:id:hiyokosabrey:20211219143929p:plain

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

 

余談ですが

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

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

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

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

f:id:hiyokosabrey:20211219150640p:plain

これで一応解決します。

f:id:hiyokosabrey:20211219150914p:plain

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

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

f:id:hiyokosabrey:20211219151504p:plain

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

f:id:hiyokosabrey:20211219151844p:plain

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

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

f:id:hiyokosabrey:20211219161300p:plain

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

 

さてさて

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

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

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

f:id:hiyokosabrey:20211219163406j:plain

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

f:id:hiyokosabrey:20211219164056p:plain

Add > Vector > Mapping

f:id:hiyokosabrey:20211219164401p:plain

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

f:id:hiyokosabrey:20211219164627p:plain

次に、

Add > Input > UV Map

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

f:id:hiyokosabrey:20211219193440p:plain

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

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

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

f:id:hiyokosabrey:20211219194039p:plain

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

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

f:id:hiyokosabrey:20211219194628p:plain

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

 

次にMappingノード。

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

f:id:hiyokosabrey:20211219195237p:plain

 

f:id:hiyokosabrey:20211219195716p:plain

f:id:hiyokosabrey:20211219195725p:plain

f:id:hiyokosabrey:20211219195733p:plain

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

f:id:hiyokosabrey:20211219201619p:plain

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

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

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

 

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

スクロールの方向は X(=U)軸で マイナス方向

 

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

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

 

f:id:hiyokosabrey:20211219202914p:plain

f:id:hiyokosabrey:20211219202943g:plain

できました!

 

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

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

f:id:hiyokosabrey:20211219214543p:plain

ぐぬぬ

 

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

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

 

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

f:id:hiyokosabrey:20211219215416p:plain

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

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

 

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

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

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

f:id:hiyokosabrey:20211220215204p:plain

 

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

 

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

f:id:hiyokosabrey:20211219220701p:plain

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

f:id:hiyokosabrey:20211219220726p:plain

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

f:id:hiyokosabrey:20211219221000p:plain

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

f:id:hiyokosabrey:20211219221204p:plain

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

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

f:id:hiyokosabrey:20211219222346p:plain

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

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

f:id:hiyokosabrey:20211219222756p:plain

 

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

f:id:hiyokosabrey:20211219223611p:plain

 

UV Editor 画面で確認します。

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

f:id:hiyokosabrey:20211219223758p:plain

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

f:id:hiyokosabrey:20211219224119p:plain

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

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

f:id:hiyokosabrey:20211219224351p:plain

 

f:id:hiyokosabrey:20211219224618p:plain

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

f:id:hiyokosabrey:20211219225013g:plain

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

 

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

f:id:hiyokosabrey:20211219234447g:plain

 

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

f:id:hiyokosabrey:20211220215946p:plain

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

 

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

f:id:hiyokosabrey:20211220223413g:plain

f:id:hiyokosabrey:20211220222119p:plain

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

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

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

 

 

いかがでしたか?

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

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

 

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

 

ではでは

ステキな3DUIライフを!