資訊專(zhuān)欄INFORMATION COLUMN
摘要：也就是說(shuō)用這種圖片做出這樣的效果要制作動(dòng)畫(huà)精靈我們需要用到的方法。定義使用紋理數(shù)組創(chuàng)建動(dòng)畫(huà)精靈的方法。返回值返回一個(gè)對(duì)象，對(duì)象會(huì)有一些屬性和方法，用于控制動(dòng)畫(huà)精靈。下一篇學(xué)習(xí)精靈狀態(tài)
說(shuō)明
看完官方教程中提到的這本書(shū) — Learn Pixi.js ，準(zhǔn)備寫(xiě)寫(xiě)讀后感了，官方教程中所說(shuō)的內(nèi)容，基本上就是書(shū)的前4章，所以我就從第5章開(kāi)始寫(xiě)寫(xiě)吧。
動(dòng)畫(huà)精靈指的是按順序使用一系列略有不同的圖像，創(chuàng)建的精靈，之后一幀一幀的播放這些圖像，就可以產(chǎn)生運(yùn)動(dòng)的幻覺(jué)。
也就是說(shuō)用這種圖片
做出這樣的效果
要制作動(dòng)畫(huà)精靈我們需要用到 PixiJS 的 AnimatedSprite 方法。
PIXI.extras.AnimatedSprite定義：
使用紋理數(shù)組創(chuàng)建動(dòng)畫(huà)精靈的方法。
用法：
new PIXI.extras.AnimatedSprite(textures,autoUpdate)
參數(shù) :
| 名稱(chēng) | 類(lèi)型 | 默認(rèn)值 | 描述 |
|---|---|---|---|
| textures | array | 用一系列略有不同的圖像做的紋理數(shù)組。 | |
| autoUpdate | boolean | true | 用來(lái)判斷是否使用 PIXI.ticker.shared 自動(dòng)更新動(dòng)畫(huà)時(shí)間。 |
返回值：
返回一個(gè)對(duì)象，對(duì)象會(huì)有一些屬性和方法，用于控制動(dòng)畫(huà)精靈。
返回值對(duì)象的屬性：
| 名稱(chēng) | 類(lèi)型 | 描述 |
|---|---|---|
| animationSpeed | number | 動(dòng)畫(huà)精靈的播放速度。越高越快，越低越慢，默認(rèn)值是1 |
| currentFrame | number（只讀） | 正在顯示的當(dāng)前幀編號(hào) |
| onComplete | function | 當(dāng)loop屬性為false時(shí)，一個(gè)動(dòng)畫(huà)精靈完成播放時(shí)調(diào)用 |
| playing | Boolean | 確定當(dāng)前動(dòng)畫(huà)精靈是否正在播放 |
| onFrameChange | function | 當(dāng)一個(gè)動(dòng)畫(huà)精靈更改要呈現(xiàn)的紋理時(shí)調(diào)用 |
| loop | boolean | 動(dòng)畫(huà)精靈是否在播放后重復(fù)播放 |
| onLoop | function | 當(dāng)loop屬性為true時(shí)調(diào)用的函數(shù) |
| textures | array | 用于這個(gè)動(dòng)畫(huà)精靈的紋理數(shù)組 |
| totalFrames | number （只讀） | 動(dòng)畫(huà)中的幀總數(shù) |
返回值對(duì)象的方法：
| 名稱(chēng) | 參數(shù) | 描述 |
|---|---|---|
| play | 播放動(dòng)畫(huà)精靈 | |
| gotoAndPlay | frameNumber，number類(lèi)型，開(kāi)始幀的索引 | 轉(zhuǎn)到特定的幀并開(kāi)始播放動(dòng)畫(huà)精靈 |
| stop | 停止播放動(dòng)畫(huà)精靈 | |
| gotoAndStop | frameNumber，number類(lèi)型，停止幀的索引 | 轉(zhuǎn)到特定的幀并停止播放動(dòng)畫(huà)精靈 |
使用返回值中的這些屬性和方法，我們就可以控制動(dòng)畫(huà)精靈了，比如播放動(dòng)畫(huà)精靈，設(shè)置動(dòng)畫(huà)的速度，設(shè)置是否循環(huán)播放等，除此之外，還要知道就是 PIXI.extras.AnimatedSprite 方法繼承自 PIXI.Sprite 方法，所以動(dòng)畫(huà)精靈也可以用普通精靈的屬性和方法，比如x，y，width，height，scale，rotation 。
好的，我們開(kāi)始試試這個(gè)方法。
動(dòng)畫(huà)精靈
查看效果
上面這個(gè)例子中，創(chuàng)建紋理數(shù)組時(shí)似乎點(diǎn)麻煩，要解決這個(gè)問(wèn)題，我們可以用名叫 SpriteUtilities 的庫(kù)，該庫(kù)包含許多有用的函數(shù)，用于創(chuàng)建Pixi精靈并使它們更易于使用。
安裝：
直接用 script 標(biāo)簽，引入js 文件就可以
安裝好之后，我們需要?jiǎng)?chuàng)建一個(gè)新實(shí)例，代碼如下
let su = new SpriteUtilities(PIXI);
之后就可以用 su 對(duì)象訪(fǎng)問(wèn)所有方法了。
我們這里需要用到的就是 su 對(duì)象的 filmstrip 方法。
定義：
filmstrip 方法可以自動(dòng)將雪碧圖轉(zhuǎn)換為可用于制作精靈的紋理數(shù)組
用法：
su.filmstrip("anyTilesetImage.png", frameWidth, frameHeight, optionalPadding);
參數(shù)：
| 名稱(chēng) | 類(lèi)型 | 描述 |
|---|---|---|
| anyTilesetImage | string | 雪碧圖的路徑 |
| frameWidth | number | 每幀的寬度（以像素為單位） |
| frameHeight | number | 每幀的高度（以像素為單位） |
| optionalPadding | number | 每幀周?chē)奶畛淞浚蛇x值，以像素為單位） |
返回值：
返回一個(gè)數(shù)組，可用于制作動(dòng)畫(huà)精靈的紋理數(shù)組。
現(xiàn)在我們使用 SpriteUtilities 來(lái)改寫(xiě)下剛才的示例代碼。
動(dòng)畫(huà)精靈
查看效果
filmstrip 方法自動(dòng)將整個(gè)雪碧圖轉(zhuǎn)換為可用于制作動(dòng)畫(huà)精靈的紋理數(shù)組。但是，如果我們只想使用雪碧圖中的一部分幀呢？這時(shí)候需要用到 frames 方法了。
定義：
frames 方法使用雪碧圖中的一組子幀，來(lái)創(chuàng)建紋理數(shù)組。
用法：
su.frames(source, coordinates, frameWidth, frameHeight)
參數(shù)：
| 名稱(chēng) | 類(lèi)型 | 描述 |
|---|---|---|
| source | string | 雪碧圖的路徑 |
| coordinates | array | 包含每幀的 x 和 y 坐標(biāo)的二維數(shù)組 |
| frameWidth | number | 每幀的寬度（以像素為單位） |
| frameHeight | number | 每幀和高度（以像素為單位） |
返回值：
返回一個(gè)數(shù)組，可用于制作動(dòng)畫(huà)精靈的紋理數(shù)組。
示例代碼：
動(dòng)畫(huà)精靈
查看效果
除了上面提到的方式，還可以用紋理貼圖集來(lái)創(chuàng)建動(dòng)畫(huà)精靈。
使用紋理貼圖集來(lái)創(chuàng)建動(dòng)畫(huà)精靈，就是先通過(guò)json文件，加載所有紋理，然后把需要的紋理再放進(jìn)一個(gè)數(shù)組中，最后把這個(gè)數(shù)組當(dāng)參數(shù)，傳入PIXI.extras.AnimatedSprite 方法中，來(lái)創(chuàng)建動(dòng)畫(huà)精靈。
代碼：
動(dòng)畫(huà)精靈
查看效果
上面的代碼創(chuàng)建紋理數(shù)組時(shí)，是把紋理一個(gè)一個(gè)的放進(jìn)數(shù)組中，如果數(shù)量比較少還好，多一點(diǎn)呢？假如有100個(gè)呢？一個(gè)一個(gè)的放就太麻煩了，這時(shí)候我們可以用 SpriteUtilities 庫(kù)中提供的 frameSeries 方法。
定義：
frameSeries 方法可以通過(guò)已加載的紋理貼圖集，使用一系列編號(hào)的幀ID來(lái)創(chuàng)建動(dòng)畫(huà)精靈。
用法：
su.frameSeries(startNumber, endNumber, baseName, extension)
參數(shù)：
| 名稱(chēng) | 類(lèi)型 | 描述 |
|---|---|---|
| startNumber | number | 起始幀序列號(hào)（默認(rèn)值是0） |
| endNumber | number | 結(jié)束幀序列號(hào)（默認(rèn)值是1） |
| baseName | string | 可選的基本文件名 |
| extension | string | 可選的文件擴(kuò)展名 |
返回值：
返回一個(gè)數(shù)組，可用于制作動(dòng)畫(huà)精靈的紋理數(shù)組。
注意：
使用 frameSeries 方法時(shí)，要確保在 json 文件中，定義的每幀的名稱(chēng)都是按順序來(lái)的，比如 frame0.png frame1.png frame2.png 這種。因?yàn)?frameSeries 方法的源碼是這樣寫(xiě)的
frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
//創(chuàng)建一個(gè)數(shù)組來(lái)存儲(chǔ)幀名
let frames = [];
for (let i = startNumber; i < endNumber + 1; i++) {
let frame = this.TextureCache[`${baseName + i + extension}`];
frames.push(frame);
}
return frames;
}
源碼中其實(shí)是用 for 循環(huán)把幀名拼接起來(lái)的。所以要保證幀名是按順序來(lái)的，不然就獲取不到了。
下來(lái)我們就試試 frameSeries 方法吧。
動(dòng)畫(huà)精靈
查看效果
注意版本問(wèn)題：
1、PIXI.extras.AnimatedSprite 這個(gè)方法原來(lái)叫PIXI.extras.MovieClip ，是在 4.2.1 版本的時(shí)候修改的，本文示例代碼中用 PixiJS 的版本是 4.8.2，所以沒(méi)有問(wèn)題，如果你在使用過(guò)程中發(fā)現(xiàn)調(diào)用PIXI.extras.AnimatedSprite 這個(gè)方法有問(wèn)題，可以先檢查下版本是否正確。
2、 SpriteUtilities 目前支持的 PixiJS 的版本是 3.0.11，而 SpriteUtilities 中用的就是PIXI.extras.MovieClip 方法，所以你如果用了比較高的 PixiJS 的版本，需要在SpriteUtilities 中修改下方法的別名。
在 spriteUtilities.js 文件中需要把 renderingEngine.extras.MovieClip 改成renderingEngine.extras.AnimatedSprite，把 renderingEngine.ParticleContainer 改成 PIXI.particles.ParticleContainer 。
這個(gè) spriteUtilities.js 就是修改后的。
當(dāng)然你也可以使用低版本的 PixiJS，這樣就不用改 spriteUtilities.js 的代碼了。
總結(jié)動(dòng)畫(huà)精靈就是逐幀動(dòng)畫(huà)，通過(guò)一幀一幀的播放圖像來(lái)產(chǎn)生運(yùn)動(dòng)的幻覺(jué)。
本文就是聊了聊創(chuàng)建動(dòng)畫(huà)精靈的一些方式和如何使用動(dòng)畫(huà)精靈。
如果文中有錯(cuò)誤的地方，還請(qǐng)小伙伴們指出，萬(wàn)分感謝。
下一篇 學(xué)習(xí) PixiJS — 精靈狀態(tài)
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/101003.html
摘要：每個(gè)單獨(dú)的行為稱(chēng)為狀態(tài)。狀態(tài)播放器用于控制精靈狀態(tài)。這個(gè)雪碧圖中實(shí)際上有八個(gè)精靈狀態(tài)四個(gè)靜態(tài)狀態(tài)和四個(gè)動(dòng)畫(huà)狀態(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è)單獨(dú)的行為稱(chēng)為狀態(tài)。如果你在精靈上定義狀態(tài)，那么只要游戲中出現(xiàn)與該狀態(tài)相對(duì)應(yīng)的...
摘要：它自動(dòng)偵測(cè)使用或者。開(kāi)發(fā)者無(wú)需專(zhuān)門(mén)學(xué)習(xí)就能感受到強(qiáng)大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個(gè)游戲引擎，它的核心本質(zhì)是盡可能快速有效地在屏幕上移動(dòng)物體?？梢员惶幚淼膱D像被稱(chēng)作紋理。 PixiJS 介紹 PixiJS 是一個(gè)超快的2D渲染引擎。它自動(dòng)偵測(cè)使用 WebGL 或者 Canvas。開(kāi)發(fā)者無(wú)需專(zhuān)門(mén)學(xué)習(xí) WebGL 就能感受到強(qiáng)大的硬件加速的力量。 Pixi...
摘要：說(shuō)明小精靈冒險(xiǎn)是一書(shū)中最后一個(gè)案例。在游戲循環(huán)中，通過(guò)減小平鋪精靈的值，使其向左移動(dòng)。如果方法返回，則退出循環(huán)，表示小精靈碰撞到柱子了。重置游戲如果小精靈碰撞到柱子，則在秒鐘延遲后重置游戲。 說(shuō)明 小精靈冒險(xiǎn) 是 Learn Pixi.js 一書(shū)中最后一個(gè)案例。點(diǎn)擊屏幕讓小精靈飛起來(lái)，小精靈上升時(shí)，會(huì)拍打翅膀，并且會(huì)有小星星產(chǎn)生。如果她撞到柱子上，她會(huì)爆炸成一堆小星星。幫助她通過(guò)15個(gè)...
摘要：將水平高斯模糊應(yīng)用于對(duì)象。下一步是將此值分配給渲染選項(xiàng)的屬性。蛇圖像的寬度為像素，因此大約個(gè)片段會(huì)產(chǎn)生很好的效果。通過(guò)循環(huán)將數(shù)組中的每個(gè)按照橢圓形的軌跡移動(dòng)，形成波浪效果。 平鋪精靈 平鋪精靈是一種特殊的精靈，可以在一定的范圍內(nèi)重復(fù)一個(gè)紋理。你可以使用它們創(chuàng)建無(wú)限滾動(dòng)的背景效果。要?jiǎng)?chuàng)建平鋪精靈，需要使用帶有三個(gè)參數(shù)的 TilingSprite 類(lèi)（PIXI.extras.TilingS...
摘要：方法的參數(shù)如下名稱(chēng)默認(rèn)值描述需要移動(dòng)的精靈貝塞爾曲線(xiàn)的坐標(biāo)點(diǎn)的數(shù)組補(bǔ)間需要的幀數(shù)，也就是動(dòng)畫(huà)應(yīng)該持續(xù)多長(zhǎng)時(shí)間緩動(dòng)類(lèi)型用于確定精靈是否應(yīng)在補(bǔ)間的起點(diǎn)和終點(diǎn)之間來(lái)回移動(dòng)。 說(shuō)明 補(bǔ)間動(dòng)畫(huà)指的是，我們可以通過(guò)為精靈的位置、比例、透明度，等屬性，設(shè)置開(kāi)始值和結(jié)束值，制作動(dòng)畫(huà)，動(dòng)畫(huà)中間需要的部分由軟件自動(dòng)計(jì)算填充。 Pixi 沒(méi)有內(nèi)置補(bǔ)間引擎，但是你可以使用很多很好的開(kāi)源的補(bǔ)間庫(kù)，比如 Twee...
閱讀 2618·2021-10-12 10:11
閱讀 1374·2021-10-11 10:58
閱讀 3438·2019-08-30 15:54
閱讀 871·2019-08-30 13:59
閱讀 803·2019-08-29 13:07
閱讀 1555·2019-08-26 11:55
閱讀 2288·2019-08-26 10:44
閱讀 2861·2019-08-23 18:25
