はじめに
関根です。
Unreal Engine5を使って簡単な「色塗りゲーム」を作ってみます。
次の画像のような Blueprintを作成しながら、キャラクターが歩いた箇所のブロックの色を変える、2秒時間が経過したら元の色に戻す、といった簡易的なものを作成します。
この記事で作成するもの
想定読者
想定している読者は、Unreal Engine5をインストールした直後の初学者及び、Unreal Engine5の具体的な使い方は知らないけれども、何か手を動かしながら作ってみたい人向けに記事を作成しました。
それでは早速始めていこうと思います。
新規プロジェクトを立ち上げる。
それではまず新規プロジェクトを作成しましょう。
EpicGameLauncherのライブラリ
、Engineバージョン
から、Unreal Engine5を起動します。
今回の記事では5.3.1のバージョンを使用します。
(右上の起動ボタンからでもUnreal Engineの起動は行えます。)
Engineを起動すると、プロジェクトを設定する画面が出てきます。
左のゲーム
を選択し、その中のサードパーソン
を選択します。
そして今回はGameProject
というフォルダの中にMyProject
というプロジェクトを作成します。
それ以外は変更せずに作成ボタンを押します。
![](/images/20231127a/スクリーンショット_(23)_R.jpg)
しららく待つとこちらのような画面になります。
今回はサードパーソン
というパックを選択したため、サードパーソンゲーム(TPS)で使われる最低限のロジック(キャラクターを動かす、カメラ移動など)はすでにある状態でプロジェクトがスタートしています。
こちらの画面はデモマップなので、少しこちらでゲームを動かしてみましょう。
画面上部の緑色の再生ボタン
もしくはAlt+P
でゲームを開始できます。
するとキャラクターが出現し、ゲームをプレイできるようになります。
WASDで移動、Spaceキーでジャンプ、マウスでカメラ操作が行えます。
ゲームを終了する際は停止ボタン、もしくはesc
キーを押すことで終了する事が出来ます。
(もしキャラクターの操作が出来ない場合は、ゲーム画面をクリックしてみてください。)
新しいマップを作成する、光源の設置
今回はこちらのデモマップは使用せず、一からマップを作成しようと思います。
画面上部のファイル
から新規レベル
を選択します。
![](/images/20231127a/スクリーンショット_(34)_R.jpg)
何もないマップからゲームを作成していくため、空のレベル
を選択します。
そうすると新規レベル(新しいマップ)が立ち上がります。
しかし文字通り空のレベルのため、光源も何もありません。そのため画面が真っ黒になってしまっています。
![](/images/20231127a/スクリーンショット_(36)_R.jpg)
そこでまずは光源を設置しようと思います。ウィンドウ
の環境ライトミキサー
を選択します。
![](/images/20231127a/スクリーンショット_(37)_R.jpg)
画面が出てきたら、スカイライトを作成
、大気ライトを作成
、Sky Atmosphereを作成
、ボリュメトリッククラウドを作成
を全てクリックします。
そうすると光源の他に空や雲がマップに作成されます。
細かい設定等も行えますが、今回はこちらで進めていきます。
![](/images/20231127a/スクリーンショット_(39)_R.jpg)
ここまで行えたら、一度レベル(マップ)の保存をします。Ctrl+shift+S
ですべてを保存します。
するとどこに保存するのかを問われるため、今回はコンテンツ
直下に右クリックをして新たにMyStuff
というフォルダを作成します。
作成したフォルダをダブルクリックし、その中にColoringMap
という名前で現在のレベルを保存します。
ステージの床を作ろう!
続いて床の配置をしていきます。
今回はキャラクターが歩いたブロックの色を変えたいので、複数ブロックを使用して床を作成していきます。
ウィンドウ
からアクタを配置
を選択します。
この画面からレベル上にオブジェクトを配置していくことができます。
この中からキューブ
を選択し、ビューポート(画面中央の画面)にドラッグ&ドロップします。
![](/images/20231127a/スクリーンショット_(107)_R.jpg)
すると白いキューブが配置されました。
今回はこのキューブに「操作キャラクターが上を歩いたら、色を変える」というロジックを入れたいです。
そのロジックを入れるためには、Blueprint
というものを作成していく必要があります。
配置したキューブのBlueprintを作成するために、右下の詳細
にある+追加ボタンの右のアイコン
をクリックします。
![](/images/20231127a/スクリーンショット_(108)_R.jpg)
ブループリント名
を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つに複製できました。
同様の作業を繰り返して床を作成します。
1つずつ複製していると大変なため、Controll
を押しながら画面上のキューブを複数選択した状態で、Alt
キーを使って同時に複数複製していきます。
数が多くなったら、画面右上のアウトライナー
でshift
を使って複数選択すると効率的に行えます。
![](/images/20231127a/スクリーンショット_(116)_R.jpg)
これで床は完成しました。
しかしゲームスタート地点を設定していません。そのためこのまま再生ボタンをおすとキャラクターがそのまま落下してしまいます。アクタを配置
からPlayer Start
を選択しビューポート(中央の画面)にドラッグ&ドロップします。
![](/images/20231127a/スクリーンショット_(117)_R.jpg)
そして詳細
のトランスフォーム
を変更します。
位置を(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)
を選択するようにしてください。
![](/images/20231127a/スクリーンショット_(147)_R.jpg)
配置をするとこちらのようになります。
ドラッグするとBlueprintの位置を変更できるので見やすい位置に配置をしてください。
Set Material
を設置したら、どのマテリアルに変更したいのかを決める必要があります。Set Material
内のMaterial
から今回はM_Ground_Grass
を選択します。
これで
- キャラクターがCubeのTriggerと重なったら(Event ActorBeginOverlap)
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つだけです。ノードはまだまだ沢山あるのでぜひ調べてみてください。
最後まで読んでいただきありがとうございました。