前回の続き
ちなみにサムネイルのスペルは thumbnail ですよ皆さん。
選択用サムネイルを作る
まずはサムネイルの準備をします。テクスチャにはキャラクターの顔が複数並べてあるので、このままでは使えません。そこで部分的に切り出すためのマテリアルを用意します。
まずはマテリアルを作る
コンテンツブラウザにあるテクスチャアセット（赤い下線）のアイコンの上で右クリックすると、
コンテキストメニューが現れて、中に Create Material という項目があるので選択します。
できたマテリアルアセットのアイコンに適当な名前をつけて編集開始です。
すると最初からテクスチャノードがつながった状態になっています。
この仕様が地味に便利だったりします。
後からテクスチャアセットをドロップしても構いません。
さっそくUMGで使うための変更をします。
右端の大きな茶色のノードをフォーカスした状態で、ウィンドウ左のDetailsタブから設定をUMG専用に変更します。
UMGでマテリアルを扱う場合は必ず User Interface に切り替える必要があります。
Blendモードは、アルファチャンネル（透過）を使う場合は Tanslucent を選びます。アルファチャンネルが要らない場合は、Opaque（オペイク、不透明）を選びます。
設定するとグラフが変化します。つながっていた線が切れているのでつなぎ直します。
つぎに、テクスチャを部分的に取り出すための TextureCoordinateノード を取り出します。グラフの何もないところで右クリックして 下図のように検索するか、
キーボードの ［U］ キーを押しながら左クリックでも取り出せます。
取り出せたら下図のようにつなぎます。
赤いTextureCoordnateノードをフォーカスした状態で、左のDetailsタブから値を入力します。
UTiling と VTiling の値をそれぞれ 0.25、0.5 と入力して書き換えます。
する下図のようにTextureSampleノードのサムネイルが変化します。
どうなっているかというと、TextureCoordinateノードはテクスチャのタイリングを制御するノードです。このノードが最初に持っている値は 1.0 。これはテクスチャをすべてそのまま使うという意味です。それをより小さい値にしたことで結果的に一部だけを切り出すカタチになりました。テクスチャというのはUとVという座標系で管理されています。図で見てみると以下のようになります。
というわけで
TextureCoordinateノードは、テクスチャの一部分をトリミングするのに使います。
（設定する値が ”Tiling”なので、タイリングするときにも使えます。）
さてさて、 左上のUVを切り出せたら、つぎにUVを移動できるようにします。
TextureCoordinateノードから出てきた値に足し算をしたいので、Addノードを間に入れます。（キーボードの Aキーを押しながらクリック）
空いている B の入力ピンにつなぐのは UとVの２つの値なのでAppendVectorノードをつなぎます。
エラーがでますがほっておいて、ScalarParmeterValueノードを２つ取り出してつなぎます。（キーボードの Sキーを押しながらクリック）
このスカラーパラメータバリューというノードに、0.25とか、0.5とかの値を入れるとUVが移動しているのが確認できます。
これで進めてもいいのですが、せっかくなんで楽をしたいと思います。
参考までに以前書いた記事を貼っておきます。
できたのがコレ。
小数点の数値だけが書かれたノードは、Constant（定数）ノードです。キーボードの１を押しながらクリックすると取り出せます。固定の値を扱うときに利用します。
左端の Index と書かれたノードが、後から値を渡すための ScalarParameterValueノードです。これに値（0～7の整数）を入れてみてキャラがいい感じに切り替わったらマテリアルは完成です。左上の Applyボタン → Saveボタンと押して閉じます。
新しくWidgetブループリントを作る
サムネイル用に新しくWidgetブループリントを作ります。作り方は背景と同じです。
キャンバスに置くImageパーツは サムネイルのサイズ 256ｘ256にします。
このImageパーツにさっき作ったマテリアルをセットします。
背景のテクスチャと同じ要領で、コンテンツブラウザで先にマテリアルを選んでおくと、矢印ボタンでクリックするだけでセットできてラクチンです。
アニメーションをつくる
サムネイルが登場と退場するとき、あとはフォーカスされている状態の３つのアニメーションを用意します。
UMGのエディタウィンドウ右下に、緑色の +Animation ボタンがあるのでクリックします。
クリックすると、すぐ下に New Aimation というのが現れるので、わかりやすい名前に変更します。この名前をフォーカスすると右側にタイムラインがアクティブになります。その状態でキャンバスに置いたImageパーツに動きを付けていきます。
今回は0.2秒で、回転しながら拡大するようにしてみました。
同じ要領で退場のアニメーションも作っておきます。
登場と退場ができたら、最後にフォーカスアニメーションです。登場と退場は無くても困らないですが、フォーカスしているかいないかは、UIにとってはとても重要な表現になります。マウスやタッチするタイプのUIではホバーアニメーションに相当します。
フォーカスのアニメーションは、サムネイルと同じ形で動かしたいので、サムネイルを切り出すために作ったマテリアルをDuplicate（複製）します。
マテリアルの複製を作ったらさっそく編集します。ほとんどいらないのでバッサリとノードを削除します。できたのがコレ。
TextureCoordinateの値はそのままです。上にあるのは Vector３ ノードです。
RGBのカラーを扱うときに便利なノードです。キーボードの ３を押しながらクリックすると取り出せます。これをUMGに戻ってセットします。
再びキャンバスに、Imageパーツを配置します。ZOrderの値はサムネイルよりも大きい数値にします。
ここに作ったフォーカス用のマテリアルをセットします。
この白い●をアニメーションさせます。カーソルが乗っている間ずっと点滅するので、アニメーションはループするように作ります。
アニメーションが３つできたらいよいよブループリントの編集です。
随分長くなったので、いったんここまでにします。
次回サムネイル編２でお会いしましょう！
ではでは
ステキなサムネイルライフを！
