# ?? 2D Side Scroller 模板工程分解

UE4 自帶的 2D Side Scroller 即 2D 橫卷軸游戲工程模板，基于 Paper2D 動(dòng)畫幀來創(chuàng)建運(yùn)動(dòng)角色形象是常用技術(shù)。使用了 Flipbook 的示范內(nèi)容，包括 2DCharacter_IdleAnimAtlas 和 2DCharacter_RunAnimAtlas.TGA 兩張動(dòng)畫幀圖片，可以將它們從工程中導(dǎo)出：右鍵菜單 Asset Actions -> Export。也可以上 Game Art 2D 網(wǎng)站上找圖片資源。

分解一下 2D Side Scroller 模板項(xiàng)目，2DSideScroller 目錄下主要是包含了 Textures 目錄下的動(dòng)畫幀圖片，和 Sprites 目錄下和個(gè)動(dòng)畫幀對(duì)應(yīng)的精靈對(duì)象。

最主要是 2DSideScrollerBP 目錄下的藍(lán)圖對(duì)象，Maps/2DSideScrollerExampleMap 是一個(gè)默認(rèn)關(guān)卡地圖，打開項(xiàng)目后，視圖看到的場(chǎng)景就是它。這個(gè)關(guān)卡上設(shè)置了簡單的場(chǎng)景，可以在 World Outline 窗口中看到，Ledges 分組下有幾個(gè)固定的平臺(tái)擋板，包括場(chǎng)景兩邊的邊界限制 LeftEdge、RightEdge，還有背景，它們都是 `PaperSprite` 類型，在 Details 可以看到 Collision 設(shè)置了 Can Character Step Up On，可以站在這個(gè)對(duì)象上面而不會(huì)掉下來。注意 Collsion Presets 設(shè)置了 PhysicsActor，這表示角色對(duì)象在模擬的物理世界中，如果沒有相應(yīng)的碰撞設(shè)置，物理對(duì)象就不會(huì)邊界接觸時(shí)產(chǎn)生的效果。

Enable Gravity 默認(rèn)打開表示受重力，但 Simulate Physics 沒有，所以重力模擬并沒有生效，物件也不會(huì)有下墜跌落的效果。在打開物理模擬的情況下，即使沒有重力，其它物理對(duì)象踩踏也會(huì)有作用。

場(chǎng)景中還有一個(gè)人物角色，對(duì)應(yīng)內(nèi)容瀏覽器的 Blueprints/2DSideScrollerCharacter，這個(gè)藍(lán)圖對(duì)象的設(shè)置才是重點(diǎn)，整個(gè)示范工程的邏輯基本都是它編排的。

在選中藍(lán)圖對(duì)象的情況下，可以點(diǎn)擊 Details 面板上的 Edit Blueprint 按鈕打開藍(lán)圖編輯器，可以看到 2DSideScrollerCharacter 藍(lán)圖對(duì)象的層次結(jié)構(gòu)，并可以在藍(lán)圖的 Viewport 中編輯這些對(duì)象：

? ? +-- 2DSideScrollerCharacter(Blueprint 對(duì)象)

? ? ? ? +-- CapsuleComponent(Inherited) 用于碰撞檢測(cè)的膠囊?guī)缀误w?

? ? ? ? |? ?+-- ArrowComponent(Inherited) 箭頭組件是簡單的形狀，表示對(duì)象的朝向，箭頭不會(huì)在實(shí)際游戲中顯示

? ? ? ? |? ?+-- Sprite(Inherited) 角色 Flipbook 動(dòng)畫組件

? ? ? ? |? ?+-- CameraBoom(Spring Arm Component) 彈簧手臂組件

? ? ? ? |? ? ? ?+-- SideViewCameraComponent(Camera Component) 對(duì)角色進(jìn)行攝像

? ? ? ? +-- CharacterMovement(Inherited) 運(yùn)動(dòng)組件讓角色具有運(yùn)動(dòng)能力?

SpringArmComponent 使其子項(xiàng)延長固定距離，然后在發(fā)生碰撞時(shí)收回，和 CameraComponent 一起使用，可以提供一個(gè)第三人稱視角，切換攝像機(jī)使用 SetViewTargetWithBlend。

