Unreal Engine5を使用したゲーム作成のチュートリアル(個人的メモ)


本記載は[60分で出来る！無料でゲームづくりにチャレンジ！](https://gamemakers.jp/howto/)の記事を参考に記載しています。基本的には記事の内容を引用し、個人のメモを追加するような投稿になります。
(元記事だと機能の詳細、応用方法まで記載されていてとても分かりやすいです。)

## 目次
以下の手順で進めます。
>1.必要な道具を揃える   (※ゲーミングPCと50GB以上空きのあるHDD or SSDが必須)
>2.ゲームエンジンを入手する    (※インストール完了に50分以上かかる。)
>3.チュートリアルを触ってみる
>4.ルールづくり/ 動く床＆敵をつくろう (プログラミング不要)

## 1.必要な道具を揃える
ゲームが動くスペックのPCを買う。以上。
新しめのゲーミングPC買えばいいと思います。
詳細はskip

## 2.ゲームエンジンを入手する
ゲームエンジンUnreal Engine5(以降UE5)入手までの流れを記載します。
(とっても簡単でした。)
#### 2-1.EPIC GAMES アカウントを作成する
[Epic Games Store](https://store.epicgames.com/ja/)にアクセスし、サインインをクリック、EPIC GAMESでサインインするを選択します。(下記画像の一番上)
アカウントを持っていない場合は、作成するか確認が出るので、作成してください。
(補足：下記画像のサインイン画面でgoogleやらsteamやらEpic Games以外でサインインするか選択として出ますが、どれを選んでもEpicGamesのアカウント作成は必要そうだったので、一番上選択が手っ取り早いと思います。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/f916d32e-045c-49f6-67ef-5891424a566b.png)
#### 2-2.EPIC GAMES LAUNCHERをダウンロードする
UE5をインストールするためにEPIC GAMES LAUNCHERをダウンロードします。
[Epic Games Store](https://store.epicgames.com/ja/)にアクセス、サインインし、下画像のダウンロードを選択。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/4047ed44-14b7-7ca1-aa24-e5c5af1c8465.png" width=50%>
インストーラがダウンロードされたら、インストーラをクリックしてインストール開始する。
(補足：インストール時、EPIC GAMES LAUNCHERの保存場所を聞かれますが、UE5インストール時にはUE5の保存場所を聞かれるので、好きな場所に保存して大丈夫です。)
#### 2-3.UE5を手に入れよう
まず、EPIC GAMES LAUNCHERを起動します。
起動後、画面左側のタブのUnrealEngineタブを選択、次に画面右上の"エンジンのインストール"を選択します。
インストール場所とオプションを聞かれますのでお好みで選択してください。
(ver5.0.3時点で標準のオプションだと必要空き容量58.96GBでした。エンジン本体はSSDに入れることをお勧めします。書き込み速度の都合上だと思いますが、HDDだとものすごい時間がかかります。)

以上の手順でUE5のインストール完了です。インストール開始から完了までは50分くらいかかりました。
## 3.チュートリアルを触ってみる
sampleプロジェクトを改造してみる
#### 3-1.UE5を起動し、テンプレート「サードパーソン」を選択する
EPIC GAMES LAUNCHERからUnrial Engineを起動する。
(初回起動には3分ほどかかるので何度も起動ボタンを押すと大変なことになります。)
プロジェクトブラウザ(最初の画面)でサードパーソンを選択し、プロジェクト作成。
私はプロジェクトの場所をHDDにするためにデフォルトのパスから変更しました。
作成後、下画像の緑の三角をクリックして、sample時点での動作を確認してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/a29df882-59e8-9c9e-2ab8-fad868450f36.png)
操作はWASDで前後左右、spaceでジャンプです。動作確認をやめる場合はEscキーを押してください。
動作確認後、カメラの角度を初期状態に直したい場合は、右のアウトライナーからSM_Cube5を探してダブルクリックしてください。

ゲームの基本操作が既に可能なので、少し手を加えるだけでゲームができそうです。
#### 3-2.スロープ（傾斜した床）をコピー＆ペーストで増やしてみる
下画像のオレンジで囲まれたオブジェクトをコピペして、配置します。コピペ、配置の方法を以下にまとめます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/b2f17e30-3727-eeb9-7378-eaea4db5a524.png)
・コピペ方法
　Ctrl+cで選択オブジェクトのコピー、Ctrl+vでペースト
・オブジェクトの移動
　オブジェクトクリック時に表示される白球、赤青緑の矢印をそれぞれドラッグ&ドロップすることで移動します。
　赤青緑の矢印を選択するとそれぞれに対応した軸に沿ってオブジェクトを移動します。
　白球は軸を気にせず自由に移動することができます。
・カメラ操作(オブジェクト移動時に使うと便利なので追記)
　右クリック押しっぱなし+WASDでカメラを前後左右に移動します。
　右クリック推しっぱなし＋マウス移動でカメラの角度を変更します。(トラックボールマウスだと楽でした。)

以上の操作方法を参考にスロープを自由に追加してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/ebfbf3b5-dce6-89bd-3b67-73b042205a6c.png)

