【超初心者向け】UE5でゲームを1本つくろう!

29.3K Views

December 21, 22

スライド概要

プロジェクトファイル
https://github.com/ProgrammingProntier/ThirdPersonShooter

profile-image

https://twitter.com/suramaru517

シェア

埋め込む »CMSなどでJSが使えない場合

関連スライド

各ページのテキスト
1.

超初心者向け UE5でゲームを1本つくろう! Programming.Prontier(); Metaseven

2.

自己紹介 Programming.Prontier(); (@PProntier) Metaseven (@suramaru517) 大学でこの団体を立ち上げたり 個人でアクションRPGを作ったり Unrealな仕事をしたりしている大学生です 来年度からはゲーム会社で ゲームエンジニアとして働きます

3.

Unreal Engineとは? フォートナイトで有名なEpic Gamesが開発している、リアルタイム3D制作ツール 美麗なグラフィックや、ブループリントというビジュアルスクリプティングシステムが特徴 ゲームだけでなく、建築・映像・自動車など様々な業界で利用されている Unreal Engine製のゲームの例 • フォートナイト • VALORANT • ファイナルファンタジーVII リメイク • テイルズ オブ アライズ

4.

UE5のインストールとチュートリアル ゲームメーカーズさんの記事がわかりやすくておすすめです • 60分で出来る!無料でゲームづくりにチャレンジ! (こちらではUE5.0をインストールしていますが、今回はUE5.1を使用するので注意!) 公式のドキュメントやチュートリアルもおすすめです • Unreal Engine のインストール方法 • 初めての Unreal Engine 5

5.

ゲームをつくろう 今回はUE5.1で三人称視点のシューティングゲーム (TPS) を作ります プレイヤーは弾を撃って敵を倒し、スコアを獲得します 敵はランダムに生成され、プレイヤーを追いかけます 敵にぶつかるとHPが減り、HPが0になるとゲームオーバーです 完成したゲームのプロジェクトファイルはGitHubでダウンロードできます なお、UE5.1以外のバージョンではうまくいかない可能性があります

6.

サードパーソンテンプレートを作成する UE5.1を起動して ゲーム > サードパーソン を選択 スターターコンテンツにチェック プロジェクト名を “ThirdPersonShooter” などわかりやすい名前にして 作成しましょう

7.

プレイする エディタが起動したら、上部にある▶をクリックするかAlt+Pでプレイしてみましょう WASDで移動、マウスで視点移動、スペースでジャンプができます エディタが重い場合は、こちらの記事を見ながら軽量化してみてください • 【UE5】低スペックPCのためのエディタ軽量化設定 - Qiita

8.

おすすめ設定 (1/3) 設定は任意ですが、おすすめの設定を紹介します 編集 > エディタの環境設定 から設定画面を開きます

9.

おすすめ設定 (2/3) アピアランス > アセットエディタの起動場所 をMain Windowに変更 アセットの編集画面が新規ウィンドウではなく、タブとして開くようになります

10.

おすすめ設定 (3/3) 地域&言語 > 翻訳されたノードとピンの名前を… のチェックを外す ブループリントのノード名が英語になり、わかりやすくなります

11.

プレイヤーの弾を作成する (1/2) 左下のコンテンツドロワーもしくは Ctrl+スペースでコンテンツブラウザを開きます コンテンツ/ThirdPerson/Blueprints内で 何もない場所を右クリックしてメニューを出し ブループリントクラスを選択します ブループリントクラスとはブループリントで 機能を追加・変更できるアセットのことです

12.

プレイヤーの弾を作成する (2/2) 親クラスにはActorを選択し “BP_PlayerProjectile” という名前にします 親クラスとは自身の土台となる 機能を持ったオブジェクトです Actorはワールドに配置できる 最も基本的なオブジェクトです

13.

