😺

【UE5 備忘録】2Dアクションゲームの作り方

に公開
Unreal Engine 5
tech

どうも～つぶあんです。
UE5.6がリリースされたので、UE熱が復活！！UEライフの再開です。
2Dやドット絵のゲーム作成に以前から興味があったので自分用の備忘録としてまとめました。
参考にさせていただいた「UE5 2Dとか」さんの動画はこちらです。↓↓
https://youtube.com/playlist?list=PLmoIIqJZj1GXXwy5rnjv0Uv5-zAA0OmLl&si=ZOPIKXN9ArHPGVNk
あくまで自分用の備忘録なので、わかりにくかったり、おかしな個所もあると思いますので、ご了承くださいませ。

プロジェクトの新規作成

  1. ブランクプロジェクトを選択
  2. ブループリントを選択
  3. ターゲットプラットフォーム： Desktop
  4. 品質プリセット：Scalable
  5. プロジェクト名：Tsubuan2DAction
  6. 作成ボタンを押す。

フォルダ作成

コンテンツフォルダ内に以下のフォルダを作成する。
2DAction Assets Flipbooks
Sprites
Textures
Tilemaps
Blueprints
Input Actions
Maps
PaperZD
Tools

新規レベル作成

  1. レベルの新規作成。
    ファイル⇒新規レベル⇒空のレベルを選択し、作成ボタンを押す。
    ビューポートが真っ黒になるが気にしない
  2. 作成したレベルを保存する。2DAction>Maps>L_Template
  3. プロジェクト設定 > マップ＆モード > エディタのスタートマップとゲームのデフォルトマップを今作ったL_Templateに変更する。
    これで再起動後も空のレベルの状態になる。

2D用エディタ設定

  1. レアルタイムビューポートをOff

  2. パースペクティブから左を選択

  3. ワイヤーフレーム⇒ライティングなしを選択

この状態が横スクロールの基本になる。

右方向がX軸のプラス方向（+X）
左方向がX軸のマイナス方向（-X）
上方向がZ軸のプラス方向（+Z）
下方向がZ軸のマイナス方向（-Z）
※Y方向は奥行（手前がプラス）

スプライトシート

  1. キャラクターの画像を右クリック⇒スプライトアクション⇒Paper2Dテクスチャ設定を適用をクリック。
  2. 適用したテクスチャを開く。
  3. LOD⇒Mip Gen Settings:NoMipmaps
  4. 詳細設定⇒Filter:Nearest
  5. または1～4は一括設定ツールで。
  6. アジャストメント⇒Chroma key Textureにチェック

スプライトの抽出

  1. スプライトアクション⇒スプライトを抽出
  2. スプライト抽出モード：Auto
  3. 名前付けテンプレート：{0}
  4. 抽出ボタンを押す

連番フリップブック作成

  1. ***_0のスプライトを右クリック⇒フリップブックを作成をクリック
  2. 名前を***_00_Idle
  3. _0から_2を選択して右クリック⇒フリップブックを作成
  4. 名前を***_01_Walk
  5. ***_4を選択して右クリック⇒フリップブックを作成
  6. 名前を***_02_Jump
  7. Assetsフォルダ内にFlipbooksフォルダを作成し、その中に作成したフリップブックを移動する

PaperZDのインストール

  1. FABでPaperZDを追加してエンジンにインストールする。
  2. 編集⇒プラグイン⇒PaperZDを有効化して再起動する。

AnimationSource

  1. コンテンツフォルダ⇒2DActionフォルダにPaperZDフォルダを作成。
  2. PaperZDフォルダ内で右クリック⇒PaperZD⇒AnimationSourceをクリック。名前をAnimSource_Player。ここにキャラクターのFlipbookを格納していく。
  3. AnimSource_Playerを開く。
  4. 左上の＋Add Newをクリック⇒New Animation Sequenceを選択。
  5. 名前をAS_Player_00_Idle。同様にAS_Player_01_Walk、AS_Player_02_Jumpを追加する。
  6. 右のAsset Details⇒Animation Dataにそれぞれ以前に作成したフリップブックを指定する。

PaperZD AnimBP

  1. PaperZDフォルダ内で右クリック⇒PaperZD⇒PaperZD AnimBP⇒先ほど作成したAnimSource_Playerを選択。名前をZDAnimBP_Player。
  2. ZDAnimBP_Playerを開く。
    ※主にイベントグラフ上では全体条件を、AnimGraph上ではアニメーションの切り替え処理を行う。

イベントグラフ < PaperZD AnimBP


※Character Movement refはCharacter Movementの右側を右クリックで変数に昇格させてCharacterMovement_refとリネーム

