學習 PixiJS — 精靈狀態

精靈狀態

如果你有複雜的遊戲角色或互動式物件，你可能希望該角色根據遊戲環境中發生的情況，以不同的方式執行。每個單獨的行為稱為狀態。如果你在精靈上定義狀態，那麼只要遊戲中出現與該狀態相對應的事件，就可以觸發這些狀態。 比如，通過鍵盤的方向鍵控制一個遊戲角色時，按下左箭頭，角色就向左移動，其實可以理解為，按下左鍵頭時，觸發了角色的向左移動的狀態。

如果要開始使用精靈狀態，首先需要一個狀態播放器。狀態播放器用於控制精靈狀態。Pixi 精靈沒有自己的狀態播放器，但你可以使用 SpriteUtilities 庫中的 sprite 的方法，該方法將建立一個內建狀態播放器的精靈。

SpriteUtilities 庫的使用上一篇提到過了，可以看 學習 PixiJS — 動畫精靈 這篇文章。

sprite

定義：

使用 sprite 函式製作任何型別的 Pixi 精靈。

用法：

let anySprite = su.sprite(frameTextures, xPosition, yPosition);
複製程式碼

引數：

第一個引數 frameTextures 可以是以下任何一個：

• 一個 PNG 影象字串
• 一個Pixi 紋理物件
• 紋理圖集幀 id 陣列
• 一個 PNG 影象字串的陣列
• 一個 Pixi 紋理物件陣列

如果你為 sprite 方法提供一個陣列，它將返回一個動畫精靈，這個動畫精靈會內建了一個狀態播放器。

狀態播放器只是四個新屬性和方法的集合，用於控制精靈動畫狀態。

• fps：用於設定精確的動畫速度的屬性，以每秒幀數為單位。它的預設值是12，fps 與遊戲迴圈 fps 無關，這意味著你可以讓精靈動畫以獨立於遊戲或應用程式速度的速度播放。

• playAnimation：一種播放精靈動畫的方法。如果要播放幀的子集，就傳入開始幀編號和結束幀編號兩個引數。預設情況下，動畫將迴圈播放，除非你將精靈的 loop 屬性值設定為 false 。

• stopAnimation：一種在當前幀停止精靈動畫的方法。

• show：接受引數是一個數字，用來顯示特定幀編號的方法。

第二個引數 xPosition 和 第三個引數 yPosition 表示建立的精靈的 x 和 y 座標。

什麼是精靈狀態？

下圖是一個遊戲角色的 PNG 影象，其中包含使角色看起來像是在四個不同方向行走所需的所有幀。

這個雪碧圖中實際上有八個精靈狀態：四個靜態狀態和四個動畫狀態。讓我們看看這些狀態是什麼以及如何定義它們。

靜態狀態

精靈的靜態狀態定義精靈在不移動時的四個位置。這些狀態是：down， left， right，和up。下圖顯示了雪碧圖上的狀態以及標識這些狀態的幀號。

可以看到第0幀是向下狀態，第4幀是左側狀態，第8幀是右側狀態，第12幀是向上狀態。怎麼定義這些狀態呢？首先，建立精靈，以下程式碼展示瞭如何使用 sprite 方法建立精靈。

let frames = su.filmstrip("images/Iori.png", 32, 32);
let Iori = su.sprite(frames);
複製程式碼

接下來，在精靈上建立一個名為 states 的物件字面量屬性。並在 states 物件中建立down，left，right，和up 的鍵。將每個鍵的值設定為與狀態對應的幀編號。

Iori.states = {
    down: 0,
    left: 4,
    right: 8,
    up: 12
};
複製程式碼

接下來就是使用精靈的 show 方法來顯示正確的狀態。例如，以下程式碼展示如何顯示精靈的 left 狀態：

Iori.show(Iori.states.left);
複製程式碼

下圖顯示了改變這些狀態對精靈外觀的影響。

你在可以在任何你需要的地方使用它，讓精靈對遊戲世界的變化作出反應。比較常見的一個場景是在鍵盤按鍵的時候，這樣你就可以通過箭頭鍵的方向改變精靈面向的方向。例如，按下左箭頭鍵時，你可以通過以下方式將精靈轉向左側。

//左箭頭按下
left.press = () => {
 //顯示`left`狀態
 Iori.show(Iori.states.left);
};
複製程式碼

只需對其餘的箭頭鍵使用相同的格式，就可以使精靈面向所有的四個方向。

動畫狀態

精靈的動畫狀態定義了精靈移動時的四個動作序列。這些狀態是：walkDown，walkLeft，walkRight，和walkUp 。下圖顯示了這些狀態在雪碧圖上的位置。

這些狀態中的每一個由​四個幀組成，當在迴圈中播放時，將建立連續的步行動畫。要定義每個動畫狀態，就在 states 物件中建立描述該狀態的鍵。鍵的值應該是一個包含兩個元素的陣列：起始幀編號和結束幀編號。例如，以下是如何定義 walkLeft 狀態：

//3是動畫序列 開始的幀編號，5是結束的幀編號
walkLeft: [3, 5]
複製程式碼

以下是如何將這四種新動畫狀態新增到 Iori 精靈中：

Iori.states = {
    down: 0,
    left: 4,
    right: 8,
    up: 12,
    walkDown: [0, 3],
    walkLeft: [4, 7],
    walkRight: [8, 11],
    walkUp: [12, 15]
};
複製程式碼

現在它的狀態都被定義了，讓我們做一個會走的精靈。

把製作動畫精靈和定義狀態還有鍵盤響應所學到的知識相結合，就可以製作一個步行遊戲角色。

檢視效果

如果希望精靈在螢幕上移動得更快或更慢，就在箭頭鍵方法中更改 vx 和 vy 的值。如果希望精靈的步行動畫效果更快或更慢，就更改精靈的 fps 屬性。

製作動畫幀的工具

• 使用 Adobe Illustrator 或 Photoshop 手動繪製每個幀。
• Flash Professional 只需將動畫匯出為雪碧圖，就可以在 JavaScript 遊戲中使用它。你還可以使用 Shoebox 等工具將 Flash 的 SWF 檔案格式轉換為紋理圖集。
• Piskel 是一個免費的線上工具，用於製作畫素風格的動畫遊戲角色。
• Dragon Bones，Spine，和 Creature。這三個工具都非常相似。它們可以建立複雜的遊戲角色，為它們設定動畫，並將它們匯出為雪碧圖和 JSON 檔案。
• Shoebox 是一款基於Adobe Air 的免費應用程式，它的功能挺多，比如可以用來製作雪碧圖，也可以拆分雪碧圖，還可以檢測透明影象中的精靈並將其剪下出來 等。

上一篇 學習 PixiJS — 動畫精靈

下一篇 學習 PixiJS — 粒子效果