pixi笔记

因为之前看过three.js的缘故，所以pixi学习起来也是很快的，主要就是熟悉pixi的API，所以，在这里记录一下pixi常用API，废话不多说，下面上干货。

一、为你的PIXI场景添加图片（精灵类）

注：请自行提前下载pixi.min.js,后续案例基于pixi.js - v4.5.5

//新建一个pixo的实例，并加以配置
let app = new PIXI.Application({width: 256, height: 256});
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 = 0; i < 3500; i++) {
    //利用orange图片贴图生成精灵
    let sprite = new PIXI.Sprite(
      Resources.orange.texture
    );
    sprite.x = (i%25)*50;
    sprite.y = ~~(i/25)*50;
    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 = 50;
    sprite.y = 50;
    app.stage.addChild(sprite);
}

猜你喜欢