學(xué)習(xí) PixiJS — 動(dòng)畫精靈

PrototypeZ 發(fā)布于2019-08-23 14:42 / 2309人閱讀

摘要：也就是說用這種圖片做出這樣的效果要制作動(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)畫精靈指的是按順序使用一系列略有不同的圖像，創(chuàng)建的精靈，之后一幀一幀的播放這些圖像，就可以產(chǎn)生運(yùn)動(dòng)的幻覺。

也就是說用這種圖片

做出這樣的效果

要制作動(dòng)畫精靈我們需要用到 PixiJS 的 AnimatedSprite 方法。

PIXI.extras.AnimatedSprite

定義：

使用紋理數(shù)組創(chuàng)建動(dòng)畫精靈的方法。

用法：

new PIXI.extras.AnimatedSprite(textures,autoUpdate)

參數(shù) :

名稱	類型	默認(rèn)值	描述
textures	array		用一系列略有不同的圖像做的紋理數(shù)組。
autoUpdate	boolean	true	用來判斷是否使用 PIXI.ticker.shared 自動(dòng)更新動(dòng)畫時(shí)間。

返回值：
返回一個(gè)對(duì)象，對(duì)象會(huì)有一些屬性和方法，用于控制動(dòng)畫精靈。

返回值對(duì)象的屬性：

名稱	類型	描述
animationSpeed	number	動(dòng)畫精靈的播放速度。越高越快，越低越慢，默認(rèn)值是1
currentFrame	number（只讀）	正在顯示的當(dāng)前幀編號(hào)
onComplete	function	當(dāng)loop屬性為false時(shí)，一個(gè)動(dòng)畫精靈完成播放時(shí)調(diào)用
playing	Boolean	確定當(dāng)前動(dòng)畫精靈是否正在播放
onFrameChange	function	當(dāng)一個(gè)動(dòng)畫精靈更改要呈現(xiàn)的紋理時(shí)調(diào)用
loop	boolean	動(dòng)畫精靈是否在播放后重復(fù)播放
onLoop	function	當(dāng)loop屬性為true時(shí)調(diào)用的函數(shù)
textures	array	用于這個(gè)動(dòng)畫精靈的紋理數(shù)組
totalFrames	number （只讀）	動(dòng)畫中的幀總數(shù)

返回值對(duì)象的方法：

名稱	參數(shù)	描述
play		播放動(dòng)畫精靈
gotoAndPlay	frameNumber，number類型，開始幀的索引	轉(zhuǎn)到特定的幀并開始播放動(dòng)畫精靈
stop		停止播放動(dòng)畫精靈
gotoAndStop	frameNumber，number類型，停止幀的索引	轉(zhuǎn)到特定的幀并停止播放動(dòng)畫精靈

使用返回值中的這些屬性和方法，我們就可以控制動(dòng)畫精靈了，比如播放動(dòng)畫精靈，設(shè)置動(dòng)畫的速度，設(shè)置是否循環(huán)播放等，除此之外，還要知道就是 PIXI.extras.AnimatedSprite 方法繼承自 PIXI.Sprite 方法，所以動(dòng)畫精靈也可以用普通精靈的屬性和方法，比如x，y，width，height，scale，rotation 。

好的，我們開始試試這個(gè)方法。





    
    動(dòng)畫精靈

查看效果

上面這個(gè)例子中，創(chuàng)建紋理數(shù)組時(shí)似乎點(diǎn)麻煩，要解決這個(gè)問題，我們可以用名叫 SpriteUtilities 的庫(kù)，該庫(kù)包含許多有用的函數(shù)，用于創(chuàng)建Pixi精靈并使它們更易于使用。

安裝：

直接用 script 標(biāo)簽，引入js 文件就可以

安裝好之后，我們需要?jiǎng)?chuàng)建一個(gè)新實(shí)例，代碼如下

let su = new SpriteUtilities(PIXI);

之后就可以用 su 對(duì)象訪問所有方法了。

我們這里需要用到的就是 su 對(duì)象的 filmstrip 方法。

定義：

filmstrip 方法可以自動(dòng)將雪碧圖轉(zhuǎn)換為可用于制作精靈的紋理數(shù)組

用法：

su.filmstrip("anyTilesetImage.png", frameWidth, frameHeight, optionalPadding);

參數(shù)：

名稱	類型	描述
anyTilesetImage	string	雪碧圖的路徑
frameWidth	number	每幀的寬度（以像素為單位）
frameHeight	number	每幀的高度（以像素為單位）
optionalPadding	number	每幀周圍的填充量（可選值，以像素為單位）

