UMG(Unreal Motion Graphics)でのレイアウト用ウィジェットの紹介

この記事はUnreal Engine 4 Advent Calendarの6日目の記事です．

昨日は@s_ssk13さんのリダイレクター ～消えないゴミファイルの謎～でした．

UMG(Unreal Motion Graphics)は，タイトルメニューやオプション画面などUIを実装するための機能です．基本的な使い方は，公式ドキュメントのUMG UI デザイナのクイックスタートガイドや3D ウィジェットの作成 (4.6からの実験的機能)を読みながら手を動かせば，何となくつかめると思います．

しかし，画面に配置できるコンポーネントについてはリファレンス(公式ドキュメント)があるものの，何ができるかが書いてあるだけで，どう設定すれば書いてあることが実現できるかについてはあまり情報がありません．この記事では，UMGのレイアウト用コンポーネントの挙動について解説します．なお，この挙動は実験的に推察したものであり，コードを詳細に確認したものではないので，何か間違いがあればご指摘ください．

Grid Panel

Grid Panelは，表示範囲を指定した数の行と列に分割し，それぞれのマスに子ウィジェットを配置することができます．

行と列の数は，図のようにGrid Panelの詳細のFill Rulesで設定します．Column Fillの+を押すと列が増え，Row Fillの+を押すと行が増えていきます．Column FillやRow Fillの左の三角を押すと，それぞれの行や列の幅の重みを指定できます．上の図では，列それぞれの重みを1にしてあるので，配置したボタンウィジェットは，ちょうど左半分を埋めるようになっています．同様に，1列目を2，2列目を1にした場合，下の図のように1列目に配置したボタンウィジェットは3分の2を占めるようになります．

つまり，それぞれの列や行のサイズは，(列の重みの合計)分の(ある列の重み)の幅を持つようになっています．

Grid Panelに配置した子ウィジェットには，自動的にGrid Slotが追加されます．Grid Slotでは，次のような設定ができます．

Row

何行目に配置するかを示す．0行目，1行目と0から始まるので注意すること．

Column

何列目に配置するかを示す．0列目，1列目と0から始まるので注意すること．

Row Span，Column Span

何行，または何列を利用するかを示す．たとえば，上の図のようにRow Spanを2にすると，2行分を使った表示になる．

また，配置する行や列の変更は，子ウィジェットを選んだときに現れる上下左右の矢印をクリックすることでも変更可能です．

Uniform Grid Panel

Uniform Grid Panelは，Grid Panelと同様に表示範囲をいくつかの行と列に分割し，それぞれの子ウィジェットを配置することができます．Grid Panelではそれぞれの列や行のサイズを自由に変更できましたが，Uniform Grid Panelでは配置した子ウィジェットの設定で列や行の幅が変わります．

図のようにUniform Grid Panelの子ウィジェットには，自動的にUniform Grid Slotが追加されます．RowやColumnの意味はGrid Panelの子ウィジェットの時と同じですが，Uniform Grid Panelの場合，子ウィジェットのRowやColumnの最大値を使って表示範囲を分割するようになっています．たとえば，上の図の場合，それぞれのボタンのColumnが0，1，2となっているため，均等な幅の列が3つできています．あくまでも最大値なので，たとえばColumnが0の子ウィジェットと9の子ウィジェットがあったとすると，列は10分割されることになります．

公式のリファレンスにも書いてありますが，アイテム選択画面などで利用できそうです．

Horizontal Box，Vertical Box

Horizontal Boxは，子ウィジェットを横方向に配置していくことができます．Vertical Boxは，子ウィジェットを縦方向に配置していくことができます．

Horizontal Boxに配置した子ウィジェットには，自動的にHorizontal Box Slotが追加されます．Vertical Boxの場合は，Vertical Box Slotが追加されます．ここで重要になるのが，Sizeの設定です．

自動 (Auto)

表示に最低限必要なサイズになります．

塗りつぶし (Fill)

自動が設定されている子ウィジェット全てで使われるサイズを引いた残りの部分をから，設定されている重みに合わせてサイズを割り振ります．

塗りつぶしが少し分かりにくいので，もう少し詳しく説明します．自動を選んでいると，上の図のようにテキストボックスを子として持っているとその分だけ幅が広がり，無い場合はボタンの必要最低限の幅を取るようになります．Horizontal Boxの幅が10として，自動になっている子ウィジェットの幅の合計が4とすると，残りは6になります．塗りつぶしになっている子ウィジェットは，この6を割り当てられた重みに従って分割しているようです．この重みは，塗りつぶしを選ぶとその右側に入力ボックスがでるはずなのですが，どうもこの記事を書いている時点では日本語版では表示されないようになっているようです．そのため，デフォルト値の1が入っており，均等に分割されるようになっています．

