最終更新日 2019/05/21
画像を表示する 
デザインのHello Worldといえば画像表示。
ついでにUIでは必須となるウィジェットの階層構造もちょこっと説明。
画像を表示するためのファイル階層を作る 
下準備で作成したレベルファイルをダブルクリックで開く。
今回はこのレベルが実行されると画像が表示されるようにしたい。
Widgetフォルダある下準備で作成したウィジェットブループリントとは別に、画像を入れるためのウィジェットを作成して名前をつける。
Testを上のウィジェット、画像を配置したTest_Imageを下のウィジェットとする。
画像をスプライト化する 
表示する為の画像を用意し、Textureフォルダを作成して入れる。
今回用意したのは512*512サイズのpngで、256*256の猫画像が4枚配置されている。
無理やりアトラス化されたこの画像の中で使用したいのは猫画像1枚だけなので、切り出してみる。
画像を右クリック>Sprite Actions>Create Spriteでスプライト化。
画像に青色の下線が入っているはず。
整理整頓ということでSpriteフォルダを作って移動をしておくと良い。
スプライトをダブルクリックすると別画面が立ち上がる。
Paper2Dという2Dゲームを作成するのに便利な機能でUMGにも一部機能以外は使用できるようなので使っていく。
テクスチャはアトラス化するとプログラマが喜ぶ。
使用する範囲を決める為,痢Edit Source Region」モードにする。
△鬟リックしてグリッドを出しておくと便利。
通常Textureは2のべき乗で持つ為の「Pixels per unit」を0.128にしておくとわかりやすい。
い妊好淵奪弋’修ONにしておきイ波楼呂魴茲瓩討い。
右の「Source Dimention」に直接数値の入力をして範囲を決めても良いし、何ならそのほうが確実で早い。
256*256の猫画像1枚を範囲に指定したら保存を押し、配置作業に移る。
配置と設定 
下のウィジェットである「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し設定は完了。
Ctrlクリック | ラインの再設定 |
Altクリック | ラインの撤去 |
コンパイルして保存する。
実行確認 
再生ボタンを押す。
ビューポートに画像が表示されていれば成功。
非常にかわいい。