レベル(マップ)関連

異世界への入り口!ポータルゲートの作り方

Unreal Engine(UE)でポータルゲートを作ってみよう!
方法はいくつかありますが、今回はナイアガラという機能を使う方法を、初心者向けに解説します!

ポータルゲート例
完成イメージ

動作環境

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

ポイント

OS:Windows11 (Ver 22H2)

GPU:NVIDIA GeForce RTX 3060 Ti (Ver 3.27.0.112)

UE:UnrealEngine5 (Ver 5.3.0)

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

同義語

UEに限らず3DCG系の解説では、用語が統一・定着しておらず、サイトや解説者によって異なる呼び方の場合があります。
初心者が混乱する一因になっており、解決されることを願うばかりです。

当記事でご紹介する内容は、UEにおいては明確な表現がありませんが、以下の内容も同じ意味を指すことがあります。

同義語

ポータルゲート、異世界ポータル、異次元ポータル、別次元ポータル、磁気ポータル、ゲート、ワームホール

ポータルとは?

単語そのものとしては、「入り口」や「表玄関」という意味になります。
ゲームなどでは、「異世界や遠地に繋がる扉」という意味で使われたりします。
1998年にはNASAが ”遠地に繋がる扉” として宇宙にポータルがあることを公式発表しています(2012年に「Xポイント」という名に命名)。

似たような意味ではゲートという単語があります。
ゲートは扉のような領域内のものを守る物理的な出入口、ポータルはWebポータルサイトのような別領域にアクセスを促す非物理的な出入口を指すことが多いようです。

ポータルの実装方法

UE5でポータルを実装するにはいくつか方法がありますが、当記事ではNiagara(以下、ナイアガラ)というエフェクトを使った方法をご紹介します。

異世界側マップの作成

まずはポータルの中に映る、異世界側のマップを作成します。
本来は作りこむべきですが、当記事ではマーケットプレイスで購入した適当なアセットのマップを使用するため、ここでは割愛します。

ポータル本体の作成

異世界が映るポータルの本体部分を作成していきます。

Scene Capture Cubeの追加

異世界側のマップにて、シーンキャプチャーキューブを追加します。
メニューから「プロジェクトに追加」を選択し、検索欄に”sc”と打ち込むと、Scene Capture Cubeが選択肢に登場します。

メニューからコンテンツを追加
SceneCaptureCubeを検索して追加する

カメラが出現するので、映したい映像になるようにカメラを移動します。

CubeTargetとStaticTextureの追加

キューブの描画ターゲットを追加します。

CubeTargetの追加
CubeTargetの追加

シーンキャプチャーキューブの詳細にある「Texture Target」欄からキューブの描画ターゲットを選択します。

分かりやすい名前と保存場所を指定して、保存します。

※当記事では”LocationTest”という名称にしています。以後、図解される”LocationTest”はキューブの描画ターゲットを意味します。

保存したキューブの描画ターゲットを開きます。

「レベルオブディテール」のミップ全体設定欄を「LeaveExistingMips」に設定します。
また、「テクスチャレンダーターゲットキューブ」のSize X欄を1024に設定します。

ポイント

「テクスチャレンダーターゲットキューブ」のSize X欄は、ポータルの中に見える範囲の大きさの設定です。
完成後、各自で微調整してください。

シーンキャプチャーキューブのミップ設定
クリックで拡大表示

ここまで出来たら、保存してダイアログを閉じます。

ポータル用のCreateStaticTexture設定

さらにキューブの描画ターゲットを右クリックして、スタティックテクスチャを作成します。

スタティックテクスチャを開き、キューブの描画ターゲットと同様に、「レベルオブディテール」のミップ全体設定欄を「LeaveExistingMips」に設定します。

保存してスタティックテクスチャのダイアログも閉じます。

マテリアルの作成

コンテンツブラウザにて、マテリアルを追加して開きます。

一度マテリアルダイアログを小さくし、コンテンツブラウザからテクスチャキューブをドラッグアンドドロップ(D&D)します。

マテリアルにテクスチャキューブを追加
マテリアルにテクスチャキューブを追加
  1. 追加したテクスチャキューブ(Texture Sample)のRGBとポータルのノード(M_Portal)のエミッシブカラーを接続
  2. ポータルのノードを選択した状態で、詳細欄のShading Modelを「ライティングなし」に設定
追加したテクスチャキューブ(Texture Sample)のRGBとポータルのノード(M_Portal)のエミッシブカラーを接続。
ポータルのノードを選択した状態で、詳細欄のShading Modelを「ライティングなし」に設定

