PixiJS 修煉指南 - 01. 啟程-環球實時

簡介

什么是 PixiJS

PixiJS 是一個使用便捷且高效的2D渲染引擎——沒錯，它不是大而全的游戲引擎，而是更輕量的渲染引擎。

【資料圖】

這也使得它更專注于做好高效的2D渲染工作，給予WebGL高效渲染，實現上萬對象渲染的粒子效果；同時也提供了更高的自由度，可用于做任何游戲類型的渲染層，甚至僅僅用于宣傳頁面的2D動畫繪制。

同時，作為渲染引擎，它又比純粹的 Canvas 使用起來更為便捷，可以直接通過操作 Sprite、Container、Graphics等對象的屬性完成畫面中渲染效果的更新。

這樣輕量易上手而又高效的渲染引擎，對于快速搭建輕量級的H5小游戲或者游戲 demo 來說可謂再合適不過。

而且，從2014年10月的第一個版本發布至今已過去近十年，仍然在不斷更新迭代。2022年的 PixiJS v6 開始更是提供了 TypeScript 的支持，提供了內部對象更加方便的智能提示支持，也讓大型項目使用 TS 開發后更加規范和可維護。最新的 v7 更是拋棄了各種歷史包袱，更新到了現代化的前端項目生態，并且改進了一些歷史 API（比如 interactive)，提供新的更深入優化項目性能的能力。

對于諸如骨骼動畫、游戲濾鏡、物理引擎、跨平臺框架等需求，PixiJS 也有各種第三方工具、插件的支持，可擴展性也十分優秀。

為什么寫這篇文章

這樣優秀的工具，卻可能因為官方團隊人力有限無暇顧及文檔維護，或是覺得都是基本的開發概念不需要再重新寫文檔贅述，官方的文檔較為簡陋，基本只是羅列 API 的參考手冊。

對于之前沒太多了解的新同學來說，上手可能要走不少彎路。

于是就想在個人學習的筆記基礎上，梳理一個從基礎概念開始的學習流程供大家參考，希望能對有需要的同學有所幫助。

搭建項目

首先，我們來搭建一個使用 PixiJS 渲染的游戲項目。

方法 1. 靜態引用 dist 資源

如果只是想快速體驗，可以參考官方文檔指南，在頁面內通過 <script>標簽引入 PixiJS 的 dist 文件后，直接在靜態項目內體驗使用 PixiJS：

<script src="https://pixijs.download/release/pixi.js"></script><script>  const { Application } = window.PIXI;  const app = new Application({    width: 640,    height: 360,    backgroundColor: 0x6495ed,  });  document.body.appendChild(app.view);</script>

這一方式的優點是快速可用。

但缺點也很明顯，沒有構建環境的支持無法使用 TypeScript 等相關能力，也不具備 Tree Shaking 優化項目產物大小等前端構建項目的常用特性。

方法 2. 基于 npm 包構建（推薦）

這一途徑則是在現有的前端構建項目中，通過 npm/pnpm 安裝 PixiJS，再 import 需要的模塊到頁面內進行開發。

優點是可以完整地使用所有 PixiJS 應有的能力，以及前端構建項目所具有的所有便捷特性。缺點是搭建最初的項目結構稍微需要花一點時間。

推薦使用 Vite 創建一個基本的 Vanilla + TypeScript 項目，再安裝 pixi.js和幾個常用的 PixiJS 基本子包：

$ npm create vite@latest my-pixi-demo$ cd my-pixi-demo$ npm install -S pixi.js @pixi/utils

然后清空項目的入口腳本（一般為 src/main.ts），修改為：

import { Application } from "pixi.js";const app = new Application({  width: 640,  height: 360,  backgroundColor: 0x6495ed,});document.body.appendChild(app.view as HTMLCanvasElement);

啟動開發構建服務：

$ npm run dev

點擊打開出現的開發預覽頁面鏈接，不出意外的話，就能看到游戲的畫布出現在瀏覽器內了。

開始工作

創建成員

剛才我們搭建完項目后，創建了一個 PixiJS 提供的 Application對象，它就是我們開發的 游戲應用了。

只不過目前它里面空空如也，只是繪制了一個指定背景色和寬高尺寸的空畫布。

接下來我們就要往里面加入各種成員，讓它熱鬧起來。

import {  Application,  Graphics,  Sprite,  Text,} from "pixi.js";const app = new Application({  width: 640,  height: 360,  backgroundColor: 0x6495ed,});document.body.appendChild(app.view as HTMLCanvasElement);// 創建文本成員const slogan = new Text("Hello, developer!", {  fill: 0xffffff,  fontSize: 32,});slogan.position.set(20, 20);// 創建圖形成員const sloganBg = new Graphics();sloganBg.position.set(10, 10);sloganBg.lineStyle(4, 0x333333, .25);sloganBg.beginFill(0xefefef, .5);sloganBg.drawRoundedRect(0, 0, slogan.width + 20, slogan.height + 20, 10);sloganBg.endFill();app.stage.addChild(slogan, sloganBg);// 創建精靈成員const sprite = Sprite.from("https://hk.krimeshu.com/sprite-minion.png");sprite.anchor.set(0.5, 0.5);sprite.position.set(app.screen.width / 2, app.screen.height / 2);app.stage.addChild(sprite);

