PIXI入门系列之终章

前言

在之前的系列文章中，对PIXI的历史以及底层技术、基本API的使用做了基本的介绍，本文是入门系列文章的最后一篇，主要对PIXI的一些细节知识以及相关案例的介绍，更偏向于总结性质。PIXI版本v8.1.0。

具体内容

这几天在Github创建了一个仓库：learning-pixi，目前大概有十几个案例，基本囊括了PIXI的主要使用，包括基础使用、部分常用生态工具、自定义shader等，对于入门PIXI以及加深对PIXI的使用是非常有帮助的。

具体案例效果可访问此网站地址，目前案例都是一些基本案例，源码中对一些关键知识有注释说明，一些综合性案例后续可能会继续补充，综合性案例推荐学习PIXI open-games仓库

下面是针对一些细节点进行说明：

Canvas纹理来源

在PIXI中纹理数据可以来源于canvas、图片、video，实际上在其他3D框架中通常都支持着几种来源，在PIXI官网没有针对canvas来源的实例，这里进行补充

// 方式1，canvas表示HTMLCanvasElement
const texture = Texture.from({ resource: canvas });
// 方式2
  const texture = Texture.from(
    new CanvasSource({
      resource: canvas,
    })
  );

上面是创建canvas纹理来源的一些方式，官网提供的API以及一些相关说明是不完善的，例如：

• TextureSourceLike表示类TextureSource的对象，实际上比没有给出任何说明，需要翻看源码才能清晰的理解其表示是存在resource属性的对象
• CanvasSource API在官网中完全没有体现，而在源码中是export出可供使用的，如果你想要使用TextureSource来创建，比较复杂

至少目前PIXI文档对于API的一些说明是存在缺失的，一些细节需要结合源码才能明白使用方式。

Transform Pivot

在PIXI中，pivot是一个重要的transform属性，它表示图形rotate、scale、skew的源点，可以结合CSS transform-origin来理解，但是它和CSS transform-origin是存在区别的：

pivot属性是会影响渲染对象的位置的，而CSS transform-origin是不会影响的

在PIXI中，设置position、scale、angle/rotation、skew属性最终会提现在localTransform属性，即图形当前的矩阵，但是pivot也会影响这个矩阵值的。

这里以一个实例来说明：下面绘制一个rect使其位于可视区域中心位置，并应用旋转

const rect = new Graphics().rect(0, 0, 80, 50).stroke('green');
rect.posiiton.set(center.x, center.y)
app.ticker.add(() => {
   rect.rotation += 0.01;
});

由于pivot默认是0,0，即位于rect的左上角，所以上面是绕着左上角进行旋转的，现在想要rect绕着自身中心进行旋转，如何实现呢？

// 如果你按照CSS transform-origin的理解，应该设置如下
rect.pivot.set(rect.width * 0.5, rect.height * 0.5)

你就会发现，此时rect的绘制位置会发生变化，rect的左上角就不在是可视区域中心了，即pivot会改变图形的绘制位置，本质上是参入localTransform的矩阵计算了。

我想要绕rect中心旋转，而不是移动rect位置啊？这是pivot与CSS transform-origin的区别，在PIXI中想要实现绕rect中心旋转并且保证位置不变，如何实现呢？需要同时设置posiiton和pivot属性：

 const rectCenter = {
    x: (rect.width / rect.scale.x) * 0.5,
    y: (rect.height / rect.scale.y) * 0.5,
 };
 const globalPos = rect.toGlobal(rectCenter);
 rect.position.set(globalPos.x, globalPos.y);
 rect.pivot.set(rectCenter.x, rectCenter.y);

pivot设置的坐标是图形自身坐标系下的位置，需要使用toGlobal方法转换成父容器坐标系下的坐标，然后pivot设置图形中心为旋转中心点。

上面主要是说明pivot的特殊性，这是PIXI中非常容易出错的点，实际上这其中牵扯到PIXI的坐标系，对于任意一个渲染对象其都会涉及到两个坐标系：父容器坐标系、子容器坐标系：

• 坐标系默认原点都是位于左上角
• 使用toGlobal API实现将子坐标系的坐标转换为父容器坐标系的坐标
• 使用toLocal API实现将父容器坐标系下的坐标转换为子坐标系下的坐标

包围盒和区域

在PIXI中提供了包围盒色设置和获取的API，所谓的包围盒就是定义可渲染对象范围的数据，它是一个矩形区域，通常用于内部边界检测等逻辑。

同时还有各种Area，在PIXI中存在hitArea、BoundsArea、filterArea等，定义相关功能的操作区域范围，本质上就是一个Rectangle对象

// 设置事件响应区域
// app.screen也是一个Rectangle对象
// app.stage.hitArea = app.screen
app.stage.hitArea = new Rectangle(0, 0, boundingRect.width, boundingRect.height);

当设置事件响应相关逻辑时，需要注意的是hitArea通常默认为null

渲染目标与RenderTexture

RenderTexture是PIXI提供的纹理相关的API，表示可渲染纹理，实际上它和Texture比国内没有什么区别，可以看成提供快捷创建Texture的API。

渲染目标表示渲染的目标对象，在图形渲染管线最终一帧画面数据是存放在帧缓冲区里面的，而帧数据可以渲染到屏幕或者纹理中：

• 如果渲染到屏幕那就是呈现一帧画面
• 如果渲染到纹理中，那么就可以对纹理应用相关效果，可以实现很多自定义效果

app.renderer.render({
    container: app.stage,
    target: renderTexture,
});

在PIXI中，渲染目标是RenderTarget，还有其他相关API，涉及到很多内部细节，渲染目标是屏幕实际上底层本质上可渲染纹理，只不过这是全局唯一的封装最终要呈现到屏幕上，具体的处理逻辑需要结合源码分析。

结语

实际上对于PIXI的学习，不仅仅是对PIXI的学习，还是对WebGL/WebGPU 3D知识的学习，PIXI的上层API更多的是对PIXI自身的使用的学习，但是涉及到纹理Texture、渲染器、渲染目标等概念的时候就要求使用者具备3D前置知识。

learning-pixi这个仓库后续会继续增加案例，PIXI一些API使用还是要结合源码来理解和梳理，后面会开启PIXI源码的学习，结合WebGL的具体实现从而加深对3D知识的学习。

实际上学习PIXI更多也是为了后续更多关于WebGL等3D知识的学习，之前学习Three.js这边入门了3D，但是Three.js源码这边相对复杂，耗费的时间可能非常长，所以打算通过PIXI进行过渡。简单看了下PIXI源码，整体架构非常清晰，非常值得一看，无论是提升WebGL的学习还是对架构思想。