気まぐれに何か作ってはメモするブログ

2Dゲームのチュートリアルもやってみた

今回はこの動画のチュートリアルをやってみた。
3次元の世界でどうやって2次元ゲームを作るのか興味があって。
めっちゃ早口なので0.75倍で見たけど、自動翻訳字幕のペースも作業ペースもちょうどよかった。


プロジェクトの設定

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
キャラクターに干渉するタイルセットだけ次の設定。
・タイルサイズ(今回のサンプルは16x16)
・衝突判定(タイルを選択して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さんが、ここまでの設定や基本的なコーディングの部分をまとめてプロジェクトのテンプレートを作って配布してくれてる。
すごくありがたい。
Unreal Engine 2D Templates

感想

3次元前提のライティングや効果がデフォルトで入っている分、2次元を2次元らしく見せるのにいろいろな設定を見直す必要があって大変なんだなと思った。
これを解明して公開してくれる人たちには本当に感謝だね。
配布プロジェクトがあっても基礎知識とメカニズムを知らないとうまく扱えないので、やっぱりチュートリアルはやってよかったし大事。
ドット絵も最初は興味なかったけど、実際に動くとかわいく思えてきた。

INDEX