弾の見た目を追加する BP_PlayerProjectileをダブルクリックで開き 左上にあるコンポーネントタブの追加ボタンから 球 (Sphere) を追加します コンポーネントとはブループリントに追加できる 拡張パーツみたいなものです 真ん中のビューポートに 白い球が表示されていればOK!

14.

弾の見た目を調整する このままでは球が大きいので、大きさを調整します コンポーネントタブのSphereを選択した状態で 右にある詳細タブの拡大・縮小を XYZすべて0.25(4分の1)にします また球のコリジョン(当たり判定)は不要なため コリジョンプリセットをNoCollisionにしておきます

15.

アセットを保存する 万が一エディタがクラッシュしてしまった場合 保存していない変更は失われてしまいます せっかく作ったものが消えてしまわないよう 開発中はこまめに保存しましょう 左上の保存ボタンかCtrl+Sで保存ができ 右下の保存ボタンかCtrl+Shift+Sで すべて保存ができます

16.

弾を撃つ入力を作成する 弾を撃てるようにするため 入力の設定をします コンテンツ/ThirdPerson/Input /Action内で右クリックメニューから 入力 > 入力アクション を選択して InputActionを作成します 名前を“IA_Fire”とします

17.

弾を撃つ入力を設定する コンテンツ/ThirdPerson/Inputにある IMC_Defaultを開きます Mappingsの⊕からIA_Fireを追加し IA_Fireにマウスの左ボタンを設定します これによりIA_FireのInputActionに マウスの左ボタンを紐づけることができます

18.

弾を撃てるようにする (1/2) プレイヤーのブループリントである BP_ThirdPersonCharacter を開きます イベントグラフで右クリックすると ノード検索メニューが出てきます ノードとは何らかの処理が入った ブロックみたいなものです

19.

弾を撃てるようにする (2/2) ノードを検索し、イベントグラフの空いた場所で画像のようにノードを追加します SpawnActorノードのClassにはBP_PlayerProjectileを選択します

20.

プレイして弾を撃てるか確認する マウスの左ボタンを押して 弾を撃てるか確認します …どうなりましたか? 弾が出てきても動かないはずです これはまだ弾に球を追加しただけで 動くように設定していないためです

21.

弾が動くようにする (1/2) では弾が動くように設定します BP_PlayerProjectileを開き コンポーネントタブの追加ボタンから ProjectileMovementを追加します ProjectileMovementは 弾の動きを簡単に設定できるように 用意されたコンポーネントです

22.

弾が動くようにする (2/2) コンポーネントタブの ProjectileMovementを選択した状態で 詳細タブのInitialSpeedを2000.0 ProjectileGravityScaleを0.0に設定します これにより弾が重力の影響を受けずに 真っ直ぐ飛んでいくようになります

23.

弾の寿命を設定する 今のままでは弾は永遠に残り続け、無限の彼方まで飛んで行ってしまいます 処理負荷の面で問題になるので、しばらくしたら弾が消えるようにします クラスのデフォルトを選択し、詳細タブのInitialLifeSpanを3.0に設定します これにより、弾は生成されてから3秒後に自動で消えるようになります

24.

再度プレイして弾を撃てるか確認する マウスの左ボタンを押して、弾を真っ直ぐ撃てたらOK!

25.

敵キャラクターを作成する 敵キャラクターのブループリントクラスを作成します 弾と同じようにメニューから作成することもできますが 今回はプレイヤーのキャラクターを複製して楽をします コンテンツブラウザでBP_ThirdPersonCharacterを 右クリックし複製を選択します 名前を“BP_EnemyCharacter”とします

26.

敵のカメラとノードを削除する BP_EnemyCharacterを開きます プレイヤーにあったカメラや入力の処理は不要なため コンポーネントタブでCameraBoomと FollowCameraを削除し イベントグラフにある全てのノードを削除します 削除するには、右クリックして削除を選択するか 選択した状態でDeleteキーを押します

27.

