アイテムを3Dで表示したい
バイオハザードヴィレッジのように、アイテムを3Dで表示したい!
今回の成果
画像のようにアイテムの表示、回転、切り替え機能ができました。
今回の内容はBPのみで完成できますので初心者も簡単に作れます。C++を使う必要がありません。UE5 Previewで作りましたが、UE4も同じ手順でできます。
完成したプロジェクトはGithubに置きましたのでよかったら参考してください。
キャプチャから表示するまで
アイテムを表示するまで、手順は以下:
- SceneCapture2Dを使って、アイテムの画像をRenderTargetにキャプチャする
- RenderTargetの画像をTextureに書き込む
- UIに表示する
Blankプロジェクトからやります。
まずはBlueprintActorを追加して、BP_UICaptureActorと名付けます。
BP_UICaptureActorの中にStaticMeshとSceneCaptureComponent2Dを追加します。
カメラがアイテムを撮影するように位置を調整します。StaticMeshにモデル(アイテム)をアサインします。
SceneCapture2DのTextureTargetプロパティに、RenderTargetを追加します。RT_UICaptureと名付けます。
新規Textureアセットを追加します。T_UICaptureと名付けます。
T_UICaptureを開いて、以下の設定をします
Material Domain: User Interface
Blend Mode: Translucent
これでUI用のAlpha入りのテクスチャになります。
SceneCaptureComponent2Dからキャプチャした画像のAlphaが反転してますので、元に戻す処理が必要です。
T_UICaptureのMaterial Graphに右クリック、TextureSampleを追加します。
1-xノードも追加し、画像のように繋ぎ、TextureSampleのTextureをRT_UICaptureを指定します。
これでアルファ回転の仕組みができました。
これでキャプチャしたものを表示する作業は大体完了です。成果を見てみましょう。
まず簡単なUMGを作って、Imageを追加して、画像をT_UICaptureに設定します。
レベルBlueprintで作ったUIを表示します。
通常、表示するアイテムを動的に生成するのは正しいが、今回はプレビューなので、まずBP_UICaptureActorをそのままマップにドロップします。
プレイを押したら、アイテムが表示されました!やった!
って背景も入ってるじゃないですか!心配しないで。背景を透明にすることはできます。
背景を透明にする
BP_UICaptureを開きます。SceneCaptureComponent2DのPrimitiveRenderModeをUseShowOnlyListに設定します。これで特定のアクターのみキャプチャするようになります。
Event Graphにて、BeginPlayでShouOnlyActorComponentsをSelfと設定します。
EventGraphにSelfに設定します。これで自分以外のものは写らなくなります。
再びプレイを押します。
背景がなくなった!わーい!これでキャプチャ完成です。
アイテムメニューっぽくします
DataTableで表示するモデルを登録して、選択してるボタンに応じて切り替える機能も作りました。最終成果はこちらになります。
マップにあるアイテムが見えますが、ちゃんと作れば見えない場所にスポーンしましょう。
手順を書くのはややこしいなので、気になる方はGithubにプロジェクトを確認しましょう。
補足Q&A
実際の遭遇した問題をQ&A形式でまとめました。
環境のライティングに影響されてアイテムが明るく/暗くなった!
今回キャプチャしたアイテムはマップにスポーンされたのでそうなります。普通のライティングならLightingChannelの調整で影響されないようにしましょう。ポストプロセスなどは実装の方法によって対策します。
ポーズ中で表示したいけど、アイテムのアニメ/テクスチャが動かなくなった!
ポーズ中なら大体のTickは失効します。ポーズ中でもTickを有効したい場合はComponentのTickEvenWhenPauseを設定します。マテリアルのTimeノードもIgnorePauseという設定があります。