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);
}

 三、紋理替換

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 = 50;
    sprite.y = 50;
    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 = 50;
    sprite.y = 50;
    sprite1.x = 150;
    sprite1.y = 150;
    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倍，但是為此你得做出一些犧牲：