敵の見た目を変更する コンポーネントタブのMeshを選択した状態で 詳細タブのAnimClassをABP_Mannyに SkeletalMeshAssetを SKM_Manny_Simpleに変更します これにより見た目とモーションが QuinnからMannyに変わります MannyとQuinnはUE5の看板キャラクターです

28.

敵を配置する BP_EnemyCharacterを コンテンツブラウザからビューポートに ドラッグ&ドロップして配置します プレイした時にわかりやすいように プレイヤーの開始位置の正面あたりに 配置しておきます

29.

弾にコリジョンを追加する BP_PlayerProjectileを開き コンポーネントタブの追加ボタンから SphereCollisionを追加します 名前を“SphereCollision”とします またSphereCollisionの詳細タブで SphereRadiusを16.0に設定し コリジョンの大きさをSphereに合わせます

30.

弾がダメージを与えるようにする (1/2) コンポーネントタブの SphereCollisionを右クリックし イベントを追加 > OnComponentBeginOverlapを追加 を選択します Overlapとはコリジョンに他のコリジョンが 重なることで、BeginOverlapは 重なり始めた時を指しています

31.

弾がダメージを与えるようにする (2/2) 追加したイベントを使って、弾がダメージを与える処理を追加します ApplyDamageのBaseDamageには1.0を設定しておきます

32.

敵がダメージを受けて死ぬようにする (1/2) BP_EnemyCharacterを開き、敵がダメージを受ける処理を追加します(続く)

33.

敵がダメージを受けて死ぬようにする (2/2) (続き)

34.

プレイして敵を倒せるか確認する マウスの左ボタンを押して弾を撃ち 敵を倒せるか確認します …どうなりましたか? 弾が出なくなった人は正解です なぜ弾が出なくなったのか 考えてみましょう

35.

弾がプレイヤーに当たらないようにする 弾が出なくなったのは、弾がプレイヤーに当たって破棄されていたためです ApplyDamageの前にプレイヤーを除外する処理を追加し、破棄されないようにします

36.

再度プレイして敵を倒せるか確認する 弾が敵に当たった時に、爆発のエフェクトや音とともに敵が消えればOK!

37.

敵がプレイヤーを追いかけるようにする (1/3) 敵AIを動かすためには、ナビメッシュを生成する必要があります アクタ配置メニューから ボリューム > NavMeshBoundsVolume を選択します

38.

敵がプレイヤーを追いかけるようにする (2/3) NavMeshBoundsVolumeが 床全体を覆うように 位置と大きさを調整します Pキーを押すとナビメッシュが 生成されているかを確認できます 緑色で表示されている部分が 敵AIの歩行可能な場所になります

39.

敵がプレイヤーを追いかけるようにする (3/3) BP_EnemyCharacterを開き、プレイヤーを追いかける処理を追加します

40.

プレイして敵が追いかけてくるか確認する 敵がプレイヤーを追いかけて、追いついた時は5秒待機した後再度追いかけたらOK!

41.

敵がダメージを与えるようにする (1/2) BP_EnemyCharacterに 先ほどの弾と同じように SphereCollisionを追加します プレイヤーが敵の正面に ぶつかった時に当たるよう 胸の前あたりに配置します

42.

敵がダメージを与えるようにする (2/2) イベントグラフを開き、プレイヤーにダメージを与える処理を追加します OnComponentBeginOverlapは先ほどの弾の時と同じように追加します

43.

プレイヤーがダメージを受けるようにする (1/2) BP_ThirdPersonCharacter を開き、マイブループリントタブで 変数を作成します 変数は値を保存しておく場所です 変数名を“HP” 変数の型をFloat(小数) デフォルト値を10.0にします

44.

プレイヤーがダメージを受けるようにする (2/2) イベントグラフを開き、ダメージを受けた後HPの値を出力する処理を追加します

45.

プレイしてダメージを受けるか確認する 敵に当たった時に、10.0から1.0ずつ引いた値が画面左上に表示されていればOK!

