執筆バージョン: Unreal Engine 5.0
|
※今回の記事はUE5で解説していますが、UE4でも同様の手順で作成可能です!
■こんにちは!
いきなりですがトリガーボックス、使っていますか?
今回は用意しておくと意外と便利な、トリガーボックスのデバッグ表示を切り替える仕組みをご紹介いたします。
トリガーボックスの範囲を見るだけならShow Collisionコマンドでもできますが、非常にわかりにくいですね。
今回ご紹介する仕組みを導入するとこうなります!

■トリガーボックスのBlueprint作成
まずはコンテンツドロワー(旧コンテンツブラウザー)からTriggerBoxを継承したBlueprintを作成します。
名前はBP_TriggerBox_Baseにします。

次に作成したBlueprint(以下BP)を開いて、ComponentsにCubeを追加します。名前はDebugCubeMeshにしておきます。
コンポーネントを追加したらCubeのコリジョンをNoCollisionにしておきましょう
また、ここで追加するコンポーネントはデバッグ用なので、Is Editor Onlyにチェックを入れておくとパッケージから除外されるようになります。

TriggerBoxはビューポートからScaleを変更した際に、アクターのScaleはそのままでBoxExtent(トリガーボックスの判定部分の大きさ)が変化する仕様になっています。
このままだとDebugCubeMeshの大きさが実際の判定と一致しなくなってしまうので、「自動で調節する機能」を追加します。

BP_TriggerBox_BaseのConstructionScriptを開いて、以下の画像のようにBPを組みます。
これで表示されているBoxと実際の判定が一致するようになります。

■トリガーボックスの見た目を半透明にする
見た目が真っ白の不透明のままだと確認する際によくわからないので、専用の半透明を用意しましょう!
コンテンツドロワーからMaterialを追加します。名前はM_DebugTranslucent_Redとします。
追加したマテリアルを開き、DetailsタブからBlendModeをTranslucentに変更します。
次にBaseColorにConstant3VectorをつないでR=1、G=0、B=0を指定します。
OpacityにConstantノードをつなぎ、値は0.3を指定します。(ほど良い濃さになればいいので値はある程度任意で大丈夫です。)


これでマテリアルが作成できたので、先ほどのBP_TriggerBox_Baseを開き、DebugCubeMeshのマテリアルとして指定しましょう

■表示の切り替え機能を実装
エディタ上での見た目は変わりましたが、このままではゲームをプレイした際は非表示のままです。
なので表示と非表示を切り替える仕組みを実装していきます!
まずはBP_TriggerBox_Baseに表示非表示が切り替わるイベントを用意します。
イベント名はHiddenDebugObjectにし、以下の画像のようにBPを組みます。

次にキー入力に応じて表示の切り替え機能を実行する部分をつくります。
今回はキー入力での制御でPlayerControllerを使うことにします。
コンテンツドロワーからPlayerControllerを継承してBlueprintを作成します。名前はBP_MyPlayerControllerとしておきます。
※BP_TriggerBox_Baseの時とほぼ同じなので画像は省きます。
BP_MyPlayerControllerを開いて、EventGraphに以下の画像のようにBPを組みます。
これで「キーボードの1」を押す度にレベルに置かれたBP_TriggerBox_Baseの表示が切り替わりる処理が書けました。

しかしこれではまだ切り替え機能がうごきません!!
先ほど作成したBP_MyPlayerControllerは作っただけで設定していないので、ゲームには使われていません!
ThirdPersonテンプレート側で用意されているBP_ThirdPersonGameModeを開き、PlayerControllerClassに先ほど作成したBP_MyPlayerControllerを指定します。


これですべての準備が整いました。
それでは動作を確認していきましょう。
BP_TriggerBox_Baseをレベルに配置してプレイをしましょう!
1キーを押す度に表示が切り替わるはずです。


■運用方法について
では実際の運用方法について解説します。
まず、BP_TriggerBox_Baseにはトリガーボックスとしての処理等を書きません。
以外の機能は持たせず、レベルへの配置も絶対にしません。
理由としてはこの「デバッグ表示のオンオフ」という機能を様々なトリガーボックスで使い回したいからです。
使う回すためには共通の処理だけを持たせて、共通でない機能は持たせないことが重要となります。
どうやって様々なトリガーボックスを作るかといいますと、BP_TriggerBox_Baseを継承したBPを作成します。
こうして継承して作成したBPに実際のトリガーボックスとしての機能を持たせ、レベルに配置します。
違う機能を持つトリガーボックスを作りたいと思ったらその都度BP_TriggerBox_Baseを継承したBPを作成してください。


