:::success 为此系列创建的库
https://github.com/taoya7/learn-pixi.js

在线访问
https://taoya-pixi.netlify.app/

版本号: 6.0.4 :::

PixiJS是一个2D轻量的渲染引擎，可以创建丰富的交互式图形，动画和游戏，而无需深入了解WebGL API或处理浏览器和设备兼容性的问题。与此同时，PixiJS具有完整的WebGL支持，如果需要，可以无缝地回退到HTML5的canvas。PixiJs默认使用WebGL渲染，也可以通过声明指定canvas渲染，WebGL在移动端Android 4.4 browser并不支持，不过可以使用canvas优雅降级。

  • 支持WebGL渲染，使用 Pixi 绘制的图形是通过 WebGL 在 GPU 上渲染
  • 非常简单易用的API，一切都是对象。
  • 提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵。
  • 丰富的交互事件，比如完整的鼠标和移动端的触控事件。

要注意的是，虽然 PixiJS 非常适合制作小游戏，但它并不是一个游戏引擎，它的核心本质是尽可能快速有效地在屏幕上移动物体。这个库经常被用来制作HTML5游戏（微信小游戏）以及有复杂交互的H5活动页。

Pixi.js的定位就是只做渲染器，要把渲染功能做到最强。而这样的定位，则会让Pixi.js成为其他引擎的渲染内核。Pixi.js中的显示架构完全类似于我们的dom，将显示对象组合为一个树状结构，内部已针对WebGL渲染方式进行过优化，使上层使用起来无需关系渲染层的东西。

:::warning Github - 33.8k
https://github.com/pixijs/pixijs
官网
https://www.pixijs.com/
文档
http://pixijs.download/release/docs/PIXI.Application.html :::

  1. npm i pixi.js
  3. import * as PIXI from 'pixi.js';

应用场景

  • 前端动效
  • 小游戏
  • 自定义渲染器
  1. 判断浏览器渲染引擎
  2. const type = PIXI.utils.isWebGLSupported() ? "WebGL" : "canvas";

创建一个应用

  1. 创建舞台
  2. 创建画布
  3. 画布添加到DOM
  4. 创建精灵
  5. 精灵添加到画布
  6. 画布添加舞台
  7. 刷新舞台

1-快速上手 - 图1

1-快速上手 - 图2

核心概念

1-快速上手 - 图3

1-快速上手 - 图4

1-快速上手 - 图5

1-快速上手 - 图6

1-快速上手 - 图7

1-快速上手 - 图8

Pixi 精灵

现在你就有了一个画布，可以开始往上面放图像了。所有你想在画布上显示的东西必须被加进一个被称作 舞台的Pixi对象中。你能够像这样使用舞台对象：

  1. app.stage

这个舞台是一个Pixi 容器对象。你能把它理解成一种将放进去的东西分组并存储的空箱子。 舞台对象是在你的场景中所有可见对象的根容器。所有你放进去的东西都会被渲染到canvas中。

应用 Application

PIXI拥有一个Pixi应用对象PIXI.Application，可自动创建一个canvas标签，用于计算图片在其中的显示。PIXI.Application会自动创建渲染器、计时器和根容器。

1-快速上手 - 图9

1-快速上手 - 图10

Container

Renderer

Sprite

Sprite精灵是可以放在容器里的交互式图像。精灵是你能用代码控制图像的基础。你能够控制他们的位置，大小，和许多其他有用的属性来产生交互和动画。 创建一个精灵需要用 PIXI.Sprite() 方法。

  1. const avatar = new Sprite.from('avatar.jpg');
  3. // 和普通的图形一样可以设置各种属性
  4. avatar.width = 100;
  5. avatar.height = 200;
  6. avatar.position.set(20, 30);
  7. avatar.scale.set(2, 2);

Loader

加载图片通常需要耗费一定的时间，因此我们常常使用Loader来预加载图片，当图片全部加载成功后，才渲染出来。
sprite 具有zIndex属性，当容器的sortableChildren属性为true时容器中的所有子元素按照zIndex大小排序。

  1. import { Application, Sprite, Loader } from 'pixi.js';
  3. const loader = Loader.shared;// Loader.shared内置的单例loader
  4. const loader = new Loader();// 也可以使用自定义的loader
  6. const app = new Application({
  7.   width: 300,
  8.   height: 300,
  9.   antialias: true,
  10.   transparent: false,
  11.   resolution: 1,
  12.   backgroundColor: 0x1d9ce0
  13. });
  14. document.body.appendChild(app.view);
  16. loader
  17.   .add('bili', 'http://pic.deepred5.com/bilibili.jpg')
  18.   .add('avatar', 'http://anata.me/img/avatar.jpg')
  19.   .load(setup)
  21. // 监听加载事件
  22. loader.onProgress.add((loader) => {
  23.   console.log(loader.progress);
  24. });
  26. // 启动函数setup
  27. function setup() {
  28.   const bili = new Sprite(
  29.     loader.resources["bili"].texture
  30.   );
  31.   bili.width = 50;
  32.   bili.height = 50;
  34.   const avatar = new Sprite(
  35.     loader.resources["avatar"].texture
  36.   );
  37.   avatar.width = 50;
  38.   avatar.height = 50;
  39.   avatar.position.set(50, 50);
  40.   app.stage.addChild(bili);
  41.   app.stage.addChild(avatar);
  42. }

