pixi之加载纹理贴图和精灵类的使用

因为之前看过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倍，但是为此你得做出一些牺牲：