LoginSignup
0

More than 1 year has passed since last update.

[UE] アイテムをキャプチャしてUIに表示しよう

Last updated at Posted at 2022-06-04

アイテムを3Dで表示したい

key.png
バイオハザードヴィレッジのように、アイテムを3Dで表示したい!

今回の成果

画像のようにアイテムの表示、回転、切り替え機能ができました。
ezgif-1-8737e57e24.gif
今回の内容はBPのみで完成できますので初心者も簡単に作れます。C++を使う必要がありません。UE5 Previewで作りましたが、UE4も同じ手順でできます。
完成したプロジェクトはGithubに置きましたのでよかったら参考してください。

キャプチャから表示するまで

アイテムを表示するまで、手順は以下:

  1. SceneCapture2Dを使って、アイテムの画像をRenderTargetにキャプチャする
  2. RenderTargetの画像をTextureに書き込む
  3. UIに表示する

Blankプロジェクトからやります。
まずはBlueprintActorを追加して、BP_UICaptureActorと名付けます。
1.png
BP_UICaptureActorの中にStaticMeshとSceneCaptureComponent2Dを追加します。
2.png
カメラがアイテムを撮影するように位置を調整します。StaticMeshにモデル(アイテム)をアサインします。
3.png
SceneCapture2DのTextureTargetプロパティに、RenderTargetを追加します。RT_UICaptureと名付けます。
4.png
新規Textureアセットを追加します。T_UICaptureと名付けます。
5.png
T_UICaptureを開いて、以下の設定をします
Material Domain: User Interface
Blend Mode: Translucent
これでUI用のAlpha入りのテクスチャになります。
6.png
SceneCaptureComponent2Dからキャプチャした画像のAlphaが反転してますので、元に戻す処理が必要です。
T_UICaptureのMaterial Graphに右クリック、TextureSampleを追加します。
7.png
1-xノードも追加し、画像のように繋ぎ、TextureSampleのTextureをRT_UICaptureを指定します。
これでアルファ回転の仕組みができました。
8.png
これでキャプチャしたものを表示する作業は大体完了です。成果を見てみましょう。
まず簡単なUMGを作って、Imageを追加して、画像をT_UICaptureに設定します。
9.png
レベルBlueprintで作ったUIを表示します。
10.png
通常、表示するアイテムを動的に生成するのは正しいが、今回はプレビューなので、まずBP_UICaptureActorをそのままマップにドロップします。
11.png
プレイを押したら、アイテムが表示されました!やった!
12.png
って背景も入ってるじゃないですか!心配しないで。背景を透明にすることはできます。

背景を透明にする

BP_UICaptureを開きます。SceneCaptureComponent2DのPrimitiveRenderModeをUseShowOnlyListに設定します。これで特定のアクターのみキャプチャするようになります。
13.png
Event Graphにて、BeginPlayでShouOnlyActorComponentsをSelfと設定します。
14.png
EventGraphにSelfに設定します。これで自分以外のものは写らなくなります。
15.png
再びプレイを押します。
16.png
背景がなくなった!わーい!これでキャプチャ完成です。

アイテムメニューっぽくします

DataTableで表示するモデルを登録して、選択してるボタンに応じて切り替える機能も作りました。最終成果はこちらになります。
マップにあるアイテムが見えますが、ちゃんと作れば見えない場所にスポーンしましょう。
ezgif-1-8737e57e24.gif
手順を書くのはややこしいなので、気になる方はGithubにプロジェクトを確認しましょう。

補足Q&A

実際の遭遇した問題をQ&A形式でまとめました。

環境のライティングに影響されてアイテムが明るく/暗くなった!

今回キャプチャしたアイテムはマップにスポーンされたのでそうなります。普通のライティングならLightingChannelの調整で影響されないようにしましょう。ポストプロセスなどは実装の方法によって対策します。
17.png

ポーズ中で表示したいけど、アイテムのアニメ/テクスチャが動かなくなった!

ポーズ中なら大体のTickは失効します。ポーズ中でもTickを有効したい場合はComponentのTickEvenWhenPauseを設定します。マテリアルのTimeノードもIgnorePauseという設定があります。
18.png
19.png

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0