内容简介:看完动画精灵指的是按顺序使用一系列略有不同的图像,创建的精灵,之后一帧一帧的播放这些图像,就可以产生运动的幻觉。也就是说用这种图片
说明
看完 官方教程 中提到的这本书 — 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://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.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://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(); } </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://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script> <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script> <script> //创建一个 Pixi应用 需要的一些参数 var option = { width: 400, height: 300, transparent: true, } //创建一个 Pixi应用 var app = new PIXI.Application(option); //获取渲染器 var renderer = app.renderer; var 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(); } </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://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script> <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script> <script> //创建一个 Pixi应用 需要的一些参数 var option = { width: 400, height: 300, transparent: true, } //创建一个 Pixi应用 var app = new PIXI.Application(option); //获取渲染器 var renderer = app.renderer; var 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(); } </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://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script> <script> //创建一个 Pixi应用 需要的一些参数 var option = { width: 400, height: 300, transparent: true, } //创建一个 Pixi应用 var app = new PIXI.Application(option); //获取渲染器 var renderer = app.renderer; var 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://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script> <script src="https://www.kkkk1000.com/js/spriteUtilities.js"></script> <script> //创建一个 Pixi应用 需要的一些参数 var option = { width: 400, height: 300, transparent: true, } //创建一个 Pixi应用 var app = new PIXI.Application(option); //获取渲染器 var renderer = app.renderer; var 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() { //创建纹理数组 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 — 动画精灵》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 【Cocos2d-x】Sprite精灵类-创建Sprite精灵对象
- 学习 PixiJS — 精灵状态
- 学习 PixiJS — 小精灵冒险
- 天猫精灵 App 首页信息流是怎样实现的
- 天猫精灵App首页信息流是怎样实现的
- cocos2d js-如何删除精灵【原创】
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Flash ActionScript 3.0从入门到精通
章精设、胡登涛 / 清华大学出版社 / 2008-10-1 / 69.00元
Flash ActionScript 3.0的出现,不仅从形式上改变了ActionScript,而且从本质上改变了ActionScript,使ActionScript 3.0成为了真正的面向对象编程语言。 本书从最简单的编程知识出发,带领读者走进编程的大门,是一本不可多得的ActionScript 3.0入门书。本书在注重基础的同时,从更高的层次来介绍ActionScript 3.0的面向对......一起来看看 《Flash ActionScript 3.0从入门到精通》 这本书的介绍吧!