Top > デザイン > UE4 > 画像を表示する

最終更新日 2019/05/21

画像を表示する Edit

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

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

UE4004001.jpg

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

UE4004002.jpg

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

画像をスプライト化する Edit

UE4004004.jpg

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

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

UE4004005.jpg

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

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

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

配置と設定 Edit

UE4004006.jpg

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

UE4004007.jpg

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

UE4004008.jpg

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

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

UE4004003.jpg

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

UE4004015.jpg

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

表示のノード設定をする Edit

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

UE4004009.jpg

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

UE4004010.jpg

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

UE4004011.jpg

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

UE4004012.jpg

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

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

UE4004013.jpg

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

Ctrlクリック   ラインの再設定       
Altクリック   ラインの撤去         

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

実行確認 Edit

再生ボタンを押す。

UE4004014.jpg

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


添付ファイル: fileUE4004015.jpg 21件 [詳細] fileUE4004014.jpg 20件 [詳細] fileUE4004013.jpg 19件 [詳細] fileUE4004012.jpg 23件 [詳細] fileUE4004011.jpg 20件 [詳細] fileUE4004010.jpg 19件 [詳細] fileUE4004009.jpg 19件 [詳細] fileUE4004008.jpg 24件 [詳細] fileUE4004007.jpg 20件 [詳細] fileUE4004006.jpg 20件 [詳細] fileUE4004005.jpg 24件 [詳細] fileUE4004004.jpg 23件 [詳細] fileUE4004003.jpg 22件 [詳細] fileUE4004002.jpg 23件 [詳細] fileUE4004001.jpg 25件 [詳細]

リロード   新規 編集 凍結 差分 添付 複製 名前変更   ホーム 一覧 単語検索 最終更新 バックアップ リンク元   ヘルプ   最終更新のRSS
Last-modified: 2019-06-07 (金) 00:15:21 (129d)