読者です 読者をやめる 読者になる 読者になる

みつまめ杏仁

アンリアルエンジン(UE4)でGUIを作るためにゴニョゴニョしてます。UIデザイナーの皆様の助けになれば幸いです。

スタッフロールをつくる 《Widget準備編》

画面の下から出てきて上に消えていくだけの、どシンプルなスタッフロールを作ってみました。

f:id:hiyokosabrey:20161021233614p:plain

今回用意するアセットは以下の6種類8個。

f:id:hiyokosabrey:20161021233902p:plain

右のWidgetブループリント3つはほとんど同じ内容。

 

スタッフロールは、ただ名前が並んでるだけではなく、組織やグループ、セクション、パートなどの名称、協力会社さんのロゴ、俳優さんや声優さんなどは役名と対で表示したりと、結構表記のバリエーションを用意する必要があります。

今回は『グループ名』、『パート名』、『人名』の3種を作ります。

人名に関しては、1列~3列まで対応します。

 

まずは見た目の材料ということで、グループ名のWidgetから。

キャンバスの適当な場所にテキストブロックを一つだけ置きます。

f:id:hiyokosabrey:20161022000037p:plain

文字サイズは 少し大き目にして他と差をつけるために色を付けます。

f:id:hiyokosabrey:20161022000503p:plain

位置を調整する前に アンカー の設定を変更します。

f:id:hiyokosabrey:20161022000917p:plain

決定するとキャンバスの表示が変わります。

f:id:hiyokosabrey:20161022001352p:plain

次にSlotの中にある Anchors のパラメータを変更します。

f:id:hiyokosabrey:20161022001749p:plain

SizeY以外0.0 にすると下のようになります。Position Y を動かすと移動できます。

f:id:hiyokosabrey:20161022002112p:plain

最後に Is Variable にチェックを付けて、UMG編集完了です。

f:id:hiyokosabrey:20161022002605p:plain

 

次に

Widgetブループリントを編集します。

スクロールに必要なFloat型の変数3つ用意します。

f:id:hiyokosabrey:20161022003300p:plain

キャンバスに置いたTextBlockをグラフにドラッグ&ドロップしたら、Event Constructノードにつないでいきます。

f:id:hiyokosabrey:20161022004308p:plain

UMGで配置したものをブループリントから触る場合、Slot as Canvas Slot ノードを利用します。上のグラフは、画面下から出現して画面上に消えるまでの移動量を求めて変数に入れています。とりあえずフルHDモニタ想定で以下のイメージになります。

f:id:hiyokosabrey:20161022010533p:plain

今回選んだアンカーの設定にある PositionY は、0.0でスタートして最終位置は マイナスの値になります。そこで -1080 から サイズ(高さ)を引くことで、最終位置を求めることができます。720pだったら、 -720 から引いてやります。解像度に対して柔軟に対応する場合は、Get Viewport Size ノードがあるので、その値を利用するとさらに汎用性が上がります。

最終位置を求めるのにわざわざGet Sizeノードを使わなくても、動かしてみれば簡単に最終位置は判明します。これは、あとからサイズを調整する際、変数の値を変更しなくてもいいというのとマジックナンバーを使わなくていいというメリットがあるためです。気軽に感覚的にサイズを調整することができます。こういうちょっとした処理を仕込んでおくだけで調整の手数を減らすこともできるのでオススメです。

 

次に

移動が終了したことを伝えるためにイベントディスパッチャーを用意します。

f:id:hiyokosabrey:20161022090456p:plain

追加ボタンをクリックして名前を付けるだけでOK。

とりあえず onMoveEndと名付けました。

 

移動させる部分を作っていきます。

f:id:hiyokosabrey:20161022092617p:plain

Event Tick ノードにつないでいきます。

In Delta Time ピンからは フレーム毎に下図のような数値が流れてきます。

f:id:hiyokosabrey:20161022094432p:plain

フレームというのは映画でいえばフィルムの1コマにあたります。

これは 60fpsの場合ですが 1秒を 60で割った値とほぼ同じで、直前のフレームからの経過時間を表しているそうです。若干のバラツキはありますが、ここに60 を掛けてやれば、1フレームあたり 約1という値になります。なので 変数Speedに60が入っていた場合、1フレームにつき1ピクセル進むことになります。120が入ると2ピクセルになるのでスピードが上がります。

