什么是 Pixi

Pixi 是一個非常快的 2D sprite 渲染引擎。使用它你可以輕松的利用 JavaScript 和其他 HTML5 技術制作游戲和應用程序。
Pixi 的官網地址：https://pixijs.com/
本游戲使用的是 Pixi 的 V4.5.5 版本，官網最新版本更新到了 V8.x，兩個版本 API 相差很大，建議大家學習最新版本。從 github 官網上下載 V4.5.5 版本：https://github.com/pixijs/pixijs/releases

安裝 Pixi

Pixi.js V4.x 不支持 npm 安裝，我們從 github 上下載下來后直接通過 script 標簽引入。

<script src="./public/pixi.4.5.5.min.js"></script>

創建應用和舞臺 stage

首先，我們使用 Pixi 的 Application 對象創建一個矩形顯示區域，它會自動生成一個 HTML <canvas> 元素；接著，我們把應用的視圖插入到 DOM 中。初始化應用時可以設置很多屬性，在這里我們只配置展示區域大小和背景色。

// 創建PIXI應用
const app = new PIXI.Application({
  width: 600,
  height: 600,
  forceWebGL: true, // 強制使用WebGL，默認是false，設置為true，強制使用WebGL
  backgroundColor: 0x1099bb, // 背景顏色，默認是0x000000，設置為0x1099bb，背景顏色為藍色
})

// 把應用視圖插入到DOM中。
document.getElementById('app').appendChild(app.view)

由于 PIXI 的方法和屬性調用太深了，使用時不太方便，我們可以使用別名來簡化方法和屬性調用。后面代碼中我們見到的以下劃線開頭的變量都是重新定義的。

const _Application = PIXI.Application
const _Sprite = PIXI.Sprite
const _Texture = PIXI.Texture
const _TextureCache = PIXI.utils.TextureCache
const _loader = PIXI.loader
const _utils = PIXI.utils
const _resources = PIXI.loader.resources
const _Rectangle = PIXI.Rectangle
const _Text = PIXI.Text

我們可以通過應用實例訪問舞臺對象，const _stage = app.stage，stage（舞臺）是 Pixi 中一個特殊的根容器，所有要展示在<canvas>上的元素（圖片、文字）都要裝進 stage 里才能展示。調用 _stage.addChild 方法添加元素。

創建 sprite 精靈與紋理緩存

在 PIXI 中，圖像被稱為 sprite（精靈），它是一種特殊的圖像對象。我們可以控制它們的位置、大小和其他屬性，制作和控制 sprite 是我們進入游戲開發的最重要一步。
Pixi 使用 WebGL 在 GPU 上渲染圖像，圖像需要轉換為 GPU 可以處理的東西，這個東西被稱為texture（紋理）。為保證快速高效，Pixi 使用 texture cache（紋理緩存）來存儲和引用你的精靈需要的所有圖像。

1. 加載圖像到紋理緩存

Pixi 強大的 loader（加載器）對象可以加載任何類型的圖像，我們使用 loader 加載器來加載圖像，加載的圖像會緩存到紋理緩存中。loader 還可以加載 JSON 文件，后面我們會講到 紋理貼圖集，它就是一個 JSON 文件。

// 我們可以鏈式加載圖像，并給加載的每個圖像指定別名
_loader
      .add('wallImg', 'images/1.png') // 加載的圖片1是磚塊，我們指定別名為wallImg
      .add('catImg', 'images/2.png')
      .add('devilImg', 'images/3.png')
      .add('treasureImg', 'images/4.png')
      .load(intLoad) // intLoad是一個回調函數，表示圖像加載完成后要進行的操作

// 也可以把圖片放到一個數組中進行加載
_loader.add(['images/1.png', 'images/2.png', 'images/3.png', 'images/4.png']).load(intLoad)

注意：加載圖像要使用 anywhere 或者 http-server 起一個本地服務，否則會提示加載圖像跨域。

2. 從紋理緩存中獲取紋理并創建精靈

圖片加載完后我們就可以從紋理緩存中獲取圖像對應的紋理，根據PIXI.Sprite創建精靈對象，然后把精靈對象放入舞臺 stage 中就可以展示了。這些操作要在加載圖片完成后的回調函數中進行。我們可以對精靈對象設置大小、坐標位置、縮放比例、旋轉角度、透明度等屬性。
精靈默然展示在可視區的左上角，水平向右為 X 軸正方向，垂直向下為 Y 軸的正方向。

_loader
      .add('wallImg', 'images/1.png') // 加載的圖片1是磚塊，我們指定別名為wallImg
      .add('catImg', 'images/2.png')
      .add('devilImg', 'images/3.png')
      .add('treasureImg', 'images/4.png')
      .load(intLoad) // intLoad是一個回調函數，表示圖像加載完成后要進行的操作

