2Dのゲームを作り方。 参考動画
【UE5/UE4】アンリアルエンジン
参考にさせて頂いたYoutubeチャンネル
【UE5を遊ぶ人】おおたに【Unreal Engine 初心者向けチュートリアル】様
UE5を使用した2Dゲームの作り方を教えてくれているチャンネルです。
今回の動画だけで、キャラクターの動作とステージの作り方を理解できるはず。
説明が上手なので、動画の終わる頃には同じものを作れていると思います。
動画をメインに勉強して、この記事を補足のテキスト資料として使ってください。
2Dのゲームを作り方。
【UE5/UE4】アンリアルエンジン

ドットで猫を作成。(自作)
猫のラグドールです。
これが結構大変だったので、動画通りに以下のサイトでダウンロードしてください。
作る場合、一つのモーションごとに6枚くらい画像が必要になります。
動きをなめらかにするなら、もっと必要。
活用アセットダウンロード先
活用アセット。(リス、虫、木などを無償で提供してくれています。)
寄付も出来るので、余裕のある人は検討してみてください。
https://itch.io/queue/c/394532/sunnyland?game_id=310715
ドット(ピクセル)絵のソフト
自分が使ったソフトは無料でも使えるdotpict。
https://dotpict.net/
スマホでダウンロードしてください。
画像の向きを細かく調整できるので、下のソフトもありです。
Steamの商品を紹介しても、何かもらえるわけではないのが残念。
ここがしっかりしてると、ゲームの販売支援になるはず。
この2つが有名だと思います。
2Dゲームの作り方 (モーション)
【UE5/UE4】
モーション(アクション)の作成
説明を見る
左上のエディットからプロジェクトセッティング(プロジェクトの設定)を選択。
defaと検索。
エディターのスタートアップマップを2DMapsを選択。(画像の下側)

ダウンロードしたアセットをUEにインストール。
※使うモーションごとにフォルダを分けてください。
ドラッグ&ドロップで、それぞれのフォルダに持っていくだけでOK。
今回はIdle、Run、Jumpを使います。
活用アセットダウンロード先
活用アセット。
https://itch.io/queue/c/394532/sunnyland?game_id=310715
Sunny-land-woods-files→SPRITES
キャラクター画像とモーションがあります。
ENVIRONMENTの中に木の画像。
画像のファイル形式がPNG (Portable Network Graphics)が条件。
PNGは背景を透明にできる特徴があります。
Paper2Dの適用
①インストールした画像をそれぞれ選択。(Shift押しながら)
②右クリック→スプライトアクション→Paper2D→スプライトを作成(同じ場所)
モーションにする
上記の処理がすむと、背景が紫色の画像が出来上がっています。
それらを選択。右クリックでメニューをひらく。
メニューの上側にあるフリップブックの作成を行います。
これで画像の順番通りに動くモーションが完成。
これらを作りたいモーションごとに繰り返します。
2Dゲームの作り方(ブループリントの設定)
【UE5/UE4】
メインキャラクターのブループリント
(Player_BPとPlayer_GM)
説明を見る
コンテンツフォルダの中にBlueprintのフォルダを作成。
右クリック→ブループリントクラスを選択。
メニューの下にあるALL CLASSESを選択。
検索にPaper Characterと入力。
Player_BPと名前を付けてください。
上側にあるタブのViewportをクリック。
左側にあるSpriteを選択。
右側にあるSpriteのSource Flipbookに作成したIdle画像を選択。

Sprtieを選択したまま、右側にあるサイズ変更で調整してください。
自分で画像を作った場合、プレイモードで確認しながら調整します。
左側にあるCapsule Component (Collision Cylinder)を選択。
このサイズを画像にあうように調整。 衝突判定に関係。
右側のメニューで調整してください。
カメラの調整
左側の上にある+Addを選択。
Spring Armを追加。
Spring Armを選択した状態で、+AddからCameraを追加。
SprinArmからカメラの位置調整。
その向けた側からの固定カメラになります。
コンパイルして保存。
(何か作ったり変更するたびに、コンパイル&保存と思ってください。)
(ゲームモード設定)
blueprintがあるフォルダで右クリック→Blueprint Classを選択。
Player_GMと名前をつけます。
ゲームパッドのようなアイコンに変化。
Player_GMを開いてください。
右側にあるDetails(詳細)から設定の変更。
Default Pawn ClassをPlayer_BPに変更。
(通常はDefault Pawnになっています。)
コンパイル&保存。
左上のWindowを選択。
World Settingsをクリック。
右側にあるDetailsの右にWorld Settingsという項目がでます。
Game Mode OverrideをPlayer_GMに変更。
これでメインのゲームモードが変更できます。
※デフォルトだと英語。設定で変更しているので日本語になっています。
通常はNoneになっています。

上側に□+のアイコン
基本(Basic)→Player Startをクリック。

