Unreal Engine 5のNiagaraシステムを使って、簡単なビームエフェクトを作ります。
Niagaraシステムをアクターのブループリントに組み込めば、アクターの位置から指定位置までビームを表示することができます。
この動画は、ビームエフェクトを銃口から射撃目標の位置まで表示しています。
マテリアルの作成
ビームの透過具合を決めるため、Niagaraシステムの作成に使うマテリアルを作成します。
アセットの作成
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-092748.webp)
- 「コンテンツブラウザ」でフォルダを選択
- 「追加」をクリック
- 「マテリアル」を選択して、アセットを作成
マテリアルグラフの作成
作成したマテリアルのアセットを開いて、「マテリアルの結果」ノードのパラメータを変更し、「Particle Color」ノードを追加します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-093109.webp)
- 「マテリアルの結果」ノードを選択
- 「詳細」の「マテリアル」で、「Blend Mode」を「Additive」、「Shading Model」を「Unlit」に変更
- 「透過処理」の「Output Depth and Velocity」にチェックを入れる
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-093354.webp)
- 「Particle Color」ノードを追加
- 「RGB」と「エミッシブカラー」、「A」と「オパシティ」を繋ぐ
Niagaraシステムの作成
Niagaraシステムで、ビームのエフェクトを作成します。
今回は、直線状のメインのビーム、その周りにまとわりつく外周のビーム、発射地点の球状のビームの3つの要素でビームを表現します。
アセットの作成
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-093628.webp)
- 「コンテンツブラウザ」でフォルダを選択
- 「追加」をクリック
- 「Niagaraシステム」を選択して、「システムの開始点を選択」ウィンドウを開く
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-093722.webp)
- 開いたウィンドウで、「空のシステムを作成」を選択
- 「終了」をクリックして、アセットを作成
システムのパラメータ設定
作成したNiagaraシステムのアセットを開いて、アセット名のついたノードのパラメータを変更します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-093841.webp)
- アセット名のノードを選択し、「System State」の「Loop Duration」を設定
※このNiagaraシステムのループ間隔です。パーティクルのLifetimeという項目と合わせて小さい値にすると、点滅しているように見えます。
メインのビーム用エミッタの追加
メインの直線状ビームになるエミッタを追加します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-093940.webp)
- グラフ内で右クリックして「エミッタを追加」を選択し、「ソースフィルタリング」ウィンドウを開く
- 開いたウィンドウで、「Dynamic Beam」を選択
バラメータの設定
追加した「Dynamic Beam」ノードを選択し、「詳細」のパラメータを変更します。
エミッタのプロパティ
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-094055.webp)
- 「エミッター」の「Sim Target」を「GPU Compute Sim」、「Calculate Bounds Mode」を「Fixed」に変更
エミッタの更新
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-094153.webp)
- 「Emitter State」>「Life Cycle」の「Life Cycle Mode」を「System」に変更
※エミッタのループや消滅がNiagaraシステムアセット依存になります。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-094302.webp)
- 「Beam Emitter Setup」の「Beam End」右の「V」をクリックし、「ソースフィルタリング」ウィンドウを開く
- 開いたウィンドウで「新しいUserパラメータから読み取る」を選択
※ビーム端末位置をイベントグラフなどの処理結果で決めるようになります。 - 「Absolute Beam End」にチェックを入れる
※ビーム端末位置をワールド座標で指定するようになります。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-094408.webp)
- 「Spawn Burst Instantaneous」の「Spawn Count」を設定
※生成されるパーティクルの数が変わります。(ゲームプレイ中のビーム長さの変化で、外周のビームの見た目が変わる場合、長さに合わせて生成数を変えると解決できるかもしれません。)
パーティクルのスポーン
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-095648.webp)
- 「Initialize Particle」>「Point Attributes」の「Lifetime」を設定
※パーティクルの存在する時間です。「System State」の「Loop Duration」という項目と合わせて小さい値にすると、点滅しているように見えます。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-095826.webp)
- 「Beam Width」>「Beam Width」の「Float Curve」を直線に変更
※ビームの形が直線になります。 - 「Scale Curve」を設定
※ビームの太さが変わります。
パーティクル更新
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100040.webp)
- 「Color」の「Color」を設定
※RGBAそれぞれの値で、色や透過率が変わります。
レンダリング
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100159.webp)
- 「Ribbon Renderer」>「リボンレンダリング」の「Material」を、作成したマテリアルに変更
※ビーム全体が均一に透過された状態になります。
外周のビーム用エミッタの追加
メインのビーム用エミッタを複製して、外周のビーム用エミッタを作成します。
エミッタのコピー
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100246.webp)
- メインのビーム用エミッタを選択し、Ctrl+Dキーで複製
パラメータの設定
複製した「Dynamic Beam」ノードを選択し、「詳細」のパラメータを変更します。
エミッタの更新
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100339.webp)
- 「Spawn Burst Instantaneous」の「Spawn Count」を設定
パーティクルのスポーン
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100454.webp)
- 「Scale Curve」を設定
パーティクル更新
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100729.webp)
- 「パーティクル更新」右の「+」から「Curl Noise Force」を追加
- 「Curl Noise Force」の「Noise Strength」、「Noise Frequency」、「Pan Noise Field」を設定
※それぞれノイズの大きさ、ノイズの頻度、ノイズの動きが変わります。
発射地点のビーム用のユーザーパラメータの追加
発射地点に表示する、球状ビームの色と大きさを設定するため、ユーザーパラメータを追加します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100838.webp)
- 「ユーザーパラメータ」ウィンドウで、「ユーザーパラメータ」右の「+」をクリックし、パラメータ選択のウィンドウを開く
- 開いたウィンドウで「Linear Color」を選択
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-100952.webp)
- 「ユーザーパラメータ」ウィンドウで、「ユーザーパラメータ」右の「+」をクリックし、パラメータ選択のウィンドウを開く
- 開いたウィンドウで「Vector 2D」を選択
ユーザーパラメータの設定
追加したユーザーパラメータを設定します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-101039.webp)
- 「ユーザーパラメータ」ウィンドウに追加した「Linear Color」と「Vector 2D」の値を設定
発射地点のビーム用エミッタの追加
発射地点の球状ビームになるエミッタを追加します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-101236.webp)
- グラフ内で右クリックして「エミッタを追加」を選択し、「ソースフィルタリング」ウィンドウを開く
- 開いたウィンドウで、「Empty」を選択
パラメータの設定
追加した「Empty」ノードを選択し、「詳細」のパラメータを変更します。
エミッタのプロパティ
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-101357.webp)
- 「エミッター」の「Sim Target」を「GPU Compute Sim」、「Calculate Bounds Mode」を「Fixed」に変更
レンダリング
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-101551.webp)
- 「Sprite Renderer」>「スプライトレンダリング」の「Source Mode」を「Emitter」に変更
※すべてのスプライトが、1つのエミッタのプロパティで統一された状態になります。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-101656.webp)
- 「Sprite Renderer」>「バインディング」の「Color Binding」をユーザーパラメータのLinear Colorに、「Sprite Size Binding」をユーザーパラメータのVector 2Dに変更
※上で追加したユーザーパラメータが反映されます。
ブループリントの作成
作成したNiagaraシステムをコンポーネントとして利用するため、ブループリントを作成します。
アセットの作成
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-101808.webp)
- 「コンテンツブラウザ」でフォルダを選択
- 「追加」をクリック
- 「ブループリント」を選択して、「親クラスを選択」ウィンドウを開く
- 開いたウィンドウで「Actor」を選択
コンポーネントの追加
「関連付けられたアセットを参照」の機能を使って、作成したブループリントに、ビームのNiagaraシステムを追加します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-101917.webp)
- ビームのNiagaraシステムで、「関連付けられたアセットを参照」のアイコンをクリック
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-102011.jpg)
- 作成したブループリントで、「コンポーネント」の「追加」をクリック
- 開いたウィンドウで、「Niagara Particle System Component」を選択
イベントグラフの作成
利用例として配置したアクターの位置から上方向にビームを出す場合のイベントグラフを作成します。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-102139.webp)
- 「Event Tick」で、Tickごとに実行
- 「Set Niagara Variable (Vector3)」で、目標のNiagaraシステム内の、指定したパラメータに値を設定
実装結果の確認
作成したアクターを配置して、ゲームをプレイした結果です。
配置した位置から上方向にビームを伸ばすことができました。
![](https://188hirroom.com/wp-content/uploads/2024/06/スクリーンショット-2024-06-19-102348.webp)
アクターを銃口に配置して、Beam Endを射撃目標の位置にすれば、最初の動画のように銃からビームを発射できます。
以上です。
コメント