#### 3-3.スフィア（球体）を配置して、ゲームをプレイする
物理演算ありの球体のオブジェクトを追加します。
下画像のアイコンを選択し、「形状」＞「Shere」を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/eeeb2ed0-3f5d-d55a-47b1-278bc3488674.png)
次に、画面右の詳細タブ(下画像)の物理カテゴリSimulate Physicsのチェックボックスにチェックを付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/b804fb76-ff1e-0e5e-55b4-b43a40f872d7.png)
3-1で確認した方法で動作確認を行い、球が動けば成功です。

#### 3-4.物体の色や模様を変えてみる
3-3で追加したスフィアのテクスチャを変えます。
Ctrl+Spaceを押し、コンテンツドロワーを表示します。コンテンツ > StarterContent > Texturesを選択し、好きなテクスチャをスフィアにドラッグ&ドロップします。
↓こんな感じ。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/25969100-1de5-a75f-26e4-0296d4dae053.png)
以上で3.チュートリアルを触ってみるが完了です。
## 4.ルールづくり/ 動く床＆敵をつくろう
#### 4-1.グラフィカルに仕組みづくりが行える「ブループリント」を知ろう
4-1では、UE特有の機能ブループリントについて説明しています。詳細は元記事が分かりやすいです。
以降は私が個人的にまとめたものです。
・ブループリント
　UE独自の機能で、オブジェクトに対しての動作をノーコードで追加する仕組み(ブループリント以外でももちろん機能追加はできる)
　ブループリントは複数のノードで構成されている。
・ノード
　ブループリントを構成する小さい機能ブロック。オブジェクトの位置情報やその他状態などを取得、変更するノードや、
  時間や他オブジェクトからの接触契機で動作する機能をもつノードがある。
  このチュートリアルで出るもの以外も大量にあるので、必要に応じて調査すること。