打開藍(lán)圖對(duì)象的 EventGraph，里面主要處理了用戶輸入時(shí)對(duì)應(yīng)的響應(yīng)邏輯，如跳躍、移動(dòng)等，還有引擎因?yàn)榈氖录?BeginPlay 和 Tick。此外還有自定義的動(dòng)畫更新 UpdateAnimation 事件，這個(gè)事件由 Event Tick 調(diào)用，根據(jù)狀態(tài)來調(diào)用 SetFlipbook 函數(shù)更改角色動(dòng)畫。

`UpdateAnimation` 事件的藍(lán)圖邏輯：

- 首先，由 Event Tick 調(diào)用，即 Event Tick 節(jié)點(diǎn)的執(zhí)行流接入到 Call Function UpdateAnimation 節(jié)點(diǎn)的執(zhí)行流輸入端；

- 調(diào)用 Actor 對(duì)象的 GetVelocity() 得到移動(dòng)速度值；

- 經(jīng)過 Math Library 的 VectorLength() 處理得到向量長度，注意是向量的模，并經(jīng)過一個(gè)浮點(diǎn)值比較，使用 `Float Greater` 節(jié)點(diǎn)，看是否大于 0 即有移動(dòng)；?

- 使用一個(gè) Select 分支選擇節(jié)點(diǎn)，匹配前面的得到的布爾值，并按布爾值輸入 RunningAnimation 或 IdleAnimation；

- 將 Select 分支節(jié)點(diǎn)輸出的 Flipbook 對(duì)象輸入到 SetFlipbook 函數(shù)節(jié)點(diǎn)的 NewFlipbook 參數(shù)端口；

- SetFlipbook 的 Target 端口是一個(gè) Flipbook 引用，這里就是藍(lán)圖對(duì)象中的 Sprite，通過 GetSprite() 獲取引用；

UpdateAnimation 事件處理走完流程后，藍(lán)圖對(duì)象的 Sprite 就會(huì)設(shè)置正確的一個(gè) Flipbook 動(dòng)畫，如果是 RunningAnimation 則還要在 Tick 流程中處理左右方向，只需要沿 Z 軸即豎直方向翻轉(zhuǎn) 180° 即可。

`Event Tick` 事件的藍(lán)圖邏輯：

- 由 UE4 引擎觸發(fā) Event Tick 事件的處理；

- 執(zhí)行流程進(jìn)入自定義的 UpdateAnimation 事件處理，并設(shè)置好 Sprite 對(duì)象；

- 另一邊，通過 GetMovementComponent() 獲取移動(dòng)組件，獲取其 Velocity 屬性，也可以直接將 CharacterMovement 組件拖放到 EventGraph；

- 注意，因?yàn)槭且苿?dòng)組織的屬性，所以添加節(jié)點(diǎn)時(shí)，選擇 Movement Component 的 GetVelocity()，可以關(guān)閉 Context Sensitive 選項(xiàng)以檢索完整的節(jié)點(diǎn)列表；

- 使用 `Break Vector` 節(jié)點(diǎn)從 Velocity 向量中分離出 X 軸上的分量；

- 將 X 分量通過 `CompareFloat` 節(jié)點(diǎn)與 0.0 進(jìn)行比較，得到 3 種結(jié)果，對(duì)應(yīng)三個(gè)子流程；

- 小于或大于 0.0 的兩種情況表示向左、向右有移動(dòng)，那么就根據(jù)移動(dòng)方向，執(zhí)行 SetControllerRotation()，需要做翻轉(zhuǎn)的一個(gè)流程輸入一個(gè) `MakeRotator` 并配置 Z 值 180，這樣 Flipbook 的角色動(dòng)畫方向就正確了；

- 對(duì)于等于 0.0 的情況，只需要播放 IdleAnimation，根據(jù)藍(lán)圖變量 bisMovingRight 來判斷角色最后是往什么方向移動(dòng)，配合 `Branch` 節(jié)點(diǎn)做條件分支，使用同樣的控制器翻轉(zhuǎn)操作。

- 使用 Pawn GetController() 來獲取角色的控制器對(duì)象；

`Axis Events MoveRight` 事件處理即運(yùn)動(dòng)處理邏輯：

- 由引擎接收到用戶輸入，并執(zhí)行 MoveRight 事件，得到 AxisValue 浮點(diǎn)值；

