學習 PixiJS — 動畫精靈

時間 2019-11-08

標籤學習 pixijs 動畫精靈简体版

原文原文鏈接

說明

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

動畫精靈指的是按順序使用一系列略有不一樣的圖像，建立的精靈，以後一幀一幀的播放這些圖像，就能夠產生運動的幻覺。html

也就是說用這種圖片java

作出這樣的效果 git

要製做動畫精靈咱們須要用到 PixiJS 的 AnimatedSprite 方法。github

PIXI.extras.AnimatedSprite

定義：spring

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

用法：canvas

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>
複製代碼

查看效果

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

二、 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 的代碼了。