46.

プレイヤーが死ぬようにする (1/2) 先ほど追加したPrintStringの後に、死んだ時の処理を追加します(続く)

47.

プレイヤーが死ぬようにする (2/2) (続き)

48.

プレイしてプレイヤーが死ぬか確認する 敵に10回当たってHPが0になった時に、プレイヤーが倒れて操作できなくなればOK!

49.

UIを作成する PrintStringの出力では残りHPがわかりづらいので HPバーを表示するUIを作成します コンテンツ/ThirdPerson/Blueprints内で 右クリックメニューから ユーザーインターフェイス > ウィジェットブループリント ルートウィジェットにUserWidgetを選択します 名前を“WBP_GameUI”とします

50.

UIをデザインする (1/2) WBP_GameUIを開くと デザイナーモードの画面が開きます パレットタブでCanvasPanelを検索し デザイナーにドラッグ&ドロップして配置します CanvasPanelは他のウィジェットを 配置するための土台となるウィジェットです

51.

UIをデザインする (2/2) パレットタブでProgressBarを検索して配置します 名前を“HPBar”とし、詳細タブで位置やサイズをお好みで調整します Percentでバーの割合を設定できますが、ここでは特に設定する必要はありません

52.

UIを表示する (1/2) BP_ThirdPersonCharacterの BeginPlayの一番後ろに CreateWidgetノードを追加します ClassにWBP_GameUIを 設定した後、ReturnValueを 右クリックして変数へ昇格を選択し WBP_GameUIの変数を作成します

53.

UIを表示する (2/2) 変数名を“GameUI”として、続けてUIを表示する処理を追加します

54.

プレイしてUIが表示されるか確認する 画面にHPバーが表示されていればOK!

55.

HPをHPバーに反映する (1/4) WBP_GameUIを開き、右上のグラフボタンから グラフ編集モードに切り替えます イベントグラフに移動したら ノード検索メニューでAddCustomEventを選択し カスタムイベントを追加します カスタムイベントは複数のノードを1つにまとめられるもので 他のBPから呼び出して使うことができます

56.

HPをHPバーに反映する (2/4) カスタムイベントのノードを選択した状態で、詳細タブの名前とインプットを設定し カスタムイベントにHPバーを更新する処理を追加します

57.

HPをHPバーに反映する (3/4) BP_ThirdPersonCharacterを開き、HPを複製して“MaxHP”の変数を作成します BeginPlayのUIを表示する処理の後に、追加したカスタムイベントを呼び出します

58.

HPをHPバーに反映する (4/4) AnyDamageのHPを減らす処理の後にあるPrintStringを削除し 代わりにHPバーを更新するカスタムイベントを呼び出します

59.

プレイしてHPがHPバーに反映されるか確認する プレイ開始時にHPバーが満タンで、敵に当たった時にHPバーが10分の1減ったらOK!

60.

スコアを表示する (1/4) WBP_GameUIを開き、パレットタブからHorizontalBoxを配置します HorizontalBoxは複数のウィジェットを横に整列してくれるウィジェットです 詳細タブでSizeToContentにチェックを入れます

61.

スコアを表示する (2/4) パレットタブから、Textを階層タブのHorizontalBoxに 2つドラッグ&ドロップして配置し、位置を調整します Textの詳細タブで片方のTextに“SCORE: ”、もう片方のTextに 適当な数字を設定します 適当な数字を設定したTextは 名前を“ScoreText”とし IsVariableにチェックを入れます

62.

スコアを表示する (3/4) グラフ編集モードに切り替え、スコアの表示を更新するカスタムイベントを追加します

63.

スコアを表示する (4/4) BP_ThirdPersonCharacterを開き、“Score”というIntegerの変数を作成します BeginPlayのUIを表示する処理の後に、追加したカスタムイベントを呼び出します

64.