- 使用 Branch 節(jié)點(diǎn)做流行執(zhí)行；

? ? - 使用 Float Greater 判斷，AxisValue 大于 0.0 就執(zhí)行 Set bisMovingRight 節(jié)點(diǎn)，將變量設(shè)置為 true 值，表示向右移動(dòng)了；

? ? - 否則，使用 Float Less 節(jié)點(diǎn)，也可以用 float < float 找到，判斷 AxisValue 小于 0.0 就執(zhí)行 Set bisMovingRight 將變量設(shè)置 false 值；

- 最后，執(zhí)行 Pawn 的 AddMovementInput 函數(shù)，WorldDirection 使用單位向量 (1,0,0)，AxisValue 作為 ScaleValue 與單位向量運(yùn)算，得到移動(dòng)的向量；

Pawn 還有其它類似的疊加輸入值的函數(shù) AddControllerPitchInput、AddControllerRollInput、AddControllerYawInput，注意 AController 本身是 AActor 的子類。

跳躍事件處理邏輯中使用了兩個(gè)事件：

- `Action Events Jump` 引擎默認(rèn)的跳躍事件，如按空格、向上箭頭；

- `Input Touch` 觸屏輸入，觸摸時(shí)就會(huì)跳躍，離屏就停止跳躍動(dòng)作；

- 兩個(gè)事件的 Pressed 執(zhí)行流程都會(huì)調(diào)用角色的 Jump 函數(shù)；

- 兩個(gè)事件的 Released 執(zhí)行流程都會(huì)調(diào)用角色的 StopJumping 函數(shù)；

也可以直接設(shè)置一個(gè) Keyboard Events J 事件來觸發(fā)跳躍動(dòng)作，但是這樣硬編碼不是很好。

UE4 的工程配置中，默認(rèn)設(shè)置了用戶輸入的事件映射關(guān)系：

- Action Mappings 配置中將 W、UP、SpaceBar、Gamepad Face Button Bottom 即手柄的 A 按鈕映射為 Jump 事件；

- Axis Mappings 配置中將 A、D、Left、Right、Gamepad Left Thumbstick X-Axis 即手柄的左搖桿的左右方向映射為移動(dòng)事件；

相當(dāng)于使用 C++ 代碼的 BindAxis 和 BindAction 方法綁定事件與調(diào)用函數(shù)：

```cpp

void AMyPawn::SetupPlayerInputComponent(UInputComponent* PlayerInputComponent)

{

? ? Super::SetupPlayerInputComponent(PlayerInputComponent);

? ? // 移動(dòng)軸事件逐幀反應(yīng)，并提供 AxisValue 值。

? ? PlayerInputComponent->BindAxis("MoveRight", this, &AMyPawn::move);

? ? // 動(dòng)作事件只在按下或松開按鍵時(shí)做出響應(yīng)。

? ? PlayerInputComponent->BindAction("Jump",IE_Pressed,this,&AMyCharacter::jump);

}

```

綁定是通過委托 Delegate 泛型類型安全實(shí)現(xiàn)的，參考 `InputComponent` 類實(shí)現(xiàn)。

涉及對(duì)象的源代碼位于 Paper2D 插件和 Engine\Source\Runtime\Engine\Classes\GameFramework\Actor.h

地圖中有一個(gè) PlayerStart 對(duì)象，表示游戲玩家的出場(chǎng)位置。

另一個(gè)重要的對(duì)象是 2DSideScrollerGameMode，它是一個(gè) Data-Only Blueprint Class，只是單純繼承 AGameBase 基類。工程模板只創(chuàng)建這個(gè)可使用簡單人物的 GameMode 對(duì)象，并讓它使用人物角色，在 Default Pawn Class 屬性指定 2DSideScrollerCharacter，這樣開始游戲時(shí)，引擎就會(huì)將其實(shí)例化作為玩家操控的角色。

- 在 Content Browser 中，單擊 New 按鈕，然后單擊 Blueprint Classs 選項(xiàng)。

- 在彈出的窗口內(nèi)單擊 Game Mode 按鈕，以它為父類。

- 命名后打開 GameMode 藍(lán)圖并單擊 Defaults 選項(xiàng)卡。