1フレームに進む移動量をY座標に足して、限界を超えたかどうかチェックします。

越えていなければY座標をテキストブロックに反映して次のフレームへ。

越えたらイベントディスパッチャーを呼び出します。

イベントディスパッチャーは ドラッグ&ドロップしてCallを選択したものです。

 

一旦ここで編集を終了して、ブループリントインターフェイスを作ります。

f:id:hiyokosabrey:20161022103631p:plain

適当に名前をつけて開いたら、右上に New Function_0 という関数があらかじめ置いてあるので名前を変更します。とりあえず StartMove と命名しました。

f:id:hiyokosabrey:20161022104211p:plain

続けて、下のDetailsタブから、Inputs(引数)を2つ追加します。

f:id:hiyokosabrey:20161022104203p:plain

これでブループリントインターフェイスは完成です。コンパイル→保存して閉じます。

 

さきほどのWidgetの編集を再開します。

編集モードをグラフにすると、エディタ上部にClassSettings というボタンがあるのでクリックしてDetailsタブの内容を切り替えます。

f:id:hiyokosabrey:20161022104816p:plain

DetailsタブにInterfaceを登録する場所があるので、Addボタンをクリックしてさっき用意したブループリントインターフェイスをセットします。

f:id:hiyokosabrey:20161022105340p:plain

追加できたら、グラフの何もな無いとこで右クリックして

 ブループリントインターフェイス内に作った関数を探します。

f:id:hiyokosabrey:20161022110526p:plain

 

関数名の頭にEvent がついている方を選ぶと以下のようなノードが出てきます。

f:id:hiyokosabrey:20161022110712p:plain

 右上にインターフェイスのアイコンがついています。

ここに最後の仕上げ。

f:id:hiyokosabrey:20161022111904p:plain

これでWidgetブループリントは完成です。

 

コンテンツブラウザからこのWidgetを2つ複製します。

複製した1つ目を開いてテキストブロックの見た目を変更します。

パート名用です。

f:id:hiyokosabrey:20161022112559p:plain

文字サイズを少し小さくして、カラーを変えています。

これで2つ目完成。

 

最期の3つ目は人名用。複製した残りのWidgetブループリントを改造します。

文字サイズとカラーを変更するのですが、ここで複数列の対応を追加します。

 

まずは編集モードをDesignに切り替えてキャンバスパネルを追加します。

その中に6つのTextBlockを入れて子供にします。

f:id:hiyokosabrey:20161022200151p:plain

アンカーの設定はそれぞれ以下のように変更します。

f:id:hiyokosabrey:20161022201434p:plain

レイアウトは下のような並びで配置しますが、

f:id:hiyokosabrey:20161022195833p:plain

実際には1行に重なった状態にします。

f:id:hiyokosabrey:20161022201649p:plain

テキストブロックの中は何も文字を入れないように空にします。

f:id:hiyokosabrey:20161022202229p:plain

あとはカラーと文字サイズ、字詰め方向(Justify)を設定したら、Is Variable にチェックを付けて編集モードをグラフに切り替えます。

 

String型と、TextBlock型の配列変数を用意します。

f:id:hiyokosabrey:20161022202800p:plain

TextBlock型は、Object Typesの中にあります。

f:id:hiyokosabrey:20161022202825p:plain

f:id:hiyokosabrey:20161022203044p:plain

6つのテキストブロックを配列に積みます。

移動するのは、キャンバスパネルになるので Slot as Canvas Slot ノードには、追加したCanvasPanelをつなぎます。

f:id:hiyokosabrey:20161022203413p:plain

インターフェイスで仕込んだ StartMove関数(ここではEvent)の部分を以下のように改造します。

f:id:hiyokosabrey:20161022204820p:plain

Parse Into Array ノードは指定した文字列(デリミタ)が見つかると分割して配列にしてくれます。

人名のWidgetはこれで改造完了です。

これですべてのWidgetブループリントが完成しました。

 

今回はこの辺にしておきます。

次回はデータの準備と表示する部分を書きます。

ではでは