學習 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 — 粒子效果