- 在 Defaults 選項(xiàng)卡的 Classes 部分，單擊 Default Pawn Class 下拉菜單并選擇新人物。

- Compile 并 Save，然后關(guān)閉藍(lán)圖。

- 在主編輯器窗口中，單擊菜單欄上的 Edit 按鈕并選擇 Project Settings。

- 現(xiàn)在，我們要讓我們的項(xiàng)目使用新建的 GameMode。

- 在 Project Settings 中，單擊 Maps & Modes 選項(xiàng)。

- 在 Maps & Modes 的 Default Modes 部分，單擊 Default GameMode 下拉菜單并選擇你的 GameMode。

最后，游戲的進(jìn)行還需要一個(gè)場(chǎng)所，即 Level Map 中設(shè)計(jì)的場(chǎng)景，項(xiàng)目提供的是 2DSideScrollerExampleMap，還有相應(yīng)的 MapBuildData 即地圖注冊(cè)數(shù)據(jù)。?

通過 Project Settings -> Project -> Maps & Modes 可以給項(xiàng)目指定一個(gè) GameMode 對(duì)象：

- Default GameMode 指定工程默認(rèn)游戲模式對(duì)象；

- Game Startup Map 指定開始游戲時(shí)加載的關(guān)卡地圖；

- Editor Startup Map 指定打開編輯器時(shí)加載的關(guān)卡地圖；

每個(gè)關(guān)卡都有一個(gè)默認(rèn)的關(guān)卡藍(lán)圖 Level Blueprint。它很特別，與一般的藍(lán)圖不同，它是管理整個(gè)地圖的全局事件，并且 UE 4 不允許自己創(chuàng)建關(guān)卡藍(lán)圖。

此工程模板中的關(guān)卡藍(lán)圖并沒有設(shè)置什么功能，只是布置了場(chǎng)景內(nèi)容的一些跳臺(tái)和阻擋物。

這也是一個(gè)簡單的功能示范，缺少完整游戲的其它功能，比如與敵人的搏殺，關(guān)卡的轉(zhuǎn)換，各種上 NPC 角色的設(shè)置等等。

下一步，通過官方文檔學(xué)習(xí)其它關(guān)鍵內(nèi)容，也可以使用官方提供的學(xué)習(xí)示范資源，如 Content Examples 就包含大量基礎(chǔ)的知識(shí)點(diǎn)示范案例。

# ?? Paper2D 二維游戲系統(tǒng)

- 藍(lán)圖中的Flipbook組件 https://docs.unrealengine.com/4.27/zh-CN/AnimatingObjects/Paper2D/Flipbooks/Components/Blueprints/

- 設(shè)置 2D 角色的動(dòng)畫狀態(tài)機(jī) https://docs.unrealengine.com/4.27/zh-CN/AnimatingObjects/Paper2D/HowTo/Animation/

- Paper 2D Import Options https://docs.unrealengine.com/4.27/en-US/AnimatingObjects/Paper2D/Importing/

- Paper 2D Sprites https://docs.unrealengine.com/4.27/en-US/AnimatingObjects/Paper2D/Sprites/

- Paper 2D 組件 https://docs.unrealengine.com/4.27/zh-CN/Basics/Components/Paper2D/

- Components 組件 https://docs.unrealengine.com/4.27/zh-CN/Basics/Components

- Paper 2D 圖塊集/圖塊地圖 https://docs.unrealengine.com/4.27/zh-CN/AnimatingObjects/Paper2D/TileMaps/

- Paper 2D Content Examples https://docs.unrealengine.com/4.27/en-US/Resources/ContentExamples/Paper2D/

Paper2D 是 UE4 提供的基于精靈的 2D 游戲系統(tǒng)，可以用于構(gòu)建 2D 和 2D/3D 混合游戲。

在 2D 游戲中，基于動(dòng)畫幀來創(chuàng)建運(yùn)動(dòng)角色形象是常用技術(shù)。使用 UE4 自帶的 2D Side Scroller 即 2D 橫卷軸游戲工程模板就自帶了 Flipbook 的示范內(nèi)容，包括 2DCharacter_IdleAnimAtlas 和 2DCharacter_RunAnimAtlas.TGA 兩張動(dòng)畫幀圖片，可以將它們從工程中導(dǎo)出：右鍵菜單 Asset Actions -> Export。也可以上 Game Art 2D 網(wǎng)站上找圖片資源。

