pixi的使用之创建和操作精灵

1，Pixi的renderer对象生成一个HTML<canvas>节点并且能指定如何在Canvas上展示你的图像。

2，创建一个特殊的PixiContainer对象名为stage。正如你将看到，这个舞台对象会被用作持有所有你想让Pixi展示的东西的根容器。

//Create the renderer
var renderer = PIXI.autoDetectRenderer(256, 256);

//Add the canvas to the HTML document
document.body.appendChild(renderer.view);

//Create a container object called the `stage`
var stage = new PIXI.Container();

//Tell the `renderer` to `render` the `stage`
renderer.render(stage);复制代码

renderer = PIXI.autoDetectRenderer(
  256, 256,
  {antialias: false, transparent: false, resolution: 1}
);
//renderer.view 对象只是一个再普通不过的 <canvas> 对象，所以你可以像控制其他任何 canvas 对象一样控制它。
这里告诉你如何给canvas一个虚线边框：renderer.view.style.border = "1px dashed black";
这里告诉你如何给canvas一个背景色：renderer.backgroundColor = 0x061639;

复制代码

3，Pixi通过WebGL在GPU上渲染图像，图像需要被格式化为GPU可以处理的格式。一个为WebGL准备的图像称为纹理。在你制作精灵展示图像之前，你需要把一个原始的图像转化为一个WebGL纹理。为了保持所有的东西都能在底层快速高效的工作，Pixi使用了一个 纹理缓存 去存储和引用所有精灵图所需要的纹理。

4，Pixi有一个 Sprite 类，它是创建游戏精灵的通用方式。这里还有三个主要的方式去创建它们：

• 使用单独一个图片文件
• 使用图片集 的一个子图像。图片集是一个单独的，大的图像，它包含了所有游戏中你需要的图片。（译者注：就是我们说的雪碧图吧）。
• 使用纹理图集（一个定义了在雪碧图中每个子图的位置和大小的JSON文件）

5，先找到纹理，通过纹理再制作成精灵

var texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
var sprite = new PIXI.Sprite(texture);复制代码

6，如何加载一个图片并把它转化为一个纹理？用Pixi的内置 loader 对象。Pixi强大的loader 对象是你加载任何一种图像的全部所需。

PIXI.loader
  .add("images/anyImage.png")
  .load(setup);