學習 PixiJS — 動畫精靈

FEWY發表於2019-01-14

JS動畫

說明

看完官方教程中提到的這本書 — 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 。

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

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>動畫精靈</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        // 建立一個 Pixi應用 需要的一些引數
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        // 建立一個 Pixi應用
        let app = new PIXI.Application(option);
        // 獲取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        // 把 Pixi 建立的 canvas 新增到頁面上
        playground.appendChild(renderer.view);

        //設定別名
        let TextureCache = PIXI.utils.TextureCache;
        let Texture = PIXI.Texture;
        let Rectangle = PIXI.Rectangle;
        let AnimatedSprite = PIXI.extras.AnimatedSprite;

        //需要載入的雪碧圖的地址（該圖片伺服器端已做跨域處理）
        let imgURL = "https://user-gold-cdn.xitu.io/2019/1/14/16849ce12c0e953a?w=320&h=286&f=png&s=27286";

        //載入影象，載入完成後執行setup函式 
        PIXI.loader.add(imgURL).load(setup);

        function setup() {
            //獲取紋理
            let base = TextureCache[imgURL];

            //第一個紋理
            let texture0 = new Texture(base);
            texture0.frame = new Rectangle(0, 0, 80, 143);
            //第二個紋理
            let texture1 = new Texture(base);
            texture1.frame = new Rectangle(80, 0, 80, 143);
            //第三個紋理
            let texture2 = new Texture(base);
            texture2.frame = new Rectangle(160, 0, 80, 143);
            //第四個紋理
            let texture3 = new Texture(base);
            texture3.frame = new Rectangle(240, 0, 80, 143);

            //建立紋理陣列
            let textures = [texture0, texture1, texture2, texture3];
            //建立動畫精靈
            let pixie = new PIXI.extras.AnimatedSprite(textures);
            //設定動畫精靈的速度
            pixie.animationSpeed = 0.1;

            //把動畫精靈新增到舞臺
            app.stage.addChild(pixie);
            //播放動畫精靈
            pixie.play();
        }
    </script>
</body>

</html>
複製程式碼

檢視效果

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

安裝：

直接用 script 標籤，引入js 檔案就可以

<script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
複製程式碼

安裝好之後，我們需要建立一個新例項，程式碼如下

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 來改寫下剛才的示例程式碼。

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>動畫精靈</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //建立一個 Pixi應用 需要的一些引數
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //建立一個 Pixi應用
        let app = new PIXI.Application(option);
        //獲取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 建立的 canvas 新增到頁面上
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        //需要載入的雪碧圖的地址（該圖片伺服器端已做跨域處理）
        let imgURL = "https://user-gold-cdn.xitu.io/2019/1/14/16849ce12c0e953a?w=320&h=286&f=png&s=27286";
        PIXI.loader.add(imgURL).load(setup);

        function setup() {
            //建立紋理陣列
            let frames = su.filmstrip(imgURL, 80, 143);
            //建立動畫精靈
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //設定動畫精靈的速度
            pixie.animationSpeed = 0.1;

            //把動畫精靈新增到舞臺
            app.stage.addChild(pixie);
            //播放動畫精靈
            pixie.play();
        }
    </script>
</body>

</html>
複製程式碼

檢視效果

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

定義：

frames 方法使用雪碧圖中的一組子幀，來建立紋理陣列。

用法：

su.frames(source, coordinates, frameWidth, frameHeight)
複製程式碼

引數：

名稱	型別	描述
source	string	雪碧圖的路徑
coordinates	array	包含每幀的 x 和 y 座標的二維陣列
frameWidth	number	每幀的寬度（以畫素為單位）
frameHeight	number	每幀和高度（以畫素為單位）

返回值：
返回一個陣列，可用於製作動畫精靈的紋理陣列。

示例程式碼：

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>動畫精靈</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //建立一個 Pixi應用 需要的一些引數
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //建立一個 Pixi應用
        let app = new PIXI.Application(option);
        //獲取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 建立的 canvas 新增到頁面上
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        //需要載入的雪碧圖的地址（該圖片伺服器端已做跨域處理）
        let imgURL = "https://user-gold-cdn.xitu.io/2019/1/14/16849ce12c0e953a?w=320&h=286&f=png&s=27286";

        PIXI.loader.add(imgURL).load(setup);
        function setup() {
            //建立紋理陣列
            let frames = su.frames(imgURL, [[0, 0], [80, 0], [160, 0], [240, 0]], 80, 143);
            //建立動畫精靈
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //設定動畫精靈的速度
            pixie.animationSpeed = 0.1;

            //把動畫精靈新增到舞臺
            app.stage.addChild(pixie);
            //播放動畫精靈
            pixie.play();
        }
    </script>
</body>

</html>
複製程式碼

檢視效果

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

使用紋理貼圖集來建立動畫精靈，就是先通過json檔案，載入所有紋理，然後把需要的紋理再放進一個陣列中，最後把這個陣列當引數，傳入PIXI.extras.AnimatedSprite 方法中，來建立動畫精靈。