效果大致如下：

基本概念

上面的例子中，除了之前提到的 Application之外，主要有以下幾個新面孔：

以及 Application的幾個成員：

顯然，Text、Graphics和 Sprite將會是我們之后開發游戲常用的成員類型。其中的 Text和 Graphics顧名思義很好理解，就是 文本和 圖形。而 Sprite其實也是它的字面意思“精靈”，它是具有圖形材質和一系列屬性、操作方法的成員對象，是我們在游戲中直接操作的基礎單元之一。

1. 容器與層級

如果查看他們的 type 聲明就會發現，它們具有這樣的繼承派生關系：

符號 ->表示繼承。

Graphics -> ContainerSprite -> ContainerText -> Sprite -> Container

可見它們都屬于一個共同的祖先類別 Container，而 Container又繼承于更原始的 DisplayObject。

可推測 DisplayObject是 PixiJS 中可用于繪制的 可顯示對象，應該是渲染底層操作的基礎單位。

而 Container是在 DisplayObject的基礎上具有類似 Web 節點性質的樹形結構對象。整個游戲需要繪制的成員，都以嵌套的樹形結構最終掛載于 app.stage這個頂級 Container之下。

實際上因為 PixiJS 沒有 CSS 的層級概念，繪制時其實就是按照遍歷整個 app.stage的樹形結構，從上到下、從前到后進行繪制，后繪制對象覆蓋先繪制的對象的優先級來決定層級覆蓋關系。

Graphics、Sprite和 Text則是在 Container基礎上，擁有更多特化后的繪制能力和操作方法的可顯示對象具體子類。將它們的實例通過 addChild加入到游戲的 app.stage中，就會被 PixiJS 繪制出來，最終出現在我們眼前了。

const text1 = new Text("...");const text2 = new Text("...");// ...app.stage.addChild(  text1,  text2,  //...);

2. 屏幕

除了 app.stage之外，上面還用到了 app.screen和 app.view這兩個 Application的屬性。

通過查看類型定義，我們發現前者的類型是 Rectangle，即矩形，對其的官方定義為：

Rectangle對象是一個由它左上角的 原點(x, y)和自身 寬度width+高度height定義的區域。

而 app.screen就是我們整個游戲應用的矩形渲染區域，平時游戲中只有位于這個區域內的可顯示對象才能被用戶在頁面上看到。

3. 畫布

最后的 app.view則是 PixiJS 應用的渲染器所持有的 Canvas 畫布對象引用。

在我們的例子中，因為創建 Application時沒有傳入畫布對象，所以 PixiJS 內部會幫我們創建符合指定屬性的畫布，并掛載在 app實例的 view屬性上。在這一切完成之后，我們最后將創建的 app.view畫布通過 appendChild()加入到頁面的 DOM 樹內。

同樣的，我們也可以不使用自動創建的畫布，而是使用頁面上已有的 Canvas 畫布對象來創建 Application應用對象：

const canvas = document.querySelector("#cvsMyGame");const app = new Application({  view: canvas,  width: canvas.width,  height: canvas.height,});

這個例子里，如果我們不將 canvas 的寬高傳給 Application的構造參數，PixiJS 將會用一個默認的尺寸創建游戲，并修改為 canvas 的新寬高。所以還是需要獲取后賦值傳入，稍顯啰嗦。

4. 更多適配

如果我們的游戲是面向移動端設備開發的話，還需要增加一個分辨率參數，以適配高分辨率設備的像素密度：

const app = new Application({  view: canvas,  width: canvas.width,  height: canvas.height,  resolution: window.devicePixelRatio || 2,});

不過如果我們的游戲應用與網頁視口的尺寸始終保持一致（即所謂的“全屏游戲”）的話，其實可以也不用傳入這么多參數，只需要這樣配置：

const app = new Application({  view: canvas,  resizeTo: window,  autoDensity: true,});

通過 resizeTo屬性指定應用畫布跟隨網頁窗口尺寸，還可以在用戶屏幕旋轉、調整窗口尺寸后由 PixiJS 自動調整畫布尺寸，以適配用戶設備的最新畫面狀態。

——不過頁面內的成員坐標和尺寸并不會按新舊尺寸的比例進行調整更新，畢竟實際游戲場景的成員數可能相當多，而且不同成員的定位適配策略通常并不相同，還是需要在檢測到對應 resize事件后自行調整。

這次我們創建了一個基本的 PixiJS 游戲應用，并對一些基礎概念進行了說明。

但這個基本 demo 中還是有不少東西沒有說清楚，并且這個應用的代碼也沒有合理組織，之后我們將在這個基礎上繼續補充和完善。

如果有什么紕漏與謬誤歡迎指出~