執筆バージョン: Unreal Engine 5.5
|
こんにちは!今回は第23回ぷちコンのテーマ「せん」にちなんで、
プレイヤーが触れたことを判定するレーザーのトラップをつくってみましょう!
完成イメージはこちら!
・プロジェクトを用意しよう
まずはThirdPersonテンプレートでプロジェクトを作成します。
プロジェクトが作成されると、自動的に初期レベル(ThirdPersonMap)が開きます。
ここでプレイボタンを押してみましょう。
ゲームが開始し、プレイヤーを操作できます。
Esc(エスケープ)キーを押すと終了することが出来ます。
続いて、今回作成するレーザートラップ用のフォルダを作成します。
エディターの左下にある、コンテンツドロワーをクリックして開き、何もないところを右クリックして新規フォルダを選択します。

フォルダが作られたら、今回は「LaserTrap」という名前にしておきます(好きな名前で問題ないです)。

これで準備は完了です!
・レーザーの見た目をつくろう
次に、レーザートラップの見た目のエフェクトを作成していきます。
今回は、Niagaraシステムという機能を使って作成します。
「LaserTrap」フォルダをダブルクリックして開き、空いているところを右クリック、Niagaraシステムを選択してください。

Niagaraシステム作成のウインドウが出てくるので、「テンプレート」→「StaticBeam」を選択し、作成ボタンを押します。

名前を「NS_Laser」とし、ダブルクリックして開きます。

テンプレートのままだと、トラップ用のレーザーっぽくない見た目なので、
パラメータを少し変更して見た目を変えていきます。
まずは、左側にある「System State」を選択し、右側に出てくる詳細タブから「Loop Duration」の数値を変更します。
これは、エフェクトをループ再生するときの1ループの時間の長さです。今回は「0.05」とします。

続いて、「Emitter State」を選択し、「Life Cycle Mode」を「System」に変更します。
Systemに変更すると、先ほど変えたループの秒数だけエフェクトが持続します。

「Beam Emitter Setup」を選択し、「Beam End」の数値を変更します。今回は「600」に変更します。

つづいて、「Initialize Particle」を選択し、「Lifetime」を「0.05」に変更します。

次にビームの太さを設定するのですが、テンプレートのままだと太さが一定になっていません。
「Beam Width」を選択し、右側の「Beam Width」の右端にある矢印ボタンを押して、リセットします。

リセットできたら、数値を直接入力できるので、今回は「3.0」とします。

次に、レーザーの色を変更します。
「Color」を選択し、右側の詳細タブで好きな色に変更します。

今のままだとレーザーの色が薄く透けているので濃くしていきます。
先ほど色を設定した下にある矢印をクリックし、詳細を表示します。

表示できたら、「Scale Color」の右端にある下向き矢印を押し、「Vector from Float」を選択します。

「Value」を「100.0」に設定します。
テンプレートのままだと、レーザーの端の色が薄くなるように設定されているので、
「Scale Alpha」の右端の矢印ボタンを押してリセットします。

リセットした「Scale Alpha」の数値を「100.0」にします。

これで、レーザーのエフェクトの設定は終わりです!
一度確認してみましょう。
「ThirdPersonMap」タブをクリックし、レベルエディターに戻ります。
コンテンツドロワーを出して、作成した「NS_Laser」をレベル(マップ)上にドラッグ&ドロップします。

プレイを押してみるとゲーム内にもレーザーが現れました。
しかし、このままだと触れても何も起こらないレーザーになってしまうので、プレイヤーが触れた判定を付けていきます。
レベルに置いたエフェクトは、クリックして選択し、Deleteキーで削除しておきます。

・レーザーに当たり判定を付けよう
先ほど作成したレーザーはエフェクトなので、それ自体に機能を持たせるには少し難しいです。
なので、「アクタ」と呼ばれるオブジェクトを作ってそこに機能を持たせていきます。
コンテンツドロワーを開き、空いているところを右クリック、「ブループリントクラス」を選択します。

ウィンドウが出てくるので、「アクタ」を選択します。

作成されたブループリントクラスに「BP_LaserTrap」と名前をつけ、ダブルクリックして開きます。

このままだと何もないので、作成したレーザーのエフェクトを追加します。
左上の「追加」ボタンを押し、「Niagara Particle System Component」を選択します。

追加されたら「Laser」と名前を付け、右側の詳細タブにある「Niagara System Asset」をクリックし、「NS_Laser」を選択します。

レーザーが追加できたら、レーザーの当たり判定を作成していきます。
先ほどと同様に「追加」ボタンを押し、今度は「Box Collision」を選択します。

追加されたら、「LaserCollision」と名前をつけます。
この箱の形がレーザーの当たり判定になるので、レーザーに合わせて変形させます。
右側の詳細タブの「位置」を「300.0, 0.0, 0.0」に変更し、その下にある「Box Extent」を「300.0, 5.0, 5.0」にします。

大きさが調整できたら、当たり判定の処理を作っていきます。
詳細タブを下にスクロールして、「On Component Begin Overlap」の横にある✙ボタンをクリックします。

画像のようなノードが出てくるので、「Other Actor」の青い丸をドラッグして「Cast To BP_ThirdPersonCharacter」ノードを追加します。
左の赤いノードは、コリジョンに何かアクタが触れたときに呼び出され、「Other Actor」ピンから触れたアクタの情報を取得することが出来ます。
「Cast To BP_ThirdPersonCharacter」はアクタをプレイヤーキャラクターかどうか判定するために使います。

追加したノードをピンで繋げ、「Cast To BP_ThirdPersonCharacter」ノードのピンをドラッグし、「Print String」ノードを追加します。

追加したら、「In String」の部分に好みのテキストを入力します。

これでレーザーに触れたらテキストが出てくるようになりました。
・トラップを配置してみよう
作成した「BP_LaserTrap」アクタを、ドラッグ&ドロップでレベルに配置してみましょう。
置いた状態だと地面に埋まっているので、青い矢印を掴んで位置を少し調整します。
ここまで出来たら、プレイして確認してみましょう!

動画のように、プレイヤーが触れたときに左上にテキストが表示されたら成功です!
複数配置して、位置や角度を調整してみましょう。
レベルエディター上の右上の方にある、回転ツールを選択すると、選択しているアクタを回転することができます。

好きなように配置して完成です!
・応用編
もっと出来るという方は、プレイヤーが触れたら倒れてリスタートする機能を追加してみましょう!
先ほど作成したノードにつなげて、以下のようにしてみましょう!

よりゲームっぽくなりました!
今回はレーザーを作成して当たり判定をとりましたが、他の見た目にしてみたり、機能をさらに追加したりと、
様々なところで多用するので、ぜひ活用してみてください!