學習 PixiJS — 動畫精靈

PrototypeZ 發布于2019-08-23 14:42 / 2307人閱讀

摘要：也就是說用這種圖片做出這樣的效果要制作動畫精靈我們需要用到的方法。定義使用紋理數組創建動畫精靈的方法。返回值返回一個對象，對象會有一些屬性和方法，用于控制動畫精靈。下一篇學習精靈狀態

說明

看完官方教程中提到的這本書 — Learn Pixi.js ，準備寫寫讀后感了，官方教程中所說的內容，基本上就是書的前4章，所以我就從第5章開始寫寫吧。

動畫精靈指的是按順序使用一系列略有不同的圖像，創建的精靈，之后一幀一幀的播放這些圖像，就可以產生運動的幻覺。

也就是說用這種圖片

做出這樣的效果

要制作動畫精靈我們需要用到 PixiJS 的 AnimatedSprite 方法。

PIXI.extras.AnimatedSprite

定義：

使用紋理數組創建動畫精靈的方法。

用法：

new PIXI.extras.AnimatedSprite(textures,autoUpdate)

參數 :

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

返回值：
返回一個對象，對象會有一些屬性和方法，用于控制動畫精靈。

返回值對象的屬性：

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

返回值對象的方法：

名稱	參數	描述
play		播放動畫精靈
gotoAndPlay	frameNumber，number類型，開始幀的索引	轉到特定的幀并開始播放動畫精靈
stop		停止播放動畫精靈
gotoAndStop	frameNumber，number類型，停止幀的索引	轉到特定的幀并停止播放動畫精靈

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

好的，我們開始試試這個方法。





    
    動畫精靈

查看效果

上面這個例子中，創建紋理數組時似乎點麻煩，要解決這個問題，我們可以用名叫 SpriteUtilities 的庫，該庫包含許多有用的函數，用于創建Pixi精靈并使它們更易于使用。

安裝：

直接用 script 標簽，引入js 文件就可以

安裝好之后，我們需要創建一個新實例，代碼如下

let su = new SpriteUtilities(PIXI);

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

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

定義：

filmstrip 方法可以自動將雪碧圖轉換為可用于制作精靈的紋理數組

用法：

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

參數：

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

返回值：

返回一個數組，可用于制作動畫精靈的紋理數組。

現在我們使用 SpriteUtilities 來改寫下剛才的示例代碼。





    
    動畫精靈

查看效果

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

定義：
frames 方法使用雪碧圖中的一組子幀，來創建紋理數組。

用法：

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

參數：

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

返回值：
返回一個數組，可用于制作動畫精靈的紋理數組。

示例代碼：





    
    動畫精靈

查看效果

除了上面提到的方式，還可以用紋理貼圖集來創建動畫精靈。

使用紋理貼圖集來創建動畫精靈，就是先通過json文件，加載所有紋理，然后把需要的紋理再放進一個數組中，最后把這個數組當參數，傳入PIXI.extras.AnimatedSprite 方法中，來創建動畫精靈。

代碼：





    
    動畫精靈

查看效果

上面的代碼創建紋理數組時，是把紋理一個一個的放進數組中，如果數量比較少還好，多一點呢？假如有100個呢？一個一個的放就太麻煩了，這時候我們可以用 SpriteUtilities 庫中提供的 frameSeries 方法。

定義：

frameSeries 方法可以通過已加載的紋理貼圖集，使用一系列編號的幀ID來創建動畫精靈。

用法：

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

參數：

名稱	類型	描述
startNumber	number	起始幀序列號（默認值是0）
endNumber	number	結束幀序列號（默認值是1）
baseName	string	可選的基本文件名
extension	string	可選的文件擴展名

返回值：
返回一個數組，可用于制作動畫精靈的紋理數組。

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

 frameSeries(startNumber = 0, endNumber = 1, baseName = "", extension = "") {
   //創建一個數組來存儲幀名
   let frames = [];

   for (let i = startNumber; i < endNumber + 1; i++) {
     let frame = this.TextureCache[`${baseName + i + extension}`];
     frames.push(frame);
   }
   return frames;
 }

