· 

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

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

後編を送ります。

制作手順

1. 宇宙空間を飛び交うビームに使用するビームのエフェクトを作成

2. ブループリントでランダムにビームを発生させて発射させる仕組みを作成(今回はここからです)

3.レベル上に上記のブループリントを配置する 

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

ビームを作成したので、ビームの撃ち合いを表現するために、レベル上に複数のボックスを配置し、そのボックス内で

ランダムな位置からランダムな方向にビームを飛ばす処理を作成していきます。

1.1 ActorクラスのBPを作成

1.1.1 コンテンツブラウザで追加/インポートボタンを押して、「ブループリントクラス」>「Actor」を選択して

  BPを作成して「BP_LoopBeam」と名付けます。

1.1.2 「ビューポート」の編集画面で「Box Collision」を追加し、詳細ウインドウで「シェイプ」>「Box Extent」で

   形状を調整します。このボックス内の空間のどこかがビームが発射地点となります

1.1.3 「イベントグラフ」の編集画面に移動し、「Event Begin Play」の実行ノードからワイヤーを伸ばして

   「Set Timer by Event」のノードを配置し、ノード内の「Time」の数値を「1.0」を入力して、1秒ごと

   にイベントが呼ばれるようにします。

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

1.2.1 「Event Begin Play」の下辺りのスペースで右クリックメニューから、「カスタムイベントを追加」を

   選択して、「StartRandomExplosion」と名付けます。

   その後、「Set Timer by Event」の「Event」ピンにワイヤーを接続します。

1.2.2 上記と同様の手順で「StartRandomExplosion」のノードの右スペースに、右クリックメニューから

   「Branch」「For Loop」「Random Integer in Range」を追加し、「StartRandomExplosion」→

   「Branch」→「For Loop」の順にワイヤーをつなぎます。

1.2.3 ループ数が「0.5」より小さい状態の時、「True」を返し、Loopに入るようにしたいので、

   「Branch」ノードの「Condiion」ピンからワイヤーを伸ばして、「Float<Float」ノードを設置して下側に

   「0.5」を入力、上側からワイヤーを伸ばし「Random Float」ノードを設置します。

1.2.4 「Random Integer in Range」のノードにループ回数を入力して、「For Loop」の「Last Index」のピンに

   ワイヤーを繋ぎます。今回は1回のイベントで1~5回繰り返す様にするので、「Min:1」「Max:5」という

  設定にしました。

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

1.3.1 「For Loop」ノードの右下スペースに「Spawn Sysytem at Location」を追加し、「Sysytem Template」ピン

   前回作成した「ビームエフェクト(図では「NS_BattleBeam」)」を選択します。

 

1.3.2 「Spawn Sysytem at Location」>「Location」ピンからワイヤーを伸ばして「Random Point Bounding Box」

   ノードを設置してボックス内のランダムな位置を取得できるようにします。

1.3.3 ランダムな位置を取得するボックスそのものの大きさを設定する為、「Random Point Bounding Box」> 

   「Origin」ピンからワイヤーを伸ばして「GetActor Bounds」を設置して、このアクター(BP_LoopBeam)の

   大きさ(原点とその範囲を決める点の座標)を取得して、「Random Point Bounding Box」の「Origin」と

   「Box Extent」のそれぞれのピンに接続して値を渡します

1.3.4 ビームがランダム方向に発射されるようにするための回転情報は、「GetActorRotation」ノードを設置して

   「Break Rotator」でX,Y,Zを分割し、個々の値にビームを打ち出したい角度にランダム性を与えるための

   「Random Float in Range」ノードを「Float+Float」とつなげて、ランダムの最小値と最大値を設定できる

   ようにして、「Make Rotator」で中継した後「Spawn Sysytem at Location」>「Rotation」に接続します。

   (今回は、図のような数値にしました)

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

2つの勢力が互いに撃ち合っているように見せたいので、 ビームが生成された時にランダムで緑かピンクの色を

付けられるようにします。

生成されたビームに0か1の数値がランダムで割り当てられるようにし、0なら緑。1ならピンクに変更します。

1.4.1 「Spawn Sysytem at Location」の実行ピンからワイヤーを伸ばして「Switch on Int(整数型でスイッチ)」ノード

   を設置します。

1.4.2 「Selection」ピンからワイヤーを伸ばして整数のランダム値を拾得できるRandom Integer in Range」ノード

   を設置し、Min = 0、Max = 1 の数値を設定して、生成されたビームに0か1の数値がランダムで割り当てられる

   ようにします。

1.4.3 ランダム値「0」の時は「緑色」、「1」の時はピンクになるようにするため、それぞれの色の情報を格納する

   2つの変数を作成します。マイブループリントの変数の「+」ボタンを押して、「Color」型変数を2つ作成し、

   「GreenColor」、「PinkColor」と名付けます。

1.4.4 Switch on Int(整数型でスイッチ)」ノードの実行ピンからワイヤーを伸ばして、「Set Color Parameter」を上下  

   二段に設置し、それぞれの「Param」ピンに先程作った変数GreenColor」、「PinkColor」を繋げます。

1.4.5 「Set Color Parameter」>「Parameter Name」に「User.Color」入力します。

   (「User.Color」はNiagara内の色のパラメータを収得するためのものになります)

1.4.6 NS_BattleBeam」をダブルクリックしてNiagaraエディタに移動し、「Color」を選択状態にします。

1.4.7 右側ウインドウの「Color」>「Color」の右側にある「▼」をクリックしてサブウインドウを開いて

   「Make」>「Read from new User parameter」を選択します。

1.4.8 「Read from new User parameter」を選択すると下左図から下右図の様に表示が変化します。この状態になると

   外部から色の情報がアクセスが可能な状態になります。


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

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

1.5.1 レベルエディタに戻って、ビームの撃ち合いが発生する場所に「BP_LoopBeam」アクタを配置します。

1.5.2 「BP_LoopBeam」アクタを選択状態で詳細ウインドウのデフォルト>GreenColor」、「PinkColor」が

   調整できるようになっているので、これらを調整していきます。

1.5.3 今回はビームの色を緑とピンクにしますので、以下のように調整しました。

   ・「緑のビーム」(B=100,G=255,R=0,A=1)

   ・「ピンクのビーム」(B=231,G=0,R=255,A=1)

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

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

今後も、このような映像実験を行っていきますので興味のある方は、

弊社のyoutubeチャンネル共々ご贔屓にしていただけたらと思います。