通过add方法添加需要加载的图片，所有图片加载完成后，load方法会调用传入的setup回调函数，这时就可以把图片精灵加入到app.stage里。onProgress事件可以监听加载的进度，通过这个方法，可以很方便的制作进度条动画。

Texture

Ticker

容器 Container()

容器是用来转载多个显示对象的，创建的Pixi应用的stage属性本质上就是一个容器对象，stage对象被当作根容器使用，它将包裹所有想用Pixi显示的元素。

  1. let container = new PIXI.Container();
  2. container.addChild(sprite);

Ticker 帧率更新函数

Ticker有点类似前端的requestAnimationFrame，当浏览器的显示频率刷新的时候，此函数会被执行，因此常常用来制作帧动画。app.ticker就是一个Ticker实例。

几何图形

graphics主要用于绘制原始形状（如线条，圆形和矩形）以及他们的上色和填充。

  1. const graphics = new PIXI.Graphics()
  2. // 线框 
  3. graphics.lineStyle(2, 0x0000FF, 1) graphics.drawRect(50, 250, 100, 100)
  4. // 四边形 
  5. graphics.drawRect(50, 50, 100, 100)
  6. // 圆形 
  7. graphics.drawCircle(100, 250, 50)
  8. // 椭圆 
  9. graphics.drawEllipse(600, 250, 80, 50)
  10. // 圆角矩形 
  11. graphics.drawRoundedRect(50, 440, 100, 100, 16)
  12. // 星星 
  13. graphics.drawStar(360, 370, 5, 50)
  14. // 多边形 
  15. graphics.drawPolygon(path)
  16. // 贝塞尔曲线 
  17. graphics.bezierCurveTo(100, 240, 200, 200, 240, 100)
  18. // 圆弧 
  19. graphics.arc(300, 100, 50, Math.PI, 2 * Math.PI)
  20. app.stage.addChild(graphics)

image.png

:::success 清除图形 用graphics.clear()方法 :::

绘制文字

  1. // 基础文字 
  2. const basicText = new PIXI.Text('6666666')
  3. // 自定义文字样式 
  4. const style = new PIXI.TextStyle({    
  5.   fontFamily: 'Arial',    
  6.   fontSize: 36,    
  7.   fontStyle: 'italic',    
  8.   fontWeight: 'bold',    
  9.   fill: ['#ffffff', '#00ff99'],    
  10.   stroke: '#4a1850',    
  11.   strokeThickness: 5,    
  12.   dropShadow: true,    
  13.   dropShadowColor: '#000000',    
  14.   dropShadowBlur: 4,    
  15.   dropShadowAngle: Math.PI / 6,    
  16.   dropShadowDistance: 6,    
  17.   wordWrap: true,    
  18.   wordWrapWidth: 440
  19. }) 
  20. const richText = new PIXI.Text('6666666', style) 
  21. app.stage.addChild(richText)

交互

pixi.js中的事件交互可同时兼容移动端和pc端，在绑定事件之前需要开启交互模式

  1. graphics.interactive = true

在pc端需要出现cursor: pointer的效果

  1. graphics.buttonMode = true

补间动画

Ticker可以实现简单的动画，但如果我们希望实现一些复杂效果，则需要自己编写很多代码，这时就可以选择一个兼容pixi的动画库。市面上比较常见的动画库有：Tween.js，TweenMax

  1. npm i gsap
  1. import * as PIXI from 'pixi.js';
  2. import gsap from 'gsap';
  3. export default {
  4.     mounted(){
  5.         const app = new PIXI.Application({
  6.             width:300,
  7.             height: 300,
  8.             antialias: true, // antialias使得字体的边界和几何图形更加圆滑
  9.             transparent: false, // transparent将整个Canvas标签的透明度进行了设置
  10.             resolution: 1, // resolution让Pixi在不同的分辨率和像素密度的平台上运行变得简单
  11.             backgroundColor: 0x1d9ce0
  12.         });
  13.         let circle = new PIXI.Graphics();
  14.         circle.beginFill(0x9966FF);
  15.         circle.drawCircle(0,0, 32);
  16.         circle.endFill();
  17.         circle.x = 32;
  18.         circle.y = 32;
  19.         app.stage.addChild(circle);
  21.         let tl = gsap.timeline({
  22.             repeat: -1,
  23.             yoyo: true,
  24.         });
  25.         tl.to(circle, {
  26.             x: 200,
  27.             y: 32
  28.         }).to(circle, {
  29.             x: 200,
  30.             y: 232
  31.         }).to(circle, {
  32.             x: 32,
  33.             y: 232
  34.         }).to(circle, {
  35.             x: 32,
  36.             y: 32,
  37.         })
  38.         this.$refs.box.appendChild(app.view);
  39.     }
  40. }

iShot2021-09-01 18.57.22.mp4

参考

https://blog.csdn.net/tianshan2010/article/details/106322191