base64 string 放不下_衣沾不足惜

说明

看完官方教程中提到的这本书 — Learn Pixi.js ，准备写写读后感了，官方教程中所说的内容，基本上就是书的前4章，所以我就从第5章开始写写吧。动画精灵指的是按顺序使用一系列略有不同的图像，创建的精灵，之后一帧一帧的播放这些图像，就可以产生运动的幻觉。

也就是说用这种图片

做出这样的效果

定义：

使用纹理数组创建动画精灵的方法。

用法：new PIXI.extras.AnimatedSprite(textures,autoUpdate)

参数 :名称类型默认值描述texturesarray用一系列略有不同的图像做的纹理数组。

autoUpdatebooleantrue

返回值：

返回一个对象，对象会有一些属性和方法，用于控制动画精灵。

返回值对象的属性：名称类型描述animationSpeednumber动画精灵的播放速度。越高越快，越低越慢，默认值是1

currentFramenumber(只读)正在显示的当前帧编号

onCompletefunction当loop属性为false时，一个动画精灵完成播放时调用

playingBoolean确定当前动画精灵是否正在播放

onFrameChangefunction当一个动画精灵更改要呈现的纹理时调用

loopboolean动画精灵是否在播放后重复播放

onLoopfunction当loop属性为true时调用的函数

texturesarray用于这个动画精灵的纹理数组

totalFramesnumber (只读)动画中的帧总数

返回值对象的方法：名称参数描述play播放动画精灵

gotoAndPlayframeNumber，number类型，开始帧的索引转到特定的帧并开始播放动画精灵

stop停止播放动画精灵

gotoAndStopframeNumber，number类型，停止帧的索引转到特定的帧并停止播放动画精灵

使用返回值中的这些属性和方法，我们就可以控制动画精灵了，比如播放动画精灵，设置动画的速度，设置是否循环播放等，除此之外，还要知道就是 PIXI.extras.AnimatedSprite 方法继承自 PIXI.Sprite 方法，所以动画精灵也可以用普通精灵的属性和方法，比如x，y，width，height，scale，rotation 。

好的，我们开始试试这个方法。

动画精灵

// 创建一个 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://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";

//加载图像，加载完成后执行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();

}

上面这个例子中，创建纹理数组时似乎点麻烦，要解决这个问题，我们可以用名叫 SpriteUtilities 的库，该库包含许多有用的函数，用于创建Pixi精灵并使它们更易于使用。

安装：

直接用 script 标签，引入js 文件就可以

安装好之后，我们需要创建一个新实例，代码如下let su = new SpriteUtilities(PIXI);

之后就可以用 su 对象访问所有方法了。

我们这里需要用到的就是 su 对象的 filmstrip 方法。

定义：

filmstrip 方法可以自动将雪碧图转换为可用于制作精灵的纹理数组

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

参数：名称类型描述anyTilesetImagestring雪碧图的路径

frameWidthnumber每帧的宽度(以像素为单位)

frameHeightnumber每帧的高度(以像素为单位)

optionalPaddingnumber每帧周围的填充量(可选值，以像素为单位)

返回值：

返回一个数组，可用于制作动画精灵的纹理数组。

现在我们使用 SpriteUtilities 来改写下刚才的示例代码。

动画精灵

//创建一个 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://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";

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();

}

filmstrip 方法自动将整个雪碧图转换为可用于制作动画精灵的纹理数组。但是，如果我们只想使用雪碧图中的一部分帧呢？这时候需要用到 frames 方法了。

定义：

frames 方法使用雪碧图中的一组子帧，来创建纹理数组。

用法：su.frames(source, coordinates, frameWidth, frameHeight)

参数：名称类型描述sourcestring雪碧图的路径

coordinatesarray包含每帧的 x 和 y 坐标的二维数组

frameWidthnumber每帧的宽度(以像素为单位)

frameHeightnumber每帧和高度(以像素为单位)

返回值：

返回一个数组，可用于制作动画精灵的纹理数组。

示例代码：

动画精灵

//创建一个 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://www.kkkk1000.com/images/learnPixiJS-AnimatedSprite/dnf.png";

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();

}

除了上面提到的方式，还可以用纹理贴图集来创建动画精灵。

使用纹理贴图集来创建动画精灵，就是先通过json文件，加载所有纹理，然后把需要的纹理再放进一个数组中，最后把这个数组当参数，传入PIXI.extras.AnimatedSprite 方法中，来创建动画精灵。

代码：

动画精灵

//创建一个 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();

}

上面的代码创建纹理数组时，是把纹理一个一个的放进数组中，如果数量比较少还好，多一点呢？假如有100个呢？一个一个的放就太麻烦了，这时候我们可以用 SpriteUtilities 库中提供的 frameSeries 方法。

定义：

frameSeries 方法可以通过已加载的纹理贴图集，使用一系列编号的帧ID来创建动画精灵。

用法：su.frameSeries(startNumber, endNumber, baseName, extension)

参数：名称类型描述startNumbernumber起始帧序列号(默认值是0)

endNumbernumber结束帧序列号(默认值是1)

baseNamestring可选的基本文件名

extensionstring可选的文件扩展名

返回值：

返回一个数组，可用于制作动画精灵的纹理数组。

注意：

使用 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 方法吧。

动画精灵

//创建一个 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();

}

注意版本问题：

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 。

当然你也可以使用低版本的 PixiJS，这样就不用改 spriteUtilities.js 的代码了。

总结

动画精灵就是逐帧动画，通过一帧一帧的播放图像来产生运动的幻觉。

本文就是聊了聊创建动画精灵的一些方式和如何使用动画精灵。

如果文中有错误的地方，还请小伙伴们指出，万分感谢。查看原文