Unreal Engine5で簡単な色塗りゲームを作ろう！

はじめに

関根です。
Unreal Engine5を使って簡単な「色塗りゲーム」を作ってみます。

次の画像のような Blueprintを作成しながら、キャラクターが歩いた箇所のブロックの色を変える、2秒時間が経過したら元の色に戻す、といった簡易的なものを作成します。

この記事で作成するもの

想定読者

想定している読者は、Unreal Engine5をインストールした直後の初学者及び、Unreal Engine5の具体的な使い方は知らないけれども、何か手を動かしながら作ってみたい人向けに記事を作成しました。

それでは早速始めていこうと思います。

新規プロジェクトを立ち上げる。

それではまず新規プロジェクトを作成しましょう。

EpicGameLauncherのライブラリ、Engineバージョンから、Unreal Engine5を起動します。

今回の記事では5.3.1のバージョンを使用します。
(右上の起動ボタンからでもUnreal Engineの起動は行えます。)

Engineを起動すると、プロジェクトを設定する画面が出てきます。

左のゲームを選択し、その中のサードパーソンを選択します。

そして今回はGameProjectというフォルダの中にMyProjectというプロジェクトを作成します。

それ以外は変更せずに作成ボタンを押します。

しららく待つとこちらのような画面になります。

今回はサードパーソンというパックを選択したため、サードパーソンゲーム(TPS)で使われる最低限のロジック(キャラクターを動かす、カメラ移動など)はすでにある状態でプロジェクトがスタートしています。

こちらの画面はデモマップなので、少しこちらでゲームを動かしてみましょう。

画面上部の緑色の再生ボタンもしくはAlt+Pでゲームを開始することができます。

するとキャラクターが出現し、ゲームをプレイすることができるようになります。

WASDで移動、Spaceキーでジャンプ、マウスでカメラ操作が行えます。

ゲームを終了する際は停止ボタン、もしくはescキーを押すことで終了する事が出来ます。
(もしキャラクターの操作が出来ない場合は、ゲーム画面をクリックしてみてください。)

新しいマップを作成する、光源の設置

今回はこちらのデモマップは使用せず、一からマップを作成しようと思います。

画面上部のファイルから新規レベルを選択します。

何もないマップからゲームを作成していくため、空のレベルを選択します。

そうすると新規レベル(新しいマップ)が立ち上がります。

しかし文字通り空のレベルのため、光源も何もありません。そのため画面が真っ黒になってしまっています。

そこでまずは光源を設置しようと思います。ウィンドウの環境ライトミキサーを選択します。

画面が出てきたら、スカイライトを作成、大気ライトを作成、Sky Atmosphereを作成、ボリュメトリッククラウドを作成を全てクリックします。

そうすると光源の他に空や雲がマップに作成されます。

細かい設定等も行えますが、今回はこちらで進めていきます。

ここまで行えたら、一度レベル(マップ)の保存をします。Ctrl+shift+Sですべてを保存します。

するとどこに保存するのかを問われるため、今回はコンテンツ直下に右クリックをして新たにMyStuffというフォルダを作成します。

作成したフォルダをダブルクリックし、その中にColoringMapという名前で現在のレベルを保存します。

ステージの床を作ろう！

続いて床の配置をしていきます。

今回はキャラクターが歩いたブロックの色を変えたいので、複数ブロックを使用して床を作成していきます。

ウィンドウからアクタを配置を選択します。

この画面からレベル上にオブジェクトを配置していくことができます。

この中からキューブを選択し、ビューポート(画面中央の画面)にドラッグアンドドロップします。

すると白いキューブが配置されました。

今回はこのキューブに「操作キャラクターが上を歩いたら、色を変える」というロジックを入れたいです。

そのロジックを入れるためには、Blueprintというものを作成していく必要があります。

配置したキューブのBlueprintを作成するために、右下の詳細にある+追加ボタンの右のアイコンをクリックします。

ブループリント名をBP_Cubeに変更し、パスを先ほど作成したMyStuffに変更します。
ここまで完了したら選択を押します。

するとBP_Cubeの編集画面が表示されます。

すぐにBluePrintを書いていきたいところですが、まずはCollision(コリジョン)と呼ばれる当たり判定をCubeに追加していきます。

「CubeのこのCollisionにキャラクターが当たったら、色を変える」というロジックを作成するために必要となります。

それでは画面左のコンポーネントの下にある+追加ボタンをクリックし、検索欄にboxと入力します。するとbox collisionが出てくるので、そちらをクリックします。そしてこのbox Collisionの名前をTriggerに変更します。F2か、右クリックをおして名前変更で名称を変更できます。

これでbox collisionがTriggerという名前で生成されました。

そうしたらこのTriggerの大きさ、位置を調整していきます。

画面右の詳細画面上部にあるトランスフォームで位置を調整できます。

今回は

• 位置をそれぞれ(x, y, z) = (0, 0, 50)
• 拡大縮小をそれぞれ(x, y, z) = (1.2, 1.2, 0.2)
  に変更します。

これでキューブの上部にTriggerが表示されるようになります。

ここまで完了したら画面上部のタブから一度ColoringMapに戻ります。

そうすると先ほど作成したTriggerが、先ほど配置したキューブに反映されているのが確認できます。

そうしましたら、こちらのキューブの位置を調整し、複製をして床を作成していきます。
詳細のトランスフォームを全て0に設定します。

そしたらこちらを複製していきます。Altを押しながら、ギズモ(3方向に延びている矢印)をドラッグします。
(ギズモの中央ではなく、矢印を選択するとやりやすいです。)

これでキューブを2つに複製することができました。

同様の作業を繰り返して床を作成します。

