一、概念
[wm_notice]
- 纹理 :图片元素中显示的内容
- 纹理切换:更换图片中显示的内容,可以让元素中的内容产生变化
[/wm_notice]
二、元素与纹理
元素与纹理通常一起创建
// 图片元素 纹理
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;
三、通过快速切换纹理实现帧频动画
[wm_notice]PIXI中提供了一些可以通过快速切换纹理实现帧频动画的方法[/wm_notice]
运行效果
如下图所示
第一步 :准备一个存放所有纹理路径的数组
例
//用于保存所有纹理路径的数组
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();