因为之前看过three.js的缘故,所以pixi学习起来也是很快的,主要就是熟悉pixi的API,所以,在这里记录一下pixi常用API,废话不多说,下面上干货。
一、为你的PIXI场景添加图片(精灵类)
注:请自行提前下载pixi.min.js,后续案例基于pixi.js - v4.5.5
//新建一个pixo的实例,并加以配置
let app = new PIXI.Application({width: , height: });
app.renderer.backgroundColor = 0x061639;
app.renderer.view.style.position = "absolute";
app.renderer.view.style.display = "block";
app.renderer.autoResize = true;
app.renderer.resize(window.innerWidth, window.innerHeight);
//将该实例append到页面中用于展示
document.body.appendChild(app.view); //全局定义常用的pixi常量和方法
let Application = PIXI.Application,
Loader = PIXI.loader,
Resources = PIXI.loader.resources,
Sprite = PIXI.Sprite,
TextureCache = PIXI.utils.TextureCache; //load一张图片,并取个别名orange
Loader.add("orange","images/orange.png").load(setup); function setup() {
for (var i = ; i < ; i++) {
//利用orange图片贴图生成精灵
let sprite = new PIXI.Sprite(
Resources.orange.texture
);
sprite.x = (i%)*;
sprite.y = ~~(i/)*;
app.stage.addChild(sprite);
}
}
还有一点,你的demo要跑在服务器环境下,所以,本地搭个服务先!
二、加载纹理贴图集
从面的例子中,我们只是加载了一个纹理,并且直接用这个纹理的texture来初始化一个精灵类,下面是通过加载json的方式,一次性加载多个纹理贴图集。
首先我们下载一个软件Texture Packer,他可以将你的多个贴图生成单个图片文件和对应的json文件。
Loader.add("images/imgs.json").load(setup);
上面的代码执行之后,每一个图像的帧都被加载进Pixi的纹理缓存之中了。你可以选择如下3种方式从已经加载的纹理贴图集中创建精灵。
①TextureCache
let texture = TextureCache["orange.png"],sprite = new Sprite(texture);
可以理解为从pixi的纹理缓存中拿到orange这个纹理,并借此实例化一个精灵实例。
②Resources
let sprite = new Sprite(
Resources["images/imgs.json"].textures["orange.png"]
);
注意,Resources = PIXI.loader.resources,这在博客第一个例子就已经贴出。
这句可以理解为获取指定json文件资源,并且获取其中orange纹理,实例化一个精灵实例。
③上一步的方便写法
let json1 = Resources["images/imgsr.json"].textures;
let sprite = new Sprite(json1["orange.png"]);
因为后续要实例化不同精灵实例的话,第一句话其实就是复用了,所以单独提出来,作为一个变量。
Loader.add("images/imgs.json").load(setup);
function setup() {
//利用orange图片贴图生成精灵
let texture = TextureCache["orange.png"];
let sprite = new PIXI.Sprite(texture);
sprite.x = ;
sprite.y = ;
app.stage.addChild(sprite);
}
三、纹理替换
Loader.add("images/imgs.json").load(setup);
function setup() {
//利用orange图片贴图生成精灵
let texture = TextureCache["orange.png"];
let sprite = new PIXI.Sprite(texture);
//在渲染之前替换纹理贴图
sprite.texture = TextureCache['gakki.jpg'];
sprite.x = ;
sprite.y = ;
app.stage.addChild(sprite);
}
四、精灵分组
let sprite;
Loader.add("images/imgs.json").load(setup);
function setup() {
//利用orange图片贴图生成精灵
sprite = new PIXI.Sprite(TextureCache["orange.png"]);
let sprite1 = new PIXI.Sprite(TextureCache["gakki.jpg"]);
let wrap = new PIXI.Container();
sprite.x = ;
sprite.y = ;
sprite1.x = ;
sprite1.y = ;
wrap.addChild(sprite,sprite1);
//将精灵实例组添加到场景
app.stage.addChild(wrap);
//为pixi循环添加事件队列
app.ticker.add(gameLoop);
}
精灵分组之后,我们可以以组为单位来操纵这些精灵了,但不影响我们像之前那样,单个操作它们。
但是,此时单个精灵的位置(x,y)是它们相对于容器的位置。不过你还是可以通过如下API得出精灵的全局位置:
wrap.toGlobal(sprite.position) 或者
sprite.getGlobalPosition()
其实就是容器的位置加上单个精灵的位置(因为他们的位置是相对于容器的),这样就算出了精灵相对于全局(舞台)的位置了。
下面是计算两个精灵之间的距离:
sprite.toLocal(sprite.position, sprite1)
其实这个方法有待优化(根本没必要传精灵的位置好吧,函数内部可以算啊)
关于精灵分组,还有一个API:ParticleContainer,他的渲染速度比Container
的渲染速度快2到5倍,但是为此你得做出一些牺牲: