当ブログでは、CEDECで取りあげられることのない、ゲームUI開発で明日使えるかもしれない小ネタを主に扱っています。ためになるかもしれないし、ならないかもしれません。
さてさて
最近、斜めになったボタンでもマウスカーソル（ポインタ）を検出できるかという検証をしました。
今回はその続きというかおまけのようなものになります。
斜めに傾けるのはUMGの RanderTransform で設定できるのですが、その名の通り描画時にゴリっと変形させてしまう手法で、アンチエイリアスなど気の利いた処理が入りません。
エッジが見事にジャギってしまいます。解像度が高くて画素が小さいディスプレイだと気づかれにくいですが、背景の色との組み合わせで目立つこともあります。
このジャギー対策はやはりテクスチャで解決するのが簡単なので、専用のテクスチャを用意します。サイズは 128ｘ128px
RGBAの各チャンネルを分解すると ↓ このようになってます。
※上の画像をDLするとPhotoshopで再構成できます
UIパーツは状況に合わせてカラーを変えたりすることが多いので、いちいちバリエーションを用意してたらテクスチャ容量が厳しくなります。そこでできるだけテクスチャに頼らない方法として、このスタイルが最近のお気に入り。
Photoshopで作る場合、各レイヤーのブレンドは、覆い焼き（リニア）-加算 です。
この方法だとマテリアルが必須になってしまうのですが、調整の手軽さや複数人での開発を考えるとコスパはかなり高いと思います。
カラーをどういじるか次第でノードのつなぎ方は変わってはきますが、この程度のノードでボタンの色味は自由自在です。マテリアルパラメータコレクションを使えば、リードUIデザイナーがカラーを一括して調整するのが簡単にできます。複数人で開発する場合それぞれが自身のPhotoshopでカラーを共有管理しながら作業するのは、うっかりや伝達漏れなど、そう簡単ではないと思います。これだけネットワーク環境とゲームエンジンが進化しているのであれば、プラットフォームやデバイスの多様化と能率のことも考えると、ある程度ゲームエンジンという一つの大きな作業台の上でデザインを仕上げていこうという考えはそう悪くはないと思うのです。
このへんちょっと意味わかんないと言われてしまうとアレなんで、オーソドックスだけどマテリアル使う方法も紹介。
テクスチャはこのように２種類の絵を一枚にまとめておきます。256ｘ128px
※上の画像をDLすると PNG形式なのでそのままインポートできるはず
この方法だと２種類の絵を Lerpノード使ってスイッチすることができます。
マテリアルを使わずに作る場合 あらかじめ２枚の絵を重ねておいて、上に乗っている方のアルファ値を操作する方法が普通。２枚のオブジェクトが必要になるうえに、アルファで半透明の部分が重なって濃くなるので、フェードアニメーションするたびに輪郭が太ったり痩せたりします。試しにデバッグ用のノードをつないでみましょう。
Lerpノードの Alpha につなぐだけで簡単に確認できます。
背景が黒なので溶けてわかりにくいですがテクスチャのアルファ値は変化していないので輪郭の濃さは変わりません。
ちなみに２枚重ねだとこうなります。
まぁこの程度は気にしないか気付かない人がほとんどだと思いますが・・・
この青とオレンジの２パターンは、通常時とハイライト時に切り替える予定です。
となると、先に紹介した方はUMGのアニメーションでカラーを変化させる方法になります。
ただ、この方法はプロジェクト全体で一括調整というのが難しいのと、CPU負荷も少し気になるので、マテリアルパラメータコレクションに変更します。ということで、最初のマテリアルをもう少しいじっていきます。
まずコンテンツブラウザからマテリアルパラメータコレクションを新たに作成。
編集して４色を用意します。カラーは RGBAと４種類の値がひとつにまとまっているので Vector Parameter を選択します。
これを組み込んでいきます。
マテリアルエディタのグラフで右クリックして CollectionParameter ノードを取り出し、
Detailsタブからさっき作ったマテリアルパラメータコレクションをセット。
これらをLerpで補間してやります。
Lerp（線形補間：Linearinterporate）も処理コスト的にそんなに安くないので、ここはカーブアトラスを使った方法も試してみます。
カーブアトラスとカラーカーブについてはこちらの記事がおすすめ。
で用意したのはこの２本。
これを組み込んでみます。
すっきりコンパクトになりました。
ちゃんと負荷検証をしたわけではないので勝手な推測になるのですが、カーブアトラスを置くためのメモリ容量を犠牲にしてでも、カラーのアニメーション計算の方が処理付加的に高くつくからというのが、その存在理由なのかなと思ってみたりしてます。事前に計算した変化の度合いをテクスチャに焼き付けておくことで計算を省力化してるのかなと。
ただ正方形テクスチャで非圧縮だと思われるので、テクスチャ容量に余裕がないプロジェクトは厳しい手法になりそうです。なのでカーブアトラスを使うと決めたらめいっぱいカラーカーブを仕込んでいきたいですね。
マテリアルはこの辺にしておいて、ボタンWidgetを作っていきます。
UMGでキャンバスに Image を配置。先ほど用意したマテリアルをセットします。
TextBlockも配置してキャンバスはこんな感じで構成。
前回の記事で書いたように左右のスキマ調整用に SizeBox で Wrapしています。
ここに、マウスカーソル（ポインタ）のヒット検出用に Image を重ねます。
半透明で色を付けた状態で作業して、位置と形が決まったら完全に半透明にします。
Hierarchy はこのようになりました。
次にアニメーションを追加します。
アニメーションはボタンのマテリアルに用意していたパラメータに対して付けます。
トラックが追加出来たら今度はそのトラックにマテリアルのトラックを追加します。
ここでようやくプロパティが追加できるようになります。
あとはキーを打つだけ。
このアニメーションは 通常時（デフォルト状態）用で状態をリセットするために使うので特に尺は必要ないので、キーはひとつだけ打ちます。最初に5秒分の尺が設定されているので、終了点を詰めます。※ゼロにはできないようです。
次に ハイライト用のアニメーションを作ります。
こちらは尺を0.25秒でキーを打ちます。キーの値は 0.0 ～ 1.0
とりあえずアニメーションはこの２つ。
次はマウスカーソル（ポインタ）が重なった時に呼び出されるイベントがあって、その検出をスムーズに行うために、Visibility（ビジビリティ） の設定を変更します。
Visibility は Behavior（ビヘイビア）の中にある設定項目です。
最後に追加した ヒット検出用の Image 以外を Non-Hit-Testable(Self Only) にします。
あとはTextBlock の isVariable を有効にしておきます。
キャンバスの準備ができました。
ブループリントを編集します。
マウス用のイベントをオーバーライドします。
前々回の記事でも説明しましたがもう一度載せます。
～Enter と ～Leave の２つを取り出します。
ここに 作ったアニメーションをつなぐのですが、アニメーション管理用の変数を追加します。
VariableType は Widget Animation型
これを使ってマクロを作ります。
グラフ内である程度つないだら、選択して 右クリック ＞ Collapse To Macro を選択。
これをダブルクリックして編集します。空のマクロから作成しても問題ありません。
実行ピンがつながってないので、ノードからドラッグして追加します
Inputs と Outputs のノードにドロップすると、自動で実行ピンが追加されます。
このマクロを経由してイベントとアニメーション処理をつなぎます。
まずは On Mouse Enter から
次は On Mouse Leave
残るはテキストの変更する処理。
Integer型の変数を一つ追加して、外部から値を受け取れるようにします。
Expose on Spawan と Instance Editable を有効にします。
この変数を、Event Pre Construct で使います。
マウスオーバーしか機能はないですが、これでボタンのWidgetは完成です。
確認用にボタンを配置する 親のWidgetを新しく用意します。
キャンバスに HorizontalBox を一つ置いたら、作ったボタンWidgetを並べたいだけ置いていきます。
UE4はプロジェクト内に作った Widget は、User Created というカテゴリにエントリーされるようになります。CanvasPanel や TextBlock、Image をPaletteタブから取り出すようにこのリストから取り出せます。フォルダが違えば同じ名前のWidgetが作れるので、適当に作ってるとこうなります。マネしないようにしましょうｗ
なんとか探して、Hierarchey の HorizontalBox にドロップします。
↑５つばかり置いてみました。
ここ面白いのが、先ほど ボタンWidgetで作った Integer型の変数にアクセスできるところ。
追加したボタンWidgetを選択した状態で、 エディタ右にある Detailsタブを見てみると、ここから値を設定できるようになってます。
値を書き換えるだけで、コンパイルしなくてもどんどん変わっていきます。
これはなかなか面白い仕様です。
これで完成です。
レベルブループリントからViewportに追加して確認します。
動画はツイッターに上げました。
矩形じゃないヒット判定のアレンジで作ってみた#UE4 #ue4UMG #UIdev pic.twitter.com/hWUAZPtLV0
— みつまめ杏仁 (@MMAn_nin) 2020年9月6日
前回の記事では、ブループリントから動的にボタンUIを生成しましたけど、今回は手で並べてみました。変動せずに決め打ちで作れるならこの方法でも大丈夫だと思います。
決定処理とか作り始めると、また長くなるので今回はこの辺にしておきます。
UIの表現は、見た目は同じでも作り方としていろんなアプローチがあって、正解というかベストを探る感じで作ることが多いです。UE4はいろんな方法を試せるのでとても楽しいです。
UI制作において作り方マニュアルが欲しいという話をチラホラ耳にしますが、欲しかったらまずはUIを作ってみるのが一番の近道だと思います。この辺いい感じのアドバイスができないのが個人的に口惜しく感じているところではありますが、おっとまた長くなるところでした。
ではでは
ステキなUI制作ライフを！
