Open2023/09/07にコメント追加6

UE5 の Paper 2D プロジェクトを始めようを読む

はじめに

前段の説明。Blueprint scripting system には慣れておいてね。

Paper 2D の概要

Paper 2D はスプライトベースのプラグイン
2D か 2D/3D のハイブリッドゲームを作るためにある
主要な目的は、2D Assets のインポート・編集と利用を UE プロジェクトでスピーディーに行うこと
Sprite assets は Texture Mapped Planar Mesh と特定の Paper 2D Material から構成される
これらは、UE 内の Paper 2D Sprite Editor で編集できる
複数のスプライトをまとめてアニメーションにできる、Flipbook と呼ばれている
同じ Sprite asset は repeated tiles using a tile set Asset によってレベル構築に使われる
Paper 2Dは、ソースアセットをインポートするためのツールを提供し、使用する comporession と filter settings が2D Artwork を確実に輝かせる。
- これはよくわからん。。
ここまでで述べた以外の new functionality は Paper 2D は提供しない。
よって、core gameplay logic, camera control, and player input は UE の基本機能に乗ることになる
2D animation states の solution は提供しない
3D Character で作業したような animation state machine は存在しない
- Blueprint logic で自分たちで取り組む必要がある

プロジェクトと環境の作成

UE5.2 だとプロジェクトテンプレートに 2D Sidescroll が無いので以下のプロジェクトテンプレートを 5.2 で開いた。

問題なく動作しているように見えるがどうだろうか。

W で jump と解説されているが、Space で jump する。
Paper2D の version 1.0 が同じように UE5.2 でも入っている
2DSideScrollerCharacter の parent は PaperCharacter
これは Paper2D Plugin が追加したもの
Camera Settings の Projection Mode は Orthographic (平行投影, 正投影)
これは Game camera が Orthographic を使っているということ
Viewport で Left / Unlit にすると Orthographic でどう見えるかが分かる
続いて一つ足場を選択する
これは PaperSpriteActorとなっている
これも Paper2D Plugin が追加したもの

ソースアセットのインポート

マーケットプレイスから作ったためか、MyContent にすべて作成済のアセットが入っている。（というか、ビデオにある TGA ファイルとかが逆に手に入らないので仕方ないか）

読み込んだ TGA から sprite action を選ぶ
- Apply Paper2D Texture Settings
これは自動的に 2D Assets 用の正しい設定を apply するらしい
アセットの詳細を見る
まず、Compression Settings が UserInterface2D になっている
- これで disabled texture compression となるらしい
default は DXT Compression
- 高解像度のテクスチャを使う 3D の場合は有用。目に見えない程の品質低下 (imperceptible reduction in quality) しかない。
今回のアセットの解像度は 512x256
- 3D Character だと 2048x2048 とかになるので、making compression a necessity。
続いて Level Of Detail
Texture Group が 2D Pixels (unfiltered) になっている
Texture filtering は通常、画像の滑らかさや見た目を改善するが、今回は blurry に見せたいため望ましくない
ここまで Paper2D の import での自動設定はうまく働いているようにみえる
でも少し調整する
１つ目は Mip gen Settings を NoMipmaps にすること
- サンプルはすでにそうなっているが、おそらくこの調整が済んでいる状態
- Mipmap の intricacy はこのコースの範囲を超えている
Mipmap はカメラから遠ざかるにつれて、オブジェクトの detail が reduce されるように使われる
今回は Orthographic でカメラが設定されるので、すべてのオブジェクトはカメラから同じ距離に固定される。
- よって、mipmap は容量を食う以外に役に立たない (serve no purpose other than eating up space)
続いて透過処理
サンプルの場合はすでに以下のようにタイルやレールの背景は透過に切り抜かれているが、import 時点ではそうはならない
import 直後はこんな感じらしい
よって、UE にこのグレー色を透明にみなすように指示する必要がある。Chroma key として定義することで。
Adjustments の Chroma Key Texture に check を入れて、Chroma Key Color でグレーカラーをスポイトで拾ってやれば OK
Character の assets も同様に import していく
複数の texture が選択された状態で Apply Paper2D Texture Settings して OK
Character の Texture は最初から透過ができているが、これは Chroma key の default のカラーと一致した色にしているから
Mip gen Settings を NoMipmaps にするのは手作業で行う

フリップブックの作成

Sprites フォルダの下にさらに Character そして、各アニメーション用 Texture ごとにフォルダを作る
まずは Walk から。T_UE4Robot_Walk_D の Texture ファイルのコンテクストメニューから、Sprite Actions -> Extract Sprites を選択。
Extract sprites ウィンドウが開くと、まず Sprite Extract Mode が Auto になっていることが分かる。
- それによって、Sprite がキレイに画像に沿って矩形で切り取られている
ただし、これだと後で困ることがあるので、同じサイズで extract したい
- ここでは各画像は 64x64 でデザインされている
Sprite Extract Mode を Grid にする
画像全体を囲う矩形が現れる
続いて Grid の Cell Width/Cell Height を 64 に変更する
アニメーションのフレームごとにキレイに extract されている
切り抜きを実行すると、連番をつけてファイルを出力する。0 始まりである。
- Sprites/Character/Walk フォルダに移動しよう
続いて Flipbooks フォルダを作る。構造は Sprites と同じ。
Sprites/Character/Walk にあるファイルをすべて選択してコンテクストメニューから Create Flipbook を選択
すると、Flipbook が作成される
Flipbook_UE4Robot_Walk のようにわかりやすい名前にしておこう
- Flipbooks/Character/Walk フォルダに移動しよう
作成した Flipbook を開くと、連番の並び通りにタイムラインに並んでいることが分かる
Play/Pause や Pause 中に赤の playhead をドラッグして好きな場所にアニメーションを移動できる
Frames per second の調整でアニメーションの速度を変えられる
- 今回のアニメーションはこの変更が不要なように作成されているので変更は不要
- 変更不要なようにアニメーションの sprites を書くのはどうするんだろう