上の図のように，英語版にすると重みの入力用のボックスがFillの右側に表示されます．

Canvas Box

Canvas Boxでは，子ウィジェットに対してアンカーを設定し，そのアンカーからの相対位置で子ウィジェットの位置を決めることができます．
アンカーについては，公式ドキュメントに詳しい説明が追加されていたので，そちらを参照してください．

まとめ

今回は，UMGのレイアウトシステムから，Grid Panel，Uniform Grid Panel，Horizontal Box，Vertical Box，Canvas Boxを紹介しました．他にもいくつかレイアウト用のウィジェットはあるのですが，そちらについてはまだあまり試せていないので，そのうち何か書けたらな，と思います．

UMGは，最初からマルチプラットフォームを考慮して作られているだけあって，様々な解像度でUIが作れるようになっており，解像度の違いを吸収するための機能も用意されています．そのため，ゲームを作るためだけでなく，他のツールなどを作る場合にも使えるのではないか，と考えています．皆さんも是非使ってみてください．

明日は，@hima_zinnさんのUE4でトゥーンレンダリング(仮)です．

UMGのプロパティバインディングとスライダーを使ってみた

UMGのブループリントに変数を追加し，UMGのコンポーネントと連動させることができるようなので，それを利用してテキストボックスとスライダーを連動させてみた．

Widgetブループリントの生成

ここでは，SampleWidgetBPというWidgetブループリントを作成し，Editable Text BoxとSliderを配置し，それぞれValueTextとValueSliderという名前にしてみた．

変数の追加

次に，グラフからプロパティとして利用するFloatの変数Valueを追加しておく．

ValueTextのテキストの取得と設定に関する設定

まず，テキストボックスに変数Valueの値を取得して変換して設定するようにする．

更に，テキストボックスが編集された場合にValueに値を設定し，Sliderの値も変更するようにする．(Sliderには設定しなくてもできる気もする)

ValueSliderの値の取得と設定

ValueTextと同様に，詳細のValueを変数Valueを参照するようにしたり，値が変化した際にValueに設定するようにしている．

Widgetの表示

最後に，レベルブループリントなどからWidgetを生成して，Add to Viewportで画面に出せば，Sliderの変化に合わせてテキストボックスの値が変わり，テキストボックスの変更に合わせてスライダーが移動するUIが完成する．

最後に

SliderにプロパティとしてValueを設定しているところをバインディングに変更すれば，Sliderに値を設定する部分は不要かもしれないが・・・眠いのでまた明日にしよう．

Unreal Motion Graphics (UMG)でプログレスバーを表示してみた

UMGでプログレスバーを作ってみました．

UMGを有効にするには，メニューの編集からエディタの設定を選びます．

実験的，の項目からUMGにチェックを入れ，エディタを再起動します．

コンテンツブラウザから新規のアセットを追加します．右クリックメニューからユーザーインターフェースの中のWidgetブループリントを選びます．

できたブループリントのファイルをダブルクリックして開くと，UMGのエディタになるので，適当にプログレスバーを配置し，名前をProgressに変更しておきます．終わったらコンパイルしておきます．

レベルブループリントを開き，追加したブループリントの名前のオブジェクトの変数を作ります．(この図では手抜きでデフォルトの名前のまま)．そして，Begin Playイベント時にCreateWidgetを利用して作成したWidgetを生成します．CreateWidgetに作成したブループリントを指定すると，Widgetが生成できます．CreateWidgetが返すのはUserWidget型のオブジェクトなので，キャストを挟んで変数に設定します．

このWidgetから線をひっぱり，Add to Viewportを呼び出すと，画面に表示されます．

Progressと名付けたfloat型の変数を追加しておき，Begin Playイベント時に0で初期化しておきます．

Tickイベントで毎フレーム0.001ずつProgressの値を増やします．ただし，100を超えないようにします．

最後に，Widget変数から線をひっぱりGet Progressと打つと，プログレスバーのオブジェクトが取得できます．そこから更に線をひっぱると，Set Percentというものがあるので，そこに変数Progressの値を設定します．

これをコンパイルして再生すると，プログレスバーが徐々に進んでいきます．

他のUIもいろいろ触ってみたくなってきました．

[Unreal Engine 4] TextRenderComponentで徐々に文字を表示するBlueprint

まず，UE4のTextRenderComponentで日本語を表示するまで，の手順でTextRenderComponentで日本語表示ができる状態になっているとします．

