【Unreal Engine5】マリオのコインっぽいものを作る

フューチャーアーキテクトの関根正大です。
[フューチャー Advent Calendar 2023の18日目（シーズン2）](https://qiita.com/advent-calendar/2023/future)になります。

今回はスーパーマリオ風のコインを簡易的に実装してみます。
コインは常時回転しており、コインに触れるとお馴染みの音が鳴り、少しコインが上昇してから消えるように実装します。

（以下今回の成果物GIF）
![gif_はじめに.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/252aca40-a76c-6f8e-4b68-93c84e359e7c.gif)

# 想定読者
初心者の方を想定しています。
コインに触れた際に、どうやって音を鳴らすのかを知りたい、という方に良いと思います。

# Quixel Bridgeから金色のマテリアルを入手する

ThirdPersonCharacterでプロジェクトの立ち上げを行なってください。（スターターコンテンツ等のチェックは入れていなくても問題ありません。）
プロジェクトの立ち上げ、新規レベルの作成までは行なっているものとします。

まず最初にコインの金色をQuixel Bridgeから追加していこうと思います。
スターターコンテンツの中にも金色のマテリアルはありますが、せっかくなのでQuixel Bridgeの見方も紹介しようと思います。

Quixel Bridgeは高品質な3Dモデルを無料で取得できるアセット管理ツールになります。
実物の物体を3Dスキャンして作成されたアセットが大量にあります。
詳しくは以下をご参照下さい。


https://www.unrealengine.com/ja/bridge

Quixel Bridgeは`ウィンドウ`から`Quixel Bridge`で開くことが出来ます。

![スクリーンショット 2023-12-16 085140_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/85ef2057-11e2-254f-4516-75e8722fbea8.jpeg)

今回は以下の`Gold(AU)`を使用します。
以下のアセットIDを検索窓に入力すると出てきます。
`AssetID` : `schvfgwp`

出てきたら右下の`Download`を押します。ダウンロードが完了したらその右にある`Add`を押します。
![スクリーンショット 2023-12-16 085425_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/09570a13-b21c-ac63-7a18-3a1b3e708707.jpeg)

そうするとコンテンツブラウザの中に`Megascans`という新しいフォルダが作成され、その中に金色のマテリアルが追加されます。

![スクリーンショット 2023-12-16 085453_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/32533ca4-488f-f58a-1dbe-d3981b278dfe.jpeg)

# コインの実体を作る

そしたら、最初にコインを作成します。
コンテンツブラウザの`コンテンツ`フォルダ直下に新しく`MyStuff`というフォルダを作成します。
`MyStuff`フォルダを開き、右クリックを押し、`ブループリントクラス`を押します。

![スクリーンショット 2023-12-16 085534_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/31c8e408-b4f6-1ccd-0cba-e312265d1632.jpeg)

親クラスの選択画面が表示されるので、`Actor`を選択します。

![スクリーンショット 2023-12-16 085545_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/dc09f458-881f-06bf-429b-a08128d5a52a.jpeg)

そうするとブループリントが作成されます。
名前は`BP_Coin`としておきます。

![スクリーンショット 2023-12-16 085610_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/65c2b262-45f5-6fe9-cbb7-565d26fd4ba5.jpeg)

そしたら`BP_Coin`を開きます。
まず最初にコインの実体を作成していきましょう。
コンポーネントの`追加`を押し、`シリンダー`を選択します。

![スクリーンショット 2023-12-16 085648_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/b8752bfb-05ca-9a09-ec44-9d45206cdad1.jpeg)

ギズモ（ビューポート中央にある矢印）を使用したり、詳細パネルの`トランスフォーム`を使用して、コインっぽい形に変えます。
形状はなんでも問題ないのでお好きな形にしてください。（`トランスフォーム`の値を画像右のように揃えると同じものが作成できます。）

![スクリーンショット 2023-12-16 090347_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/44d26165-ed07-f5ec-69e0-5030797d628c.jpeg)

次に先ほどQuixel Bridgeからダウンロードしてきたマテリアルを適応します。
詳細パネルの`マテリアル`を選択し、検索窓に`2k`と入力すると先ほどのマテリアルが表示されます。（ダウンロードする品質によって変わります）
こちらをクリックします。

![スクリーンショット 2023-12-16 090426_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/f7bf4d10-d04c-3bb0-d404-e068c227002b.jpeg)

するとコインの色が金色に変更されます。

![スクリーンショット 2023-12-16 090446_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/57f53241-5523-1fc2-24cb-40b87e996d06.jpeg)

続いてコインを回転させる処理を追加していきます。
ブループリントでも実装が可能ですが、今回は`Rotating Movement`というコンポーネントを追加します。
コンポーネントの`追加`から`Rotating Movement`を選択します。
今回は追加するだけで、特に設定をする必要はありません。
これを追加するだけでコインが回転するようになります。

![スクリーンショット 2023-12-16 090459_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/3b158f90-3b61-c0c8-7f03-46f873c69795.jpeg)

レベル上に`BP_Coin`を配置し、実行してみると以下のように回転します。

![gif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/46f54f5d-35e7-7b42-8ce1-6c3e97a4c066.gif)

しかし今のままだとコインに当たり判定があります。
コインなのですり抜けられるように設定を変更します。
`BP_Coin`の詳細パネルの検索窓に`collision`と検索します。
コリジョンプリセットがデフォルトでは`BlockAllDynamic`になっているので、`OverlapAllDynamic`に変更します。

コリジョンについては公式ドキュメントに丁寧に説明が書いてあります。

https://docs.unrealengine.com/4.27/ja/InteractiveExperiences/Physics/Collision/Overview/

![スクリーンショット 2023-12-16 091213_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/835631ae-8165-657a-6497-4f2bc4b67558.jpeg)

# キャラクターが触れると音が鳴るようにする

これでコインの実体は完成しました！
これからブループリントを作成し、キャラクターがコインに触れたら音が鳴るように実装していきます！


まず最初にSEをインポートしていきます。
今回は以下のサイトの音を使用しました。（ニコニコ動画のアカウントが必要になります）
今回はこちらのSEを使用しますが、なんでも構いません。

https://commons.nicovideo.jp/works/nc106374

ただし、mp3は取り込みができないので、WAVに変換する必要があります。
ソフト等でmp3からWAVに変換を行なってください。

インポートする際はコンテンツブラウザにドラッグアンドドロップするだけでインポートが可能です。
名前はわかりやすいように`CoinGetSound`としておきます。

![スクリーンショット 2023-12-16 091900_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/74d3047c-8989-a471-6d20-44c344ed70f2.jpeg)

それではブループリントを作成していきます。
今回は`Event Actor BeginOverlap`しか使用しないため、それ以外のノードは削除しても問題ありません。

![スクリーンショット 2023-12-16 091520_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/23c074c7-cf17-2439-004a-4eae7a5c795c.jpeg)

まず最初に`Cast To BP_ThirdPersonCharacter`を設置します。
`BP_Coin`に何がOverlapしたら、処理を続けるか、という実装をするためです。
これがないと、例えば敵キャラがコインにOverlapした際、移動する床がコインにOverlapしてしまう時もコインが消えてしまいます。
今回は操作しているキャラクター（ThirdPersonCharacter）がコインにOverlapした時だけ動作するようにしていきます。

![スクリーンショット 2023-12-16 092914_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/787e15b7-8e8e-88ac-b5d2-c79e2253bb49.jpeg)

それ以外のノードは以下のように実装します。
`Spawn Sound at Location`で指定した場所から音を鳴らすことができます。
`Sound`に先ほどインポートした`CoinGetSound`を選択しておきます。

`Get Actor Location`で`self`の座標、つまり、レベルに設置された`BP_Coin`自身の座標を取得します。

![スクリーンショット 2023-12-16 093004_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/815437fc-b242-98ac-be02-3d45ceaae80c.jpeg)

これで`ThridPersonCharacter`が`BP_Coin`に触れたら、`BP_Coin`が設置されていた場所から音が鳴るようになります。

![スクリーンショット 2023-12-16 093104_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/3cf19f75-7635-2c39-181d-acb7bbb0e4e7.jpeg)

しかしこのままだと音が鳴るだけでコインは消えないので、最後に`Destroy Actor`を設置します。
これでコインを取得した際に音がなる、という処理は完成します。

![スクリーンショット 2023-12-16 093205_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/c897f9fe-bfc1-947d-3f7c-6e6f6fd12b52.jpeg)

# タイムラインを使って、コイン取得時にコインを上昇させる
続いて、コインを取得したら、コインを上方向に少し上昇させてから、消えるというふうに処理を追加していこうと思います。
`Destroy Actor`は一旦削除しておき、`Spawn Sound at Location`から`||`と検索し、`Add Timeline`を選択します。
![スクリーンショット 2023-12-16 093246_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/90630536-2a7e-e281-feef-0623341a656f.jpeg)

タイムラインノードを追加できたら、そのままタイムラインノードをダブルクリックします。
上部の`+トラック`から`ベクタートラックを追加`を選択します。

![スクリーンショット 2023-12-16 093311_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/07f06a87-040c-824e-c086-132944e4001d.jpeg)

今回は上方向にしか動かさないので、X, Yは鍵マークを押してロックをかけておきましょう。
![スクリーンショット 2023-12-16 093321_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/788b9512-18e5-7cad-5ae2-d0e6f6430b20.jpeg)

そうしましたら、以下のようにキーの設定をしていきます。
右クリックを押すと`Zにキーを追加`と表示されるのでこれを選択します。
一つは時間を`0.0`、値を`0.0`とします。
もう一つは時間を`0.5`、値を`3.0`とします。
値に関しては設定したコインの大きさによって変わるので、そこは調整して下さい。

![スクリーンショット 2023-12-16 093359_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/cbfa6f3d-5c12-2961-a70e-0be4211b7d1c.jpeg)

イベントグラフに戻り、以下のようにノードを設置していきます。
先ほどのタイムラインで設定した値を、コインの座標に適応するためにタイムラインノードの`Update`と`Add Actor World Offset`を繋げます。
これでコインが上に上昇するようになります。

そして、コインの上昇が完了したら、コインは消えて欲しいので、タイムラインノードの`Finished`から`Destroy Actor`を設置します。

![スクリーンショット 2023-12-16 093513_R.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/509038cb-f04b-0db0-457a-df42984cd4b0.jpeg)

これで今回の処理は完了になります！！
コインをたくさん設置してみて、爽快感を味わってみてください。

![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3549878/3caa0082-8080-6679-1607-6edbaa46d1da.gif)

# 終わりに
ただコインにOverlapしたら、Destroy Actorを実行する、だけでもコインを取得している感は出ますが、
音や動きがあるだけで全く変わってきます。
これにエフェクトを追加するとさらにゲームっぽくなると思います。
実装方法は今回使用した`Spawn Sound at Location`とあまり変わりはありません。

もし興味がある方は調べて実装してみてください。

最後までありがとうございました！