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

みつまめ杏仁

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

Enumを使ったチェックボックスUI

前回Enumを使った簡単なメモを書きました。

今回はWidgetで応用してみようと思います。

コンソールゲーム想定なので、マウスは非対応です。

f:id:hiyokosabrey:20160414010559p:plain

UMGのコンポーネントは使いません。Ver 4.11でゲームパッドにも対応したようなことが公表されていた気がしますが、まだ攻略できてないので後日・・・

 

まずはテクスチャ。

左がRGBで、右がアルファチャンネル。32bitのTargaです。

f:id:hiyokosabrey:20160414230036p:plain f:id:hiyokosabrey:20160414230043p:plain

↑の画像は2倍に拡大してます。

これをコンテンツブラウザにドロップして、テクスチャアセットとしてインポートします。設定詳細は以下。圧縮での劣化を防ぐために圧縮設定は  UserInterface2D を選択。

(下図のEditor Iconのとこ)

f:id:hiyokosabrey:20160414230733p:plain

これをマテリアルに組み込みます。

f:id:hiyokosabrey:20160415002832p:plain

テクスチャのUV関係をパラメータでいじるので、以前の記事で書いたマテリアルファンクションを利用してます → UVSetParamノード。

limesode.hatenablog.com

 64x64のパターンを横に2個くっつけた状態なので、表示したいのは半分です。

TilingのU方向は 0.5を固定でつないでいます。

 

ではWidgetを用意します。

コンテンツブラウザで右クリック User Interface > Widget Blueprint を取り出したら編集開始。

f:id:hiyokosabrey:20160414232457p:plain

キャンバスに3つのパーツを配置します。

f:id:hiyokosabrey:20160414233107p:plain

TextBlockは、Detailsタブの一番上部に名前を付けるフォームがあって、すぐ右に is Variable というチェックボックスがあるので、ここにチェックを付けておきます。

左の白い■は、64x64のサイズです。これにさっき作っておいたマテリアルをセットします。DetailsタブのAppearance > Brush > Image のところです。

f:id:hiyokosabrey:20160414233411p:plain

f:id:hiyokosabrey:20160414233500p:plain

 

次に

見た目に2つの状態をアニメーションで用意します。

f:id:hiyokosabrey:20160414233735p:plain

DEFAULT はそのまま通常の状態で、FOCUS も言葉どおりハイライトされている状態を表します。適当にカラー等の変化させて記録してやります。

f:id:hiyokosabrey:20160414234201p:plain

(私は、変数名と区別するために、アニメーション名はすべて大文字で命名するようにしています)

 

このへんで、編集モードを Graph に変えます。

チェックボックスの状態を保持しておく変数を1つと、状態を切り替える関数を4つ用意します。

 変数はBoolean型にします。初期値は false です。

f:id:hiyokosabrey:20160414234927p:plain

関数は、ラベルテキストを変更するものと、見た目に DEFAULT と FOCUS を切り替えるものと、チェックを付けはずしするものの4つです。

まずはラベルテキストを変更する関数。

f:id:hiyokosabrey:20160414235410p:plain

引数はString型で1つ。戻り値は無し。

次に見た目を切り替える関数2つ。

f:id:hiyokosabrey:20160414235908p:plain

アニメーションの再生中に別のアニメーションを再生すると、場合によってはおかしなブレンド結果になって意図どおりの結果にならないことがあるので、保険の意味をこめてStop Animationノードを置いています。

f:id:hiyokosabrey:20160414235915p:plain

で、最後がフラグをスイッチする関数。

とその前に、準備を忘れるとこでした。

マテリアルインスタンスダイナミックを作っておきます。

EventConstructにつなぐと、スポーン(Add to Viewportとか)した時、真っ先に再生してくれます。

 そのタイミングで作成します。ついでに DEFAULTのアニメーションを再生しておきます。

f:id:hiyokosabrey:20160415001043p:plain

 作ったマテリアルインスタンスダイナミックはPromote to Variable(変数に昇格)します。(右端)

で、フラグをスイッチする関数を作ります。

f:id:hiyokosabrey:20160415001437p:plain

 この関数は、呼ばれるたびにフラグを反転し、最終的にマテリアルのパラメータを変更します。1本道にしたくてコンパクトな構成にしています。普通に分りやすく並べると多分下のようになるかと思います。

