PixiJS 修炼指南 - 01. 启程

发表于 2023-03-26 更新于 2023-08-27 分类于编程，前端，小游戏

简介

什么是 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：

<!DOCTYPE html>

<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 基本子包：

1
2
3

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

启动开发构建服务：

1	$ npm run dev

点击打开出现的开发预览页面链接，不出意外的话，就能看到游戏的画布出现在浏览器内了。

Demo 00

开始工作

创建成员

刚才我们搭建完项目后，创建了一个 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/public/images/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);

效果大致如下：

Demo 01

基本概念

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

Text
Graphics
Sprite

以及 Application 的几个成员：

app.stage
app.screen
app.view

显然，Text、Graphics 和 Sprite 将会是我们之后开发游戏常用的成员类型。其中的 Text 和 Graphics 顾名思义很好理解，就是文本和图形。而 Sprite 其实也是它的字面意思“精灵”，它是具有图形材质和一系列属性、操作方法的成员对象，是我们在游戏中直接操作的基础单元之一。

1. 容器与层级

如果查看他们的 type 声明就会发现，它们具有这样的继承派生关系：

符号 -> 表示继承。

1
2
3

Graphics -> Container
Sprite -> Container
Text -> 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 应用对象：

<!DOCTYPE html>

<style>
  body { margin: 0; }
</style>

<canvas id="cvsMyGame" width="640" height="360"></canvas>

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 中还是有不少东西没有说清楚，并且这个应用的代码也没有合理组织，之后我们将在这个基础上继续补充和完善。

如果有什么纰漏与谬误欢迎指出~