以降の章からは、ブループリントの使用方法の基本が詰まった、「動く床」と「触ったらゲームオーバーになるトゲ」を作成します。
#### 4-2.アスレチックステージ風の「動く床」を作ってステージに配置しよう
「動く床」の構成要素をオブジェクトと機能に大まかに分けると「地面から浮いた板オブジェクト」「一定時間で一定距離を往復する機能」の二つに分けられます。
この章ではブループリントを用いて上記2つを3章までのsampleプロジェクトに追加します。
まず、Ctrl+Spaceでコンテンツドロワーを開き、自作のブループリントを置くフォルダをAll>コンテンツ直下に作成します。
(名前はなんでもいいですが、今回はMyBlueprintとしました。)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/361b3209-5e4a-842b-f3e6-3f70b2e4ff30.png)
作成したフォルダを選択し、赤枠の追加をクリックまたは、青枠部分で右クリックを押し、「ブループリントクラス」->「Actor」の順に選択。
追加されたブループリントの名前を「MovingFloor」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/d7d82c7c-7db6-a9f8-86d2-f821a1f0fedb.png)
現状は下画像のようになるはず。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/96cf1745-e7f1-e4be-0036-d8bccacaeb38.png)
次からは、追加したMovingFloorが何をするオブジェクトなのか設定していきます。
MovingFloorをダブルクリックすると、ブループリント編集用の画面が出るので以下の要素の追加を行います。
- 乗りやすいサイズの床板を作る
　人が乗れるサイズの床板を追加します。板状のオブジェクトはキューブを加工して作成します。
　まず、コンポーネントタブの左上の「+追加」をクリックし、キューブを選択してください。作成したキューブの名前を「MovingBoard」に変更します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/93d473d1-b7dc-7d12-4efc-e387072f6fe2.png)
　次に、板状にするためにZ軸方向の大きさを小さくします。画面右の「詳細」タブの「トランスフォーム」カテゴリの拡大・縮小のZ軸方向の数値を1.0から0.1に変更します。以上で床板の作成は完了です。
(ブループリント編集画面上では大きく見えますが、実際のサイズは大きくないのでこれだけでOKです。)

- 床板の機能追加
　前段階で作成した床板に対し、「一定時間で一定距離を往復する機能」を追加します。この機能は下記3つのノードで構成されます。
  - BeginPlay
    イベントノードの一種でゲームのプレイが始まった時のイベントです。イベントノードはオブジェクトの機能の開始タイミングを示します。
  - Timeline
    Timelineノードはイベント開始からの経過時間毎に設定した値を他ノードに対して出力します。
    ループ設定にすることで出力を繰り返すことも可能です。出力値の設定方法は複数あります。
    今回は板を滑らかに動かしたいので、フロートトラックを設定します。ワープするような板を作りたい場合は、スカラートラックを使用します。
  - Set Relative Location
    Set_Relative_Locationノードはオブジェクトに紐づく入出力ノードの一種です。
    Set_Relative_Locationノードの場合は、オブジェクトの位置情報を入力値に変更します。
    今回のノードの場合、位置情報の設定をx,y,z一括で行うか、個別に行うかを構造体ピンを変更することで切り替えています。

　※ノードは基本的に右側のピンが出力、左側のピンが入力になります。
まず、イベントグラフタブをクリックし、「イベントグラフ」画面を出します。イベントグラフでは最初に3つのイベントノードが表示されています。
今回は、BeginPlayノードを使用するので、BeginPlayノードのピン(下画像の赤枠で囲った白い矢印)から適当な位置にドラッグ&ドロップして「実行可能なアクション」画面を出します。
検索欄にTimelineと入力し、一覧から「タイムラインを追加する」を探し、選択してください。黄色いノードが表示されたら名前を「BoardMovement」に変更してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/3ec97010-0870-692b-508b-4512905e5629.png)
次に、timelineノードの設定を行います。黄色いノードをダブルクリックすると設定画面が表示されます。設定画面左上の「＋トラック」ボタンを押すと設定方法が表示されます。今回はフロートトラックを選択します。
フロートトラックは指定したキーを線形で繋ぎ、時間毎の出力値を線形補間して決定します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/6a9748ad-d928-0fbd-433b-f2996d8c151b.png)
フロートトラックを追加したら、右クリックから「キーの追加」を選択し、キーを3つ追加します。3つのキーを以下のように配置してください。
キー1 :  時間=0.0, 値=0.0
キー2 :  時間=2.5, 値=250.0
キー3 :  時間=5.0, 値=0.0
また、オブジェクトを往復させ続けるため、ループも有効にしたいので、画像上部の繰り返しボタンをクリックしてください。
以下の画像のようになれば設定完了です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/8b164425-a510-47e4-0bf1-87b64a3b9439.png)

