UMGでテキストを表示します。キレイにアウトラインフォントが表示されます。
うん。
・・・・。
そう、ちょっと刺激が足りないなと、気づいたのです。
このままで終わっていいのか？テキストブロック！
お前の人生、ただ指示された通りの文字を並べるだけでいいのかよ！
と、中学校の文化祭に行って観劇してたら急にそんな気分になったのでした。
で、
テキストの文字を１文字ずつアニメーションさせてみようと思って遊んでみました。
テキトーにWidgetブループリントを用意します。
さっそくキャンバスに、Horizontal Box をひとつ。is Variable のチェックを忘れずに。
あと、Size to Content にもチェックを付けます。
で、
ブループリント。
まず変数を３つ新しく用意します。
上から、
Boolean型の変数は、準備できるまで、 Event Tickに我慢させるためのフラグ。
TextBlock型の配列変数は、文字をバラバラに管理するため。
Float型の変数は、サインカーブのための角度を保持するため。
変数が用意できたら、続けて関数を一つ。
関数にも、ローカル変数を３つ。これは関数内だけで利用される変数。
上から、
String型の変数は、パラメータとして受け取った文字列を保持しておくため。
Slate Font Info型の変数は、フォントの設定を保持させておくため。
Integer型の変数は、受け取った文字列の長さを保持しておくため。
ちょっと画像が大きくなったので、左右で２枚になりました。
文字列の長さを、 Lengthノードで調べると、単純に文字の数を調べてくれます。
例えば、"0123456789" のように数字が並んでいる場合、文字の数は10個です。
ForLoop ノードでは、繰り返しの回数を指定する場合に、Index番号という数値で管理します。なので、例えば回数を10にしたい場合、開始 Indexが 0 、終了 Index が 9 となります。
開始 Indexが 5 、 終了 Index が 14 の場合でも、ループ回数に変わりはないのです。
じゃあ、１から始めりゃいいじゃん、ってなるかと思うのですが、最近「ゼロから始める○○」が人気のヒケツ(?)っぽいので、まぁそんな感じです。（実際は座標なんかを計算したり配列を扱うときにゼロから始まっていた方が都合がいい場合が多いのです）
なので、ForLoopの繰り返し処理では、文字列の長さを、Last Indexとして使うためには 予め ー１しています。
変数の値を参照しにいくたびに 毎回 -１ の計算が入ってしまうのを避けるために、下のようにしています。
ForLoopの中を見てみると、First Index は回数をカウントするためにローカル変数で管理されていますが、 Last Index の方は、毎回 つながったピンの値を参照します。
下のようにつないでしまうと、Last Indexピンが値を受け取ろうとするときに、－１の計算が入ってしまいます。
この程度たかが知れてますが、普段から意識してないと「チリツモ」になりやすいので、エンジニアと良好な関係を築くために、UI紳士としては意識しないわけにはいかないと思うのです。
はい、流れを戻して続きを。
左端のノードは、Construct Object from Class という名のノードです。
↓取り出した直後の状態。
Classをセットすると、NONEの部分の表記が変わります。今回はテキストブロックなので、Text をチョイスします。
ローカル変数 TempFontの中身は、Details （詳細）タブで設定します。今回はこんな感じ。
この関数では、テキストブロックをブループリントで生成しています。
そしていつもなら、クリックとキーボードで設定していた内容も、変数と専用のノードを組み合わせて設定しています。一文字づつ処理して、Horizontal Box に並べていくのです。
ひととおり並べ終わったら、ループ処理のあとに、ブーリアン型の変数に True をセットします。
これで関数は完成。
つぎにアニメーションの部分。Event Tick を利用します。
関数が呼ばれると、文字列がバラバラになって並べられて、最後に ブーリアン型の変数に True が入ってようやく、このEvent Tick が最後まで稼働します。
Event Tickは、 このWidgetブループリントが Viewport に置かれたらすぐに動き出します。関数が呼ばれる前に動き出すとエラーが出るので、必要な処理が終わるまでは、Branchノードでブロックしています。
％ノードは、 値がずぅーっと加算され続けるのを防ぐためと、円の１周分の角度は360度だからです。
角度から、三角関数を使って 値を計算します。その担当をマクロにしました。
Period は カーブの周期（的なもの）、Radius は 半径 です。
中身はこうなってます。
三角関数の角度Θ（シータ）にあたる部分は、「ラジアン」（Radians）が基本かと思いますが、ブループリントでは、0°から360°の「角度」（Degrees）で扱うノードも用意されています。
マクロでは角度 Degrees の方を使用しています。
これで準備はできました。
あとは関数を呼び出して文字列を渡すだけです。
とりあえず確認のために、Event Construct につなぎます。
これで Widgetは完成です。
あとはレベルブループリントにて、Viewportに追加するだけです。
再生してみましょう。
Screen to GIF というアプリを使ってみました。
ちょっとひっかかるときがあるけど、い感じに撮れてます。
サインカーブを、Y座標にするこんな風に上下にユラユラします。
マクロのパラメータをいろいろいじると揺れ具合が調整できます。
Period を大きな値にすると、カーブが細かくなってジグザグします。
Radiusの値を大きくすると上下の揺れ幅が大きくなります。
この値を、Shear や Angle にセットしても面白い動きになります。
Angleの場合。
できたのが
Shearの場合。
動きは
ちょっと酔いそう。
サインカーブは、プラスとマイナスの値を行ったり来たりするので、どちらか一方だけにするとバウンドするような動きになります。
すると、
他にもカラーを変えてみたりもできます。
ロード画面くらいしか使える場所は無さそうですが、ちょっとは刺激的になった気がします。なかなか楽しいですねUE。
ではでは 今回はこの辺で。
