0. PixiJS 介绍

PixiJS是一个轻量级的2D渲染引擎，它能自动侦测使用WebGL还是Canvas来创建图形。开发者无需专门学习 WebGL 就能感受到强大的硬件加速的力量。


PixiJS 会帮助你用 JavaScript 或者其他 HTML5 技术来显示媒体，创建动画或管理交互式图像（精灵），从而制作一个游戏或应用。它拥有语义化简洁的 API 接口。比如支持纹理贴图集和为精灵提供了一些简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。


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

1.搭建环境

注意：本文使用pixi最新的v5版本，同时使用Parcel进行模块化打包
pixi.jsv5版本默认使用webgl渲染，如果希望可以回退到canvas，需要使用pixi.js-legacy，详情见issue
项目初始化

mkdir learn-pixicd learn-pixinpm init -y

3.5 Texture 纹理

因为 Pixi 用 WebGL 和 GPU 去渲染图像，所以图像需要转化成 GPU 可以处理的格式。可以被 GPU 处理的图像被称作纹理 。在你让精灵显示图片之前，需要将普通的图片转化成 WebGL 纹理。为了让所有工作执行的快速有效率，Pixi使用 纹理缓存 来存储和引用所有你的精灵需要的纹理。纹理的名称字符串就是图像的地址。这意味着如果你有从"cat.png" 加载的图像，你可以在纹理缓存PIXI.utils.TextureCache["cat.png"]中这样找到它。


前端有时会把多张图片合并成一张雪碧图，通过设置background-position来显示不同的图片。pixi.js也有类似的技术，我们可以利用Texture Packer软件，把多张图片合并成一张图片，合并的同时，软件会生成一份json配置文件，记录了每张图片的相对位置，具体教程见这里

import { Application, Container, Sprite, Graphics, Loader, Spritesheet } from 'pixi.js';import spriteJson from './assets/treasureHunter.json'; // myjson记录了每张图片的相对位置import imgSprite from './assets/treasureHunter.png';// mypng里面有多张图片const loader = Loader.shared;const app = new Application({width: 300,height: 300,antialias: true,transparent: false,resolution: 1,backgroundColor: 0x1d9ce0});document.body.appendChild(app.view);loader.add('imgSprite', imgSprite).load(setup)function setup() {const texture = loader.resources["imgSprite"].texture.baseTexture;const sheet = new Spritesheet(texture, spriteJson);sheet.parse((textures) => {// imgSprite里面的一张叫treasure.png的图片const treasure = new Sprite(textures["treasure.png"]);treasure.position.set(0, 0);// imgSprite里面的一张叫blob.png的图片const blob = new Sprite(textures["blob.png"]);blob.position.set(100, 100);app.stage.addChild(treasure);app.stage.addChild(blob);});}// 销毁纹理 texture.destroy()// 刷新纹理 texture.update()

3.6 Ticker 帧率更新函数

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

import { Application, Sprite, Loader } from 'pixi.js';const loader = Loader.shared;const app = new Application({width: 300,height: 300,antialias: true,transparent: false,resolution: 1,backgroundColor: 0x1d9ce0});document.body.appendChild(app.view);loader.add('bili', 'bilibili.jpg') .load(setup)function setup() {const bili = new Sprite(loader.resources["bili"].texture);bili.width = 50;bili.height = 50;app.stage.addChild(bili);app.ticker.add(() => {if (bili.x <= 200) {bili.x += 1;}})} const graphics = new PIXI.Graphics()// 线框 graphics.lineStyle(2, 0x0000FF, 1) graphics.drawRect(50, 250, 100, 100)// 四边形 graphics.drawRect(50, 50, 100, 100)// 圆形 graphics.drawCircle(100, 250, 50)// 椭圆 graphics.drawEllipse(600, 250, 80, 50)// 圆角矩形 graphics.drawRoundedRect(50, 440, 100, 100, 16)// 星星 graphics.drawStar(360, 370, 5, 50)// 多边形 graphics.drawPolygon(path)// 贝塞尔曲线 graphics.bezierCurveTo(100, 240, 200, 200, 240, 100)// 圆弧 graphics.arc(300, 100, 50, Math.PI, 2 * Math.PI)app.stage.addChild(graphics)

text 文本

// 基础文字 const basicText = new PIXI.Text('6666666')// 自定义文字样式 const style = new PIXI.TextStyle({ fontFamily: 'Arial', fontSize: 36, fontStyle: 'italic', fontWeight: 'bold', fill: ['#ffffff', '#00ff99'], stroke: '#4a1850', strokeThickness: 5, dropShadow: true, dropShadowColor: '#000000', dropShadowBlur: 4, dropShadowAngle: Math.PI / 6, dropShadowDistance: 6, wordWrap: true, wordWrapWidth: 440}) const richText = new PIXI.Text('6666666', style) app.stage.addChild(richText)

交互

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

graphics.interactive = true

参考

主要参考：https://juejin.im/post/6844904020939636744

Pixi教程中文版
Pixi wiki