「GunPura Virtual Diorama その7」飛び交うビームの作り方（後編）

今回は、前回に引き続き、第三回映像実験で使われた、背景の至る所で飛び交っているビームの作り方の詳細後編を送ります。

完成したガンプラと飛び交うビーム

制作手順

  1. 宇宙空間を飛び交うビームに使用するビームのエフェクトを作成
  2. ブループリントでランダムにビームを発生させて発射させる仕組みを作成（今回はここからです）
  3. レベル上に上記のブループリントを配置する

2. ブループリントでランダムにビームを発生させて発射させる仕組みを作成

ビームを作成したので、ビームの撃ち合いを表現するために、レベル上に複数のボックスを配置し、そのボックス内でランダムな位置からランダムな方向にビームを飛ばす処理を作成していきます。

2.1 ActorクラスのBPを作成

  1. コンテンツブラウザで追加/インポートボタンを押して、「ブループリントクラス」＞「Actor」を選択してBPを作成して「BP_LoopBeam」と名付けます。
  2. 「ビューポート」の編集画面で「Box Collision」を追加し、詳細ウインドウで「シェイプ」＞「Box Extent」で形状を調整します。このボックス内の空間のどこかがビームの発射地点となります。

Box Extentの設定値

Box Collisionの形状

  1. 「イベントグラフ」の編集画面に移動し、「Event Begin Play」の実行ノードからワイヤーを伸ばして「Set Timer by Event」のノードを配置し、ノード内の「Time」の数値を「1.0」を入力して、1秒ごとにイベントが呼ばれるようにします。

Event Begin PlayからSet Timer by Eventへの接続

2.2 カスタムイベントの作成

  1. 「Event Begin Play」の下辺りのスペースで右クリックメニューから、「カスタムイベントを追加」を選択して、「StartRandomExplosion」と名付けます。その後、「Set Timer by Event」の「Event」ピンにワイヤーを接続します。
  2. 上記と同様の手順で「StartRandomExplosion」のノードの右スペースに、右クリックメニューから「Branch」「For Loop」「Random Integer in Range」を追加し、「StartRandomExplosion」→「Branch」→「For Loop」の順にワイヤーをつなぎます。
  3. ループ数が「0.5」より小さい状態の時、「True」を返し、Loopに入るようにしたいので、「Branch」ノードの「Condition」ピンからワイヤーを伸ばして、「Float<Float」ノードを設置して下側に「0.5」を入力、上側からワイヤーを伸ばし「Random Float」ノードを設置します。
  4. 「Random Integer in Range」のノードにループ回数を入力して、「For Loop」の「Last Index」のピンにワイヤーを繋ぎます。今回は1回のイベントで1～5回繰り返す様にするので、「Min：1」「Max：5」という設定にしました。

StartRandomExplosionからBranch・For Loopへの接続

2.3 ビームを生成する位置と回転情報を決める

  1. 「For Loop」ノードの右下スペースに「Spawn System at Location」を追加し、「System Template」ピンに前回作成した「ビームエフェクト（NS_BattleBeam）」を選択します。
  2. 「Spawn System at Location」＞「Location」ピンからワイヤーを伸ばして「Random Point in Bounding Box」ノードを設置してボックス内のランダムな位置を取得できるようにします。
  3. ランダムな位置を取得するボックスそのものの大きさを設定する為、「Random Point in Bounding Box」＞「Origin」ピンからワイヤーを伸ばして「GetActorBounds」を設置して、このアクター（BP_LoopBeam）の大きさ（原点とその範囲を決める点の座標）を取得して、「Random Point in Bounding Box」の「Origin」と「Box Extent」のそれぞれのピンに接続して値を渡します。
  4. ビームがランダム方向に発射されるようにするための回転情報は、「GetActorRotation」ノードを設置して「Break Rotator」でX,Y,Zを分割し、個々の値にビームを打ち出したい角度にランダム性を与えるための「Random Float in Range」ノードを「Float+Float」とつなげて、ランダムの最小値と最大値を設定できるようにして、「Make Rotator」で中継した後「Spawn System at Location」＞「Rotation」に接続します。

GetActorBounds・GetActorRotationを使った位置と回転の設定

2.4 ビームを生成した瞬間に色を変える仕組みを作る

2つの勢力が互いに撃ち合っているように見せたいので、ビームが生成された時にランダムで緑かピンクの色を付けられるようにします。生成されたビームに0か1の数値がランダムで割り当てられるようにし、0なら緑、1ならピンクに変更します。

  1. 「Spawn System at Location」の実行ピンからワイヤーを伸ばして「Switch on Int（整数型でスイッチ）」ノードを設置します。
  2. 「Selection」ピンからワイヤーを伸ばして整数のランダム値を取得できる「Random Integer in Range」ノードを設置し、Min = 0、Max = 1の数値を設定して、生成されたビームに0か1の数値がランダムで割り当てられるようにします。
  3. ランダム値「0」の時は「緑色」、「1」の時はピンクになるようにするため、それぞれの色の情報を格納する2つの変数を作成します。マイブループリントの変数の「+」ボタンを押して、「Color」型変数を2つ作成し、「GreenColor」、「PinkColor」と名付けます。
  4. 「Switch on Int（整数型でスイッチ）」ノードの実行ピンからワイヤーを伸ばして、「Set Color Parameter」を上下二段に設置し、それぞれの「Param」ピンに先程作った変数「GreenColor」、「PinkColor」を繋げます。
Switch on IntによるGreenColor/PinkColorの切り替え NS_BattleBeamのNiagaraエディタでColorを設定
  1. 「Set Color Parameter」＞「Parameter Name」に「User.Color」と入力します。（「User.Color」はNiagara内の色のパラメータを取得するためのものになります）
  2. 「NS_BattleBeam」をダブルクリックしてNiagaraエディタに移動し、「Color」を選択状態にします。
  3. 右側ウインドウの「Color」＞「Color」の右側にある「▼」をクリックしてサブウインドウを開いて「Make」＞「Read from new User parameter」を選択します。
  4. 「Read from new User parameter」を選択すると表示が変化します。この状態になると外部から色の情報へアクセスが可能な状態になります。
変更前のColorパラメータ
変更前
変更後のColorパラメータ(Userパラメータ参照)
変更後(Userパラメータ参照)

これで、レベルエディタ上からビームの色を編集できるようになりました。

2.5 レベルエディタに「BP_LoopBeam」を配置して生成されるビーム色を変更する

  1. レベルエディタに戻って、ビームの撃ち合いが発生する場所に「BP_LoopBeam」アクターを配置します。
  2. 「BP_LoopBeam」アクターを選択状態で詳細ウインドウのデフォルト＞「GreenColor」、「PinkColor」が調整できるようになっているので、これらを調整していきます。

宇宙空間を飛び交うビーム(地球側から)

  1. 今回はビームの色を緑とピンクにしますので、以下のように調整しました。
    • 「緑のビーム」(B=100, G=255, R=0, A=1)
    • 「ピンクのビーム」(B=231, G=0, R=255, A=1)

これで、2つの勢力が撃ち合うビームの完成です。

最終的に作成された映像は、第3回映像実験「GunPura Virtual Diorama その1」の記事にある通りになります。

今後も、このような映像実験を行っていきますので興味のある方は、弊社のYouTubeチャンネル共々ご贔屓にしていただけたらと思います。