コンテンツブラウザで，Blueprintを追加します．

クラスはアクタを選択します．

追加したBlueprintには，BP_ScriptRenderという名前をつけました．

追加したBlueprintをダブルクリックし，コンポーネントの追加からTextRenderを選びます．

TextRenderの名前をTargetにし，フォントの設定で作成した日本語用のフォントとマテリアルを使うように変更します．日本語が出ることを確認するため，Textを日本語のメッセージに変えておきましょう．

保存してから，通常の画面に戻り，Blueprintをドラッグアンドドロップし，配置しましょう．
裏面からは見えなかったりするので，画面に映る状態に調整しましょう．

調整が終わったら，Blueprintに戻り，イベントグラフの編集に移ります．
まずは，float型の変数を追加し，Counterという名前にします．

Begin Playイベントを追加し，ゲーム起動時に色々初期化するようにします．
まず，マイブループリントからTargetを選び，ドラッグアンドドロップでイベントグラフに配置します．

ピンから線を引っ張って話すと，コンポーネントの追加ができるので，Set Textを入力して検索し，追加しましょう．

デフォルトでは空文字列を設定するようになっているので，Begin PlayイベントをSet TextにつないでやればOKです．同時に，Counterにも0をセットするように追加しておきましょう．次の図のようになります．

次に，Tickイベントを使って，Counterを更新するようにします．TickイベントからDelta secondsを取得し，Counterの値に追加し，それをCounterにセットする，という流れです．

次に，表示する文字列を入れておくための変数を追加します．変数の種類はTextにします．

Get Substringというコンポーネントを使うと，文字列の一部を取り出すことができるので，これを使ってテキストの開始からCounter番目の文字までを取り出します．Source StringにScriptをつなぎます．(Textからstringに変換するコンポーネントが自動的に追加されます)．更に，Length(取り出す文字列の長さ)にCounterをつなぎます．(floatからintegerに変換するコンポーネントが自動的に追加されます)．Start indexは，文字列をどこから取り出すか(0が最初の文字)，なので0にしておきます．できたものが次の図のようになります．

最後に，Counterの更新からTickイベントを受け取って，TargetのSet Textコンポーネントに取り出した文字列を設定するようにします．

これで，再生すると1秒に1文字ずつ表示されます．

UE4のTextRenderComponentで日本語を表示するまで

どうにかTextRenderComponentで日本語が表示できたので，メモ．

まず，日本語を含むフォントテクスチャを作る．これについては，こちらを参照．
次に，フォント表示用のマテリアルを作成する．コンテンツブラウザの新規からマテリアルを選択する．

マテリアルには，とりあえずMSGothicMaterialと名前をつけた．このマテリアルをダブルクリックし，マテリアルエディタを開く．

最初からある最終結果を表すノードを選び，左下のプロパティからBlend modeの設定をMaskedに変更する．

次に，右クリックメニューからFont Samplerを追加する．

Font Samplerの一番下の丸(アルファ成分?)をオパシティマスクにつなぎ，マテリアルを保存する．

最後に，適当なところにTextRenderComponentのアクタを配置したら，右側のプロパティから表示したい文章をTextに設定し，マテリアルとフォントに作成したフォントとマテリアルを設定すれば，日本語が表示される．

ただ，日本語のように漢字も含めると文字数が多い場合､テクスチャが複数枚になるのだけれど､まだそこの扱い方が分かっていない．
さっさと日本語出せるようにして，アドベンチャーゲームのように1文字ずつ表示されるような機能作ってみたい．

Unreal Engine 4で日本語フォントを作る方法

まず，コンテンツブラウザで「新規」，「マテリアル & テクスチャ」、「Font」の順に選び，
フォントを追加します．

日本語で使えるフォントを選びます．ここでは，とりあえずMSゴシックを選んでみました．

コンテンツブラウザにできた新しいフォントをダブルクリックし，フォントエディタ(正式名称が見つけられませんでした．)を開きます．

右側にあるプロパティから，「Import Options」の中の「Unicode Range」に「3040-309F,30A0-30FF,4E00-9FFF」を入力します．
それぞれ，平仮名､片仮名，漢字に対応しています．そして，アセットメニューから「再インポート」を選びます．

これで，日本語を含むフォントができます．

ただ，日本語フォントを作っても，TextRenderComponentには日本語表示が崩れるというバグがあるようです．
(AnswerHubへ)

プレビューではちゃんと日本語が表示できるので，TextRenderComponent以外に何かしらフォントを表示する方法では表示できるかも?

その後の経緯が見つけられないのと，4.2でも表示がおかしくなることから，まだ直っていないのかも．