読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

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

Widgetでメニューを作ってみる

マウスやタッチみたいに直接ボタンを選択できないゲームパッドは、今ココ(現在地)を表すカーソルが必要になります。

カーソルの場所が選択候補地を示していて「ここ選ぶけどいい?」という状態です。

タッチデバイスが隆盛な昨今、そのうちコントローラ操作でのUIが「なにこの点滅してるやつ」みたいなことになるかもしれませんね。

遠い目をしながら「カーソルって呼んでた時代もあったな・・・」としみじみ。

さて、

カーソルですが「今ココ」というのが伝わればいいので、周りと比べて違いがあれば、「お?」となります。その違いに気付くことで注目させるシグニファイアともいえます。わかりやすい例でミッキーマウスの手袋みたいなアイコンがついたのを見たことがありますが、そこまでしなくても点滅したりカラーが変化しているだけでそれなりに伝わります。

かんたんなやつをUE4で作ってみました。

f:id:hiyokosabrey:20151226191834p:plain

 上から並べているのは子Widgetで、それぞれに2つの状態(見た目)を用意してあります。

ひとつは、カーソルの指している状態(SELECT)。もうひとつはカーソルの指していない普通の状態(DEFAULT)。

Widgetを編集してUMGでアニメーションを作ります。

f:id:hiyokosabrey:20151226205117p:plain

f:id:hiyokosabrey:20151226205124p:plain

 これを関数で再生するようにします。

f:id:hiyokosabrey:20151226205851p:plain

f:id:hiyokosabrey:20151226205922p:plain

アニメーションの終了を待たずに別のアニメーションを再生すると、変化の途中でブレンドされてしまうことがあるので、バッティングするとヤバいアニメーションを止めてから再生するようにします。

この2つの関数は親のWidgetから呼び出して使います。

これで子Widgetはひとまず完成です。

 

Widgetで子WIdgetを並べつつ 状態をDEFAULTにする関数を呼び出します(右下)

f:id:hiyokosabrey:20151226211845p:plain

 並べ終わったら、SELECT状態にする関数を呼び出します。上の図はマクロで下図の右端につなげてあります。

f:id:hiyokosabrey:20151226212545p:plain

このようになります。

f:id:hiyokosabrey:20151226191834p:plain

今日はここまで、次は切り替えの処理を書いていきます。