源碼中其實是用 for 循環把幀名拼接起來的。所以要保證幀名是按順序來的，不然就獲取不到了。

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





    
    動畫精靈

查看效果

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

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 。

這個 spriteUtilities.js 就是修改后的。

當然你也可以使用低版本的 PixiJS，這樣就不用改 spriteUtilities.js 的代碼了。

總結

動畫精靈就是逐幀動畫，通過一幀一幀的播放圖像來產生運動的幻覺。

本文就是聊了聊創建動畫精靈的一些方式和如何使用動畫精靈。

如果文中有錯誤的地方，還請小伙伴們指出，萬分感謝。

下一篇學習 PixiJS — 精靈狀態

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101003.html

學習 PixiJS — 精靈狀態

摘要：每個單獨的行為稱為狀態。狀態播放器用于控制精靈狀態。這個雪碧圖中實際上有八個精靈狀態四個靜態狀態和四個動畫狀態。下圖顯示了雪碧圖上的狀態以及標識這些狀態的幀號。將每個鍵的值設置為與狀態對應的幀編號。精靈狀態如果你有復雜的游戲角色或交互式對象，你可能希望該角色根據游戲環境中發生的情況，以不同的方式運行。每個單獨的行為稱為狀態。如果你在精靈上定義狀態，那么只要游戲中出現與該狀態相對應的...

Tonny 2019-08-23 14:49 評論0 收藏0
開始學習 PixiJS

摘要：它自動偵測使用或者。開發者無需專門學習就能感受到強大的硬件加速的力量。要注意的是，雖然非常適合制作游戲，但它并不是一個游戲引擎，它的核心本質是盡可能快速有效地在屏幕上移動物體。可以被處理的圖像被稱作紋理。 PixiJS 介紹 PixiJS 是一個超快的2D渲染引擎。它自動偵測使用 WebGL 或者 Canvas。開發者無需專門學習 WebGL 就能感受到強大的硬件加速的力量。 Pixi...

fredshare 2019-08-23 13:42 評論0 收藏0
學習 PixiJS — 小精靈冒險

摘要：說明小精靈冒險是一書中最后一個案例。在游戲循環中，通過減小平鋪精靈的值，使其向左移動。如果方法返回，則退出循環，表示小精靈碰撞到柱子了。重置游戲如果小精靈碰撞到柱子，則在秒鐘延遲后重置游戲。說明小精靈冒險是 Learn Pixi.js 一書中最后一個案例。點擊屏幕讓小精靈飛起來，小精靈上升時，會拍打翅膀，并且會有小星星產生。如果她撞到柱子上，她會爆炸成一堆小星星。幫助她通過15個...

dmlllll 2019-08-26 13:35 評論0 收藏0
學習 PixiJS — 視覺效果

摘要：將水平高斯模糊應用于對象。下一步是將此值分配給渲染選項的屬性。蛇圖像的寬度為像素，因此大約個片段會產生很好的效果。通過循環將數組中的每個按照橢圓形的軌跡移動，形成波浪效果。平鋪精靈平鋪精靈是一種特殊的精靈，可以在一定的范圍內重復一個紋理。你可以使用它們創建無限滾動的背景效果。要創建平鋪精靈，需要使用帶有三個參數的 TilingSprite 類（PIXI.extras.TilingS...

xavier 2019-08-23 15:07 評論0 收藏0
學習 PixiJS — 補間動畫

摘要：方法的參數如下名稱默認值描述需要移動的精靈貝塞爾曲線的坐標點的數組補間需要的幀數，也就是動畫應該持續多長時間緩動類型用于確定精靈是否應在補間的起點和終點之間來回移動。說明補間動畫指的是，我們可以通過為精靈的位置、比例、透明度，等屬性，設置開始值和結束值，制作動畫，動畫中間需要的部分由軟件自動計算填充。 Pixi 沒有內置補間引擎，但是你可以使用很多很好的開源的補間庫，比如 Twee...

levius 2019-08-23 15:17 評論0 收藏0