精靈狀態
如果你有複雜的遊戲角色或交互式對象,你可能希望該角色根據遊戲環境中發生的情況,以不同的方式運行。每個單獨的行爲稱爲狀態。如果你在精靈上定義狀態,那麼只要遊戲中出現與該狀態相對應的事件,就可以觸發這些狀態。
比如,通過鍵盤的方向鍵控制一個遊戲角色時,按下左箭頭,角色就向左移動,其實可以理解爲,按下左鍵頭時,觸發了角色的向左移動的狀態。
如果要開始使用精靈狀態,首先需要一個狀態播放器。狀態播放器用於控制精靈狀態。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/adventuress.png", 32, 32);
let adventuress = su.sprite(frames);
接下來,在精靈上創建一個名爲 states
的對象字面量屬性。並在 states
對象中創建down
,left
,right
,和up
的鍵。將每個鍵的值設置爲與狀態對應的幀編號。
adventuress.states = {
down: 0,
left: 4,
right: 8,
up: 12
};
接下來就是使用精靈的 show
方法來顯示正確的狀態。例如,以下代碼展示如何顯示精靈的 left
狀態:
adventuress.show(adventuress.states.left);
下圖顯示了改變這些狀態對精靈外觀的影響。
你在可以在任何你需要的地方使用它,讓精靈對遊戲世界的變化作出反應。比較常見的一個場景是在鍵盤按鍵的時候,這樣你就可以通過箭頭鍵的方向改變精靈面向的方向。例如,按下左箭頭鍵時,你可以通過以下方式將精靈轉向左側。
//左箭頭按下
left.press = () => {
//顯示`left`狀態
adventuress.show(adventuress.states.left);
};
只需對其餘的箭頭鍵使用相同的格式,就可以使精靈面向所有的四個方向。
動畫狀態
精靈的動畫狀態定義了精靈移動時的四個動作序列。這些狀態是:walkDown
,walkLeft
,walkRight
,和walkUp
。下圖顯示了這些狀態在雪碧圖上的位置。
這些狀態中的每一個由四個幀組成,當在循環中播放時,將創建連續的步行動畫。要定義每個動畫狀態,就在 states
對象中創建描述該狀態的鍵。鍵的值應該是一個包含兩個元素的數組:起始幀編號和結束幀編號。例如,以下是如何定義 walkLeft
狀態:
//3是動畫序列 開始的幀編號,5是結束的幀編號
walkLeft: [3, 5]
以下是如何將這四種新動畫狀態添加到 adventuress
精靈中:
adventuress.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 的免費應用程序,它的功能挺多,比如可以用來製作雪碧圖,也可以拆分雪碧圖,還可以檢測透明圖像中的精靈並將其剪切出來 等。