f:id:hiyokosabrey:20160415002017p:plain

以上でWidgetは完成です。

 

 

画面に表示してキー操作を反映するとこを作っていきます。

キー入力を使ってテストするので、シンプルにレベルブループリント内でやります。

まずは、EventBeginPlayから始めます。

f:id:hiyokosabrey:20160415011246p:plain

 前回書いたように、作ったEnumアセットは、ForechLoopで利用できます。

CreateWidgetノードで、用意したWidgetを表示する準備をします。ForeachLoopによって複数Widgetが生み出されるのでそれを配列にストックするようにします。

まず、右端のReturnValueの青いPINから、ドラッグしてPromote to Variable(変数に昇格)を選択します。

f:id:hiyokosabrey:20160415012105p:plain

できたばかりのこのセットノードをグラフから削除します。

配列型に変更する際に、警告がいっぱい出て面倒だからです。

(Variablesのリストからは消さないでください)

これを配列型に変更します。

f:id:hiyokosabrey:20160415012451p:plain

名前もいい感じに変更したら、改めてこの配列をグラフにGetで置いて、Addノードとつなぎます。

f:id:hiyokosabrey:20160415012920p:plain

あとはいつも通り、Add to Viewport につないで、ForeachLoopノードのEnumValueにPINから、表示座標計算用にInteger型にキャストして、ラベルテキスト用にString型にキャストしてつないでいきます。

f:id:hiyokosabrey:20160415225132p:plain

Enumに書いてある内容を元に、

f:id:hiyokosabrey:20160412231421p:plain

 ループ処理をしていきつつ、CreateWidget して並べながらラベル名をセット。

という流れです。

次にフォーカスを切り替えるためのIndex管理用の変数を用意します。

f:id:hiyokosabrey:20160415225745p:plain

EnumのForeachLoopがWidgetを並べ終えたら、仕上げにフォーカスを当ててやります。これが、ユーザーにとってカーソルとなります。

並べ終わってからなので、CompleteのPINからひっぱって下図のようにつなぎますが、SetFocus関数はWidgetの中に作った関数なので、①~④の番号順でノードを置いていくとスムーズにいくと思います。⑤でフォーカス位置管理用の変数をつなぎます。

f:id:hiyokosabrey:20160416032724p:plain

 

ここで、フォーカス位置を変更するための関数を用意します。

引数は一つでInt型。

f:id:hiyokosabrey:20160416034918p:plain

この引数で次に移行するカーソル位置(未来)を受け取ります、最初フォーカス位置管理用の変数はまだ前の値(過去)のままなので、すぐにDEFAULT状態にします。

 引数をセットして更新したら後はそれをFOCUS状態にすれば完了。

 

関数ができたので、キー入力イベントを3つ用意します。

まずはフラグをスイッチするためのやつで、とりあえずスペースキーにします。

f:id:hiyokosabrey:20160416040302p:plain

この状態で再生してみるとスイッチの動作を確認できます。

f:id:hiyokosabrey:20160416040633p:plain

最後の仕上げです。

カーソルキーの上と下を使うことにします。

f:id:hiyokosabrey:20160416040702p:plain

どちらも最終的にフォーカス切り替え関数に次のフォーカス位置を計算して渡しています。

カーソルの移動が3つ以上になったらループした方がUIとしては使い勝手がいい感じになります。

プラス方向のループについては %(剰余)ノードを使ったらラクちんです。マイナス方向の場合は%は使えないので、今回はセレクトノードを使いました。

この%とSelectノードに、4とか5とかの数値を入れていますが、マジックナンバーというやつで、あとでバグのきっかけになったり、時間が経つと何の値?ってなるので、本当はEnumからForeachLoopで取り出してWidgetを並べる際に数をカウントしておいて利用するのがベストです。ToInt(byte)でキャストしてる箇所で用意しておいた変数に入れていくとよいと思います。

 

操作と見た目についてはひとまず完成にします。

f:id:hiyokosabrey:20160414010559p:plain

Enumアセットで管理することで、リスト項目の数や内容が変わった際のメンテナンスコストが大幅に小さくできます。

ブループリントの中に配列で持ってしまうことも可能ですが、他のスタッフが見た時に解析に時間がかかってしまうかもしれないです。

 

ということで次回もう少しだけ手を入れようと思います。