程式碼：

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>動畫精靈</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script>
        //建立一個 Pixi應用 需要的一些引數
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //建立一個 Pixi應用
        let app = new PIXI.Application(option);
        //獲取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 建立的 canvas 新增到頁面上
        playground.appendChild(renderer.view);

        //需要載入的紋理貼圖集的地址
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        //載入紋理貼圖集，載入完成後執行setup函式
        PIXI.loader.add(textureURL).load(setup);

        function setup() {
            let id = PIXI.loader.resources[textureURL].textures;

            //建立紋理陣列
            let frames = [
                id["dnf0.png"],
                id["dnf1.png"],
                id["dnf2.png"],
                id["dnf3.png"]
            ];
            //建立動畫精靈
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //設定動畫精靈的速度
            pixie.animationSpeed = 0.1;

            //把動畫精靈新增到舞臺
            app.stage.addChild(pixie);
            //播放動畫精靈
            pixie.play();
        }
    </script>
</body>

</html>
複製程式碼

檢視效果

上面的程式碼建立紋理陣列時，是把紋理一個一個的放進陣列中，如果數量比較少還好，多一點呢？假如有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 方法吧。

<!doctype html>
<html lang="zn">

<head>
    <meta charset="UTF-8">
    <title>動畫精靈</title>
</head>

<body>
    <div id="px-render"></div>

    <script src="https://www.kkkk1000.com/js/pixi4.8.2.js"></script>
    <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script>
    <script>
        //建立一個 Pixi應用 需要的一些引數
        let option = {
            width: 400,
            height: 300,
            transparent: true,
        }
        //建立一個 Pixi應用
        let app = new PIXI.Application(option);
        //獲取渲染器
        let renderer = app.renderer;
        let playground = document.getElementById('px-render');
        //把 Pixi 建立的 canvas 新增到頁面上
        playground.appendChild(renderer.view);

        let su = new SpriteUtilities(PIXI);
        //需要載入的紋理貼圖集的地址
        let textureURL = "https://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.json";

        PIXI.loader.add(textureURL).load(setup);
        function setup() {
            //建立紋理陣列
            debugger;
            let frames = su.frameSeries(0, 7, "dnf", ".png");
            //建立動畫精靈
            let pixie = new PIXI.extras.AnimatedSprite(frames);
            //設定動畫精靈的速度
            pixie.animationSpeed = 0.1;

            //把動畫精靈新增到舞臺
            app.stage.addChild(pixie);
            //播放動畫精靈
            pixie.play();
        }
    </script>
</body>

</html>
複製程式碼

檢視效果

注意版本問題：
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 — 精靈狀態

學習 PixiJS — 精靈狀態
2019-01-19
JS
學習 PixiJS — 小精靈冒險
2019-03-11
JS
學習 PixiJS — 補間動畫
2019-02-18
JS動畫
SpriteSheet精靈動畫引擎
2014-02-26
動畫
原生webGL練習：利用點精靈實現字串動畫！
2018-07-30
Web字串動畫
開始學習 PixiJS
2018-11-26
JS
學習 PixiJS — 粒子效果
2019-01-22
JS
學習 PixiJS — 碰撞檢測
2019-02-25
JS
學習 PixiJS — 互動工具
2021-09-09
JS
學習 PixiJS — 視覺效果
2019-02-03
JS視覺
Cocos2dx中精靈（CCSprite）、動畫建立
2018-06-25
動畫
Python 精靈模組_幀動畫_純畫筆下雪效果.py
2019-12-31
Python動畫
網頁小實驗——用canvas生成精靈動畫圖片
2021-01-30
網頁Canvas動畫
與小卡特一起學python 第17章動畫精靈和碰撞檢測
2016-04-11
Python動畫
IOS動畫學習
2012-03-30
iOS動畫
[原創]SpriteKit+Swift學習筆記（六）-生成大量精靈
2014-09-17
Swift筆記
SF精靈 for Chrome
2014-07-21
Chrome
《幻想精靈》精靈系統及圖鑑技能說明攻略
2017-01-03
python 精靈模組非常簡單的讓小朋友製作遊戲和動畫
2019-12-17
Python遊戲動畫
精讀《原始碼學習》
2019-07-22
原始碼
加密精靈 (EncryptGenie) 2.61
2015-11-15
加密
SpriteAtlas精靈圖集
2024-04-18
系統學習iOS動畫之一：檢視動畫
2018-12-27
iOS動畫
系統學習iOS動畫之三：圖層動畫
2018-12-27
iOS動畫
Android 補間動畫學習
2020-11-27
Android動畫
QT學習筆記4（動畫）
2020-11-30
QT筆記動畫
Android過渡動畫學習
2017-09-28
Android動畫
CSS精靈圖技術
2018-11-25
CSS
按鍵精靈使用教程
2017-07-06
Flutter動畫之粒子精講
2019-07-16
Flutter動畫
系統學習iOS動畫之六：3D動畫
2018-12-27
iOS動畫3D
“數學口袋精靈”App的第一個Sprint計劃
2015-11-20
APP
iOS學習筆記-動畫篇1
2017-12-13
iOS筆記動畫
Android學習之屬性動畫
2014-12-10
Android動畫
系統學習iOS動畫之七：其它型別的動畫
2018-12-27
iOS動畫型別
React Native學習實踐：動畫初探之載入動畫
2016-04-29
React Native動畫
驅動精靈是幹嘛的驅動精靈怎麼安裝驅動
2021-06-07
自動精靈 2.00 破解教程
2004-12-17

學習 PixiJS — 動畫精靈

說明

PIXI.extras.AnimatedSprite

總結

相關文章