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

みつまめ杏仁

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

マクロライブラリを作る

f:id:hiyokosabrey:20170508012221p:plain

 

久しぶりです、大丈夫まだ生きてます。

UIの画面を作っていると、「あとはカーソルを動かせれば完成なのに・・・」「パッドのトリガーでページ切り替えしたい・・・」「ウィンドウを閉じたり開いたりしたい・・・」「Xボタンを押しながらだとスクロールができて・・・」などなど、実際に動かして確認したくなります。

UIはユーザーが操作するからUIであるということで、キー操作を受け付ける動作が必須です。そのあたりの処理は、ブループリントマクロライブラリを作ることで面倒なキー入力周りの処理が一気にラクになります。プロジェクトに一つ置いておけば、どのブループリントからでも簡単に利用できます。

f:id:hiyokosabrey:20170508000939p:plain

同じようなキー入力処理をやるためのしくみを、ちょうど一年前に書いていました。

limesode.hatenablog.com

この時は親クラスを先に作って、そこから子クラスを作る流れでした。

それなりに手数が必要になります。

今回はクラスとか気にせず気軽にキー入力周りを扱うためのマクロを作ります。

これは使いたいときにどのブループリントでも呼び出して使うことができます。

 

作ってみる

まずコンテンツブラウザで右クリックして、

Blueprints > Blueprint Macro Library を選択します。

 

f:id:hiyokosabrey:20170507224049p:plain

 ダイアログが出てくるので、

f:id:hiyokosabrey:20170507225754p:plain

Object をフォーカスしてからOKボタンを押します。

 アイコンが出てきたら名前を付けてやります。この名前はただのアセット名なので後でなんのために作ったかわかるようになっていればなんでもOK。マクロライブラリ自体がいろんなブループリントから参照されるので、UI_Common とかでいいかなと思います。

名前を付けたらアイコンをダブルクリックして編集開始です。

 エディタが開くと下のような形になっているので、まずは右上のフォームからマクロの名前を入力します。

f:id:hiyokosabrey:20170507225731p:plain

この名前がノードとして扱われることになります。右上の + ボタンでいくつでもマクロを追加できます。

今回、UI_InputCheckSimple という名前で進めます。

 

引数(パラメータ)をセット

レベルブループリント以外でInputノードが使えないので、キー入力を受け取るためには、Was Input Key Just Pressed ノードを使います。

これは get Player Controller ノードから値をもらわないと働いてくれないので、まずは Player Controller型 のマクロの引数(Inputパラメータ)を追加します。

f:id:hiyokosabrey:20170507231129p:plain

 最後じゃなくてもいいので、名前は必ず変更するようにします。

f:id:hiyokosabrey:20170507231727p:plain

 

 

どんどんつなぐ

 そこからドラッグして Was Input Key Just Pressed ノードを取り出します。

f:id:hiyokosabrey:20170507231925p:plain

このノードのKeyの横にあるプルダウンから押したかどうかを検出する対象を選びます。で、ブール値(true か false)の出てくる赤いピンがあるので、そこからブランチノードをつなぎます。(ブランチノードはキーボードの[ B ]を押しながらクリックすると取り出すのがラクチンです)

f:id:hiyokosabrey:20170507232134p:plain

実行ピンがまだつながっていないので、ブランチノードからドラッグして、Inputsノードの上でドロップします。ドロップ場所に気をつけて、いい感じにドロップするとうまくつながります。

f:id:hiyokosabrey:20170507232853p:plain

後からのものは下に足されていくので、順番が気になる場合は変更します。Inputsノードを選択している状態で、Detailsタブの中にある項目から変更できます。

f:id:hiyokosabrey:20170507233208p:plain

 

これを1セットとして、

ブランチノードの false から次の Was Input Key Just Pressed ノードへ、数珠繋ぎになるようにつないでいきます。

f:id:hiyokosabrey:20170507233516p:plain

 一通りつないだら、true のピンを Outputsノードにつないでいきます。

さっきやったドラッグ&ドロップが便利です。

f:id:hiyokosabrey:20170507234130p:plain

なるべくわかりやすいピン名にしておきます。

f:id:hiyokosabrey:20170507234605p:plain

でき上がりです。

上・下・左・右・決定 を検出できるようになります。

これをコンパイルしてエラーが無ければ保存して閉じます。

 

使い方

使いたいブループリントの Tick ノードにつないで使います。

同じプロジェクト内であればどこでも呼び出すことができます。

↓サンプル

f:id:hiyokosabrey:20170507235543p:plain

マクロを作成する際にインスタンスカラーというのが設定できます。キー入力イベント関連なのでノードに赤色を付けてみました。

f:id:hiyokosabrey:20170507235954p:plain

 

 

次回以降

このマクロを使って、キャラセレ画面を作ってみる記事を書こうと思います。

ではでは~