一、Pixi 精灵
1. 舞台对象
首先要知道的是，只有舞台上的东西才会被显示出来。换句话说，所有想在 Canvas 上显示的元素都必须被加进舞台对象（app.stage）中，这个元素才会被渲染到 Canvas 中。
注意，尽管舞台对象（app.stage）有 width 和 height 属性，但是它们并不能查看 Canvas 的大小：
app.stage.width // 0
app.stage.height // 0
查看 Canvas 的大小应该像下面这样：
app.renderer.view.width
app.renderer.view.height
2. 精灵
要放到舞台上的东西称为精灵，它是一种特殊的图像对象。
创建精灵主要有三种方法：
- 用一个单图像文件创建
- 用一个雪碧图来创建
- 从一个纹理贴图集中创建（纹理贴图集就是用 JSON 定义了图像大小和位置的雪碧图）
二、将图片加载到纹理缓存中
1. 纹理与纹理缓存
纹理：因为 Pixi 用 WebGL 和 GPU 去渲染图像，所以图像要转化成 GPU 可以处理的版本，可以被 GPU 处理的图像被称作纹理。
纹理缓存：纹理缓存用于存储和引用精灵所需要的纹理，纹理名称就是图像的地址。
从纹理缓存中获取某个纹理：
PIXI.utils.TextureCache["images/cat.png"]
下面是创建一个精灵，并让它使用纹理的代码：
let texture = PIXI.utils.TextureCache["images/anySpriteImage.png"];
let sprite = new PIXI.Sprite(texture);
注意，必须要先加载图像并将它转换成纹理，你才能从纹理缓存中获取到对应的纹理。
2. 如何加载图像并将它转化成纹理
Pixi 的 loader 对象可以加载任何种类的图像资源：
PIXI.loader
.add("images/anyImage.png") // 加载图像
.load(setup); // 加载完成调用 setup 方法
function setup() {
// This code will run when the loader has finished loading the image
}
如果要加载多个图片，可以给 add 方法传一个数组：
PIXI.loader
.add([
"images/imageOne.png",
"images/imageTwo.png",
"images/imageThree.png"
])
.load(setup);
如果你使用了 Loader，就应该创建一个精灵来连接 Loader 的 resource 对象：
let sprite = new PIXI.Sprite(
PIXI.loader.resources["images/anyImage.png"].texture
)
3. 完整代码：加载图像并创建一个精灵
PIXI.loader
.add("images/anyImage.png")
.load(setup);
function setup() {
let sprite = new PIXI.Sprite(
PIXI.loader.resources["images/anyImage.png"].texture
);
}
三、显示精灵
创建精灵后，要把它加到舞台上，它才会显示：
app.stage.addChild(cat) // cat 是一个精灵
1. 完整代码：创建一个精灵，并将它显示在舞台上
//Create a Pixi Application
let app = new PIXI.Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
PIXI.loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
//Create the cat sprite
let cat = new PIXI.Sprite(PIXI.loader.resources["images/cat.png"].texture);
//Add the cat to the stage
app.stage.addChild(cat);
}
2. 如何隐藏一个精灵
- 将精灵挪走
app.stage.removeChild(anySprite)
- 也可以把精灵的
visible属性设成false来让它隐藏
anySprite.visible = false
3. 使用别名
给频繁使用的 Pixi 对象和方法起一个简短的具有语义的名字，有两个好处：
- 代码会变得更简洁易懂
- 如果 Pixi 团队改变了某个 API，你只需要在定义名字的地方替换 API 就行了，不用到代码中去一个个替换
将上面 “创建精灵并显示在舞台上” 的代码改写一下，给那些对象和方法都起个名字：
//Aliases
let Application = PIXI.Application,
loader = PIXI.loader,
resources = PIXI.loader.resources,
Sprite = PIXI.Sprite;
//Create a Pixi Application
let app = new Application({
width: 256,
height: 256,
antialias: true,
transparent: false,
resolution: 1
}
);
//Add the canvas that Pixi automatically created for you to the HTML document
document.body.appendChild(app.view);
//load an image and run the `setup` function when it's done
loader
.add("images/cat.png")
.load(setup);
//This `setup` function will run when the image has loaded
function setup() {
//Create the cat sprite
let cat = new Sprite(resources["images/cat.png"].texture);
//Add the cat to the stage
app.stage.addChild(cat);
}
4. 使用普通的 javaScript Img 对象或 canvas 创建一个精灵
一般我们都是通过纹理缓存中的纹理创建精灵，但以下这两种创建精灵的方法某些时候也可能会用到：
- 通过 JavaScript Img 对象创建精灵
let base = new PIXI.BaseTexture(anyImageObject),
texture = new PIXI.Texture(base),
sprite = new PIXI.Sprite(texture);
- 通过一个已经存在的 canvas 创建精灵
let base = new PIXI.BaseTexture.fromCanvas(anyCanvasElement),
texture = new PIXI.Texture(base),
sprite = new PIXI.Sprite(texture);
5. 改变已经显示的精灵的纹理
这个技巧可以在游戏发生一些变化时，交互式的改变精灵的纹理。
anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];
6. 监视加载进程
这里展示了怎么将 on 方法注入加载链中，并且每当文件加载时调用一个用户定义的名叫 loadProgressHandler 的函数。这个函数接收两个参数，可以用来查看加载进度及已经被加载的文件。
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 percentage 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");
}
// 控制台输出
// loading: images/one.png
// progress: 33.333333333333336%
// loading: images/two.png
// progress: 66.66666666666667%
// loading: images/three.png
// progress: 100%
// All files loaded
