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

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

以前の記事で[マテリアルを使用して、メッシュを光らせる方法](https://qiita.com/Aichi_Lover/items/5d590a6a788f708168fa "【UE5】マテリアルを使用して、メッシュを光らせる")について記載しました。

今回はほんの少しだけ応用的な内容で、
**キャラクタが接触した時にメッシュを光らせるブループリントを作成してみたいと思います！**

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

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

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

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

# 2.用語の説明
## ブループリントとは

私も初心者なので厳密には違う可能性がありますが、
**ブループリントとは、UE5の機能の1つで、GUIでメッシュの動きを定義できる機能のことです。**

コーディングが不要なので便利ですが、
数学的な計算処理をする場合は、C++でコーディングした方が処理が速いみたいです。

https://docs.unrealengine.com/4.27/ja/ProgrammingAndScripting/Blueprints/GettingStarted/

## メッシュとは

**メッシュとは、「3Dモデル」とほぼ同じ意味の言葉です。**
UE5を使用する際に配置するキャラクター、立方体、岩などはすべてメッシュとなります。

https://zenn.dev/daichi_gamedev/books/unreal-engine-tutorial/viewer/editor-word-3dmodel

# 3.動作イメージ
まず初めに、動作イメージを紹介したいと思います。
後述する手順を実施することで、以下の動画の様にキャラクタが接触した時にメッシュが光ります。

![001_Hitして緑色に点灯.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/59c40e45-3d44-e028-5662-ff8e5f30d123.gif)

# 4.ブループリントを作成する
では、早速設定していきましょう♪

4.1.今回も今までと同様に「ゲーム > サードパーソン」のサンプルプロジェクトを使用します。

|![010_プロジェクトの初期設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/79bbfc79-fc94-0df8-f649-acbdd23c757b.png)|
|:--|

4.2.画面左下の「コンテンツドロワー」を選択し、フォルダを移動し、操作するキャラクタのブループリント名を確認します。

:::note info
以下の画像では「All > コンテンツ > ThirdPerson > Blueprints」フォルダの
「BP_Third Person Charactor」を確認しています。
:::

|![005_ブループリント名を確認.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/7da8701a-8d6d-ce34-4382-b8df502e587f.png)|
|:--|

4.3.任意のフォルダで右クリックをし、「ブループリントクラス」を選択します。

|![010_ブループリントクラスを作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/87e48e05-b5c0-43ee-c020-5ad2e90d5293.png)|
|:--|

4.4.「Actor」を選択します。

|![020_Actorを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/5fe3e6e8-b1bf-91b0-6b5b-9927692ff05e.png)|
|:--|

4.5.作成したブループリントクラスを選択します。

|![030_作成したブループリントクラスを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/52c6d9bb-1b8a-b625-87fe-835df2616ba1.png)|
|:--|

4.6.画面左上の「追加」を選択し、「球」を選択します。

:::note info
今回は例として「球」を選択していますが、「キューブ」等を選択しても大丈夫です。
:::

|![040_球を選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/1e035514-c438-ac34-3e8b-34a54cf1c43c.png)|
|:--|

4.7.「イベントグラフ」タブを選択し、エディタ上で右クリックをし、「On Component Hit」を選択します。

:::note info
以降の画像すべてに言えることですが、手順4.6で選択した内容に応じて検索する単語を変えてください。

画像は「球」を選択した場合なので「hit sphere」で検索していますが、
「キューブ」を選択した場合は「hit cube」で検索してください。
:::

|![050_OnComponentを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/8599f895-06f4-c9a0-37cb-e94867bb3aff.png)|
|:--|

4.8.「On Component Hit」ブロックの三角マークを選択し、「Cast To （手順4.2で確認したキャラクタ名）」を選択します。

|![060_CastToBeを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/b8544a9d-08ea-9a76-59b6-7eaa58902aba.png)|
|:--|

4.9.「On Component Hit」ブロックの「Other Actor」と「Cast To ...」ブロックの「Object」を接続します。

|![070_接続.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/6772079c-4142-ad8a-9fc9-3975cb2fb9a3.png)|
|:--|

4.10.「Cast To ...」ブロックの三角マークを選択し、「Do Once」を選択しまsす。

|![080_DoOnceを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/fddf02d6-3b65-219f-c483-564dca5b8832.png)|
|:--|

4.11.「Do Once」ブロックの三角マークを選択し、「Set Material(手順4.2で選択したメッシュ名)」を選択します。

|![090_SetMaterialを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/2c8fa9f0-7a32-782a-3164-a1288bce5e12.png)|
|:--|

4.12.マテリアルを選択します。

|![100_マテリアルを選択する.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/35d13d88-539d-e6cd-569d-a8d6b62cd7db.png)|
|:--|

:::note info
上記画像ではマテリアルとして「Light3」を選択していますが、
マテリアルの設定は以下となります。

|![011_マテリアル設定_凡例.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/f6915586-8c38-f61f-aab5-f0798b219804.png)|
|:--|

|マテリアル名|Valueの値(=光の強さ)|色（Hex値）|
|---|:---:|---|
|Light3 | 30 |緑（#3CB371）|

:::

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

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

4.14.作成したブループリントをドラッグアンドドロップし、配置します。

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

4.15.以上で[3章の動作イメージ](#3動作イメージ) の様に、キャラクタが接触するとメッシュが光ります。

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

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

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

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

今回は一度光らせたら光り続けるブループリントで、
2回目以降の処理は不要なため、「Do Once」ブロックで一度だけ処理をするようにしています。

:::note info
お友達に「オンオフできないの？」とご指摘いただいたので、
改良したら再び記事にします・・・
:::

「Set Material」ブロックに到達すると、メッシュを光らせるためのマテリアルが設定され、
メッシュが光るようになります。

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

今までの記事では回転しているメッシュは回転したまま、
光るメッシュは常に光るという静的なものを紹介してきましたが、
今回はブループリントのマテリアルを組み合わせて、動的に動かすことができました！

次回も、何かしら記事にしたいと思います♪
(:3_ヽ)_