昨日家に帰ってから寝落ちしつつ作ったので、なんか文体がおかしい気もしますが無事 喜んでいただけて良かったです。モノ自体はだいたい１時間ほどでできました。アイコンの素材探しと、記事を書くのに時間がかかりましたが、UE4でのUMGユーザーが増えることを願ってこのブログを始めたので楽しく書かせてもらいました。しかもネタもできてうれしいです。
さてさて、決定したときの処理が無かったので、軽いやつを作ってみました。まずはフォーカス表示用のWidgetから。
WD_ItemFocus
ちょっとトリッキーなつくりかもしれないですが、Buttonパーツを使います。
これをキャンバスの子供に追加します。ZOrderはアイテムの画像より手前で。
これを透明にします。
HiddenやCollapseなどの非表示設定にしてしまうと、キャンバスに存在しないことになって、タッチやクリックを検出しなくなるからです。
Buttonをこのように上からかぶせない方法もありますが、ちょっと手軽じゃないので今回は簡単なやつでいきます。
前回の記事に書いた方法で、onPressedイベントを使います。
そして、タッチまたはクリックしたことを通知するためにイベントディスパッチャーを使います。
エディタウィンドウの左にあるMyBlueprint タブの中にあります。
通知するだけなので適当に名前を付ければOKです。
今回タッチまたはクリックしたときのリアクションに短いアニメーションも作りました。
これを onPressedのイベントにつなぎます。
これで完成。
つぎはこの通知を受け取るWidgetを編集します。
WD_ItemList
ForloopノードのCompletedピンからの続きに、バインドノードをつなぎます。
フォーカス表示用のWidgetはすでにキャンバスに置いてあるので、Getの形でGraphに置いたら、「Bind」で検索するとイベントディスパッチャーを追加したときの名前が見つかります。そのバインドノードには Eventピンがあるので、ここにカスタムイベントをつなぎます。
これで、中央のアイテムをタップかクリックすると、アイテム名がデバッグ表示されるようになります。今回はサンプルなのでここまでにしていますが、買ったり使用したりといった処理がこのあと続くと思います。さらに上位のWidgetに通知することもできます。
UE4で UIを作る場合、複数のWidgetをパーツとして組んでいくので、このブループリント間で連絡しあう仕組みがとても活躍します。普段親から子に対しては、親が一方的に子に指示をして子はそれに応えることしかできません。ところがイベントディスパッチャーを使うと、「バインド」で親が子にケータイを持たせて、子から自身のタイミングで親へ連絡させることができます。
とりあえず軽いやつですが汎用的なつくりですので、後はアレンジとか応用になるかなと思ってみたり。
スワイプまたはドラッグでのスクロールについては、そういった操作に対応できるノードが用意されているので作れそうですが、今回の構造に追加するのはちょっと難しいです。最初から設計を変えて作り直した方がよさそうですね。
ではでは今回はこの辺で
ステキなEventDispatcherライフを！
