2Dゲームのチュートリアルもやってみた
今回はこの動画のチュートリアルをやってみた。
3次元の世界でどうやって2次元ゲームを作るのか興味があって。
めっちゃ早口なので0.75倍で見たけど、自動翻訳字幕のペースも作業ペースもちょうどよかった。
How to make a 2D Game in Unreal Engine 5 – [2024] Beginner Tutorial
プロジェクトの設定
Edit Startup MapとGame Default Mapに新しく作ったマップを設定。
公式資料：Paper2D – インポート
一番のポイントはDefault Pixels Per Unreal Unit。
場所は Editor > Paper2D – Import > New Asset Settings
1.0だとUEの1cmユニットがスプライト1pxということらしい。
今回はスプライトのサイズを3倍適用するため、0.33をセット。
スプライトにも個別に設定できるけど、先に設定した方が楽。
アセットのインポート
まずはコピーしてきた直後のぼやぼやしているのを修正。
右クリック > Sprite Actions > Apply Paper 2D Textire Settings
タイルセットとタイルマップ
公式資料：Paper 2D Tile Sets / Tile Maps
背景の全ファイルを選択して右クリックSprite Actions > Create Tile Set
キャラクターに干渉するタイルセットだけ次の設定。
・タイルサイズ（今回のサンプルは16×16）
・衝突判定（タイルを選択してAdd Boxで作成、左上のColliding Tilesで可視化）
設定したタイルセットを右クリックしてCreate Tile Mapでタイルマップ作成。
タイルマップの編集画面でまずはマップサイズを広げて作業しやすくする。
画面の左側から配置したい範囲をドラッグで選ぶと、画面の真ん中のマップに配置できる。
レイヤーを分けて背景を作る。
マップにステージタイルをドラッグして位置を000に設定。
レベルの左上の「Show」から「Collision」にチェックを入れると衝突範囲が見える。
マップが裂けるのを防ぐために、全てのタイルセットに次の設定をする。
TileSetを右クリック > Condition Tile Sheet Texture
キャラクターの作成
公式資料：Paper 2D スプライト
キャラクターのファイルで右クリック > Sprite Actions > Extract Sprits
作成されたファイルを開き、Extract ModeをGridにする。
GridのCell Width、Cell Heightを変更して、キャラクター1体ずつ同じサイズになるように設定する。
今回は4体x4体だったので縦横それぞれMAXから4割った数字。
作成されたファイルのうち、空のものを削除。
公式資料：Paper 2D フリップブック
分割されたキャラクターからアニメーションに使う分を選択して右クリック > Create Flipbook
作成されたFlipbookをダブルクリックして、Frames Per Secondの設定により速度調整が可能。
ここで作成したのはIdle、Run、JumpRise、Fallの4種。
キャラクターブループリントの作成
Paper2Dのキャラクタークラスは通常のCharacterではなくPaperCharacterで作成する。
クラスのViewportで次の設定をする。
・SpriteでSouce FlipbookにIdle用のフリップブックを設定
・CapsuleでCapsule Half HeightとCapsule Radiusをキャラにぴったりになるよう設定
・Spriteでキャラクターの足元をCaplsule Componentに合わせるためZ座標を-2に設定
キャラクターをマップにおいてみる。
平面に位置を揃えるにはY=0を設定。
OutlinerでステージのY位置を-0.1にすることでちらつきを軽減。
2Dの見せ方のための設定
参考にしたのがこちらのサイトとのこと。日本語！！！
UE5.1 最適なポストプロセス設定 / 2D ドット絵
プロジェクト設定
| 項目 | 設定値 |
|---|---|
| Motion Blur | OFF |
| Anti-Aliasing Method | None |
| Auto Exposure | OFF |
| Auto Exposure Bias | 0 |
| Dynamic Global Illumination Method | None |
| refrection method | None |
| Shadow Map Method | Shadow Maps |
| Ambient Occlusion | OFF |
| Ambient Occlusion Static Fraction | OFF |
Post Process Volumの作成と設定
マップの□+をクリックしてVolumes > Post Process Volumeを作成して設定
| 項目 | 設定値 |
|---|---|
| Location | 0-0-0 |
| Infinite Extent（Unbound） | ON |
| Min EV100 | 0 |
| Max EV100 | 0 |
| Vignette Intensity | 0 |
| Expand Gamut | 0 |
| Tone Curve Amount | 0 |
プレイヤー操作の設定
ゲームモードの作成
BlueprintフォルダでBlueprint ClassのGame Mode Baseを作成。
Default Pawn Classに作成したキャラクタークラスを設定。
プロジェクト設定のMaps & ModesのDefault GameModeに設定。
マップに置いてたプレイヤーを削除してPlayer Startを配置。
カメラの作成
プレイヤークラスのViewportでSpring ArmとCameraを作成。
回転をZ軸-90度にして、Projection ModeをOrthographicに設定。
Ortho widthでカメラの距離を設定 700。
Spring ArmのDo Collision Testのチェックをはずす。
入力受付
Input Mapping Context とInpute Actionの作成してプレイヤークラスに実装。
もっと複雑にアニメーションを組みたいときはPaperZDというプラグインを使うと便利っぽい。
最後の微調整
Character Movement(CharMoveCom)の設定変更
| 項目 | 設定値 | 効果 |
|---|---|---|
| Gracvity Scale | 3 | 落ち方がふわっとしてたのがしゅっとなった |
| Jump Velocity | 800 | 重力変更で高く飛べなくなったのが直った |
| Air Controll | 0.7 | 反応が良くなった |
| Use Flat Base for Floor Checks | ON | 崖から落ちるセーフティゾーンが広すぎるのを修正 |
| Constrain to Plane | ON | 平面に拘束させる、オブジェクトによって前後ずれる対策。 |
| Plane Constrant Normal | Y=1 | 拘束する平面の位置を指定 |
この動画を制作したCobra Codeさんが、ここまでの設定や基本的なコーディングの部分をまとめてプロジェクトのテンプレートを作って配布してくれてる。
すごいありがたい。
https://cobracode.notion.site/Unreal-Engine-2D-Templates-91717d7380c54dbca19bd3e4cfab506d
感想
3次元前提のライティングや効果がデフォルトで入っている分、2次元を2次元らしく見せるのにいろいろな設定を見直す必要があって大変なんだなと思った。
これを解明して公開してくれる人たちには本当に感謝だね。
配布プロジェクトがあっても基礎知識とメカニズムを知らないとうまく扱えないので、やっぱりチュートリアルはやってよかったし大事。
ドット絵も最初は興味なかったけど、実際に動くとかわいく思えてきた。