最快、最灵活 的 2D 渲染引擎，它能够在我们没有 WebGL 知识的情况下享受硬件加速的力量

优势

  • 通过 WebGL 来调用 GPU 渲染动画，极大的提升了性能
  • 兼容性好
    • 支持 WebGL 和 canvas 两种渲染模式，如果有需要可以无缝回退到 HTML5 Canvas
    • 框架底层做了抹平处理，支持在各个平台上运行
  • 非常灵活
    • 纯粹的渲染引擎，相对游戏引擎更轻量，比较适合做动画
    • 采用插件系统，与其他插件或框架无缝集成
    • 不会入侵代码，不与任何 IDE 工具 绑定，任何项目都能很容易都接入
  • 社区活跃、项目迭代频繁（频率单位：天）

劣势

  • 不支持 3D（有相关的 3D 插件，自行体会）
  • 不适合做复杂的游戏

基本概念

1. Application

最基本的单元，根据配置创建出对应的画布，并且自动选择使用 Canvas 或者是 WebGL 来渲染图形

2. Texture

因为 Pixi 使用 WebGL 在 GPU 上渲染图像，图像需要转换为 GPU 可以处理的东西，这个东西被称为纹理。

3. Sprite

精灵是一个特殊的图像，我们可以设置其位置、大小等一些属性, 可以通过图片、纹理等方式创建，并将其加入到相应的场景中。

4. Loader

由于音频、图片等文件大多数为异步资源，加载时会花费一定时间，为了提高用户体验，我们一般使用 loader 将资源预加载，完成后再渲染页面。

5. Container

可以将其想象为一个空盒子，他会把我们放进去的东西组合一个整体。当我们想操作这些对象时，就可以直接操作这个盒子。

快速上手

  1. 创建 App 并将生成的 canvas 挂载到 body
const app = new PIXI.Application({
  width: 300,
  height: 300,
  backgroundColor: 0x00aeec
});
document.body.appendChild(app.view);
  1. 借助 Loader 预先加载图片

Loader.add 的加载方式有多种，这里只使用其中一种作为演示, 详细使用细节见 官网

const loader = new PIXI.Loader();
// 加载精灵
loader
  .add('cat', 'https://www.6hu.cc/wp-content/uploads/2022/08/45955-WD92f8.png')
  .load(setup)
  1. 根据纹理生成精灵图
const cat = new PIXI.Sprite(loader.resources["cat"].texture);
  1. 现在可以对这个精灵设置一些属性
// 位置
cat.position.set(20, 20)
cat.x = cat.x + 10  // 可以对 x、y 的某一项单独设置
// 缩放
cat.scale.set(num, num)
// 大小
cat.width = cat.width + 10
// 旋转
cat.rotation += 0.1
  1. 锚点是一个很有用的属性

position、scale、rotation 等属性在设置时候都会以某个点作为基点，默认情况下为左上角

我们可以手动设置 anchor 范围 0 ~ 1

/**
 * (0, 0) => 左上角 
 * (0.5, 0.5) => 中心 
 * (1, 1) => 右下角
 */
cat.anchor.set(0.5, 0.5);
  1. PixiJS 为我们提供了丰富的事件(鼠标、触摸、按键等)
// 第一步：设置元素为可交互的    
cat.interactive = true;
// 第二部：监听对应的事件
cat.addListener('pointerdown', (e) => {
    cat.alpha = 0.5
});
  1. 不仅能展示图片，PixiJS 底层提供了绘制 api，可以使用它们制作矩形，形状，线，复杂的多边形和文本 教程

  • 绘制一个矩形
let rectangle = new PIXI.Graphics();
// 外边框的颜
rectangle.lineStyle(4, 0xFF3300, 1);
// 给矩形的内部填充颜色
rectangle.beginFill(0x66CCcc);
// 绘制矩形。它的四个参数是 x, y, width, height
rectangle.drawRect(0, 0, 64, 64);
// 结束绘制
rectangle.endFill();
  • 绘制一个圆形，其实就是绘制的 api 有改变，流程是一致的
let circle = new PIXI.Graphics();
circle.beginFill(0x9966FF);
circle.drawCircle(0, 0, 32);
circle.endFill();
  1. 看前面运行的代码，我们发现矩形和圆形可以同时移动，这就是 Container 的用途，将这两个图案同时挂载到 container 容器下（将其分为一组），这样移动容器两个图形的位置都会改变
// ... 创建矩形和圆形的代码
container.addChild(rectangle);
app.stage.addChild(container);
app.stage.addChild(container);
// 修改容器的位置，从而改变两个图形的位置
container.position.y += 10

参考

  • Pixijs api 文档
  • Pixi.js中文网