スコアを加算する (1/3) BP_ThirdPersonCharacterに “AddScore”というスコアを加算する関数を作成します 関数はカスタムイベントとほぼ同じもので DelayなどのLatentノードが使えない代わりに アウトプットを追加できます(ここでは使いません) 関数の詳細タブでIntegerのインプットを追加して 加算するスコアを指定できるようにします

65.

スコアを加算する (2/3) AddScore関数に、スコアを加算してスコアの表示を更新する処理を追加します

66.

スコアを加算する (3/3) BP_EnemyCharacterを開き、AnyDamageで自分を破棄した後に 作成した関数を呼び出し、プレイヤーのスコアを100加算するようにします

67.

プレイしてスコアが加算されるか確認する 敵を倒した時にスコアが100加算されればOK!

68.

ゲームオーバーを表示する (1/4) WBP_GameUIを開き CanvasPanelにTextを配置します 名前を“GameOverText”とし IsVariableにチェックを入れて アンカーを中央に設定します アンカーは、CanvasPanelにおける ウィジェットの座標の原点となる場所です

69.

ゲームオーバーを表示する (2/4) 位置やText、色、フォントサイズなどをお好みで調整します 最初は非表示にしたいためVisibilityをCollapsedにします

70.

ゲームオーバーを表示する (3/4) グラフ編集モードに切り替え、ゲームオーバーを表示するカスタムイベントを追加します

71.

ゲームオーバーを表示する (4/4) BP_ThirdPersonCharacterを開き、AnyDamageの一番後ろで カスタムイベントを呼び出してゲームオーバーを表示し、5秒後にリセットするようにします

72.

プレイしてゲームオーバーが表示されるか確認する 死んだ時にゲームオーバーが表示されればOK!

73.

敵をランダムに生成する (1/3) 最後に、ゲーム中敵がランダムに 生成され続けるようにします 右クリックメニューから、Actorの ブループリントクラスを作成します 名前を “BP_EnemySpawner”とします

74.

敵をランダムに生成する (2/3) BP_EnemySpawnerを開き、5~10秒毎に敵を生成する処理を追加します

75.

敵をランダムに生成する (3/3) コンテンツブラウザから BP_EnemySpawnerを ドラッグ&ドロップして配置します 敵を生成したい複数の場所に 配置しておきましょう

76.

敵をAIとして生成するようにする プレイして確認するとわかりますが、実はこのままでは生成した敵は動いてくれません 生成した敵を動かすためには、敵をAIとして生成する必要があります BP_EnemyCharacterを開き、クラスのデフォルトの詳細タブで AutoPossessAIをPlacedInWorldOrSpawnedに変更します

77.

敵がカメラをブロックしないようにする 今のままでは敵がプレイヤーのカメラをブロックするため 敵が増えた時に視点が見づらくなってしまいます BP_EnemyCharacterの CapsuleComponentとMeshの両方の詳細タブで コリジョンプリセットをCustom Cameraのコリジョンレスポンスを無視するに設定します これにより、カメラが敵のコリジョンをすり抜けるようになります

78.

プレイして敵がランダムに生成されるか確認する BP_EnemySpawnerから敵が5~10秒毎に生成されて、敵が動けばOK!

79.

完成! これで一通り遊べるゲームが完成しました! ここからステージを作ったりして、このゲームを改造していくのも良いですし 今回学んだことを活かして、別のゲームを作ってみるのも良いかもしれません 今回はブループリントを中心に触ってきましたが これらはUnreal Engineの機能のほんの一部に過ぎません ぜひこれからも一緒にUnreal Engineを学んでいきましょう!

80.

あとがき 本スライドは、Programming.Prontier();の勉強会のために 第5回ue4ハンズオンセミナー – SlideShare を参考にして作ったものです 3年前、Unreal Engineを初めて触った時に見た資料がこれで まさか3年後にこうなるとは思いませんでしたが… 作者のalwei (@aizen76)さんに深く感謝申し上げます!