資訊專欄INFORMATION COLUMN
摘要：每個(gè)多帶帶的行為稱為狀態(tài)。狀態(tài)播放器用于控制精靈狀態(tài)。這個(gè)雪碧圖中實(shí)際上有八個(gè)精靈狀態(tài)四個(gè)靜態(tài)狀態(tài)和四個(gè)動(dòng)畫狀態(tài)。下圖顯示了雪碧圖上的狀態(tài)以及標(biāo)識(shí)這些狀態(tài)的幀號(hào)。將每個(gè)鍵的值設(shè)置為與狀態(tài)對(duì)應(yīng)的幀編號(hào)。
精靈狀態(tài)
如果你有復(fù)雜的游戲角色或交互式對(duì)象，你可能希望該角色根據(jù)游戲環(huán)境中發(fā)生的情況，以不同的方式運(yùn)行。每個(gè)多帶帶的行為稱為狀態(tài)。如果你在精靈上定義狀態(tài)，那么只要游戲中出現(xiàn)與該狀態(tài)相對(duì)應(yīng)的事件，就可以觸發(fā)這些狀態(tài)。
比如，通過鍵盤的方向鍵控制一個(gè)游戲角色時(shí)，按下左箭頭，角色就向左移動(dòng)，其實(shí)可以理解為，按下左鍵頭時(shí)，觸發(fā)了角色的向左移動(dòng)的狀態(tài)。
如果要開始使用精靈狀態(tài)，首先需要一個(gè)狀態(tài)播放器。狀態(tài)播放器用于控制精靈狀態(tài)。Pixi 精靈沒有自己的狀態(tài)播放器，但你可以使用 SpriteUtilities 庫(kù)中的 sprite 的方法，該方法將創(chuàng)建一個(gè)內(nèi)置狀態(tài)播放器的精靈。
SpriteUtilities 庫(kù)的使用上一篇提到過了，可以看 學(xué)習(xí) PixiJS — 動(dòng)畫精靈 這篇文章。
sprite定義：
使用 sprite 函數(shù)制作任何類型的 Pixi 精靈。
用法：
let anySprite = su.sprite(frameTextures, xPosition, yPosition);
參數(shù)：
第一個(gè)參數(shù) frameTextures 可以是以下任何一個(gè)：
一個(gè) PNG 圖像字符串
一個(gè)Pixi 紋理對(duì)象
紋理圖集幀 id 數(shù)組
一個(gè) PNG 圖像字符串的數(shù)組
一個(gè) Pixi 紋理對(duì)象數(shù)組
如果你為 sprite 方法提供一個(gè)數(shù)組，它將返回一個(gè)動(dòng)畫精靈，這個(gè)動(dòng)畫精靈會(huì)內(nèi)置了一個(gè)狀態(tài)播放器。
狀態(tài)播放器只是四個(gè)新屬性和方法的集合，用于控制精靈動(dòng)畫狀態(tài)。
fps：用于設(shè)置精確的動(dòng)畫速度的屬性，以每秒幀數(shù)為單位。它的默認(rèn)值是12，fps 與游戲循環(huán) fps 無(wú)關(guān)，這意味著你可以讓精靈動(dòng)畫以獨(dú)立于游戲或應(yīng)用程序速度的速度播放。
playAnimation：一種播放精靈動(dòng)畫的方法。如果要播放幀的子集，就傳入開始幀編號(hào)和結(jié)束幀編號(hào)兩個(gè)參數(shù)。默認(rèn)情況下，動(dòng)畫將循環(huán)播放，除非你將精靈的 loop 屬性值設(shè)置為 false 。
stopAnimation：一種在當(dāng)前幀停止精靈動(dòng)畫的方法。
show：接受參數(shù)是一個(gè)數(shù)字，用來(lái)顯示特定幀編號(hào)的方法。
第二個(gè)參數(shù) xPosition 和 第三個(gè)參數(shù) yPosition 表示創(chuàng)建的精靈的 x 和 y 坐標(biāo)。
什么是精靈狀態(tài)？下圖是一個(gè)游戲角色的 PNG 圖像，其中包含使角色看起來(lái)像是在四個(gè)不同方向行走所需的所有幀。
這個(gè)雪碧圖中實(shí)際上有八個(gè)精靈狀態(tài)：四個(gè)靜態(tài)狀態(tài)和四個(gè)動(dòng)畫狀態(tài)。讓我們看看這些狀態(tài)是什么以及如何定義它們。
靜態(tài)狀態(tài)精靈的靜態(tài)狀態(tài)定義精靈在不移動(dòng)時(shí)的四個(gè)位置。這些狀態(tài)是：down， left， right，和up。下圖顯示了雪碧圖上的狀態(tài)以及標(biāo)識(shí)這些狀態(tài)的幀號(hào)。
可以看到第0幀是向下狀態(tài)，第4幀是左側(cè)狀態(tài)，第8幀是右側(cè)狀態(tài)，第12幀是向上狀態(tài)。怎么定義這些狀態(tài)呢？首先，創(chuàng)建精靈，以下代碼展示了如何使用 sprite 方法創(chuàng)建精靈。
let frames = su.filmstrip("images/Iori.png", 32, 32);
let Iori = su.sprite(frames);
接下來(lái)，在精靈上創(chuàng)建一個(gè)名為 states 的對(duì)象字面量屬性。并在 states 對(duì)象中創(chuàng)建down，left，right，和up 的鍵。將每個(gè)鍵的值設(shè)置為與狀態(tài)對(duì)應(yīng)的幀編號(hào)。
Iori.states = {
down: 0,
left: 4,
right: 8,
up: 12
};
接下來(lái)就是使用精靈的 show 方法來(lái)顯示正確的狀態(tài)。例如，以下代碼展示如何顯示精靈的 left 狀態(tài)：
Iori.show(Iori.states.left);
下圖顯示了改變這些狀態(tài)對(duì)精靈外觀的影響。
你在可以在任何你需要的地方使用它，讓精靈對(duì)游戲世界的變化作出反應(yīng)。比較常見的一個(gè)場(chǎng)景是在鍵盤按鍵的時(shí)候，這樣你就可以通過箭頭鍵的方向改變精靈面向的方向。例如，按下左箭頭鍵時(shí)，你可以通過以下方式將精靈轉(zhuǎn)向左側(cè)。
//左箭頭按下
left.press = () => {
//顯示`left`狀態(tài)
Iori.show(Iori.states.left);
};
只需對(duì)其余的箭頭鍵使用相同的格式，就可以使精靈面向所有的四個(gè)方向。
動(dòng)畫狀態(tài)精靈的動(dòng)畫狀態(tài)定義了精靈移動(dòng)時(shí)的四個(gè)動(dòng)作序列。這些狀態(tài)是：walkDown，walkLeft，walkRight，和walkUp 。下圖顯示了這些狀態(tài)在雪碧圖上的位置。
這些狀態(tài)中的每一個(gè)由?四個(gè)幀組成，當(dāng)在循環(huán)中播放時(shí)，將創(chuàng)建連續(xù)的步行動(dòng)畫。要定義每個(gè)動(dòng)畫狀態(tài)，就在 states 對(duì)象中創(chuàng)建描述該狀態(tài)的鍵。鍵的值應(yīng)該是一個(gè)包含兩個(gè)元素的數(shù)組：起始幀編號(hào)和結(jié)束幀編號(hào)。例如，以下是如何定義 walkLeft 狀態(tài)：
//3是動(dòng)畫序列 開始的幀編號(hào)，5是結(jié)束的幀編號(hào) walkLeft: [3, 5]
以下是如何將這四種新動(dòng)畫狀態(tài)添加到 Iori 精靈中：
Iori.states = {
down: 0,
left: 4,
right: 8,
up: 12,
walkDown: [0, 3],
walkLeft: [4, 7],
walkRight: [8, 11],
walkUp: [12, 15]
};
現(xiàn)在它的狀態(tài)都被定義了，讓我們做一個(gè)會(huì)走的精靈。
把制作動(dòng)畫精靈和定義狀態(tài)還有鍵盤響應(yīng)所學(xué)到的知識(shí)相結(jié)合，就可以制作一個(gè)步行游戲角色。
查看效果
如果希望精靈在屏幕上移動(dòng)得更快或更慢，就在箭頭鍵方法中更改 vx 和 vy 的值。如果希望精靈的步行動(dòng)畫效果更快或更慢，就更改精靈的 fps 屬性。
制作動(dòng)畫幀的工具使用 Adobe Illustrator 或 Photoshop 手動(dòng)繪制每個(gè)幀。
Flash Professional 只需將動(dòng)畫導(dǎo)出為雪碧圖，就可以在 JavaScript 游戲中使用它。你還可以使用 Shoebox 等工具將 Flash 的 SWF 文件格式轉(zhuǎn)換為紋理圖集。
Piskel 是一個(gè)免費(fèi)的在線工具，用于制作像素風(fēng)格的動(dòng)畫游戲角色。
Dragon Bones，Spine，和 Creature。這三個(gè)工具都非常相似。它們可以創(chuàng)建復(fù)雜的游戲角色，為它們?cè)O(shè)置動(dòng)畫，并將它們導(dǎo)出為雪碧圖和 JSON 文件。
Shoebox 是一款基于Adobe Air 的免費(fèi)應(yīng)用程序，它的功能挺多，比如可以用來(lái)制作雪碧圖，也可以拆分雪碧圖，還可以檢測(cè)透明圖像中的精靈并將其剪切出來(lái) 等。
上一篇 學(xué)習(xí) PixiJS — 動(dòng)畫精靈
下一篇 學(xué)習(xí) PixiJS — 粒子效果
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101203.html
摘要：也就是說用這種圖片做出這樣的效果要制作動(dòng)畫精靈我們需要用到的方法。定義使用紋理數(shù)組創(chuàng)建動(dòng)畫精靈的方法。返回值返回一個(gè)對(duì)象，對(duì)象會(huì)有一些屬性和方法，用于控制動(dòng)畫精靈。下一篇學(xué)習(xí)精靈狀態(tài) 說明 看完官方教程中提到的這本書 — Learn Pixi.js ，準(zhǔn)備寫寫讀后感了，官方教程中所說的內(nèi)容，基本上就是書的前4章，所以我就從第5章開始寫寫吧。 動(dòng)畫精靈指的是按順序使用一系列略有不同的圖像...
摘要：設(shè)置縮放比例的構(gòu)造函數(shù)還可以傳入第三個(gè)參數(shù)，這個(gè)可選的參數(shù)用來(lái)確保使用的坐標(biāo)將匹配畫布的縮放像素坐標(biāo)。將其設(shè)置為將再次啟用拖動(dòng)。 說明 Pixi 內(nèi)置一組功能有限的用于鼠標(biāo)交互和觸摸交互的方法，但是對(duì)于游戲和應(yīng)用程序所需的豐富交互性，建議使用第三方庫(kù)來(lái)簡(jiǎn)化操作，這篇文章介紹的是 Tink 庫(kù)，它有通用的指針對(duì)象、拖放精靈、按鈕對(duì)象、鍵盤控制 等一些有用的功能。 使用 Tink 庫(kù) 要...
摘要：使用粒子發(fā)射器方法會(huì)產(chǎn)生一次粒子爆發(fā)，但通常你必須產(chǎn)生連續(xù)的粒子流。發(fā)射器具有和方法，可讓打開和關(guān)閉粒子流，并可以定義粒子的創(chuàng)建間隔。 你如何創(chuàng)造火，煙，魔法和爆炸等效果？你制作了許多小精靈，幾十，幾百，甚至上千個(gè)精靈。然后對(duì)這些精靈應(yīng)用一些物理效果，使它們的行為類似于你嘗試模擬的元素。你還必須給他們一些關(guān)于它們應(yīng)該如何出現(xiàn)和消失以及應(yīng)該形成什么樣的模式的規(guī)則。這些微小的精靈被稱為粒子...
摘要：它自動(dòng)偵測(cè)使用或者。開發(fā)者無(wú)需專門學(xué)習(xí)就能感受到強(qiáng)大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個(gè)游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動(dòng)物體?？梢员惶幚淼膱D像被稱作紋理。 PixiJS 介紹 PixiJS 是一個(gè)超快的2D渲染引擎。它自動(dòng)偵測(cè)使用 WebGL 或者 Canvas。開發(fā)者無(wú)需專門學(xué)習(xí) WebGL 就能感受到強(qiáng)大的硬件加速的力量。 Pixi...
摘要：說明小精靈冒險(xiǎn)是一書中最后一個(gè)案例。在游戲循環(huán)中，通過減小平鋪精靈的值，使其向左移動(dòng)。如果方法返回，則退出循環(huán)，表示小精靈碰撞到柱子了。重置游戲如果小精靈碰撞到柱子，則在秒鐘延遲后重置游戲。 說明 小精靈冒險(xiǎn) 是 Learn Pixi.js 一書中最后一個(gè)案例。點(diǎn)擊屏幕讓小精靈飛起來(lái)，小精靈上升時(shí)，會(huì)拍打翅膀，并且會(huì)有小星星產(chǎn)生。如果她撞到柱子上，她會(huì)爆炸成一堆小星星。幫助她通過15個(gè)...
閱讀 1601·2021-09-10 10:51
閱讀 2906·2019-08-30 15:54
閱讀 3444·2019-08-29 17:11
閱讀 1015·2019-08-29 16:44
閱讀 1502·2019-08-29 13:47
閱讀 1158·2019-08-29 13:47
閱讀 1565·2019-08-29 12:23
閱讀 1229·2019-08-28 18:18