目前 Paper2D 的動(dòng)畫系統(tǒng)是基于幀動(dòng)畫的，社區(qū)討論中雖然有加入 2D 骨骼動(dòng)畫系統(tǒng)的討論，但是目前的正式引擎版本中并沒有這樣的功能。

Paper2D 提供了四種 Components 對(duì)象，可以在內(nèi)容瀏覽器中添加：

- Sprite 精靈

- Flipbook 幀動(dòng)畫

- Tile Set

- Tile Map

## ? PaperSprite

`Sprite` 是幀動(dòng)畫的基本組織單位，它來源于對(duì) Texture 即動(dòng)畫幀圖片的裁剪，形成動(dòng)畫的一個(gè)幀精靈并最終用于 FlipBook 動(dòng)畫播放。同時(shí) UE4 支持導(dǎo)入 Texture Packer 和 Adobe Flash CS6 生成的幀動(dòng)畫。

精靈的默認(rèn)材質(zhì)是 Paper2D 系統(tǒng)提供的 MaskedUnlitSpriteMaterial 材質(zhì)，它可以將 Texture 透明區(qū)過濾掉，如果需要反轉(zhuǎn)過濾使用 MaskedLitSpriteMaterial。

Sprite 屬性參考：

- Source Texture 當(dāng)前精靈所使用的 2D 圖像

- Source UV 裁剪的起始點(diǎn)在原圖形上的偏離，像素單位

- Source Dimension 從起點(diǎn)開始裁剪指定的像素大小，和前面一組設(shè)置就可以將動(dòng)畫幀中的一個(gè)狀態(tài)圖片裁剪出來。

- Default Material 精靈的默認(rèn)材質(zhì)，這個(gè)材質(zhì)屬性可以被 Flipbook 的設(shè)置覆蓋。

- Additional Textures 為精靈提供額外的貼圖，當(dāng)前文檔中沒有給出描述。

- Pixels per unit 設(shè)置像素與引擎內(nèi)部單位之間的縮放比例，用于調(diào)整精靈在 UE 世界中的大小。在 Paper2D 的插件設(shè)置中有全局設(shè)定，也可以對(duì)每個(gè)精靈進(jìn)行指定。

- Pivot Mode 中心點(diǎn)位置。設(shè)置為 Custom 的話可以進(jìn)行精細(xì)的設(shè)置。

- Sockets 和 3D 動(dòng)畫中的 Sockets 功能時(shí)類似的，提供一個(gè)槽口來放置裝飾物件。

- Collision 精靈碰撞系統(tǒng)設(shè)置，可以選擇無碰撞或者3D。

往 Sprite 添加插槽裝飾物，可以生成粒子特效，如身上著火的角色，或?qū)⒁话盐淦鳎ㄈ缫话褬尰蛞话褎Γ└郊拥浇巧稚希蛏扇我鈹?shù)量的各種物品并附加到 Sprite 的插槽。添加插槽后，通過藍(lán)圖訪問 Sprite 插槽，并設(shè)置將其它 Sprite 組件附加到插槽上。可以使用 Property Matrix 同時(shí)對(duì)所有 sprite 進(jìn)行修改，節(jié)約時(shí)間。

通過藍(lán)圖訪問 Sprite 插槽：

- 在人物角色藍(lán)圖的 My Blueprint 窗口中點(diǎn)擊眼睛圖標(biāo)和 Show Inherited Variables。

- 將角色的 Character 中的 Sprite 組件拖入到藍(lán)圖。

- 在 `Event Begin Play` 節(jié)點(diǎn)的引出連線后添加一個(gè) `Spawn Actor from Class` 節(jié)點(diǎn)（設(shè)為所需的 Actor 類）。

- 添加 `Make Transform` 節(jié)點(diǎn)并應(yīng)用到 Spawn Transform 端，在 Return Value 的引出連線后使用一個(gè) `Attach To` 節(jié)點(diǎn)。

- 將 Sprite 組件作為 In Parent 接入，在 In Socket Name 輸入選擇創(chuàng)建好的插槽。

- 編譯并在編輯器中進(jìn)行游戲，生成的 Actor 類將在插槽位置生成并成功附加。

