JyLie

# 前言

记得第一次接触 PixiJS 是在 2020 年元旦，当时业务要求制作可定制类型海报生成器，考量了几个渲染引擎后决定使用 PixiJS 来实现。 时隔多天后，觉得需要记录一下 PixiJS 方面的知识，供后续回顾与学习交流~。详细内容可前往官网品阅。

下面会从 PixiJS 是什么、为什么、怎么做的逻辑覆盖全文。

  • 演示环境：
    • PixiJS@4.5.5

# PixiJS 是什么

简而言之，PixiJS 是一个 最快最灵活的基于 HTML5 创建的 2D Sprite 渲染引擎。

PixiJS 可以设置两种模式 WebGL 和 Canvas 来实现前端渲染，目前而言 Web 端对 Canvas 的兼容性比 WebGL 好得多， 如果想使用 WebGL 模式则要注意下运行终端是否涉及到传统浏览器，而且移动端的差异性也存在较大问题。

使用渲染引擎通常需要接触到纹理、精灵、场景的组合使用，通常我们要预加载纹理为后续做准备，接着使用纹理来排列组合成不同的精灵、场景，一个小动画或一个小游戏也就此诞生了。

PixiJS 提供了更好的性能和像素级效果，非常适合在线游戏、教育内容、交互式广告、数据可视化、动画等场景，合理的，整洁的 API 可以让你自由的使用，使其适应你的个人编码风格，并与其它框架无缝集成。

# 为什么使用 PixiJS

PixiJS 的最大优势在于它具有通用性：它的定位不是游戏引擎，而是一个渲染引擎。

PixiJS 的主要优势：

  • 非常轻量、快速
  • 便捷实现各种图形和精灵
  • 拥有两种渲染模式，其中 WebGL 极大的便捷用户操作 GPU 实现高效动画
    • WebGL
    • Canvas
  • 可扩展性强，且各版本兼容

当然 PixiJS 也不是万能的，开发过程中会遇见各种各样的问题。

PixiJS 的缺点如：

  • 是一个 2D 引擎，不支持 3D 渲染
  • PixiJS 能很好的实现移动端应用，但是如果想访问本机绑定，则需使用像 Apache Cordova 这样的部署系统。 且不提供对摄像头、定位服务、通知等的访问权限。
  • PixiJS 是一个渲染引擎库，没有配套开箱即用的配套工具

# 常用 API

在使用 PixiJS 前，先认识几个常用 API:

# PIXI.Application

可创建一个舞台，用于承载精灵及其动作实现。

若要设置透明舞台需要设置 transparent 为 true

# PIXI.Container

可创建一个盒子，常用于存放系列精灵对象。

# PIXI.loader

可预加载纹理。

# PIXI.loader.resources

常用于访问已加载过的纹理。

# PIXI.Sprite

可创建精灵对象。

# 怎么样 使用 PixiJS

简单介绍完 PixiJS 后，接下要使用 Hello World大法了。

🤳 吼吼哈嘿，看招~

  • Hello World大法
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Hello PixiJS</title>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script>
  <script>
    let type = 'WebGL';
    if (!PIXI.utils.isWebGLSupported()) {
      type = 'canvas';
    }
    PIXI.utils.sayHello(type);

    let app = new PIXI.Application({
      width: 666,
      height: 666,
      antialiasing: true,
      transparent: false,
      resolution: 1,
    });
    document.body.appendChild(app.view);

    // 创建文本
    var style = new PIXI.TextStyle({
      fontFamily: 'Arial',
      fontSize: 36,
      fontStyle: 'italic',
      fontWeight: 'bold',
      fill: ['#ffffff', '#00ff99'], // gradient
      stroke: '#4a1850',
      strokeThickness: 5,
      dropShadow: true,
      dropShadowColor: '#000000',
      dropShadowBlur: 4,
      dropShadowAngle: Math.PI / 6,
      dropShadowDistance: 6,
      wordWrap: true,
      wordWrapWidth: 440,
    });
    var richText = new PIXI.Text('Hello PIXI MORE TIMES', style);
    richText.x = 30;
    richText.y = 180;
    app.stage.addChild(richText);
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

See the Pen Hello PIXIJS by stephen l (@liejiayong) on CodePen.

  • 画个圈圈大法
<!DOCTYPE html>
<meta charset="utf-8" />
<title>Hello PixiJS</title>
<body>
  <script src="https://cdn.bootcdn.net/ajax/libs/pixi.js/4.5.5/pixi.min.js"></script>
  <script>
    let type = 'WebGL';
    if (!PIXI.utils.isWebGLSupported()) {
      type = 'canvas';
    }
    PIXI.utils.sayHello(type);

    let app = new PIXI.Application({
      width: 666,
      height: 666,
      antialiasing: true,
      transparent: false,
      resolution: 1,
    });
    document.body.appendChild(app.view);

    //Circle
    let circle = new PIXI.Graphics();
    circle.beginFill(0x9966ff);
    circle.drawCircle(0, 0, 32);
    circle.endFill();
    circle.x = 64;
    circle.y = 130;
    app.stage.addChild(circle);

    //Rectangle
    let rectangle = new PIXI.Graphics();
    rectangle.lineStyle(4, 0xff3300, 1);
    rectangle.beginFill(0x66ccff);
    rectangle.drawRect(0, 0, 64, 64);
    rectangle.endFill();
    rectangle.x = 170;
    rectangle.y = 170;
    app.stage.addChild(rectangle);

    //Line
    let line = new PIXI.Graphics();
    line.lineStyle(4, 0xffffff, 1);
    line.moveTo(0, 0);
    line.lineTo(80, 50);
    line.x = 32;
    line.y = 32;
    app.stage.addChild(line);

    //Ellipse
    let ellipse = new PIXI.Graphics();
    ellipse.beginFill(0xffff00);
    ellipse.drawEllipse(0, 0, 50, 20);
    ellipse.endFill();
    ellipse.x = 180;
    ellipse.y = 130;
    app.stage.addChild(ellipse);

    //Triangle
    let triangle = new PIXI.Graphics();
    triangle.beginFill(0x66ff33);
    triangle.lineStyle(4, 0x99ccff, 1, 0, true);

    //Use `drawPolygon` to define the triangle as an
    //array of x/y positions

    triangle.drawPolygon([
      -32,
      64, //First point
      32,
      64, //Second point
      0,
      0, //Third point
    ]);
    triangle.closePath();

    triangle.endFill();

    // Position the triangle after you've drawn it.
    // The triangle's x/y position is anchored to its first point in the path
    triangle.x = 180;
    triangle.y = 22;

    app.stage.addChild(triangle);

    //Rounded rectangle
    let roundBox = new PIXI.Graphics();
    roundBox.lineStyle(4, 0x99ccff, 1);
    roundBox.beginFill(0xff9933);
    roundBox.drawRoundedRect(0, 0, 84, 36, 10);
    roundBox.endFill();
    roundBox.x = 48;
    roundBox.y = 190;
    app.stage.addChild(roundBox);
  </script>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

See the Pen Pixi-画图形 by stephen l (@liejiayong) on CodePen.

O(∩_∩)O 本文至此，创作不易，喜欢的请点个赞支持支持吧~

# 参考文献