テキストブロックのサイズを取得する方法がわかったので、
応用編として、テキストブロックのサイズに合わせてフキダシの大きさを調整するしくみを考えてみた。
↑かの ウォルト・ディズニーの言葉です。
（この微妙な中華系のフォントが気になる・・・）
9 Scale Grid が UMGだと簡単に実装できるのでそれも使います。
試しながら厄介だったのはサイズを変更する際の基準位置。いろいろとアンカーの場所を変えたり計算方法を変えて試してみたけど、結局左上基準でサイズ変更されるので今のところお手上げ状態です。
とはいえ、
まずはテクスチャを３枚。
フキダシの本体。128ｘ128で９ScaleGridで分割して使います。グレーの市松のところはアルファ値が０で抜きの部分です。
次にフキダシなんでシッポの部分。64ｘ64です。
もう一枚オマケ。
32ｘ128で、マスクとして使います。ちょっと変な使い方をします。
今回はカラーバリエーションを考慮してモノクロです。
コンテンツブラウザにインポートしたら、マテリアル作成です。
上の カラー（V3）がフキダシの基本カラーで、下のカラー（V3）はフチドリ用です。
カラーの指定は普通のベクター３のノードですが、ベクターパラメータにしておくと、マテリアルインスタンスでカラバリが作れるので便利です。
何をやってるか気になる方は、いったん同じようにつないでみてから、▼をクリックするとそのタイミングでの状態がサムネイルで確認できます。ちゃんと反映されてないときはいったんアプライすればOKです。
次にフキダシのシッポ。これは２つのパーツに分けて重ねるのでマテリアルも２つ用意します。
一つ目。フチドリカラーのシッポ。
次に２つ目。基本カラーのシッポ。
よく似ていますが、 TextureSampleノードから、Opacity につながるところが違います。もちろん同じテクスチャを使っています。
このあたり、マテリアルパラメータコレクションを使えばカラーを共有できるはずなんですが、なぜかマテリアルドメインを User Interface にすると値が取得できませんでした。ナゾです・・・
マテリアルが揃ったので、Widgetを作成します。
まずはキャンバスにImageパーツを置いたら、さっき作ったマテリアルをセット。
Detailタブの設定を変更します。
Image Size のところにテクスチャの大きさを入力します。（必須）
Draw Asを Box に切り替えます。
Marginは、絵に合わせて調整します。これは小数点で指定するのですが、一応最大値は 0.5（50％）です。それ以上だと重複する部分が出てきます。個別に指定することもできます。
次にシッポ。
テクスチャと同じ大きさのImageパーツを２つ配置して、用意しておいた２つのマテリアルをセットします。
この３つのパーツの Z Order（表示優先） を ↓ のように設定します。
シッポで本体を挟み込む感じです。
最初シッポをくっつけるようにしてたのですが、表示位置や画面のスケールによっては微妙なスキマができたので、このようにサンドイッチするかたちに変えました。
次に、テキストブロックを配置します。
文字サイズやカラーを設定したらIs Variableにチェックを付けておきます。
基本のパーツは揃いましたが、もうひとつオマケを作っておきます。
まずはこのテクスチャを使って下のようなマテリアルを作ります。
プレビューで動きが確認できるので、スピードを調整する場合は、Timeノードから出てきた値に、Multiplyで 0.7 とか 1.5 とかを掛け算します。
このマテリアルを、UMGのイメージパーツにセットします。
そのままだと ▲ なので、Transform のScale値で上下ひっくり返します。▼
こういった単純なループアニメーションは、マテリアルにやらせておくとUMGのアニメーションを管理しなくて済むのでラクチンです。
特にカーソルの点滅アニメーションとかにオススメです。
ということで
ちょっと長くなってきたので今回はこの辺で。
次回いろいろ計算しながら、フキダシを変化させて、さらにテキストの切り替えをやります。