function intLoad(){
  let texture = _TextureCache['wallImg'] // 從紋理緩存中獲取圖像對應的紋理
  let sprite = new _Sprite(texture) // 根據紋理生成一個精靈對象
  _stage.addChild(sprite) // 把精靈對象放入舞臺容器
  // 控制精靈坐標位置，可以使用x、y屬性，也可以使用position設置
  // sprite.x = 100
  // sprite.y = 100
  sprite.position.set(100, 100)
  // 設置精靈的大小
  sprite.width = 40
  sprite.height = 40
  // 設置精靈的縮放比例，可以單個軸方向上縮放，也可以同時縮放
  // sprite.scale.x = 0.5
  // sprite.scale.y = 0.5
  sprite.scale.set(1)
  // 精靈旋轉，旋轉點為精靈的左上角。順時針為正，逆時針為負
  sprite.rotation = Math.PI / 4 // 順時針旋轉90度。
  // 精靈透明度設置
  sprite.alpha = 0.5
  // 隱藏精靈
  sprite.visible = false
  // 更換精靈，會有同一個精靈有不同紋理的場景。飛機正常狀態切換到爆炸狀態
  sprite.texture = _TextureCache['catImg']
  
}

創建游戲中涉及到的所有精靈，代碼如下：

      _loader
        .add('wallImg', 'images/1.png')
        .add('catImg', 'images/2.png')
        .add('devilIMg', 'images/3.png')
        .add('treasureImg', 'images/4.png')
        .load(intLoad)
      function intLoad() {
        // 創建磚塊精靈
        const wallSprite = new _Sprite(_TextureCache['wallImg'])
        wallSprite.width = 40
        wallSprite.height = 40
        _stage.addChild(wallSprite)
        // 創建貓精靈
        const catSprite = new _Sprite(_TextureCache['catImg'])
        catSprite.width = 40
        catSprite.height = 40
        catSprite.position.set(40, 0)
        _stage.addChild(catSprite)
        // 創建惡魔精靈
        const devilSprite = new _Sprite(_TextureCache['devilIMg'])
        devilSprite.width = 40
        devilSprite.height = 40
        devilSprite.position.set(80, 0)
        _stage.addChild(devilSprite)
        // 創建寶物精靈
        const treasureSprite = new _Sprite(_TextureCache['treasureImg'])
        treasureSprite.width = 40
        treasureSprite.height = 40
        treasureSprite.position.set(120, 0)
        _stage.addChild(treasureSprite)
      }

頁面展示如下圖所示，這節我們主要學習如何創建精靈圖，下一節就要讓這些精靈圖動起來了。

當我們要開發一款大型復雜的游戲時，有很多精靈元素需要創建，這時候創建雪碧圖就很有必要了，我們可以根據雪碧圖來創建精靈。我們可以使用紋理打包器 Texture Packer工具來生成雪碧圖。Texture Packer除了能生成雪碧圖外，還能生成紋理貼圖集，它是一個 JSON 文件，里面包含了雪碧圖中各個子圖的位置及大小等信息，紋理貼圖集的 JSON 數據結構如下：

{
  "frames": {
    "1.png": {
      "frame": { "x": 0, "y": 0, "w": 100, "h": 100 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 100, "h": 100 },
      "sourceSize": { "w": 100, "h": 100 }
    },
    "2.png": {
      "frame": { "x": 100, "y": 0, "w": 100, "h": 100 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 100, "h": 100 },
      "sourceSize": { "w": 100, "h": 100 }
    },
    "3.png": {
      "frame": { "x": 200, "y": 0, "w": 100, "h": 100 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 100, "h": 100 },
      "sourceSize": { "w": 100, "h": 100 }
    },
    "4.png": {
      "frame": { "x": 300, "y": 0, "w": 100, "h": 100 },
      "rotated": false,
      "trimmed": false,
      "spriteSourceSize": { "x": 0, "y": 0, "w": 100, "h": 100 },
      "sourceSize": { "w": 100, "h": 100 }
    }
  }
}

我們可以加載紋理貼圖集，然后獲取里面的精靈。

loader
  .add("images/textureMap.json")
  .load(intLoad)

function intLoad() {
        const textures = _loader.resources['images/textureMap.json'].textures
        // 使用紋理緩存TextureCache創建磚塊精靈
        const wallSprite = new _Sprite(_TextureCache['1.png'])
        wallSprite.width = 40
        wallSprite.height = 40
        _stage.addChild(wallSprite)
        // 使用loader的resource來創建創建貓精靈
        const catSprite = new _Sprite(textures['2.png'])
        catSprite.width = 40
        catSprite.height = 40
        catSprite.position.set(40, 0)
        _stage.addChild(catSprite)
        // 創建惡魔精靈
        const devilSprite = new _Sprite(textures['3.png'])
        devilSprite.width = 40
        devilSprite.height = 40
        devilSprite.position.set(80, 0)
        _stage.addChild(devilSprite)
        // 創建寶物精靈
        const treasureSprite = new _Sprite(textures['4.png'])
        treasureSprite.width = 40
        treasureSprite.height = 40
        treasureSprite.position.set(120, 0)
        _stage.addChild(treasureSprite)
      }

游戲全部資源已放到 github 上，請下載演示。