一つずつ複製していると大変なため、Controllを押しながら画面上のキューブを複数選択した状態で、Altキーを使って同時に複数複製していきます。
数が多くなったら、画面右上のアウトライナーでshiftを使って複数選択すると効率的に行えます。

これで床は完成しました。

しかしゲームスタート地点を設定していません。そのためこのまま再生ボタンをおすとキャラクターがそのまま落下してしまいます。アクタを配置からPlayer Startを選択しビューポート(中央の画面)にドラッグアンドドロップします。

そして詳細のトランスフォームを変更します。
位置を(x, y, z) = (0, 0, 150)
回転を(x, y, z) = (0, 0, -135)
にします。

ここまできたらAlt+P(もしくは上部の再生ボタン)を押して、ゲームを再生します。設置したPlayer Startの位置、向きにキャラクターが出現し、WASDで移動、Spaceでジャンプ、マウスでカメラ操作が行えるようになります。

色が変わる床に修正しよう！(Blueprintの作成)

それでは実際にTriggerに触れたら、キューブのマテリアル(色)を変えるようなBlueprintを組んでみましょう。
BP_Cubeを再度開きます。

BP_Cubeを既に閉じてしまっている場合は

• Ctrl+Spaceでコンテンツドロワーを開き、MyStruffからBP_Cubeを選択
• ビューポートの任意のキューブを選択して、Ctrl+E
  のどちらかの手順で開く事ができます。

こちらのキューブにはまだ何もマテリアルを設定していないため、マテリアルを設定しましょう。
詳細のマテリアルからM_Basic_Floorを選択します。
(マテリアルはどれでも良いので好きな物を選んでください。)

するとキューブにマテリアルが適用されます。

ColoringMapに戻ってみると、すべてのキューブにマテリアルが適用されていることがわかります。

それでは再度BP_Cubeに戻ります。
画面上部のイベントグラフを選択します。

こちらの画面でBlueprintを作成していきます。

今回はキャラクターがCubeの上を通過したら、マテリアルを変更したいので、Event ActorBeginOverlapを使用します。(overlapは物体同氏が重なったときに発火するものです。詳しくはoverlapに関する公式ドキュメントを参照ください)

Event ActorBeginOverlapの右矢印をドラッグします。

するとどのBlueprintをEvent ActorBeginOverlapと接続したいのかを聞かれます。

今回はoverlapしたらマテリアルを変更するようにしたいのでSet Material(StaticMeshComponent)を検索し、クリックします。検索しても出てこない場合は左上のコンポーネントでStatic Mesh Component(StaticMeshComponent)をクリックするか、検索画面の右上にある状況に合わせた表示のチェックを外します。

検索するとSet Material(Trigger)などが出てくることもあります。
しかし今回overlapした後に変更したいのはキューブ自体のマテリアルです。
そのため、こちらは選択せずにset Material(StaticMeshComponent)を選択するようにしてください。

配置をするとこちらのようになります。
ドラッグするとBlueprintの位置を変更できるので見やすい位置に配置をしてください。

Set Materialを設置したら、どのマテリアルに変更したいのかを決める必要があります。
Set Material内のMaterialから今回はM_Ground_Grassを選択します。

これで

1. キャラクターがCubeのTriggerと重なったら(Event ActorBeginOverlap)
2. Static Mesh ComponentのマテリアルをM_Ground_Grassに変更する(Set Material)

というBlueprintを作成することができました！

ここまで出来たら再生ボタンを押すもしくはAlt+Pでゲームを再生してみましょう。
キャラクターが歩いた所のマテリアルが変わっていくようになっていることを確認します。

2秒経過したら元の色に戻そう

練習として2秒経過したらマテリアルを元に戻す、というBlueprintも作成してみましょう。

今回はoverlapが終了したら、つまりキャラクターがキューブの上から離れたら、元のマテリアルに戻す、といったBlueprintを作成しようと思います。
そのためには新たにイベントを追加する必要があります。

画面左下のマイブループリントの関数にあるオーバーライドからActorEndOverlapを選択します。

すると画面にEvent ActorEndOverlapが追加されます。

そうしたらEvent ActorEndOverlapの右矢印をドラッグします。
前述のとおり、このEvent ActorEndOverlapが呼び出されるのはキャラクターがキューブの上から離れたとき、になります。
離れてから2秒後にマテリアルを変更したいため、任意秒処理を遅らせる事ができるDelayを選択します。

Delayの設置が出来たら、Durationを2.0に設定し、2秒間遅らせるようにします。

その後の処理は先ほどと同じになります。
Delayの右矢印をドラッグし、Set Material(Static Mesh Component)を選択します。
今回のMaterialはこちらで設定したM_Basic_Floorを選択します。

これで今回作成するBlueprintは以上になります。
Alt+Pでゲームを再生すると、歩いた箇所が2秒後に元の色に戻るようになりました。
これで簡易的な色塗りゲームが完成しました。

終わりに

この記事では以下の事を行いました。

• プロジェクトの立ち上げ方
• レベルをどのように作るのか
• 空などの設置方法
• アクタ(オブジェクト)の配置方法、位置の変え方など
• Blueprintを使った色塗りゲームのロジック開発

かなり初歩的な所ではありますが、UnrealEngineの基本的な所に触れることができたのではないかと思います。

ここから自分で拡張してみても面白いかもしれません。

• ステージが狭いのでもう少し広げてみる
• ジャンプしたときは別のマテリアルに変える
• 色を変えるではなく、歩いたところのブロックが落下するようにしてみる

今回使用したノード(DelayやSet Materialの事)は2つだけです。ノードはまだまだ沢山あるのでぜひ調べてみてください。

最後まで読んでいただきありがとうございました。