【UE5】マテリアルを使用して、メッシュを光らせる

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

前回の記事では、[ブループリントを使用して、メッシュを回転させる方法](https://qiita.com/Aichi_Lover/items/94427a8b9338783abd7c "【UE5】ブループリントを使用して、メッシュを回転させる")について記載しました。

今回も引き続きUE5(Unreal Engine 5)の入門的な内容ですが、
**マテリアルを利用して、メッシュを光らせる方法**について記事にしたいと思います！

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

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

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

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

# 2.用語の説明
## マテリアルとは

> マテリアルとは3Dモデルの外観を決定するものです。
> 例えば、地面の草とか、木とか、キャラの見た目とかそういったものです。

https://zenn.dev/daichi_gamedev/books/unreal-engine-5/viewer/material-tutorial

## メッシュとは

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

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

# 3.マテリアルを作成する
では、早速設定していきましょう♪
まずは、メッシュの見た目を定義するマテリアルを作成します。

3.1.前回と同じく、「ゲーム > サードパーソン」のサンプルプロジェクトを使用します。
 
|![010_プロジェクトの初期設定.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/79bbfc79-fc94-0df8-f649-acbdd23c757b.png)|
|:--|

3.2.プロジェクトを開き、画面左下の「コンテンツドロワー」を選択します。

|![005_コンテンツドロワーを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/73dd5b3a-7fa3-f7a4-49ac-74bfc03e15b1.png)|
|:--|

3.3.任意のフォルダを開き、右クリックをし、「マテリアル」を選択します。

|![010_マテリアルを作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/b40b8a1d-922c-af41-d168-5db659a09b71.png)|
|:--|

3.4.マテリアルが作成されるので、任意の名前を付け、ダブルクリックします。

|![020_作成したマテリアルを選択.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/367e2e44-a874-d581-46b8-349121d8ff39.png)|
|:--|

3.5.マテリアルの編集画面が開きます。

|![030_エディタが開く.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/799923d5-f19e-167b-160f-94d4f139bebb.png)|
|:--|

3.6.「エミシップカラー」を選択し、検索欄に「multi」と入力し、「Multiply」を選択します。

:::note info
エミッシブカラーにより、メッシュの光り方を定義することができます。
:::

|![035_Multiflyの作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/305915f8-633b-0e0f-2ae3-0468064a8e05.png)|
|:--|

3.7.Multiplyの「A」を選択し、手順3.6と同様にして「Constant」を選択します。

|![036_Constantの作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/3884c6a8-ac4f-6461-7431-dc736df45168.png)|
|:--|

3.8.Multiplyの「B」を選択し、手順3.6と同様にして「Constant3Vector」を選択します。

|![037_Constant3Vectorの作成.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/5e6eaaed-4e70-14bb-22ed-5173456bada3.png)|
|:--|

3.9.作成されたConstant3Vectorブロックをダブルクリックします。

|![040_エミッシブカラーを設定_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/4bcaf764-dc00-62cb-4215-c61f772e8c8f.png)|
|:--|

3.10.カラーパレットをクリック、もしくは右下のHexを入力します。

:::note info
メッシュを何色に光らせるのか、という設定となります。
画像では「目に優しい緑」であるHex値「#3CB371」の色を設定しています。
:::

|![050_色の設定_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/712b22ee-bc86-f68f-0849-9dc2842c01b4.png)|
|:--|

3.11.ConstantブロックのValueを設定します。

:::note
メッシュをどのくらいの強さで光らせるのか、という設定となります。
:::

■参考1　Value=1の時
|![060_Constantの値_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/f72a05dd-5812-6076-1626-9482136c18af.png)|
|:--|

■参考2　Value=10の時

|![070_Constantの値_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/88beab66-b6a4-c410-e88c-67715fff50f8.png)|
|:--|

■参考3　Value=100の時

|![080_Constantの値_3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/46fed7d9-d0ce-a337-4f24-ba872c48f95d.png)|
|:--|

■参考4　Value=1000の時

|![080_Constantの値_4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/3dfbda74-000b-a632-e672-2f338fb81cb3.png)|
|:--|

:::note info
以降の画面キャプチャは、Value=100を設定した場合のものとなります。
:::

3.12.画面左上の「保存」を選択します。

|![090_保存.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/f61bd04c-ce1e-9752-5569-322327f792cc.png)|
|:--|

# 4.メッシュにマテリアルを適用する
3章では、マテリアルを作成したので、いよいよメッシュにマテリアルを適用します！

4.1.設定前の状態となります。

|![100_反映前.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/572df4dd-1409-24b2-7124-82069957aba2.png)|
|:--|

4.2.作成したマテリアルをドラッグし、メッシュの上でドロップすることで、マテリアルが適用されます。

|![110_反映後.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/e1703435-20a0-d65a-2052-5069d5eda48a.png)|
|:--|

4.3.デモプレイの様子は以下となります。

|![120_デモプレイ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/8a24d75d-947f-c7c4-e4b4-7efe3b5702dc.gif)|
|:--|

4.4.ちなみに、前回使用したLichも光らせることができます。

|![200_Lichも光る.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1372071/2046788f-a2a7-0f7c-68fa-4684a4e80083.png)|
|:--|

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

メッシュを光らせる方法ということで、今回の内容を利用して、
色々なものを光らせることができそうと感じました！

マテリアルの設定がGUIだったので、想像よりも簡単でした。

次回は「Lumen」という機能について書いてみたいと思います♪
(:3_ヽ)_

### 次の記事、投稿しました♪
https://qiita.com/Aichi_Lover/items/f066883995273157bbf3