マテリアルグラフの何もない部分を右クリックして、「Constant」ノードを出し、値に0を設定します。
さらに「Reflection Vector WS」ノードを出します。

「Constantノード」-「Reflection Vector WSノード」-「Texture Sample(UVs)」となるように各ノードを接続します。

「Constantノード」-「Reflection Vector WSノード」-「Texture Sample(UVs)」となるように各ノードを接続します。

ここまで出来たら、マテリアルを保存してダイアログを閉じます。

ブループリントアクタの作成

コンテンツブラウザにて、「ブループリントクラス」-「Actor」と選択し、ブループリントアクタを追加します。

ブループリントアクタの追加
ブループリントアクタの追加
  1. コンポーネントでスタティックメッシュを追加(Portalなどの名称にすると分かりやすいでしょう)
  2. スタティックメッシュ「StaticMesh」にシリンダーを設定、X方向に90度回転し、Z方向に0.01まで縮小させる
  3. マテリアル「エレメント」に前項で作成したマテリアルを設定

メモ

シリンダーにはいくつか種類があります。
どれでも作成可能ですが、パスが「Engine/BasicShapes」のものを設定すると分かりやすいです。

シリンダーの追加
クリックして拡大表示(3には前項で作成したマテリアルを各自で設定)

これで本体は完成です!

エフェクトの作成

これだけでは寂しいので、本体の周囲にエフェクトを作りましょう。

Niagaraの追加

エフェクトにはナイアガラシステムを使用します。

Niagaraの作成

コンテンツブラウザにて、何もない部分を右クリックして、「Niagara システム」をクリックします。
「選択したエミッタに基づく新しいシステム」を選択します。
「Empty」を選んだ状態で+ボタンを押下して、終了します。

Niagaraエフェクトの作成ダイアログ
Niagaraエフェクトの作成ダイアログ
「Spawn Rate」を追加

「エミッタの更新」の右にある+ボタンを押下して、「Spawn Rate」を追加します。
Spawn Rate欄に任意の値を設定します。

ポータルゲート例
完成イメージ

Spawn Rateは、1秒間に生み出すエフェクトの個数の設定です。
当記事では、周囲の青白い光の線の数に当たります。

ポイント

一旦エフェクトを作成して、最後にこの値を微調整します。
現段階では10000~20000くらいの、やや高めな数値を適当に入れてください。

SpawnRate設定
SpawnRate設定
「Initialize Particle」の編集

「Initialize Particle」を選択します。
「Lifetime Mode」をRandomに設定し、任意の値を設定します。(エフェクトが消えるまでの時間で、長いほど光の線が消えないので結果的に細長い光になります)
「Sprite Size Mode」をRandom Non-Uniformに変更して、SpriteSizeを任意の値に変更します。

LifeTimeMode設定
「Shape Location」を追加

「パーティクルのスポーン」の右側にある+ボタンを押下して、「Shape Location」を追加します。

ShapeLocation設定

「Shape Primitive」をTorusに変更します。
エフェクトの形がドーナツ型になります。

「Handle Radius」を5に変更します。
半径(エフェクトの厚み)が変わります。

「Rotation Mode」をAxsis Angleに変更します。
軸回転します。

「Solve Forces and Velocity」「Vortex Force」を追加

「パーティクルの更新」の右側にある+ボタンを押下して、「Solve Forces and Velocity」を追加します。
こちらは追加するだけで、設定変更はありません。

「パーティクルのスポーン」の右側にある+ボタンを押下して、「Vortex Force」を追加します。
環境によっては問題が発生するため、問題を修正します。

「Solve Forces and Velocity」「Vortex Force」を追加
「Solve Forces and Velocity」「Vortex Force」を追加
「Vortex Force」の編集
Vortex設定
Vortex設定

「Vortex Force」を選択した状態で「Vortex Axis」を変更します。
Xは1に、Zは0に設定します。

さらに、「Shape Location」が「Vortex Force」の上になるように移動します。(設定の上下は処理優先度的な意味があります)

「Sprite Renderer」の編集
流速設定

「Sprite Renderer」のAligmentを流速に設定します。

「Scale Splite Size」を追加

「パーティクルの更新」の右側にある+ボタンを押下して、「Scale Splite Size」を追加します。

「Scale Splite Size」を追加
「Scale Splite Size」を追加

カーブのグラフを以下のように変更します。

  • 左の点のキーデータを時間0/値0から時間0/値1に設定。
  • 右の点のキーデータを時間1/値1から時間1/値0に設定。
3次補間-自動接線を有効化

時間0・値1の点(グラフに2点ある▲の左側)を右クリックします。
3次補間-自動接線を有効化します。

「Collision」を追加

