PixiJS - 最快、最灵活的 2D WebGL 渲染引擎

3,357 阅读3分钟

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

优势

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

劣势

  • 不支持 3D(有相关的 3D 插件,自行体会🤔
  • 不适合做复杂的游戏

基本概念

1. Application

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

2. Texture

因为 Pixi 使用 WebGLGPU 上渲染图像,图像需要转换为 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://raw.githubusercontent.com/mingyuLi97/picture/master/img/pixijs_demo_cat.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

参考