UE4でUI制作の何かに役に立てれば～と思って始めてみましたが、どうなんだろう。少しはキッカケになってUE4を触り始めた方がいればいいなぁとそんな妄想をしながら先週もネタをツイートしていました。この記事はそのまとめです。
先週のフチドリを改造
先日のフチドリ表現をマテリアル一つにまとめてみました。若干フリンジが気になっていたので、元テクスチャのフチドリを暗いけどアルファチャンネルとして使えるよう0x0000FFに変更。パラメーターで切り替えできます。#UE4 pic.twitter.com/aqikiZSz0t
— みつまめ杏仁 (@MMAn_nin) 2020年4月27日
前に紹介したフチドリを、一つのマテリアルで表示、非表示を切り替えられるように改造しました。
テクスチャのカラー（RGBの方）にフチドリの色が入っているせいで、表示した際に若干フリンジが出てしまっていたのを、軽減する対策を入れてみました。
可変できる引き出し線
一見無駄に折れてるように見えて、でもなんとなくいい感じの引き出し線をメニューのフォーカスに追随するようにしてみました。
UMGでアニメーションする引き出し線を試してみた#UE4 #ue4UMG #UI制作 pic.twitter.com/vWfyhQK7SG
— みつまめ杏仁 (@MMAn_nin) 2020年4月28日
動きはTwitter に動画を上げているので上のリンクから確認できます。
昔スプライトでUIを作るしかなかったときに、すごく面倒な指定書をプログラマに渡して作ってもらった記憶がある。別のハードではポリゴンで作ったりして、当時頂点を触ることができなかったので長さの違うのを数タイプつくって切り替えてもらってた。
今はUMGで、一人でさくっと作れてしまう時代。
ただこの方法には欠点があって、サイズがマイナスになると見た目がおかしくなる。
一応アレンジしたやつも作ってました。
ワールドに置いたオブジェクトの座標をスクリーン座標に変換して、あとはラインにマテリアルでアニメーションを付けました。動きは以下のツイートから確認できます。
アレンジしてみた pic.twitter.com/i5HJ0pH5X3
— みつまめ杏仁 (@MMAn_nin) 2020年4月28日
2Dだけどテキストの影で3Dっぽく見せる
Materialで動きを作ってみた。テキストとフォーカスの切り替えはUMGでやってるけど、アニメーションは使ってない。#UE4 #ue4UMG #UE4Study pic.twitter.com/g5IxEQPhJp
— みつまめ杏仁 (@MMAn_nin) 2020年4月29日
動きはTwitter に動画を上げているので上のリンクから確認できます。
普通に3Dでつくればいいんですけどね。
最初、マウスカーソルのホバー演出でダイナミックに開閉するメニューを作ろうとしたんですが、VerticalBox内での表示順を制御する方法が見つけられなくて、いろいろキャンバスをいじっているうちにこうなりました。
せっかくなので、テクスチャとかUMGのアニメーションを使わないでやってやろうという謎の使命感で仕上げました。
影がぴょんぴょんするのはこんなマテリアル。
移動量を加算する直前で、0.0 か 1.0 をかけると動きをOn、Offできる仕様。
ディゾルブを作ってみた
気になってた MAHOU ARMS のストーリーデモ画面のやつ（トランジション？）を作ってみた。いい感じの絵を用意できる気がしなかったので先日のメンダコさんにご登場願いました。 pic.twitter.com/IhAEw2mneO
— みつまめ杏仁 (@MMAn_nin) 2020年4月30日
動きはTwitter に動画を上げているので上のリンクから確認できます。
Epicのおかずさんがツイートされてるのを見て、気になって公式のPVを見てたらふと作りたくなった表現です。
𝓢𝓽𝓮𝓪𝓶 𝓔𝓪𝓻𝓵𝔂 𝓐𝓬𝓬𝓮𝓼𝓼 𝓲𝓷 1 𝔀𝓮𝓮𝓴 pic.twitter.com/WqAQ3DmXfR
— Mahou Arms (@mahouarms) 2020年4月21日
0:20 付近から漫画のコマ割りを活かした2Dのデモが入るのですが、絵パーツごとに動いてるので、汎用的に使えるマテリアルを作れないかと試してみたものです。
ふるふる震える動きは、下のようなノイズテクスチャを用意して頂点に加算しています。
TexCoodinate の Tiling の値を小さく（ UVの範囲を小さく）して、各頂点がバラバラに動かないようにしています。
あとはWidgetブループリントで出現アニメーションとディゾルブの量を制御してます。
きっちり１画面に収まったのが気持ちよかったです。
私が少年期に出会った雑誌に１画面プログラムというコーナーがあったのを思い出しました。１画面に収まるようにテキストベースでぎっちぎちにプログラムのコードを書くチャレンジングな企画で、ブループリントでもやってみたら面白いかもしれません。
変数名やら関数名、ピン名を極限まで少なくして可読性なんて気にしない、とにかく動けばいいんだ的なやつ。ノードの重なりはNGということで。こういうミニマムでも面白いことができるというハックみたいなのに憧れます。
あつ森のUIが気になるシリーズ スマホ編
『あつ森』とは Nintendo Switchのソフト、『あつまれ どうぶつの森』 のことです。
今日は あつ森 のスマホウィンドウをそれっぽく目コピー#UE4 #ue4UMG #UE4Study pic.twitter.com/UNZnrLeVdM
— みつまめ杏仁 (@MMAn_nin) 2020年5月1日
動きはTwitter に動画を上げているので上のリンクから確認できます。
実際に遊んでて動きが気になってよく見てると、波打った表現が入ってたので真似してみました。完全再現が目的ではないので、それっぽくしてるにとどめています。
ただできそうというだけが動機で、やってみたらそれっぽくなったというやつです。
ちょっとテクスチャを節約したかったので、1/4だけ作って並べてます。
これを４枚並べると、Imageパーツそれぞれに Get Dynamic Material するか、別にCreate Dynamic Materialしたものを、あとから４つのImageパーツにセットすることになるので、なんかなーと思っていたら、マテリアルパラメーターコレクションがあるじゃないかと、閃いたわけです。
サイン波をタテ方向のUVに足してやることで、ピクセルを波型に引き伸ばしています。
今回UMGのアニメーションと同期させたかったので、見えないパーツを一つ追加してそのアニメーションさせた値をTickで拾って流しこんでます。
いやほんと、細かい動きが実装されてますね。
あつ森のUIが気になるシリーズ カーソル編
週末ネタ切れ感ハンパないですね。またしてもアツ森からいただきです。
今日も あつ森 からネタをいただきました。選択肢用ポップアップのカーソルがよくできてたので。#UE4 #ue4UMG #UE4study pic.twitter.com/XiN8EgQhnG
— みつまめ杏仁 (@MMAn_nin) 2020年5月2日
文字列の長さに合わせて、カーソルの長さも可変してて、さらに決定ボタンを押したときはカーソルの端にパターンアニメーションのような演出が入ります。
これもUMG使いとしてはやってやれるとこを見せないわけないはいけません。（謎の使命感）
まずカーソルのパターンアニメーションを用意。
これをテクスチャにする。128ｘ512 ちょっと贅沢かも。
表示した際に左側は位置が固定なので、反転したパーツを置いてもよかったかも。
そうするとテクスチャ半分で済むな。と、今この瞬間この記事を書きながら思いました。
色とUVはマテリアルでコントロール。
これを Box にすることで可変する長さに対応。
選択肢用の子Widgetを用意しています。
ヒエラルキーは、CanvasPanel を親にして、カーソルとテキストブロックをひとつづつ配置。
カーソルは親キャンバスにフィットするようにアンカーを設定。
親キャンバスは、子に配置したテキストブロックに対して、Size to Content を設定しておくだけ。
あとは、フォーカスの切り替えと決定時のアニメーション再生をWidgetブループリントで制御。
UMGのアニメーションでスプライトシートとかUVシーケンスみたいなのが使えたらこういうパターンアニメーションを仕込むのラクになると思うんだけど、もっといい方法があるのかな。
一定のパターン数を表示したら、イベントディスパッチャーで通知して、ウィンドウそのものを消す流れにしています。
今回はここまで
やることとデザインが決まっていればサクッと作って表示するとこまでは簡単なのですが、やっぱりUI制作の一番の難しさは、未来との折り合いの付け方です。
ゲーム制作に慣れてくればある程度の 読み ができるのですが、船を作ってる途中で、陸上も走れるようにしようとか言いだすと、設計の見直しは必須。
なので、いろんな作り方で臨機応変に対応できるよう日頃から脳筋の柔軟体操をしておくのが大切だなと改めて思う次第。
UIを研究するにはいい機会なので、みなさんぜひ目コピしましょう。ゴールがある分作りやすいはず。そこから機能性や有用性を広げるアイデアが生まれることを期待して、まず作ってみる。そしてアレンジ。うまくBADケースやユーザーテスト案件に気づけばそれはそれでお宝GETです。
来週はちょっと状況次第なとこがあるので、引き続き、というわけにはいかない気配ですが、余裕があれば続けていきたいと思います。
ではでは
すてきな目コピライフを！
