サムネイルが登場して、カーソルを動かしてフォーカスを切り替えるとこまでできました。つぎはカーソルの指しているキャラの大きな絵が シャッ！とかシュッ！とか言いながら入ってくるのを作ります。いや言いませんね。オノマトペです。
ではさっそく、新しくWidgetを追加します。
UMGでアニメーション
まずはキャンバスにImageを配置します。
サイズをテクスチャに合わせて調整したら、ポジションをキャンバスの左上にピッタリとつけます。
配置できたら登場のアニメーションを用意します。
今回画面の外からフレームインするように動かします。
UMGでは２つの移動手段があります。一つはSlotの Position。
もう一つはRender Transformの Translation。
移動のアニメーションはPositionで動かすのではなく、Translation をオススメします。なぜなら相対座標でアニメーションできるからです。どの場所に置かれようとも、置かれた位置からの相対位置、どれだけ離れているかをアニメーションキーとするので、あとからPositionを動かして調整するのことができてるのが便利です。一方Positionは絶対座標なので、キーを打ってしまうと位置調整はできません。必ずアニメーションキーを打って覚えさせたポジションに移動してしまうからです。位置を調整しようと思ったら、アニメーションキーをいくつも調整して更新しなければいけないので面倒です。
左からフレームインさせるので、Translationを使ってX座標をマイナスの値からスタートして 0で止めるようにアニメーションキーを打ちます。
移動距離が大きいと短い時間で動かした場合、滑らかな動きは期待できませんが、透明度のアニメーションを加えることで、移動距離を短くできます。この辺のバランスはいろいろ試してみると面白いです。
キャラクターの絵が画面に入ってきたら、キャラクターの名前も出してやります。
キャラクターの名前は１枚のテクスチャにまとめています。
これをサムネイルと同様に、マテリアルで切り出します。
名前は一つあたりのサイズが 1024ｘ128ピクセルなので、
TexCoordinateノードのタイリング設定は、切り出すサイズをテクスチャサイズで割った値です。
1024 ÷ 1024 で 1.0 、128 ÷ 1024 で 0.125
切り出したら、Vの値に足し算すると下に移動するので、Add ノードとAppendVectorノードを使います。 Index と書かれたノードは ScalaeParameterValueノードです。これはブループリントからマテリアルに値を渡すための仕組みです。
横には移動しないので、Constantノードに０を入れてつないでいます。
Apply してエラーが出ないのを確認したら保存して閉じます。
マテリアルができたので、さっきのWidgetに戻ります。
キャンバスに 1024ｘ128の Image を置いたら、作ったマテリアルをセットします。
この名前パーツもアニメーションを付けます。一緒に現れるのでキャラの絵と同じアニメーションに追加します。
これで役者の準備が整いました。
Widgeブループリント
このデカキャラ用のWidgetは、親のWidgetから指定されたキャラクターのIndex番号をもとに絵を切り替えて画面に登場するという役割になります。ユーザーが自由にカーソルを動かしてフォーカスを切り替えるたびに、キャラクターを切り替えます。そのための基礎になる関数を用意します。
引数（Inputパラメータ）はInt型でキャラクターのIndex番号を受け取ります。受け取った値に 0.125 を掛けてキャラ名用のImageパーツにセットしたマテリアルに渡します。
キャラ名はV方向（タテ）に 0.125ずつ並んでいます。
関数の最後でデカキャラのImageパーツの位置をリセットしています。
２つ目の引数はTexture2D型です。これもデカキャラ用のImageパーツに渡します。
直接テクスチャをセットするノードが用意されています。Set Brush from Textureノードです。
この関数はこのWidgetの中から利用する想定です。次は外（親）から呼ばれるイベントを用意します。EventGraphに戻ってカスタムイベントを用意します。このイベントにも引数（パラメータ）を２つ同じように設定します。
このイベントが呼ばれるということは、ユーザーがキー操作してカーソルのフォーカスを切り替えたタイミングです。ユーザーが素早くキー操作しても大丈夫なように、アニメーションの途中かどうかを調べて（Is Animation Plying）、まだ登場の途中であれば即座にアニメーションを止めます。で先に用意しておいた関数をここでつないで、引数を渡してやります。
Delayノードは関数の中の処理が終わり切らないうちに次の処理へ流れないようにするための時間稼ぎです。0を入れると１フレーム（60fpsだったら約16.67ms）だけ進みます（ちょっと自信ない）。ちなみにDelayノードは関数の中では使えません。
最後に登場アニメーションを再生すれば完成。
呼び出してみる
背景やサムネイルを配置しているメインのWidgetブループリントを開いて、デカキャラのWidgetを配置します。
Is Variable にチェックが付いているか確認して、付いていなかったら付けます。
配置したら、Initialize 関数を編集します。
デカキャラのテクスチャを配列にセットします。Texture2D型の配列変数を作って、Setでドロップしたら、MakeArrayノードをつないで、デカキャラのテクスチャを順番通りにセットしてゆきます。
テクスチャの準備ができたら、新たに関数を用意します。
上のWD_Character はキャンバスに配置したデカキャラ用Widgetです。IsVariableにチェックをつけるとグラフにノードとして置くことができます。そこからドラッグして用意しておいたカスタムイベントノードを取り出してつなぎます。
あとは、引数から配列の中身を取り出して渡してやります。
EventGraphでこの関数をつなげば出来上がり。つなぐ場所は２か所。
さっそく再生して確認してみます。
動画を載せたかったのですが、使ってるノートPCでキャプチャがうまくできないのとこのブログではGIFアニメまでなので諦めました。
これでキャラセレのだいたいの要素は揃いました。
次回はオマケのグラフ表示を作って終わりにしたいなと思います。
ではでは
ステキなデカキャラライフを！
