ゲームUIに 「カーソル」は当たり前の存在でした。以前は。
最近タッチデバイスで遊ぶゲームが増えたので、ゲームUIの仕事を志望する新人君に「カーソルってなんですか？」って訊かれる日がやってくる日はそう遠くないかもしれません。とはいえ、現状コンソール機はまだまだ現役だし、PCは基本マウスを無視するわけにはいかないし、市場は圧倒的にタッチデバイスが優勢だし、プラットフォーム毎に分かれているけれど、できる限りマルチプラットフォームでコスト回収を目論むことも多々あるので、結局UI制作関係者がこの難問を解決しなきゃあならんのはまだまだ続きそうですが、みなさまいかがお過ごしでしょうか。
そういえば、これ、
『マウスカーソル』 って最近言わなくなってきたみたいですね。今は『ポインター』という方が一般的だそうです。ジェネレーションギャップです。Gギャップとか略すとグラフィック系の用語みたいになるのがいいですね。よくないか。UE4にはまだ MouseCursor 関連のノードあるので大丈夫だと思う・・・
さてさて
以前から チラホラとTwitterでマウスとゲームパッドの処理がめんどい、というつぶやきを見るたびに、いっちょやってみるか！ とマウスを強く握りしめたりしてましたが、なかなか実際に試してみるとこまでいきませんでした。今では少し反省しています。で、ついにやってみました。先日Twitterに動画をあげたやつです。
ゲームパッド＆カーソルキー＆マウスのフォーカス遷移の実験しててようやく思ってた動きにできた。#UE4 #ue4UMG #GameUI pic.twitter.com/W3InZcMotQ
— みつまめ杏仁 (@MMAn_nin) 2020年2月22日
いざ試してみると、なかなかうまくいかなかったりしましたがなんとかなりました。難しかったのは、カーソルの制御で、理想とする ふるまい は、
- 選択肢の中でハイライトまたはフォーカスされているアイテムは一つだけ
- ゲームパッドでもマウスでもハイライトまたはフォーカスを切り替えることができる
の２つ。
すこし逸れますが、
『カーソル』が ある画面と、無い画面、最近のUIデザイン入門書などで語られる指南はタッチ入力やWebブラウザのUIを基本としているので、この『カーソル』の有無を絡めた話をしていないことがほとんど。ゲームUIの勉強をするにはまず『カーソル』を理解するところから始めるのをオススメします。
話を戻して UE4のUMGで設計イメージを図で説明してみます。
まず用意するアセットは２つ。
親のWidget には、後から 子Widget を格納する WrapBox を持たせます。
この WrapBox の中に並ぶアイテムとして、子Widget を追加します。
WrapBox に追加された 子Widget たちは、追加した順に番号で管理します。
親Widget はゲームパッドとカーソルキーの入力を受けてフォーカスを切り替えます。
子Widget が機能として持つのは、
- マウスカーソルが乗ったかどうかの判定
- マウスカーソルが乗った際に 親Widget への通知
- 見た目の変化
の３つ。
マウスカーソルが乗った時、新たにフォーカスが切り替わるので、親Widget に通知します。
通知を受け取った 親Widget は、キー入力の時と同じように、フォーカスの切り替え処理を行えばOK。 基本的に 子Widget の見た目の変化は、親Widget が動かします。
しくみはこんなイメージになりますが今回はここまでにします。
次回はこれを実際に組んでいきます。
Photoshopのブラシ触ってたら面白そうなのができたので、頑張って手書きにしてみましたけどどうかな。
ではでは
すてきなカーソルライフを！
