広告 ゲーム機能テク

3Dモデル(キャラ)をウィジェットに表示する

Unreal Engine(UE)で3Dモデル(キャラクター)をウィジェットに表示してみよう!

チュートリアルや会話イベントなどで、ウィジェットに3Dモデルを表示したいと思ったことはありませんか?
それも、せっかくなら画像ではなく動きがあるモデルで表示してみたいですよね?
今回はその方法をご紹介します!

ウィジェットに3Dモデルを表示
完成イメージ

動作環境

当記事の動作環境は以下の通りです。
バージョンや環境によっては、正常に動作しない可能性があります。

ポイント

OS:Windows11 (Ver 22H2)

GPU:NVIDIA GeForce RTX 3060 Ti (Ver 3.27.0.112)

UE:UnrealEngine5 (Ver 5.3.1)

また、プロジェクトはサードパーソンプロジェクトの使用を前提とします。

【下準備】キャラの作成と撮影

まずは表示するキャラクターを作成し、そのキャラクターを撮影していきます。

キャラクターの作成

表示したいキャラクターを作成します。
皆さんは自作のキャラや購入したアセットなどを使用することになるかと思います。

当記事ではキャラの作成は省略して、既存のグレイマンを使用します。

撮影環境を作る

キャラを撮影するために、シーンキャプチャーキューブを追加します。
メニューから「プロジェクトに追加」を選択し、検索欄に”sc”と打ち込むと、Scene Capture Cubeが選択肢に登場します。

ドロップダウン(選択肢)が表示された状態で文字を打てば、自動的に検索欄が表示されます。

「Scene Capture Cube」または「Scene Capture 2D」を使用します。
2Dの方が簡単にできるので、当記事では2Dを選択しますが、Scene Capture Cubeでもやり方はあまり変わりません。

メニューからコンテンツを追加
SceneCaptureCubeを検索して追加する
Scene Capture 2Dでも可

「Scene Capture 2D」を追加すると、レベルにカメラが出現します。

レベルへ配置

「Scene Capture 2D」で作ったカメラの前にキャラクターを配置します。
キャラクターとScene Capture 2Dのカメラを、レベルの使わない場所に移動します。

グレイマンとScene Capture 2Dを配置した例
カメラとキャラを見えない場所に移動、床は未配置状態

この時、床を忘れずに設置してください。
床が無いと、キャラが落下してしまい一瞬だけ表示される状態になってしまいます。

見える場所にキャラクターを配置すると、ゲーム起動中にウィジェット表示用のキャラが見えてしまいます。
キャラをただ非表示にしてもコリジョンが残るため、見えない壁になります。
コリジョンまで消すと手間がかかるので、見えない場所へ移動させることが現実的です。

違うレベルにキャラを置いてしまうというのも一つの手ですが、このためだけにレベルを作るのも面倒です。

ウィジェットに表示する部分を作る

ここからは、ウィジェットに表示する部分を作っていきます。

描画ターゲットの作成

カメラを選択した状態で、シーンキャプチャーキューブの「Texture Target」にて「描画ターゲット」を選択します。

Scene Capture 2Dの描画ターゲットを作成

RT_Charaのような名前を付けて描画ターゲットを保存します(RT = RenderTarget)。

画角調整

作成した描画ターゲットを開きます。

画角調整

カメラから見えている景色が表示されるはずなので、ここで画角を調整します。
レベル上でカメラやキャラを動かすと、自動的に描画ターゲットに反映されます。

Scene Capture 2Dの設定変更

このままでは、背景に映っているキャラ以外のもの(壁や空など)も反映されてしまいます。
Scene Capture 2Dの設定を変更して、キャラだけを表示するようにしていきます。

Scene Capture 2Dの設定

まずは背景から壁などを消します。

Primitive Render Mode欄を「Use ShowOnly List」に変更します。

さらに、Show Only Actorsにインデックスを追加して(配列エレメント横の+ボタン)、インデックスにキャラクターのブループリントを設定します。

次に、空を消していきます。
「シーンキャプチャー」-「詳細設定」-「表示フラグを生成」と進みます。

表示フラグの変更

スケルタルメッシュ以外のチェックを全て外します。
特に下の方にある「フォグ」「ランドスケープ」「大気」のチェック消し忘れに注意してください。

ここで描画ターゲットを開くと、背景が消えているはずです。

【上級者向け】必要に応じて、「表示フラグの詳細設定」の中にあるチェックも外してください。

マテリアルを作る

シーンキャプチャーをマテリアル化します。
描画ターゲット(RT_Chara)を右クリックして、「マテリアルを作成」選択します。

マテリアルグラフで以下の通りに処理を組みます。

  • Material Domainを「User Interface」に設定
  • Blend Modeを「Masked」に設定
  • Texture SampleのRGBとマテリアルの最終カラーを接続
  • Texture SampleのAにOne Minusノードを接続
  • One Minusノードとマテリアルのオパシティマスクを接続
マテリアルグラフ完成図
マテリアルグラフの完成図
One Minusノード
One Minusノード

ウィジェットを作る

コンテンツブラウザで何もない部分を右クリックして、「ユーザーインターフェイス」-「ウィジェットブループリント」を作成します。
親クラスはユーザーウィジェットで良いでしょう。

Widgetブループリントの作成

Canvas Panelの上にimageを追加します。
「アピアランス」-「Blush」-「Image」欄に作成したマテリアルを設定します。

その他に、文字など必要なものを各自ウィジェットに配置してください。

ウィジェット作成例

プレイヤーのブループリントにて、Bigin Playイベントの最後にCreate Widgetノードを接続し、作成したウィジェットを設定します。
さらにCreate WidgetノードからAdd to View Portノードを接続します。
これで完了です!

まとめ

シーンキャプチャーを使えば、動きがある物を画面上に表示することができます。
ずっと動き続けると邪魔になることもありますが、チュートリアルや会話イベントなど短い時間の表示であれば問題ないでしょう。

ウィジェットに3Dモデルを表示
完成イメージ

キャラを同じレベルの見えない場所に配置するのではなく、別のレベルに置いてしまう方法もあります。
その方法は以下の記事を参考にできますので、こちらもご覧ください。

-ゲーム機能テク