Pixi.js 概念介紹

pixi.js v7 主要的組件簡介

• Application：應用程式
  官方文檔：將Loader、Ticker和Renderer封裝到一個方便易用的對象中，方便快速入門、原型製作和構建簡單項目。

• Container：圖層
  官方文檔：創建場景圖，包含可顯示的對象，如精靈、圖形和文本

• Assets（註1，Loader）：載入檔案的工具
  官方文檔：提供用於異步加載資源（如圖像和音頻文件）的工具。

• Ticker：影格控制（幀數控制）
  官方文檔：根據時鐘提供定期回調，用於遊戲更新邏輯。

• Sprite：角色物件
  直譯作精靈，我這邊想稱呼為角色物件（或圖像物件），強調圖像在經過 Sprite封裝後 ，新增了許多圖像原本沒有的 methods ，變成一個可互動且具有特定功能的圖像元素

• ……其他詳見官方文檔

Pixi.js 圖解

• Application 就像是 Figma， 許多工具在 Figma 底下才得以運行，像是遮罩、圖片模糊效果、圖層等

  

• Container 就像是 Figma 的 Frame （工作區域）

  （示意圖）

• Assets 就像是一個資源管理器，類似於一個倉庫或倉庫保管人。這個工具負責處理資源的載入、管理和提供存取的能力

  （示意圖）

• Ticker 就像是一個節拍器，這個工具負責在每一幀觸發 callback，更新畫面

Pixi.js 操作方式概述

建構一個基本的 Pixi.js 包括以下步驟：

1. 建構 Application
2. 載入資產
3. 封裝資產（Sprite）
4. 新增圖層
5. 加入 Application

Steps Zero－安裝 Pixi.js

yarn add pixi.js

Steps One－建構 Application

const app = new Application<HTMLCanvasElement>({
        width: 600, 
        height: 400,
        backgroundColor: "#000",
});

document.body.appendChild(app.view)

可以把 app.view 想像成 <canvas> DOM 元素，我們將 Application 當中的 app.view 派發到 DOM tree 才能顯示受 Pixi.js 控制的畫面

Steps Two－載入資產

（註2－Assets 針對緩存特性的另一種寫法）

Assets.add("https://i.imgur.com/5UmqIwL.jpg") //加入圖片到資產庫

const img1 = await Assets.load("https://i.imgur.com/5UmqIwL.jpg") // 從資產庫提取圖片

Steps Two－將資產封裝成圖像物件

const img1Sprite = new Sprite(img1)

Steps Four－新增圖層 Container並放入資產

const container = new Container()
container.addChild(img1Sprite)

Steps Five－將圖層放進主圖層

app.stage.addChild(container)

此處的 app.stage 類似於 container 圖層，區別在於 app.stage Application 當中最主要的圖層，而 container 則為次要圖層，

換句話說，我們也可以不透過 container，直接在 app.stage 主要圖層放入圖像物件（角色）

app.stage.addChild(img1Sprite)

Steps Five－成功顯示 Canvas

完整程式碼

    const app = new Application<HTMLCanvasElement>({
      width: 600,
      height: 400,
      backgroundColor: "#000",
    });
    if (canvasWrapperRef.current === null) return;
    canvasWrapperRef.current.appendChild(app.view);

    const loadAssets = async () => {
      const img1 = await Assets.load("https://i.imgur.com/5UmqIwL.jpg"); // 從資產庫提取圖片

      if (img1 === null) {
        Assets.add("img1", "https://i.imgur.com/5UmqIwL.jpg"); //加入圖片到資產庫
      }
      const img1Sprite = new Sprite(img1);
      return img1Sprite;
    };
    const initPixi = async () => {
      const img1Sprite = await loadAssets();
      const container = new Container();
      container.addChild(img1Sprite);

      if (app.stage === null) return; // 如果 app.stage 出現 Cannot read properties of null (reading 'addChild') 則加入此行
      app.stage.addChild(container);
    };

    initPixi();

註解

註解1

－自從 pixi.js v7 之後，Assets 取代 Loader，並且 Assets 支援靜態載入、Worker 載入、背景載入、基於 Promise 等新特性。

PixiJS 希望移除 Loader 的主要原因是它使用了舊的 XMLHttpRequest 方法來載入資源，而這種方法已經有些過時。Loader 是從 resource-loader 中分支出來的，它與 PixiJS 有很長一段時間的歷史。Loader 最初的設計靈感主要來自於 Flash/AS3，但現在已經顯得過時了。

此外，Loader 還存在一些缺陷，如不能靜態載入資源、不能使用 Worker 進行載入、沒有提供背景載入、不支援 Promise 等新特性，以及具有過多的緩存層級等。

因此，PixiJS 希望用一個新的資源載入器 Assets 取代 Loader，並在新的設計中實現上述缺陷的改進。Assets 支援靜態加載、Worker 加載、背景加載、基於 Promise 等新特性，同時還減少了緩存層級，使載入資源更加快速和高效。

註2－Assets 針對緩存特性的另一種寫法

const img1 = await Assets.load("https://i.imgur.com/5UmqIwL.jpg"); // 先判斷緩存有沒有資產
if (img1 === null) {
    Assets.add("img1", "https://i.imgur.com/5UmqIwL.jpg"); //沒有的話才加入資產
}