画面の下から出てきて上に消えていくだけの、どシンプルなスタッフロールを作ってみました。
今回用意するアセットは以下の6種類8個。
右のWidgetブループリント３つはほとんど同じ内容。
スタッフロールは、ただ名前が並んでるだけではなく、組織やグループ、セクション、パートなどの名称、協力会社さんのロゴ、俳優さんや声優さんなどは役名と対で表示したりと、結構表記のバリエーションを用意する必要があります。
今回は『グループ名』、『パート名』、『人名』の３種を作ります。
人名に関しては、１列～３列まで対応します。
まずは見た目の材料ということで、グループ名のWidgetから。
キャンバスの適当な場所にテキストブロックを一つだけ置きます。
文字サイズは 少し大き目にして他と差をつけるために色を付けます。
位置を調整する前に アンカー の設定を変更します。
決定するとキャンバスの表示が変わります。
次にSlotの中にある Anchors のパラメータを変更します。
SizeY以外を 0.0 にすると下のようになります。Position Y を動かすと移動できます。
最後に Is Variable にチェックを付けて、UMG編集完了です。
次に
Widgetブループリントを編集します。
スクロールに必要なFloat型の変数を ３つ用意します。
キャンバスに置いたTextBlockをグラフにドラッグ＆ドロップしたら、Event Constructノードにつないでいきます。
UMGで配置したものをブループリントから触る場合、Slot as Canvas Slot ノードを利用します。上のグラフは、画面下から出現して画面上に消えるまでの移動量を求めて変数に入れています。とりあえずフルHDモニタ想定で以下のイメージになります。
今回選んだアンカーの設定にある PositionY は、0.0でスタートして最終位置は マイナスの値になります。そこで -1080 から サイズ（高さ）を引くことで、最終位置を求めることができます。720pだったら、 -720 から引いてやります。解像度に対して柔軟に対応する場合は、Get Viewport Size ノードがあるので、その値を利用するとさらに汎用性が上がります。
最終位置を求めるのにわざわざGet Sizeノードを使わなくても、動かしてみれば簡単に最終位置は判明します。これは、あとからサイズを調整する際、変数の値を変更しなくてもいいというのとマジックナンバーを使わなくていいというメリットがあるためです。気軽に感覚的にサイズを調整することができます。こういうちょっとした処理を仕込んでおくだけで調整の手数を減らすこともできるのでオススメです。
次に
移動が終了したことを伝えるためにイベントディスパッチャーを用意します。
追加ボタンをクリックして名前を付けるだけでOK。
とりあえず onMoveEndと名付けました。
移動させる部分を作っていきます。
Event Tick ノードにつないでいきます。
In Delta Time ピンからは フレーム毎に下図のような数値が流れてきます。
フレームというのは映画でいえばフィルムの１コマにあたります。
これは 60fpsの場合ですが １秒を 60で割った値とほぼ同じで、直前のフレームからの経過時間を表しているそうです。若干のバラツキはありますが、ここに60 を掛けてやれば、１フレームあたり 約１という値になります。なので 変数Speedに60が入っていた場合、１フレームにつき１ピクセル進むことになります。120が入ると２ピクセルになるのでスピードが上がります。
１フレームに進む移動量をY座標に足して、限界を超えたかどうかチェックします。
越えていなければY座標をテキストブロックに反映して次のフレームへ。
越えたらイベントディスパッチャーを呼び出します。
イベントディスパッチャーは ドラッグ＆ドロップしてCallを選択したものです。
一旦ここで編集を終了して、ブループリントインターフェイスを作ります。
適当に名前をつけて開いたら、右上に New Function_0 という関数があらかじめ置いてあるので名前を変更します。とりあえず StartMove と命名しました。
続けて、下のDetailsタブから、Inputs（引数）を２つ追加します。
これでブループリントインターフェイスは完成です。コンパイル→保存して閉じます。
さきほどのWidgetの編集を再開します。
編集モードをグラフにすると、エディタ上部にClassSettings というボタンがあるのでクリックしてDetailsタブの内容を切り替えます。
DetailsタブにInterfaceを登録する場所があるので、Addボタンをクリックしてさっき用意したブループリントインターフェイスをセットします。
追加できたら、グラフの何もな無いとこで右クリックして
ブループリントインターフェイス内に作った関数を探します。
関数名の頭にEvent がついている方を選ぶと以下のようなノードが出てきます。
右上にインターフェイスのアイコンがついています。
ここに最後の仕上げ。
これでWidgetブループリントは完成です。
コンテンツブラウザからこのWidgetを２つ複製します。
複製した１つ目を開いてテキストブロックの見た目を変更します。
パート名用です。
文字サイズを少し小さくして、カラーを変えています。
これで２つ目完成。
最期の３つ目は人名用。複製した残りのWidgetブループリントを改造します。
文字サイズとカラーを変更するのですが、ここで複数列の対応を追加します。
まずは編集モードをDesignに切り替えてキャンバスパネルを追加します。
その中に６つのTextBlockを入れて子供にします。
アンカーの設定はそれぞれ以下のように変更します。
レイアウトは下のような並びで配置しますが、
実際には１行に重なった状態にします。
テキストブロックの中は何も文字を入れないように空にします。
あとはカラーと文字サイズ、字詰め方向（Justify）を設定したら、Is Variable にチェックを付けて編集モードをグラフに切り替えます。
String型と、TextBlock型の配列変数を用意します。
TextBlock型は、Object Typesの中にあります。
６つのテキストブロックを配列に積みます。
移動するのは、キャンバスパネルになるので Slot as Canvas Slot ノードには、追加したCanvasPanelをつなぎます。
インターフェイスで仕込んだ StartMove関数（ここではEvent）の部分を以下のように改造します。
Parse Into Array ノードは指定した文字列（デリミタ）が見つかると分割して配列にしてくれます。
人名のWidgetはこれで改造完了です。
これですべてのWidgetブループリントが完成しました。
今回はこの辺にしておきます。
次回はデータの準備と表示する部分を書きます。
ではでは