AnimGraph < PaperZD AnimBP

  1. ResultからAdd New State Machineを追加、名前をMain States
  2. Main Statesをダブルクリック。右クリックでAnimetion Stateを２つ追加して、矢印をつなげ名前をLocomotion、Jumpとする
  3. Locomotionをダブルクリック。
  4. 2に戻ってJumpをダブルクリック。
  5. 2に戻ってLocomotionとJumpの間の左右矢印の上をダブルクリック。
  6. 2に戻ってLocomotionとJumpの間の左右矢印の下をダブルクリック。

※もしくはこちらのサイト様が参考になりました。
How to PaperZD その3-StateMachineでアニメーション遷移-

PaperZD Animation

  1. コンテンツフォルダ⇒2DActionフォルダ⇒Blueprintsフォルダ⇒右クリック⇒ブループリントクラス⇒すべてのクラス⇒PaperZDCharacterを選択。名前をBP_Player_ZDとする。
  2. BP_Player_ZDを開く。
  3. コンポーネントのSpriteを選択。右の詳細⇒スプライト⇒Source Flipbookで***_00_Idleを選択。
  4. コンポーネントのBP_Player_ZD（Self）を選択。
  5. ＋追加ボタンからSpringArmを追加。
  6. SpringArmを選択してから＋追加ボタンでcameraを追加する。
  7. SpringArmを選択してから右の詳細のトランスフォーム⇒回転をワールドに変更して絶対回転にする。そしてZを-90に。
  8. カメラコリジョンのDo Collision Testのチェックを外す。（障害物があるとカメラが勝手に切り替わるやつ）
  9. Cameraを選択してから右の詳細⇒カメラセッティング⇒Projection ModeをPerspectiveからOrthographic（平行投影）に変更する。
  10. その下のOrtho Widthを1500に変更。
  11. 右の詳細から、PaperZD⇒Anim Instance ClassでZDAnimBP_Playerを選択。RenderComponent RefでSpriteを選択。
  12. これでテストプレイしてみると、ちゃんと動くようになる。

ゲームモードの作成

  1. Blueprintsフォルダ内で右クリック⇒ブループリントクラス⇒Game Mode Baseを選択。
  2. 名前をBP_Gamemode_ZDとする。
  3. BP_Gamemode_ZDを開いて、右のクラス⇒Default Pawn ClassをBP_Player_ZDにする。
  4. ワールドセッティング⇒ゲームモードオーバーライドでBP_Gamemode_ZDを選択。
    ※プロジェクト全体をデフォルトで設定する場合はプロジェクト設定⇒マップ＆モード⇒デフォルトのゲームモードに設定する。両方設定した場合はワールドセッティングが優先される。
    ※Player Startの追加も忘れずに。

キャラクターの色味修正　ポストプロセス設定

  1. コンテンツの追加ボタン⇒ビジュアルエフェクト⇒PostProcessVolumeを画面にドラッグ。
  2. トランスフォームの位置をリセット。
  3. 右の詳細タブから、Infinite Extent(Unbound)にチェック
  4. レンズ⇒Bloom⇒しきい値を1.0
  5. Exposure⇒露出補正とMin Ev100とMax Ev100を0.0
  6. Image Effects⇒ビネット効果強度を0.0
  7. カラーグレーディング⇒Miscの中の色域拡張とトーンカーブ量を0.0

インプット設定

  1. 2DActionフォルダにInputフォルダを作成。さらにInputフォルダ内でActionsフォルダを作成。
  2. Actionsフォルダ内で右クリック⇒入力⇒入力アクションを選択。
  3. 名前をIA_Jump,IA_MoveRight
  4. Value TypeをIA_JumpはDigtal,IA_MoveRightはAxis1D
    ※Value Typeについて
    Digtal:押すだけのような場合。
    Axis1D:ゲームパッドのスティックの横軸や縦軸の値が必要な場合。
    Axis2D:3Dゲームなどで360°移動するような場合。
    Axis3D:VRなどで3D空間上のコントローラー用の場合。
  5. Inputフォルダへ移動して、右クリック⇒入力⇒入力マッピングコンテキストを選択。
  6. 名前をIMC_2DActionとして開く。
  7. マッピング⇒Mappingsの＋を押してIA_Jumpを選択。スペースバーを設定する。
  8. マッピング⇒Mappingsの＋を押してIA_Rightを選択。AとDを設定する。
  9. AのModifiersの＋を押してインデックス[0]を追加してNegateを選択する。　※Negateは値が反転する設定のこと

Enhanced Input宣言

BP_Player_2D

Enhanced ジャンプ設定

BP_Player_2D

Enhanced 左右移動設定

BP_Player_2D

左右移動時の振り向き
関数を定義：FlipTurn

イベントグラフに戻ってFlipTurnを実行する

