スコアとかの数字がもったいぶって確定するアレです。
ドラムロールなんかがSEだったりするとドキドキしたりするアレです。
くるくる回ったりしないので、作るのは簡単です。
いままでの作りとそれほど変わらないので、新しいテクニックはほぼ出てこないと思いますが、ネタ的に作っておこうかなという・・・
で、テクスチャを用意します。
UVの範囲が分かるように色分けしたレイヤーを置いてます。
512ｘ256のテクスチャで、１文字 96ｘ80 です。
キャンバスパネルの Imageパーツにセットするのですが、テクスチャの一部を切り出すのでマテリアルが必要になります。
TextureCoordinate ノードを CoｍponentMaskを使って UとVを別居させます。
分けたU値とV値それぞれに、スケール（Tiling）を掛け、オフセット（Offset）を
足し算するようにScalarParameterValueノードを４個つなぎます。
スケール（Tiling）は初期値を 1.0、オフセット（Offset）は0.0 にしておきます。AppendVectorノードで再び UとVは一つのベクターによりを戻して同居させたら、テクスチャにつないで完了です。これは親のマテリアルとして利用します。
数字はすべて同じ大きさでなので、マテリアルインタンスを使います。
コンテンツブラウザに親マテリアルができているのを確認したら、右クリックしてインスタンスを作ります。> Create Material Instance
インスタンスができたら、編集してパラメータをセットします。
数字ひとつの大きさが 96ｘ80なので、テクスチャサイズで割ると、UV空間でのサイズが判ります。UV空間はテクスチャサイズに関係なく 0.0～1.0 の範囲です。
判明したサイズは、マテリアルのTextureCoordinateノードの Tiling に渡します。
UとV個別にパラメータを掛け算するようにしているので、下のような状態にします。
オフセットは、Widgetブループリントの方でいじるので、0.0とかで問題ないです。
インスタンスは編集完了なので保存して閉じます。
次におまけのテキスト「Points」もインスタンスで用意します。
上から 160px の位置にあるので、160÷256 ＝ 0.625 をOffsetVに渡します。
サイズはそれぞれ計算して Tiling の値としてセットします。
編集完了です。保存して閉じます。
マテリアルの準備が終わったので、次は
数字を担当する子Widgetを用意します。
編集モードをDesigner にして、キャンバスにImageパーツをレイアウトします。
サイズは、98ｘ80にします。IsVariableのチェックが付いていなければ付けます。
Detailsタブの Appearance ＞ Brush にマテリアルインスタンスをセットします。（コンテンツブラウザでフォーカスしておいてから白い←矢印をクリック）
編集モードを Graphに切り替えます。
変数を３つ用意します。
Number ・・・ 整数型： 最終的に表示する数字を保持する
TexOffsetArray ・・・ Vector2D型（配列）： 数字のUVオフセット値
ActiveFlag ・・・ Boolean型： シャッフルするかしないか
さっそくEventConstructノードにつないで初期値をセットします。
Vector2D型の配列は、０～９の各数字のUV値です。マテリアルのパラメータに渡します。
次に、親から数字を受け取るための関数を用意します。
次に数字を切り替えるための関数を用意します。
整数型の引数を一つ受け取れるようにします。それをつかって、数字のUV値を取り出し（GETノード）マテリアルパラメータに渡します。
キャンバスに置いたImageパーツ（上図の Image_40ノード）に割り当ててあるマテリアルから、GetDynamicMaterial ノードをつなぐことによって、SetScalarParameterValueノードがつながるようになります。便利！ 通常のブループリントだと、CreateDynamicMaterialInstanceノードを使います。
次にこの関数を使って、シャッフルを止める関数を作ります。
シャッフルを制御するブーリアン型の変数をFalseにします。
仕上げに、シャッフルのしくみをEventTickにつなぎます。
RandomIntegerノードは、0から 指定した値までの乱数を発生させます。
EventTickノードは常時処理が走って（FlashのENTER_FRAMEみたいな）て、必要がなくなると処理が流れないようにしないと、無駄に動き続けてしまいます。
そこで、フラグとしての変数を使います。
これで、子Widgetの編集は完了です。コンパイルして保存しますが、親Widgetの編集をスムーズ進めるために、いったん閉じておくことをおすすめします。
親Widgetを作ります。
編集モードをDesignerにしたら、
左のPaletteタブから UserCreated というカテゴリの中をチェック。
作った子Widget がいるはずなので、見つけてキャンバスにドロップします。
「Points」もここでImageパーツを新しく追加して配置します。
配置できたら、編集モードをGraphに切り替えて、変数を２つ用意します。
Numbers ・・・ 整数型： Levelから受け取る。
NumArray ・・・ 各桁の数字パーツをコントロールするための配列
配置したばかりのImageパーツを配列に積みます。 この配列（Num Array）の Variable Type は 子Widgetの型 にします。
次に数字をバラバラにして、子Widgetたちに渡す関数を用意します。
上の図で登場する変数ノード Temp Digit は、この関数内のみ有効なローカル変数です。初期値に 一の位を意味する１ を入れておきます。
Foreachループで回るたびに10を掛けて、数字の桁をばらすために利用します。
最後の方で 1 x 10 してるので 次回は、10、その次は 100 という感じです。
Branchノードは、子Widgetが配列に積まれていない状況が発生した場合に備えています。
最後に、シャッフルを止める関数です。
右端のノードは、子Widgetの中の関数です。
親Widgetはこれで編集終了です。コンパイルして保存します。
ようやくレベルブループリントまできました。
Viewportに配置して表示したい数字をセット。下の図では0～99999のランダム値を生成させるノードをつないでいます。
Inputノードでシャッフルを止める関数を呼ぶようにすれば出来上がりです。
完成
