ParticleContainer

插件名：particles
npm：tinyjs-plugin-particles

ParticleContainer 是一个非常高性能的显示容器，任何在它里面的精灵渲染速度会比 Container 提升 2~5 倍。

创建后的 ParticleContainer 可以就像使用 Container 一样来使用它。

当然，速度获得了提升一定会有一定的妥协，就看你如何选择。在 ParticleContainer 里的精灵仅仅有一些基本的属性：x、y、width、height、scale、pivot、alpha、visible，就这么多。所以，你可能不能使用滤镜或混合模式，只能使用一个纹理（所以如果你想让精灵有不同的表现方式，你不得不更换雪碧图），当然，你可以在一个场景或项目中同时使用 Container 和 ParticleContainer，合理搭配来获得速度的提升，在满足基本需要时，这种妥协还是值得一试。

那么，为何 ParticleContainer 可以这么快？因为，精灵的位置是直接通过 GPU 来计算的。

创建一个 ParticleContainer，有两个常用参数：第一个是可以承载的精灵最大个数，第二个是属性配置的对象：

var pContainer = new Tiny.particles.ParticleContainer(size, options);

比如：

var pContainer = new Tiny.particles.ParticleContainer({
  rotation: true,
  alpha: true,
  scale: true,
  uvs: true,
});

Tips
第一个参数 size 可以不用传，默认是 1500；
第二个参数 options 也可以不传，默认是 {scale: false, position: true, rotation: false, uvs: false, alpha: false}，如果需要变更 scale 等，就需要传入并设置为 true，如果不需要变更，就保持为 false 以获得更多的速度提升；
UVs 是一个3D图表展示术语，它指纹理（图片）准备映射到三维表面的x和y的坐标。U 是 x 轴， V 是 y 轴。WebGL 用 x, y 和 z 来进行三维空间定位，所以 U 和 V 被选为表示2D图片纹理的 x 和 y；
所以，当在动画的时候需要改变它们纹理颗粒的时候你需要设置 uvs 为 true。

注意
ParticleContainer 只适合大量单一纹理的精灵高性能渲染，多个不同纹理（图片）不支持

获取 Bound

你无法直接通过实例化对象的 width、height 属性直接获取到 ParticleContainer 的宽高，这里提供一个快捷的方法 getBounds，它返回的是一个 Tiny.Rectangle 对象。

var pContainer = new Tiny.particles.ParticleContainer();
//...
var bound = pContainer.getBounds();
// => Rectangle {x: 14, y: 25, width: 555, height: 648, type: 1}

注意
此方法要在所有子元素都渲染出来后才可以获取到准确的值，建议谨慎使用。

# ParticleContainer

# 获取 Bound

ParticleContainer

获取 Bound