(設定後、トラック全体が見えない場合は、マウスのホイールと画像左上のズームボタンを使用して調整して下さい。)
次に、timelineノードのUpdateピンから適当な位置にドラッグ&ドロップし、「実行可能なアクション」画面で「Set Relative Location(MovingBoard)」を検索、選択します。
(MovingBoard以外だと別オブジェクトに対してのアクションになってしまうので注意)
ノードのNewLocationにカーソルを合わせて右クリックで、「構造体ピンを分割」を選択します。Timelineノードの新規track0のピンとNew Location Yのピンを繋げて完了です。(YではなくZの場合、板が上下に動くことになるので試してみても面白いです。)
最終的には下画像のような形になります。最後に左上の「保存」と「コンパイル」をクリックします。
これで移動する板は完成です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/1d1b8302-dcc0-0e2f-d1f1-969b294cc831.png)
動作確認方法
始めの方に作ったMyBlueprintフォルダ内のブループリントをステージ上にドラッグ&ドロップして追加する。
(同様の方法で1つのブループリントから複数の動く板オブジェクトをステージに置けるので試すと面白い)
![Videotogif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/50e0f197-6055-c11b-29e0-b26b700ff608.gif)
#### 4-3.触るとゲームオーバーになるトゲ」を作ってステージに配置しよう
この章でチュートリアル最後になります。「触るとゲームｵオーバーになるトゲ」を作っていきます。
まず、コンテンツドロワーのMyBlueprintフォルダに新規ブループリントを追加します。名前は「DamageNeedle」とします。
次に、ブループリント編集画面に移り、コンポーネントに対して、DamageNeedleのオブジェクトとしてConeを追加します。
追加したConeの名前を「Needle」に変更します。
(ここまでは4-2とほぼ同じなので詳細は省きます)
- 当たり判定の追加
  触るとゲームオーバーになるという機能なので、Needleに当たり判定を追加し、接触Eventが発生したことを認識できるようにします。
  コンポーネントタブ上で、Needleを選択後、「+追加」をクリックし、「Box Collision」を追加します。名前を「NeedleCollision」に変更します。
　(コンポーネントの階層構成が下画像のようにならなかった場合は、ドラッグ&ドロップで下画像と同じ階層においてください)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/d9cbfd4c-c5f4-d94f-3a93-7f814bf92888.png)
  初期状態だとNeedleの先端に当たり判定がない状態なので、NeedleCollisionをZ軸方向に移動します。
以上がトゲとトゲの当たり判定の設定です。次に、当たり判定に接触した場合の動作をノードで設定していきます。
- 当たり判定に入ったら「やられた！」と表示させる機能追加
　まず、ノードの設定をするので、イベントグラフを開きます。4-2とは少々異なる方法でイベントノードを追加します。
　コンポーネントタブのNeedleCollisionを選択し、画面右の詳細タブをスクロールして、イベントカテゴリを見つけてください。
　イベントカテゴリの「On Component Begin Overlap」の右側の＋マークを選択します。するとイベントグラフに赤ノードが追加されます。
　(何をするノードなのかは、イベントカテゴリの各イベントにマークカーソルを合わせると説明が出るので見てください。)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/9abf2998-dfe1-ba89-19e6-c2c7bbb24a85.png" width=50%>
　追加されたノードのピンから適当な位置にドラッグ&ドロップしてノードを作成します。追加ノードは「Print String」なので4-2と同じように追加します。
　「Print String」はノード内の「In String」に入力した文字を出力するノードなので、「In String」に「やられた！」と入力しましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/669e74d8-4640-2614-b698-aa728946a3a2.png)
以上で、「触るとゲームオーバーになるトゲ」の作成は完了です。

あとは、ステージ上に好きに設置してトゲに触れたら文字が表示されることを確認するだけです。
(下画像の左上に小さく「やられた！」と表示されます。）
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1235659/bead98ce-4041-6d36-d421-3a31c12ae180.png" width=30%>


以上でチュートリアルが完了となります。
ここまでで、移動する物体の追加方法、物体に接触した場合の動作の設定方法が分かったので、簡単なゲームなら作れそうですね！

元記事では、チュートリアル後にチャレンジの章が追加されており、アセットの追加方法や、ゲーム作りに必要な機能の追加方法などを記載しているようですので興味があれば見てみてください。