返回值：

返回一個(gè)數(shù)組，可用于制作動(dòng)畫精靈的紋理數(shù)組。

現(xiàn)在我們使用 SpriteUtilities 來改寫下剛才的示例代碼。





    
    動(dòng)畫精靈

查看效果

filmstrip 方法自動(dòng)將整個(gè)雪碧圖轉(zhuǎn)換為可用于制作動(dòng)畫精靈的紋理數(shù)組。但是，如果我們只想使用雪碧圖中的一部分幀呢？這時(shí)候需要用到 frames 方法了。

定義：
frames 方法使用雪碧圖中的一組子幀，來創(chuàng)建紋理數(shù)組。

用法：

su.frames(source, coordinates, frameWidth, frameHeight)

參數(shù)：

名稱	類型	描述
source	string	雪碧圖的路徑
coordinates	array	包含每幀的 x 和 y 坐標(biāo)的二維數(shù)組
frameWidth	number	每幀的寬度（以像素為單位）
frameHeight	number	每幀和高度（以像素為單位）

返回值：
返回一個(gè)數(shù)組，可用于制作動(dòng)畫精靈的紋理數(shù)組。

示例代碼：





    
    動(dòng)畫精靈

查看效果

除了上面提到的方式，還可以用紋理貼圖集來創(chuàng)建動(dòng)畫精靈。

使用紋理貼圖集來創(chuàng)建動(dòng)畫精靈，就是先通過json文件，加載所有紋理，然后把需要的紋理再放進(jìn)一個(gè)數(shù)組中，最后把這個(gè)數(shù)組當(dāng)參數(shù)，傳入PIXI.extras.AnimatedSprite 方法中，來創(chuàng)建動(dòng)畫精靈。

代碼：





    
    動(dòng)畫精靈

查看效果

上面的代碼創(chuàng)建紋理數(shù)組時(shí)，是把紋理一個(gè)一個(gè)的放進(jìn)數(shù)組中，如果數(shù)量比較少還好，多一點(diǎn)呢？假如有100個(gè)呢？一個(gè)一個(gè)的放就太麻煩了，這時(shí)候我們可以用 SpriteUtilities 庫(kù)中提供的 frameSeries 方法。

定義：

frameSeries 方法可以通過已加載的紋理貼圖集，使用一系列編號(hào)的幀ID來創(chuàng)建動(dòng)畫精靈。

用法：

su.frameSeries(startNumber, endNumber, baseName, extension)

參數(shù)：

名稱	類型	描述
startNumber	number	起始幀序列號(hào)（默認(rèn)值是0）
endNumber	number	結(jié)束幀序列號(hào)（默認(rèn)值是1）
baseName	string	可選的基本文件名
extension	string	可選的文件擴(kuò)展名

返回值：
返回一個(gè)數(shù)組，可用于制作動(dòng)畫精靈的紋理數(shù)組。

注意：
使用 frameSeries 方法時(shí)，要確保在 json 文件中，定義的每幀的名稱都是按順序來的，比如 frame0.png frame1.png frame2.png 這種。因?yàn)?frameSeries 方法的源碼是這樣寫的

 frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
   //創(chuàng)建一個(gè)數(shù)組來存儲(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)把幀名拼接起來的。所以要保證幀名是按順序來的，不然就獲取不到了。

下來我們就試試 frameSeries 方法吧。





    
    動(dòng)畫精靈

查看效果

注意版本問題：
1、PIXI.extras.AnimatedSprite 這個(gè)方法原來叫PIXI.extras.MovieClip ，是在 4.2.1 版本的時(shí)候修改的，本文示例代碼中用 PixiJS 的版本是 4.8.2，所以沒有問題，如果你在使用過程中發(fā)現(xiàn)調(diào)用PIXI.extras.AnimatedSprite 這個(gè)方法有問題，可以先檢查下版本是否正確。

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)畫精靈就是逐幀動(dòng)畫，通過一幀一幀的播放圖像來產(chǎn)生運(yùn)動(dòng)的幻覺。

本文就是聊了聊創(chuàng)建動(dòng)畫精靈的一些方式和如何使用動(dòng)畫精靈。

如果文中有錯(cuò)誤的地方，還請(qǐng)小伙伴們指出，萬分感謝。

下一篇學(xué)習(xí) PixiJS — 精靈狀態(tài)