可添加一個(gè)插槽到一個(gè) Sprite，并在插槽中附加任意數(shù)量的不同內(nèi)容。Sprite 是否為 Flipbook 的一部分，是否已設(shè)置動(dòng)畫，以及插槽中的內(nèi)容均完全取決于您的選擇。

Paper2D 中可以選擇的碰撞使用的引擎內(nèi)通用的 PhysX，以前的 2D 碰撞使用的是 Box2D，也只能支持 Win32 和 Win64 兩個(gè)平臺(tái)，要使用額外的功能還要在項(xiàng)目設(shè)置中打開 Enable 2DPhysics 開關(guān)。

對(duì)于 2D 系統(tǒng)，Sprite 對(duì)象可以應(yīng)用物理系統(tǒng)，及物理約束。物理對(duì)象需要對(duì)世界場(chǎng)景和玩家交互作出反應(yīng)，然而需要將其限制在關(guān)卡內(nèi)，使用約束可以防止其在特定的軸上旋轉(zhuǎn)。

在關(guān)卡中選擇需要應(yīng)用物理的 Sprite，在 Details 面板中，點(diǎn)擊 Physics 下的 Simulate Physics 選項(xiàng)，展開 Constraints 并設(shè)置：

- Lock Position（對(duì)橫卷軸游戲而言，通常鎖定到 Y 軸）。

- Lock Rotation（對(duì)橫卷軸游戲而言，通常鎖定到 X 軸）。

Paper2D 的坐標(biāo)系統(tǒng)，X 軸向右，Y 軸向垂直屏幕向外，Z 軸向上，分別用紅、黃、藍(lán)三種色表示，鎖定一個(gè)軸向，就表示不能在這個(gè)軸上移動(dòng)，或者不能以這個(gè)軸為中心進(jìn)行旋轉(zhuǎn)。

碰撞檢測(cè)的邊界有幾個(gè)不同的方式，越簡單規(guī)則的邊界運(yùn)算越快速：

- Source Bounding Box 源邊界框式，在 Sprite 上使用源圖形的邊界框。

- Tight Bounding Box 嚴(yán)格邊界框式，將 sprite 的全透明區(qū)域排除在外，多數(shù)情況下這種方式能生成更佳的碰撞效果。

- Shrink Wrapped 收縮包裹式（實(shí)驗(yàn)性）生成匹配 Sprite 不透明區(qū)域的復(fù)雜幾何體，效果最真實(shí)，但額外的幾何體可能對(duì)運(yùn)行性能產(chǎn)生影響。

- Fully Custom 自定義式,可指定視口中互動(dòng)使用的幾何體。

- Diced 方塊式，由多個(gè)小方塊組合，包括最終幾何體中僅為非空的小方塊。

使用上的建議是使用默認(rèn)的簡單圖形進(jìn)行碰撞，如果需要使用精細(xì)的碰撞的話可以使用 Sockets 來外掛碰撞體來進(jìn)行碰撞檢測(cè)，逐幀進(jìn)行精細(xì)的碰撞檢測(cè)是相當(dāng)消耗系統(tǒng)運(yùn)算力的。

渲染區(qū)域調(diào)整功能更重要的是對(duì)渲染區(qū)域進(jìn)行調(diào)整，將有的精靈中多余的空白部分排除到渲染之外的話，可以很好的降低渲染壓力。

`PaperSpriteComponent` 負(fù)責(zé)處理 UPaperSprite 實(shí)例的渲染和碰撞。 當(dāng)你將 Sprite 資產(chǎn)從內(nèi)容瀏覽器拖到藍(lán)圖，該組件就會(huì)自動(dòng)創(chuàng)建；或者，當(dāng)你將某些 Actor 拖入關(guān)卡中時(shí)，該組件會(huì)包含在其中。

這類組件的一種用途就是充當(dāng)搭建關(guān)卡的 Sprite，比如，巖架或平臺(tái)、梯子和斜坡等。將這些 Sprite 資產(chǎn)放置在關(guān)卡中將創(chuàng)建一個(gè) PaperSpriteActor，該 Actor 使用的 PaperSpriteComponent 實(shí)例基于選定 Sprite 資產(chǎn)生成。

## ? FlipBook

