最終更新日 2019/05/21

画像を表示する

デザインのHello Worldといえば画像表示。
ついでにUIでは必須となるウィジェットの階層構造もちょこっと説明。

画像を表示するためのファイル階層を作る

下準備で作成したレベルファイルをダブルクリックで開く。
今回はこのレベルが実行されると画像が表示されるようにしたい。

Widgetフォルダある下準備で作成したウィジェットブループリントとは別に、画像を入れるためのウィジェットを作成して名前をつける。
Testを上のウィジェット、画像を配置したTest_Imageを下のウィジェットとする。

画像をスプライト化する

表示する為の画像を用意し、Textureフォルダを作成して入れる。
今回用意したのは512*512サイズのpngで、256*256の猫画像が４枚配置されている。
無理やりアトラス化されたこの画像の中で使用したいのは猫画像１枚だけなので、切り出してみる。

画像を右クリック＞Sprite Actions＞Create Spriteでスプライト化。
画像に青色の下線が入っているはず。
整理整頓ということでSpriteフォルダを作って移動をしておくと良い。

スプライトをダブルクリックすると別画面が立ち上がる。
Paper2Dという2Dゲームを作成するのに便利な機能でUMGにも一部機能以外は使用できるようなので使っていく。
テクスチャはアトラス化するとプログラマが喜ぶ。

使用する範囲を決める為�，痢�Edit Source Region」モードにする。
�△鬟�リックしてグリッドを出しておくと便利。
通常Textureは２のべき乗で持つ為��の「Pixels per unit」を0.128にしておくとわかりやすい。
�い妊好淵奪弋’修�ONにしておき�イ波楼呂魴茲瓩討い�。
右の「Source Dimention」に直接数値の入力をして範囲を決めても良いし、何ならそのほうが確実で早い。

256*256の猫画像１枚を範囲に指定したら保存を押し、配置作業に移る。

配置と設定

下のウィジェットである「Test_Imageウィジェット」をダブルクリックで開く。
パレットにimageと入れ「一般」の中にある「Image」パーツをD&Dで配置する。

配置した「Image」パーツを選択し、詳細ウィンドウで画像の設定をする。
Appearance＞Brush＞Imageに、上で作成した猫スプライトを設定。
サイズに画像サイズを打ち込むのが面倒なので赤枠のついた「Size To Content」にチェックを入れ画像サイズに自動調整してもらう。

こうなる。
コンパイルして保存、これで下のウィジェットの設定はOK。

上の設定に移るため、上のウィジェットである「Testウィジェット」をダブルクリックで開く。

パレットにimageと入れ「ユーザーが作成」の中にある、さきほど作成した下のウィジェットの「Test Imageウィジェット」をD&Dで配置する。

上画像のような階層構造になる。
コンパイルして保存。

表示のノード設定をする

レベルファイルのブループリントに上のウィジェットを表示させるノードを設定していく。

「ブループリント」から「レベルブループリントを開く」を選択する。

イベントグラフ上で右クリックをしてノード一覧出す。
まずは表示させるためのウィジェットを作るため、「CreateWidget」ノードを検索して選択する。
日本語版は中途半端に翻訳されているので「ウィジェットを作成」を選択。

イベントが始まり次第実行したいので「イベントBeginPlay」ノードの白い右矢印からD&Dで実行ラインを繋ぐ。
何を表示したいかを選択するため「Class」をクリックし、上のウィジェットである「Test」を選択する。

作ったウィジェットを表示させたい為「Add to Viewport」ノードを出す。
これは表示させる対象を設定したノードが無いと使用できないノードとなり、「状況に合わせた表示」にチェックが入っている場合は
CreateWidgetの実行ラインをD&Dして出たノード一覧から検索しなければ出てこないので注意。

これに限らずノード関係は参考サイトをもとに作っていると何故か見つからんぞ！となることが多々ある。
そもそもレベルブループリント上じゃないと出てこないノード等もある為、あきらめる前に色々試してみてほしい。
（バージョンアップでノード名が変更になっている罠もたまに発動する。）

最後に、表示するウィジェット情報を「Add to Viewport」ノードに渡すため「Return Value」から青ラインをターゲットへD&Dし設定は完了。

コンパイルして保存する。

実行確認

再生ボタンを押す。

ビューポートに画像が表示されていれば成功。
非常にかわいい。