タイルセットの作成

新しいフォルダ Tilesets
Textures に Import した UnrealPaper2DTileset_Master のコンテクストメニューで Sprite Actions -> Create Tile set
すると Tile Set が作成される
Tilesets フォルダに移動させる
Tileset を開く
Tileset Editor は左の Tile Set View と右の Single Tile Editor View で構成される
つまり、左で一つの Tile を選ぶと、右に詳細が表示される
が、上記のように、初期状態では期待する Tile が選択されない（ずれている）
解消する方法は２つある
まず１つは、 Tile Size を変更すること
もう一つは Boarder Margin と Per-Tile Spacing を調整すること
この状態だと画像のように、タイル画像の周囲が margin によって数px選択されない状態になる。ただ、これはデザインとしてこれでいいらしい
続いて Collision
Colliing Tiles で適用済の Collision が確認できるが、初期では当然無い
Add Box することで Collision が作成される
しかし、Tile の領域そのままで作成されるので、例えばこの画像だと適切ではない (下が邪魔)
よって範囲を調整する
わかりにくいが、Single Tile Editor で調整しても、Tile Set View の範囲は変わらない。ただ、調整はできている。
四角以外はどうするか。Polygional Shape を使う。
まずは、三角。Add Polygon クリックすると、Single Tile Editor の方で複数回点を打てる。時計回りに打っていき、終点でダブルクリック。
小さいが、一応説明はここに出ている。
Shift + Click で追加。Delete で削除。Grid Snap を効かせていると上手く沿わないので、外してもいい。
今回、以下のレールに関しては、デコレーション用途でしかないので collision は追加しない。

タイルマップの作成

Tilemaps フォルダ作成
Tilesets フォルダにある、先程作った Collision 付きの Tile Set のコンテクストメニューから Createa Tile Map を選択
Tilemap が生成されるので Tilemaps フォルダに移動させる
Tile Map Editor を開く
左は active な Tileset。 Active Tile Set オプションで変更できる。
中央は Tilemap 自身で、右は詳細パネル。
Tile Width/Height は Tileset から自動算出されている。これは、Tileset から Tilemap を生成したから。
Map Width/Height は Tilemap にいくつ Tile が入るか
- 見ての通りで、この設定だと 4x4 しかはいらない
Tile Grid オプションを有効にすると、Tilemap がグリッド表示になる
Tilemap の Layer
今回は 3 つのレイヤを用意する
- Foreground / Middle / Background
- Middle は Player に collide するもの
- Foreground /Background は装飾
- Foreground / Middle / Background はそのままカメラからの位置にもなる
Background は Layer Collides が False になる
Middle は Layer Coolides が True。Background より上。
Foreground は Background と同様。Middle より上に配置する。
今回のように、Foreground -> Middle (Player) -> Background と配置が重要な場合は Setup -> Separation Per Layer のオプションが重要になる。
Paint Mode
- left Click や Drag で書いていける、Ctrl + Z で Undo, または Eraser で消しゴム
- Shift + Left Drag でペイント済の範囲を選択すると、その範囲をそのままペイントできる
以下のように Active Tile set の方をドラッグ選択してペイントすることもできる
Active Tile Set の左上の回転や反転ツールを使ってペイントを調整できる
Fill はこのように空いた空間を埋めるのに使う
以下のように background を塗りつぶすような用途にも使える
Foreground はレールをおいて完了

プレイ可能なレベルの作成

Levels フォルダを作成
新しい Level を作成。MyTilemapLevel と命名。
先程作った Tilemap を新規レベルにドロップし、Location を (0,0,0) にする。
まず、Perspective を Right に変更する
この Wireframe 画面は traditional な 3D Game を作るにはいいが、今回は有用ではない
よって Unlit にする
Alt + drag で複製する
Snap の Grid 間隔が合わない場合には以下の Editor preference で 2 の累乗に変更できる

Player Start を配置する
Tilemap で Foreground/Middle/Background を Separation per layer で 4.0 で設定しているので、Player Start を Middle に配置するために、Y 軸を -4 に指定する。
- これは、最初の Tilemap を (0,0,0) に配置したことからの相対位置になる。
この状態で Play すると以下のようにキャラクターが spawn される
- サンプルが GameMode が変更済なのでビデオとは異なり、すでに import したアセットのキャラクターが出てくる
- ビデオだと、SideScrollerSample のキャラクターが出てくる