一、概念

  • 纹理 :图片元素中显示的内容
  • 纹理切换:更换图片中显示的内容,可以让元素中的内容产生变化

二、元素与纹理

元素与纹理通常一起创建

//  图片元素				 纹理
var plane = new PIXI.Sprite.fromImage("img/plane1.png");

plane就是图片元素 而 "img/plane.png" 就是纹理

创建纹理

语法

var 变量名 =  new PIXI.Texture.fromImage("路径");

var texture = new PIXI.Texture.fromImage("img/plane1.png");

创建图片元素并添加纹理

语法

var 变量名 = new PIXI.Sprite(纹理变量)

var plane = new PIXI.Sprite(texture);

修改图片元素中的纹理

语法

元素名.texture = 新纹理;

//创建纹理1
var t1 = new PIXI.Texture.fromImage("img/plane1.png");
var t2 = new PIXI.Texture.fromImage("img/plane2.png");
//创建图片元素并添加纹理 t1
var plane = new PIXI.Sprite( t1 );
//将plane元素中的纹理更改为t2
plane.texture  = t2;

三、通过快速切换纹理实现帧频动画

PIXI中提供了一些可以通过快速切换纹理实现帧频动画的方法

运行效果

如下图所示

Chap_16 纹理切换与帧频动画

第一步 :准备一个存放所有纹理路径的数组

//用于保存所有纹理路径的数组
var ts = [];
//向数组中添加纹理路径
ts.push("img/planplay_1.png");
ts.push("img/planplay_2.png");
ts.push("img/planplay_3.png");
ts.push("img/planplay_4.png");
ts.push("img/planplay_5.png");
ts.push("img/planplay_6.png");
//略.....

第二步:创建纹理播放器

语法
var 变量名 = PIXI.extras.AnimatedSprite.fromImages( 纹理数组 );

var as = new PIXI.extras.AnimatedSprite.fromImages( ts );

第三步:调整属性并在应用中添加播放器

//创建纹理播放器
var as = new PIXI.extras.AnimatedSprite.fromImages( ts );
//设置播放器位置
as.x = 200;
as.y = 200;
//在应用中添加播放器
app.stage.addChild( as );

第四步:设置播放速度

播放速度0~1,数值越小速度越慢

语法

纹理播放器.animationSpeed = 播放速度;

//设置动画播放速度
as.animationSpeed = 0.15;

第五步:播放动画

语法

纹理播放器.play();

as.play();

完整代码

var app = new PIXI.Application(500,700);
document.body.appendChild( app.view );
			
//用于保存所有纹理路径的数组
var ts = [];
//向数组中添加纹理路径
ts.push("img/planplay_1.png");
ts.push("img/planplay_2.png");
ts.push("img/planplay_3.png");
ts.push("img/planplay_4.png");
ts.push("img/planplay_5.png");
ts.push("img/planplay_6.png");
ts.push("img/planplay_7.png");
ts.push("img/planplay_8.png");
ts.push("img/planplay_9.png");
ts.push("img/planplay_10.png");
ts.push("img/planplay_11.png");
			
//创建纹理播放器
var as = new PIXI.extras.AnimatedSprite.fromImages( ts );
//设置播放器位置
as.x = 200;
as.y = 200;
//在应用中添加播放器
app.stage.addChild( as );
//设置动画播放速度
as.animationSpeed = 0.15;
//播放动画
as.play();

 

未经允许不得转载:作者:西瓜君✔, 转载或复制请以 超链接形式 并注明出处
原文地址:《Chap_16 纹理切换与帧频动画》 发布于2020-05-21

分享到:
赞(0) 打赏 生成海报

评论 抢沙发

评论前必须登录!

  注册



长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册