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);

function setup() {
  //This code will run when the loader has finished loading the image
}复制代码

7，Pixi开发团队推荐如果你使用了加载器，你应该通过引用纹理中的loader 的 resources 对象来创建精灵

var sprite = new PIXI.Sprite(
  PIXI.loader.resources["images/anyImage.png"].texture
);复制代码

有一个例子：

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

function setup() {
  var sprite = new PIXI.Sprite(
    PIXI.loader.resources["images/anyImage.png"].texture
  );
}复制代码

8，可以通过一连串的 add 方法来一次性加载许多图像：

PIXI.loader
  .add("images/imageOne.png")
  .add("images/imageTwo.png")
  .add("images/imageThree.png")
  .load(setup);复制代码

更好的做法是，把所有的你想加载的文件放到一个数组里，只通过一个add方法：

PIXI.loader
  .add([
    "images/imageOne.png",
    "images/imageTwo.png",
    "images/imageThree.png"
  ])
  .load(setup);复制代码

9，制作了一个精灵之后，想要在canvas上看到它，还有两件事情你不得不做：

通过 stage.addChild 方法把精灵添加到 Pixi的 stage中：

stage.addChild(cat);复制代码

告诉Pixi的 renderer 去渲染这个舞台。

renderer.render(stage);复制代码

10，从舞台中移除一个精灵，用 removeChild 方法：

stage.removeChild(anySprite)复制代码

但是通常设置精灵的 visible 属性为 false 是一个让精灵消失的高效而且简单方式。

anySprite.visible = false;复制代码

11，你可以通过给Pixi对象和方法设置一个你经常用的简短的别名来使你的代码有更高的可读性

var TextureCache = PIXI.utils.TextureCache
var texture = TextureCache["images/cat.png"];
复制代码

12，如果因为某些原因你需要通过普通JavaScript图像对象制作一个纹理，你可以通过用BaseTexture 和 Texture 类：

var base = new PIXI.BaseTexture(anyImageObject),
    texture = new PIXI.Texture(base),
    sprite = new PIXI.Sprite(texture);复制代码

13，如果你想从任何已经存在的canvas节点中制造一个纹理，你可以用

BaseTexture.fromCanvasvar base = new PIXI.BaseTexture.fromCanvas(anyCanvasElement),

14，如果你想改变正在展示的精灵纹理，用 texture 属性。设置它的值为任何 Texture 对象：

anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];复制代码

15，为每一个资源设置一个独一无二的名字是有可能的。只要在add方法的第一个参数传入一个字符串名字。

PIXI.loader
  .add("catImage", "images/cat.png")
  .load(setup);复制代码

var cat = new PIXI.Sprite(PIXI.loader.resources.catImage.texture);复制代码

16，Pixi的加载器有一个特殊的 progress 事件会在每次当一个文件加载的时候调用一个可定制的函数。 progress 事件会被loader的on方法调用：

PIXI.loader.on("progress", loadProgressHandler);复制代码

17，通过给 loadProgressHandler添加 loader 和 resource 参数，可以明确的指明哪个文件已经加载了以及文件加载的百分比

PIXI.loader
  .add([
    "images/one.png",
    "images/two.png",
    "images/three.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);

function loadProgressHandler(loader, resource) {

  //Display the file `url` currently being loaded
  console.log("loading: " + resource.url); 

  //Display the precentage of files currently loaded
  console.log("progress: " + loader.progress + "%"); 

  //If you gave your files names as the first argument 
  //of the `add` method, you can access them like this
  //console.log("loading: " + resource.name);
}

function setup() {
  console.log("All files loaded");
}复制代码

18，可以通过改变 x 和 y 的值来改变猫的位置。如何把猫居中的代码：

cat.x = 96;
cat.y = 96;复制代码

你可以用一行代码把x和y的值一起设置，而不是单独设置：

sprite.position.set(x, y)复制代码

19，可以通过设置 width 和 height 来改变精灵图的大小：

cat.width = 80;
cat.height = 120;复制代码

精灵图页有scale.x和scale.y属性可以成比例的改变精灵的宽和高。这里告诉你如何设置猫的大小为其原来的一半：

cat.scale.x = 0.5;
cat.scale.y = 0.5;复制代码

Pixi有一个可供替代的，简洁的方式通过一行代码 scale.set 方法设置精灵的尺寸。

cat.scale.set(0.5, 0.5);复制代码

20，可以通过设置 rotation 属性的弧度值来使精灵旋转。

cat.rotation = 0.5;复制代码

精灵的左上角代表它的 x 和 y 位置。这个点叫做锚点。

想让精灵图围绕自己的中心旋转呢？改变 anchor 的值，让它定位到精灵的中心：

cat.anchor.x = 0.5;
cat.anchor.y = 0.5;复制代码

就像设置position 和 scale一样，你同样可以通过一行代码设置锚点的x和y的值：

sprite.anchor.set(x, y)复制代码

21，精灵图有一个 pivot（中心点）属性，它和anchor的工作方式很相似。如果你改变了中心点的值并旋转精灵，它将围绕这个原点旋转。

cat.pivot.set(32, 32)复制代码

如果你改变精灵的中心点，你同时也改变了它的x/y原点。

anchor 和 pivot很相似。 anchor可以移动精灵图的纹理原点，通过设置0-1的值。pivot通过设置像素值来改变精灵的x和y的原点值。

22，通过图元制作的元素，似乎不能使用anchor或者pivot，比如圆形，锚点已经固定为其圆心。不同的元素层叠，其实就是他们的锚点进行层叠，那么如何让他们居中层叠呢，设置他们的重心为锚点即可：sprite.anchor.set(0.5)。或者使用sprite.pivot.set(sprite.width/2,sprite.height/2)。

转载于:https://juejin.im/post/5bd84f4ee51d453675269ffa