Pixi.js 游戏开发教程 / Pixi.js 简介与环境搭建

Pixi.js 简介与环境搭建

什么是 Pixi.js

Pixi.js 是一个轻量级、高性能的 2D 渲染引擎，基于 WebGL（并回退到 Canvas）来渲染交互式图形和动画。它专注于渲染，不内置游戏逻辑，因此极其灵活，适用于游戏、数据可视化、广告横幅、交互式故事等多种场景。

Pixi.js 的历史与版本

Pixi.js 由 Mat Groves 于 2013 年创建，至今已成为最受欢迎的 HTML5 2D 渲染库之一。

版本	发布年份	关键特性
v4	2016	统一渲染器、粒子系统
v5	2019	全面重写、新的 API 设计
v6	2021	更好的 TypeScript 支持、WebGPU 实验性支持
v7	2022	去除滤镜依赖、改进的事件系统
v8	2024	全新 Assets 系统、WebGPU 正式支持、性能大幅提升

⚠️ 注意: v8 是当前推荐的稳定版本，API 与 v7 有较大差异。本教程系列以 v8 为主。

Pixi.js vs 其他框架

特性	Pixi.js	Phaser	EaselJS / CreateJS
定位	纯渲染引擎	游戏框架	渲染 + 工具集
游戏内置功能	❌ 无	✅ 完整（物理、音效）	⚠️ 部分
学习曲线	中等	较高	低
WebGL / WebGPU	✅	✅	⚠️ 仅 WebGL
社区活跃度	高	高	低（维护放缓）
体积	~150KB	~800KB+	~200KB
适用场景	通用 2D 渲染	2D 游戏	简单交互

💡 提示: 如果你只需要高性能渲染而不需要完整的游戏循环管理，Pixi.js 是最佳选择。Phaser 内部也使用了类似 Pixi.js 的渲染方式。

安装方式

方式一：npm 安装（推荐）

npm create vite@latest my-pixi-app -- --template vanilla-ts
cd my-pixi-app
npm install pixi.js
npm install

方式二：CDN 引入

<!DOCTYPE html>
<html lang="zh-chs">
<head>
  <meta charset="UTF-8" />
  <title>Pixi.js CDN</title>
</head>
<body>
  <script src="https://pixijs.download/release/pixi.min.js"></script>
  <script>
    const app = new PIXI.Application();
    console.log(PIXI.VERSION);
  </script>
</body>
</html>

方式三：官方脚手架

npx create-pixi-app my-app
cd my-app
npm run dev

项目初始化（Vite + TypeScript）

项目结构

my-pixi-app/
├── index.html
├── package.json
├── tsconfig.json
├── src/
│   └── main.ts
└── public/
    └── image/

`index.html`

<!DOCTYPE html>
<html lang="zh-chs">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Pixi.js App</title>
  <style>
    * { margin: 0; padding: 0; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script type="module" src="/src/main.ts"></script>
</body>
</html>

第一个 Pixi 应用

// src/main.ts
import { Application, Graphics } from 'pixi.js';

(async () => {
  // 创建应用实例
  const app = new Application();

  // 初始化（v8 异步初始化）
  await app.init({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb,
    antialias: true,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
  });

  // 将 canvas 添加到页面
  document.body.appendChild(app.canvas);

  // 创建一个矩形
  const rect = new Graphics();
  rect.rect(0, 0, 100, 100);
  rect.fill(0xff0000);
  rect.x = 350;
  rect.y = 250;

  // 添加到舞台
  app.stage.addChild(rect);

  // 动画循环
  app.ticker.add((ticker) => {
    rect.rotation += 0.02 * ticker.deltaTime;
  });
})();

⚠️ 注意: Pixi.js v8 的 Application 初始化是异步的，必须使用 await app.init() 或在 async 函数中调用。

Canvas vs WebGL 渲染

渲染方式	优点	缺点
Canvas 2D	兼容性好、简单	性能较低、无 GPU 加速
WebGL	GPU 加速、高性能	兼容性略低
WebGPU	最新标准、更强性能	浏览器支持有限

Pixi.js 默认使用 WebGL 渲染，v8 可配置使用 WebGPU：

await app.init({
  preference: 'webgpu', // 'webgl' | 'webgpu'
});

💡 提示: Pixi.js 会自动检测设备能力，优先使用 WebGL/WebGPU，不支持时回退到 Canvas 2D。

游戏开发场景

场景：快速搭建游戏原型

Pixi.js 不含游戏逻辑，但可以配合 ECS（Entity-Component-System）架构快速搭建原型：

// 简单的游戏对象封装
class GameObject {
  sprite: Graphics;

  constructor(app: Application) {
    this.sprite = new Graphics();
    this.sprite.circle(0, 0, 20);
    this.sprite.fill(0x00ff00);
    app.stage.addChild(this.sprite);
  }

  update(delta: number) {
    this.sprite.x += 2 * delta;
    if (this.sprite.x > 800) this.sprite.x = -20;
  }
}

// 使用
const player = new GameObject(app);
app.ticker.add((t) => player.update(t.deltaTime));

Pixi DevTools 调试工具

Pixi DevTools 是一款 Chrome 浏览器扩展，用于实时调试 Pixi.js 应用。

安装

在 Chrome Web Store 搜索 “PixiJS DevTools”
安装并启用

功能

查看场景树（DisplayObject 层级）
实时修改对象属性（位置、旋转、透明度）
查看纹理使用情况
FPS 和性能监控

// 开发环境下挂载到全局方便调试
if (import.meta.env.DEV) {
  (window as any).__PIXI_APP__ = app;
}

编辑器配置（VSCode）

插件名	用途
TypeScript Hero	自动导入
GLSL Literal	Shader 语法高亮
Live Server	本地开发服务器

`tsconfig.json` 推荐配置

{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },
  "include": ["src"]
}

⚠️ 常见问题

问题	原因	解决方案
画面不显示	canvas 未添加到 DOM	确保 `document.body.appendChild(app.canvas)`
画面模糊	分辨率未适配	设置 `resolution: window.devicePixelRatio`
v7 代码在 v8 中报错	API 变更	参考 v8 迁移指南
模块导入错误	ESM/CJS 混用	统一使用 ESM

💡 进阶提示

按需导入: Pixi.js v8 支持 tree-shaking，建议按需导入：
```
import { Application, Sprite, Graphics } from 'pixi.js';
```

WebGPU 降级策略:

const app = new Application();
await app.init({
  preference: 'webgpu',
  // WebGPU 不可用时自动回退到 WebGL
});

开发与生产分离: 使用 import.meta.env.DEV 区分环境，仅开发时挂载调试工具。

扩展阅读

下一章：02 - Application 与渲染流程