カプセルサイズの調整

  1. BP_Player_ZDを開く
  2. ビューポートを選択
  3. 左のCapsule Componentを選択して、右の詳細から、形状⇒Capsule Half HeightとCapsule Radiusを調整する

Character Movementの設定

  1. BP_Player_ZDを開く
  2. 左のCharacter Movementを選択して、右の詳細でキャラクターの制御を設定する。
  3. キャラクタームーブメント（一般設定）⇒Gravity Scale:2.0　※重力
  4. キャラクタームーブメント：歩行⇒Max Walk Speed:600　※歩くマックススピード
  5. キャラクタームーブメント：歩行⇒詳細設定⇒Use Flat Base for Floor Checks:チェック　※地面との接地面をカプセルの形状に沿うかどうかの設定
  6. キャラクタームーブメント：歩行⇒詳細設定⇒Perch Radius Threshold:0.0 ※例えば段差に乗っていられる距離
  7. キャラクタームーブメント：跳躍/落下⇒Jump Z Velocity:1000　※ジャンプ力
  8. キャラクタームーブメント：跳躍/落下⇒Air Control:0.8 ※空中時の制御
  9. プレナームーブメント⇒Constrain to Plane:チェック
    Plane Constraint NormalのY：1.0
    ※オブジェクト同士が衝突した際に奥や手前に押し出されなくなる

タイルマップ

  1. Assetsフォルダ⇒Timemapsフォルダにタイルマップ素材をインポート。
  2. テクスチャを選択して、右クリック⇒スクリプト化されたアセットアクション⇒NewPaper2DTextureSettingsで画像一括調整
  3. タイルセットを作りたい画像を右クリック⇒スプライトアクション⇒タイルセットを作成。TS_Sample_A
  4. TS_Sample_Aを開く。
  5. タイルをクリックしてみて、選択範囲のサイズが合っていなかったらTile Sizeを調整する。16＊16
  6. タイルを選択した状態で、ボックスを追加をクリック。
  7. 左上のタイルの衝突をクリックするとそのタイルにコリジョンが設定される。
  8. この要領で、ほかのコリジョンを付けたいタイルも設定する。
  9. TS_Sample_Aを右クリック⇒タイルマップを作成をクリック。TM_Sample_A_01
  10. TM_Sample_A_01を開き、左上のタイルグリッドをクリック。
  11. 右の詳細からセットアップ⇒Pixels Per Unreal Unit:0.16であるか確認。
  12. 0.16でなかったら、プロジェクト設定⇒エディタ⇒Paper2D インポート⇒デフォルトのUnreal単位あたりのピクセルが0.16になっているか確認。
    ※1ブロック：16px=0.16, 1ブロック：32px=0.32　となる。
  13. 右の詳細からセットアップ⇒Map WidthとMap Heightを任意で設定。とりあえず16しておく。
  14. 右の詳細からタイルマップ⇒レイヤーを２つ追加。　01_Sky, 02_Cloud, 03_Ground
  15. 01_Skyのレイヤーを選択⇒左上のフィルを選択⇒水色のタイルを選択⇒グリッドをクリックすると全体に塗りつぶされる。
  16. 02_Cloudのレイヤーを選択⇒左上のペイントを選択⇒雲を範囲選択してグリッドに貼り付ける。
  17. Shiftを押しながらグリッドを範囲選択しればコピーできる。
  18. 03_Groundのレイヤーを選択⇒左上のペイントを選択⇒地面とか草木などを画面に配置する。
  19. 選択したレイヤー⇒Layer Collidesのチェックを外すと、タイル毎に設定したコリジョンでも無しにできる。
  20. 作成したタイルマップをレベルに配置する。※トランスフォームの位置Yの値を-1にする。
  21. エディタの環境設定⇒コンテンツエディタ⇒タイルセットエディタ⇒押し出し量：1に変更。
  22. テストプレイで画面にノイズが走る場合は、TS_Sample_Aを右クリック⇒タイルシートテクスチャを調整をクリック。
  23. 新しく作成されたテクスチャファイルを右クリック⇒スクリプト化されたアセットアクション⇒NewPaper2DTextureSettingsで画像を調整しておく。
  24. レイヤーの間隔を変更する場合：Separation Per Layer
  25. コリジョンの厚みを変更する場合：Collision Tickness
  26. タイルマップのアイコンをサムネイル画像で分かりやすくするには、タイルマップを右クリック⇒アセットアクション⇒サムネイルをキャプチャを選択
  27. 登れる坂の角度設定：BP_Player_ZDを開き、Character Movement⇒右の詳細からWalkable Floor Angle　※登れない場合はタイルマップのトランスフォームの位置Yを0に。
  28. 登れる段差設定：BP_Player_ZDを開き、Character Movement⇒右の詳細からMax Step Height

Discussion