【UE5】ブループリントのHitイベント、Branchイベントを使用して、キャラクタが接触した時にライトをON・OFFにする

# 1.はじめに
どうも、ARIの名古屋支社に勤務している愛知県民こと、
新藏（にいくら）と申します♪
(/・ω・)/

[前回はキャラクタが接触した時にライトをONにするブループリントを作成しました。](https://qiita.com/Aichi_Lover/items/8a8ec236023d05a1d248 "【UE5】ブループリントのHitイベントを使用して、キャラクタが接触した時にライトをONにする")

しかし、ライトをONにする機能しか実施していなかったので、
お友達から「**ライトのON・OFFを切り替えられないのか？**」というありがたい指摘を受けました。

色々試してみて実現させることができましたので、
**今回はキャラクタが接触した時にライトをON・OFFにする方法**
について記事にしたいと思います！

UE5について勉強中の方や、興味がある方の参考になれば幸いです。
(*^^)v

---
ちなみに、12月は**ARIのアドベントカレンダ**もやっていますので、
もしよろしければ、こちらも応援お願いします♪

https://qiita.com/advent-calendar/2022/ari-group

https://qiita.com/advent-calendar/2022/aichi_lover_yomoyama

# 2.動作イメージ
まず初めに、動作イメージを紹介したいと思います。
後述する手順を実施することで、以下の動画の様に
**キャラクタが接触した時にライトのON・OFFが切り替わります。**

![010_ライトのオンオフ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/e24f2a1a-f36c-3539-9a5e-ce963a7cea1c.gif)

また、こちらも実装方法は後述しますが、
**ライトをOFFにする代わりにライトの色を変えることもできます。**

![020_ライトの色を変える.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/ef3d957e-5e75-fca2-5f38-75b9cb85db57.gif)

# 3.ブループリントの修正
では早速、ブループリントを修正していきましょう♪

3.1.[前回の記事](https://qiita.com/Aichi_Lover/items/8a8ec236023d05a1d248 "【UE5】ブループリントのHitイベントを使用して、キャラクタが接触した時にライトをONにする")で作成したブループリントを修正します。

|![200_全体像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/cacf885a-c4e5-2ad2-c892-f39c6ee19e91.png)|
|:--|

3.2.画面左の変数にて、「＋」を選択します。

|![030_変数の+を選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/ff140b71-aa63-5676-9a05-c224b900eb0d.png)|
|:--|

3.3.画面右の詳細にて、変数名を「Light_Is_Green」とし、型を「Boolean」とします。

|![040_名前と型を設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/0d317910-07c3-0470-9808-116ed9228f02.png)|
|:--|

3.4.「Do Once」ブロックの三角マークを選択し、「ブランチ」を選択します。

|![050_ブランチを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/852829b4-642a-9685-5f28-4831a6416bf5.png)|
|:--|

3.5.「Condition」を選択し、「Get Light Is Green」を選択します。

:::note info
「Get Light Is Green」は変数「Light_Is_Green」のゲッタとなります。
:::

|![060_ブランチの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/18ebbec6-c0dc-1a4f-72d5-b0c8f9cf8033.png)|
|:--|

3.6.「Set Material」ブロックを選択し、「Ctrl + C」を押し、「Ctrl + V」を押し、コピペします。

|![070_ブロックをコピペ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/eaa9360e-1038-24be-142b-0fe6d20cdc59.png)|
|:--|

3.7.「ブランチ」ブロックと「Sphere」ブロックを、コピーした「Set Material」ブロックに接続します。

|![080_接続を設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/0b6a800e-1e88-3606-b96d-5748123e4e1b.png)|
|:--|

3.8.**Trueに接続されている**「Set Material」ブロックにて、以下の設定をします。

■ライトをON・OFFにしたい場合は「なし」を選択します。

|![090_なしを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/bebfb610-5ecf-1808-76ad-7f5c6002df70.png)|
|:--|

■ライトの色を変えたい場合はライトの色を変えるマテリアルを選択します。

|![300_ライトの色を変える.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/26ce7041-6fd6-e327-c104-105ed166a68d.png)|
|:--|

:::note info
ライトの色を変えるマテリアルの作成方法は、以下の記事をご確認ください。
https://qiita.com/Aichi_Lover/items/5d590a6a788f708168fa
:::

3.9.それぞれの「Set Material」ブロックの三角マークを選択し、「Set Light Is Green」を選択します。

:::note info
「Set Light Is Green」は変数「Light_Is_Green」のセッタとなります。
:::

|![100_セッタを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/02219522-f96b-4a77-b831-f90c7f953416.png)|
|:--|

3.10.「Set Light Is Green」ブロックを選択し、True側はチェックなし、False側はチェックありとします。

|![110_セッタの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/beca02ae-1e82-352b-98db-ae8e3531f6c6.png)|
|:--|

3.11.「Set Light Is Green」ブロックの三角マークを選択し、「Delay」を選択します。

|![120_delayを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/575629f6-aecf-6ab7-eeae-98fa8e5c3615.png)|
|:--|

3.12.Durationの値（処理を停止する秒数）を設定します。

:::note info
瞬間的にブループリントが複数回実行されるのを防ぐための設定となります。
:::

|![130_delayの設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/9b678d2e-9f8b-f339-b2ec-25dbcfd9f514.png)|
|:--|

3.13.「Delay」ブロックと「Do Once」ブロックの「Reset」を接続します。

|![140_delayの接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/080be56f-666a-7de4-7424-baf013f78751.png)|
|:--|

3.14.画面上部にてコンパイルを選択し、保存を選択します。

|![110_コンパイルして保存.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/b9da9426-d373-1204-331c-26f64444e99f.png)|
|:--|

3.15.以上で設定は完了です。

手順3.8で設定した内容に応じて、[2章の動作イメージ](#2動作イメージ) の様に、
キャラクタが接触するとメッシュのON・OFFが切り替わる、もしくはメッシュの色が変わります。

:::note info
作成したブループリントがまだ配置されていない場合は、
ブループリントをドラッグアンドドロップし、配置します。

|![120_ドラッグアンドドロップ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/a4d6d1d1-2b34-249b-0fbc-4ce504d92424.png)|
|:--|
:::

# 4.補足：ブループリントの処理内容について

補足として、ブループリントでどのような処理をしているのかを記載します。
今回作成したブループリントの全体像は以下となります。

|![200_全体像.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/0ded4ad3-0322-11b1-c84b-1f32004098ff.png)|
|:--|

ここは前回と同じですが、「On Component Hit」ブロックと「Cast To ...」ブロックにて、
球とキャラクタが接触した時というトリガーを定義しています。

瞬間的に複数回ブループリントが走るのを防ぐため、「Do Once」ブロックで一度だけ処理をするようにしています。

**■1回目にキャラクタが接触した時の処理**
変数「Light_Is_Green」の値がFalseのため、
False側の「Set Material」ブロックにより、メッシュの色が緑色に変更されます。

その後、「Set Light Is Green」ブロックにより変数「Light_Is_Green」の値がTrueとなり、
「Delay」ブロックにより数秒間処理が停止されます。

最後に、「Do Once」ブロックに接続し、次にキャラクタが接触した時にブループリントが動くようになります。

**■2回目にキャラクタが接触した時の処理**
変数「Light_Is_Green」の値がTrueのため、
True側の「Set Material」ブロックにより、メッシュの色がなくなる、もしくは別の色に変更されます。

その後、「Set Light Is Green」ブロックにより変数「Light_Is_Green」の値がFalseとなり、
「Delay」ブロックにより数秒間処理が停止されます。

最後に、「Do Once」ブロックに接続し、次にキャラクタが接触した時にブループリントが動くようになります。

:::note info
3回目以降は同様にして、1回目、2回目と同じ処理が交互に繰り返されます。
:::

# 5.おわりに
ここまで読んで下さり、ありがとうございます！！！
(^^)

今回はお友達からのありがたい助言でブループリントを修正してみました。
何回も動くメッシュが作れて楽しかったです♪

記事を書いている段階で、「数秒間処理を停止して終了」というブロックがあれば
「Delay」ブロックと「Do Once」ブロックを使うよりエレガントにフローが組める気がしてきたので、
実際にあるかどうか調べてみます！

次回も気の向くままに記事を書いていくので、よろしくお願いします♪
(:3_ヽ)_