右側の設定で、X軸、Y軸、Z軸の設定を変更。
Xを0、Yを0、Zを100。
コンパイル&保存。
これでようやく、Idle状態の画像が表示されます。
Zを100にするのは、3Dマップを見せない為。
あえて見せても面白い表現になるかもしれないですね。
特に縦の設定が重要です。
2Dゲームの仕組みは横に流れる紙芝居のようなもの。
ここが同じ位置にないと、画像の上にのってくれません。
2Dゲームの作り方(入力システムの作成)
【UE5/UE4】
入力システムの作成
説明を見る
おおたにさんの動画の21分30秒~42分くらいまで。
Contentフォルダ内にinputフォルダを作成します。
右クリックして、新規フォルダ作成。
名前をinputに変更。
inputフォルダの中で右クリック。
メニューにあるinput→Input Actionを選択。
システム名をMove_IAに。(任意)
Move_IA(動作の設定)
Move_IAをクリック。
Value TypeをAxis1D(float)に変更。
コンパイル&保存。
Move_IAのシステムの横で右クリック。
メニューにあるinput→Input Actionを選択。
Jump_IAと名付け。
他のシステムと分ける為。
同じフォルダ内。
メニューにあるinput→Input Mapping Contextを選択。
ゲームパッド3つのアイコン。
名前をIMCに。
IMCをクリック。
Mappingsにある+をクリック。
キーボードの横に矢印をクリック。
Jump_IA
Noneの所にJump_IAを選択。
キーボードのアイコンをクリック。
スペースボタンを入力。(space barに変わります。)
これでスペースキーでジャンプ出来るようになります。
Move_IA
もう一度Mappingsにある+をクリック。
Noneの所にMove_IA。
Move_IAの右側にある+を選択。
Aを左 Dを右に移動するように紐づけ。
AのModifiersをクリック。
Aをマイナスの動きにするのでnegateを入力。
保存。

Player_BPに移動。
上にあるタブのイベントグラフに移動。
Player_BPのブループリント内で右クリックで検索。
矢印マークのMove_IAを選択。
そうすると、Enhanced input Action Move_IAというノードがでます。
右にあるMappingにIMCを選択するのを忘れずに。
下記の画像になるように、ノードを繋げてください。
コンパイル&保存。
※ノードについて(プログラムがつまっている四角い箱と思ってください。)
これらを繋げていく事で、意図するプログラムができます。
IMC有効化する為のブループリント
Player_BPのイベントグラフ。

Player_BPのイベントグラフ。
動きを検知する仕組みです。
画像が自動で反転処理されるので便利。
Move_IAは矢印を選択。
Action valueは矢印をクリック。(隠れていたはず。)
Set World rotation(右にあるノード)
New rotationを右クリック→Split Struct Pinを選択。
動きを検知、向きを変える為のブループリント

現状だと、背景が入れ替わってしまう状態にあります。
Player_BP→Viewportに移動。
左側にあるSpring Armを選択。
右側にあるTransformにあるRotationをWorldに。(絶対回転の所)
コンパイル&保存。

ジャンプの為のブループリント
Player_BPのイベントグラフ。
FマークのJumpを使用。

Player_BPのイベントグラフ。
複雑に見えますが、左から右に指示が流れていくイメージです。
最初の赤いノードはadd custom eventと検索すると出てきます。
それにHandle Animationと入力。(名づけ)
左下が動きをとってくる仕組み。
Spriteは左側にあるメニューからとってください。
character movementも左側のメニュー(cameraの下の所にあります。)
このブループリントを作ると、横向きのアニメーションが反映されます。

2Dゲームの作り方(背景の作成)
【UE5/UE4】
背景画像をUE5で使えるようにする
説明を見る
コンテンンツフォルダ内に新規フォルダを作成。
名前はenvironment。
ダウンロードしたアセット。
environmentの中に木の画像素材があります。
これらをキャラクターの時と同様にUE5にドラッグ&ドロップ。
キャラクターの時と同じ処理を行います。
UE5で使用できるように変換 (英語版のやりかた)
使いたい素材を選択。
右クリックでメニュー。
Sprite Actions→Apply Paper 2D Texture Settingsを選択。
これでUE5用に変換されます。
背景に使えるように加工
使いたい素材を選択。
右クリックでメニュー。
Sprite Actions→Create Tile Setを選択。
透明な絵にタイルが敷かれているように変化。
使いたい素材をダブルクリック。(タイルになっている方)
Tile setのサイズを16と16にしてください。
木の幹のスライスされていない方を選択。
右クリック。
Sprite Actions→Create Tile Setを選択。
背景画像にコリジョンを設置する。
コリジョンは衝突する仕組み。
これがある事で、建物や枝などにのれるようになります。
絵にあわせて、見えない足場を設置するイメージ。
タイルセットの編集画面の上側。
コリジョンの設置の仕方
①コリジョンを置きたい場所をクリック。
②タイルの衝突(colliding tiles)をクリック。(左側)
③ボックスを追加(右側)
①と③の繰り返しです。※②は作業を始める時だけ。
青くなっている場所にコリジョンがあります。

サイトに商用利用、画像改変について書かれています。
絵が複数あるフォルダに戻り、右クリック。
Paper2D→タイルマップを選択。

名前はbackground。
これを開いてください。
backgroundの設定(右側)

右側のメニューの上にあるLayer1を選択。
左側のメニューにある白い□をクリック。
Active Tile SetがNoneになっています。
そこから先ほど作ったタイルセットに加工した背景を選んでください。
全体をとる事もできます。
また画像の一部だけをとる事も可能です。
レイヤーは一番上が手前にきます。
この感じでレイヤーを複数重ねると背景に。
文章では限界があるので、背景はおおたにさんの動画を見てください。
(49分あたり)
ブループリントは、全体像を掴むのに使ってもらえるとうれしいです。
モニターの都合で、テキストじゃないと不便な事もあります。
その為、文字におこしました。
自分のような素人でも同じものを作れたので、ぜひチャレンジしてみてください。