「パーティクルの更新」の右側にある+ボタンを押下して、「Collision」を追加します。

コリジョン設定
コリジョン設定

「Restitution」を0.1に、
「Restitution Coeffic」をAverageに、
「CPU Friction Blend」をAberageにそれぞれ設定します。

エフェクトの色を変更する

必須ではないですが、エフェクトの色を変更するとより個性を出すことができます。
色を変更できるように設定を変更します。

Niagaraエフェクトの色変更設定
Niagaraエフェクトの色変更設定

「パーティクルのスポーン」を選択します。

「Color Mode」をRandom Rangeに設定します。

さらに、「Color Minimum」と「Color Maximum」の右側の下矢印をクリックして、「新しいUserパラメータから読み取る」をそれぞれ追加します。

Niagaraエフェクトの色変更設定
Niagaraエフェクトの色変更設定

パラメータにユーザー変数が2つ追加されているはずです。
それぞれ「Color Minimum」と「Color Maximum」に対応する色を設定する変数です。

Colorなど分かりやすい名前に変更しておきましょう。

ここまで出来たら、コンパイルして保存し、ダイアログを閉じます。

ブループリントアクタにエフェクトを追加

ここからは再びブループリントアクタを操作します。

コンポーネントにNiagara(エフェクト)を追加
Niagaraを作成
Niagaraを作成

コンポーネントにNiagaraを追加します。
コンポーネントの追加ボタンを押下して、”niagara”と検索すると見つけやすいです。

階層移動
ポータルのエフェクトを追加して階層移動
ポータルのエフェクトを追加して階層移動

追加したNiagaraに、”PortalEffect”などの分かりやすい名称を付けます。
さらに、ポータル本体と同じ階層になるように移動します。

ポータル本体とエフェクトと結合

コンポーネントでナイアガラエフェクトを選択します。
詳細のNiagara System Assetに作成したナイアガラエフェクトを設定します。

エフェクトをポータル本体に追加
エフェクトをポータル本体に追加

ポータル本体を回転・拡大してエフェクトと結合します。

注意

エフェクトは設定が多いため、向きや大きさを変えると崩れることがあります。
ポータル本体を動かす方が、レイアウト崩れが少なく済みます。

エフェクトをポータル本体に追加
エフェクトをポータル本体に追加
色を変更

ナイアガラエフェクトを選択した状態にします。
ユーザーパラメータから色を変更します。

ポイント

エフェクトを選択している状態では、色が正しく反映されません。
一度色を設定したら、ポータル本体を選択した状態にすることで、実際の色を確認できます。

エフェクトの色を変更
エフェクトの色を変更

これでポータルは完成です!
コンパイルして保存します。

現実世界側マップの作成

こちらも実際は作りこむべきですが、当記事ではサードパーソンのデフォルトマップを使用します。

ポータルの設置

現実世界側のマップに、作成したポータルを設置します。
ブループリントアクタをマップにドラッグアンドドロップするだけで設置可能です。

完成!

これで完成です。
もしうまくいっていない場合、どこか手順に抜けがあったり設定ミスがある可能性があります。

ポータルゲート例
完成イメージ

手順が多いので、一つ一つ確認してみてください。

また、レベル切り替えと合わせることで、異世界側マップに移動させることもできます!
レベル切り替えの方法は下記記事を参照してください。

  • この記事を書いた人
  • 最新記事
クルエイチ

クルエイチ

NextClueLabの代表・管理者。 (Clue + 英知・叡智・叡知)でクルエイチ。 平日は会社員。 土日は副業でWeb・スマホアプリの開発やブロガーをこなす。 祝日は休み、UE5で3DCG動画制作などをして過ごす。

人気記事

Unreal Engine(UE)で、フリーフォントや購入したフォントを使ってみよう!とてもシンプルなテクニックですが、他のUE製作者と簡単に差をつけることができます! 1

フリーフォントや購入したフォントを使ってみよう!とてもシンプルなテクニックですが、他のUE製作者と簡単に差をつけることができます!

Windows用にパッケージ化するとエラーが出る場合があります。当記事の対処方法で解決する場合があるので参考にしてみてください。 2

Windows用にパッケージ化するとエラーが出る場合があります。当記事の対処方法で解決する場合があるので参考にしてみてください。

Unreal Engine(UE)で鏡のマテリアルを作ってみよう!壁や床、箱などにも設定可能で自由度の高い鏡マテリアルの作り方を、初心者向けに解説します! 3

鏡のマテリアルを作ってみよう!壁や床、箱などにも設定可能で自由度の高い鏡マテリアルの作り方を、初心者向けに解説します!

-レベル(マップ)関連
-