`FlipBook` 是幀動(dòng)畫的管理類，將 Sprite 組織成動(dòng)畫進(jìn)行播放，只需要將創(chuàng)建好的 Sprite 對(duì)象添加到 FlipBook 組件的 Frame 中，設(shè)置好播放幀率就可以在藍(lán)圖中使用。

創(chuàng)建 Sprite 時(shí)，先導(dǎo)入原始動(dòng)畫幀圖片，再通過 Sprite 編輯器編輯新建的精靈對(duì)象，將 Source Texture 指定為剛導(dǎo)入的圖片。在編輯器的右上角，有一個(gè)四棵小樹的圖標(biāo)，即 Edit the sprite source region，點(diǎn)擊后可以使用 Extract Sprites 功能將所有幀圖像提取為相應(yīng)的 Sprite，功能位于左上角的格子圖標(biāo)。對(duì)于規(guī)整的圖像，使用 Grid 提取模式，并將 Cell 的寬高設(shè)置為適當(dāng)大小即可。

將多個(gè) Sprite 拖入 Flipbook 的 Frame 列表，即編輯器的底部格子上，可以快速創(chuàng)建動(dòng)畫幀?；蛘撸苯舆x擇所有 Sprite，使用右鍵菜單的 Create Flipbook 創(chuàng)建。?

屬性如下：

- Frames Per Seconds 每秒幀率，值越大運(yùn)動(dòng)越快；

- Default Material 動(dòng)畫幀使用的材質(zhì)；

- Key Frames 中存儲(chǔ)的是每一個(gè)用到的關(guān)鍵幀的精靈的屬性，可以調(diào)整的目前只有 Frame Run，為幀的持續(xù)幀數(shù)；

- Collision Source 為碰撞模式選擇，可以選擇關(guān)閉碰撞、逐幀碰撞或者使用第一幀進(jìn)行碰撞。

實(shí)際運(yùn)用中更加重要的是 FlipBook，這個(gè)藍(lán)圖類提供了很多方便的對(duì) Flipbook 進(jìn)行操作的接口。設(shè)置 2D 角色的動(dòng)畫狀態(tài)機(jī)，可以使角色基于定義的條件在不同 Flipbook 動(dòng)畫之間切換。

`PaperFlipbookComponent` 可以在 3D 空間中任意放置、附加到其他組件上或自身附帶其他組件。 你可以為每個(gè)實(shí)例指定一個(gè)自定義顏色；該顏色會(huì)被傳遞給 Flipbook 材質(zhì)作為頂點(diǎn)顏色參數(shù)。你也可以為它們指定一個(gè)自定義材質(zhì)，用于替代 SourceFlipbook 中定義的默認(rèn)材質(zhì)。

使用腳本，你可通過調(diào)用 SetFlipbook 函數(shù)更改當(dāng)前 SourceFlipbook 資產(chǎn)，但是，請(qǐng)注意僅當(dāng) Mobility 屬性設(shè)為可移動(dòng)（或在 Actor 構(gòu)建過程中調(diào)用該函數(shù)）時(shí)，上述操作才有效。 你也可使用組件上的各種其他方式來控制播放速度、播放方向以及循環(huán)等。

## ? TileSet & TileMap

是瓦片地圖功能，原理就是利用一小塊圖片 Tile 拼接組成一個(gè)大地圖。TileSet 指定包含多個(gè) Tile 的 Texture 圖片資源，并設(shè)置好每個(gè) Tile 占據(jù)的像素大小。然后將 TileSet 作為繪圖色彩一樣繪制到 TileMap 的圖層上，得到地圖，繪制時(shí)指定 Active Tile Set。TileMap 也需要設(shè)置每個(gè) Tile 的大小，和整個(gè) Map 的大小，即容納 Tile 數(shù)量。

Tile 本身的碰撞在 TileSet 中進(jìn)行設(shè)置和調(diào)整，在 TileMap 中也有開關(guān)進(jìn)行碰撞類型的選擇，Sprite Collision。

有一個(gè)屬性需要注意，Sepration Per Layer，這個(gè)屬性是用于調(diào)整每一層地圖之間的距離的，在多層地圖中，相當(dāng)于通常的 Z-Order 設(shè)置的位置，可以為一些地圖特效提供幫助。