貼圖概念

PIXI.Sprite 是 PIXI 中最重要的角色之一。

創建 Sprite 的方式有很多種

  • 單一圖片檔案路徑,這也是最基本的產生圖片方式
  • tileset 圖片 類似 css sprites 的圖片使用方式,可用 Texture Packer 去產生 Json Hash 提供座標與縫圖

PIXI 使用 GPU 和 WebGL 來渲染圖片,圖片需要經過格式化 GPU 才能處理,一張處理好的 WebGL-ready image 我們稱為 Texture

如果你有接觸過 3D 建模,這概念就像我今天建立了一個模型 ( PIXI.Sprite ),這模型是素面的,需要再給它貼上貼圖 ( texture ) ,這才是一個完整的模型呈現,才是我們平常看到的一個人物/角色呈現。

所以記住這個觀念,建立 Sprite ,給予貼圖,就這麼簡單。

當我們從 PIXI.loader 成功載入一張圖片後,圖片會被 PIXI 存成 Texture Cache

如果你從資料夾載入了一張 images/logo.png 它將會被放到 Cache 裡面,而您要取用時便可以使用以下指令獲取

PIXI.utils.TextureCache["images/logo.png"];

記住剛剛的口訣 「建模,上貼圖」,

var texture = PIXI.utils.TextureCache["images/logo.pngg"];
var logo = new PIXI.Sprite(texture);

但現在問題來了,我們怎麼載入這些圖片?

根據上方講到的 PIXI.loader API ,我們需要使用 PIXI 的載入器來將圖片做成 Texture Cache

前往Loader章節讓我們來學習 PIXI Loader