4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Last updated at Posted at 2023-12-17

フューチャーアーキテクトの関根正大です。
フューチャー Advent Calendar 2023の18日目(シーズン2)になります。

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

(以下今回の成果物GIF)
gif_はじめに.gif

想定読者

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

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

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

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

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

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

スクリーンショット 2023-12-16 085140_R.jpg

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

出てきたら右下のDownloadを押します。ダウンロードが完了したらその右にあるAddを押します。
スクリーンショット 2023-12-16 085425_R.jpg

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

スクリーンショット 2023-12-16 085453_R.jpg

コインの実体を作る

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

スクリーンショット 2023-12-16 085534_R.jpg

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

スクリーンショット 2023-12-16 085545_R.jpg

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

スクリーンショット 2023-12-16 085610_R.jpg

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

スクリーンショット 2023-12-16 085648_R.jpg

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

スクリーンショット 2023-12-16 090347_R.jpg

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

スクリーンショット 2023-12-16 090426_R.jpg

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

スクリーンショット 2023-12-16 090446_R.jpg

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

スクリーンショット 2023-12-16 090459_R.jpg

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

gif2.gif

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

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

スクリーンショット 2023-12-16 091213_R.jpg

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

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

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

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

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

スクリーンショット 2023-12-16 091900_R.jpg

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

スクリーンショット 2023-12-16 091520_R.jpg

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

スクリーンショット 2023-12-16 092914_R.jpg

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

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

スクリーンショット 2023-12-16 093004_R.jpg

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

スクリーンショット 2023-12-16 093104_R.jpg

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

スクリーンショット 2023-12-16 093205_R.jpg

タイムラインを使って、コイン取得時にコインを上昇させる

続いて、コインを取得したら、コインを上方向に少し上昇させてから、消えるというふうに処理を追加していこうと思います。
Destroy Actorは一旦削除しておき、Spawn Sound at Locationから||と検索し、Add Timelineを選択します。
スクリーンショット 2023-12-16 093246_R.jpg

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

スクリーンショット 2023-12-16 093311_R.jpg

今回は上方向にしか動かさないので、X, Yは鍵マークを押してロックをかけておきましょう。
スクリーンショット 2023-12-16 093321_R.jpg

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

スクリーンショット 2023-12-16 093359_R.jpg

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

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

スクリーンショット 2023-12-16 093513_R.jpg

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

タイトルなし.gif

終わりに

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

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

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

4
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?