显示精灵（sprite）

优质

小牛编辑

126浏览

2023-12-01

显示精灵

在你加载一个图像之后，可以用它来创建一个精灵，你需要用stage.addChild方法把它放到Pixi的舞台上面去，像这样：

app.stage.addChild(cat);

记住，舞台是用来包裹你所有精灵的主要容器。

重点：你不应该看见任何没被加入舞台的精灵

在我们继续之前，让我们看一个怎样使用显示一个单图像的例子。在examples/images文件夹中，你将找到一个64*64像素大小的猫的PNG图像文件。

基础显示图像文件

这里是所有的显示一个图像，创建一个精灵，显示在Pixi的舞台上所需要的代码。

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

程序跑起来，你会看到:

在舞台上的小猫咪

现在我们已经取得了一些进展!

如果你想把一个精灵从舞台上挪走，就可以使用removeChild方法：

app.stage.removeChild(anySprite)

但是通常，我们都把精灵的visible属性设置成false来让精灵简单的隐藏。

anySprite.visible = false;

使用别名

你可以对你使用频繁的Pixi对象和方法设置一些简略的可读性更强的别名。举个例子，你想给所有的Pixi对象增加PIXI前缀么？如果你这样想，那就创建一个简短的别名给他吧。下面是一个给TextureCache对象创建别名的例子：

let TextureCache = PIXI.utils.TextureCache

现在就可以像这样使用别名了：

let texture = TextureCache["images/cat.png"];

使用别名给写出简洁的代码提供了额外的好处：他帮助你缓存了Pixi的常用API。如果Pixi的API在将来的版本里改变了 - 没准他真的会变！ - 你将会需要在一个地方更新这些对象和方法，你只用在工程的开头而不是所有的实例那里！所以Pixi的开发团队想要改变它的时候，你只用一步即可完成这个操作！

来看看怎么将所有的Pixi对象和方法改成别名之后，来重写加载和显示图像的代码。

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

大多数教程中的例子将会使用Pixi的别名来处理。除非另有说明，否则你可以假定下面所有的代码都使用了这些别名。

这就是你需要的所有的关于加载图像和创建精灵的知识。

一些关于加载的其他知识

我们的例子中的格式是加载图像和显示精灵的最佳实践。所以你可以安全的忽视这些章节直接看”定位精灵”。但是Pixi的加载器有一些你不常用的复杂功能。

使用普通的javaScript Img对象或canvas创建一个精灵

为了优化和效率我们常常选择从预加载的纹理缓存的纹理之中创建精灵。但是如果因为某些原因你需要从JavaScript的Image对象之中创建，你可以使用Pixi的BaseTexture和Texture类：

let base = new PIXI.BaseTexture(anyImageObject),
    texture = new PIXI.Texture(base),
    sprite = new PIXI.Sprite(texture);

你可以使用BaseTexture.fromCanvas从任何已经存在canvas标签中创建纹理：

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

如果你想改变已经显示的精灵的纹理，使用texture属性，可以设置任何Texture对象，像下面这样：

anySprite.texture = PIXI.utils.TextureCache["anyTexture.png"];

你可以使用这个技巧在游戏发生一些重大变化时交互式的改变精灵的纹理。

给加载的文件设置别名

你可以给任何你加载的源文件分配一个独一无二的别名。你只需要在add方法中第一个参数位置传进去这个别名就行了，举例来说，下面实现了怎么给这个猫的图片重命名为catImage。

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

这种操作在loader.resources中创建了一个叫做catImage的对象。
这意味着你可以创建一个引用了catImage对象的精灵，像这样：

let cat = new PIXI.Sprite(PIXI.loader.resources.catImage.texture);

然而，我建议你永远别用这个操作！因为你将不得不记住你所有加载文件的别名，而且必须确信你只用了它们一次，使用路径命名，我们将将这些事情处理的更简单和更少错误。

监视加载进程

Pixi的加载器有一个特殊的progress事件，它将会调用一个可以定制的函数，这个函数将在每次文件加载时调用。progress事件将会被loader的on方法调用，像是这样：

PIXI.loader.on("progress", loadProgressHandler);

这里展示了怎么将on方法注入加载链中，并且每当文件加载时调用一个用户定义的名叫loadProgressHandler的函数。

PIXI.loader
  .add([
    "images/one.png",
    "images/two.png",
    "images/three.png"
  ])
  .on("progress", loadProgressHandler)
  .load(setup);
function loadProgressHandler() {
  console.log("loading");
}
function setup() {
  console.log("setup");
}

每一个文件加载，progress事件调用loadProgressHandler函数在控制台输出 “loading”。当三个文件都加载完毕，setup方法将会运行，下面是控制台的输出：

loading
loading
loading
setup

这就不错了，不过还能变的更好。你可以知道哪个文件被加载了以及有百分之多少的文件被加载了。你可以在loadProgressHandler增加loader参数和resource参数实现这个功能，像下面这样：

function loadProgressHandler(loader, resource) { /*...*/ }

你现在可以使用 resource.url变量来找到现在已经被加载的文件。（如果你想找到你定义的别名，使用resource.name参数。）你可以使用loader.progress来找到现在有百分之多少的文件被加载了，这里有一些关于上面描述的代码：

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

这实在太酷了！因为你能用这个玩意做个进度条出来。
（注意：还有一些额外的resource对象属性， resource.error会告诉你有哪些加载时候的错误，resource.data将会给你文件的原始二进制数据。）

一些关于Pixi的加载器的其他知识

Pixi的加载器有很多可以设置的功能，让我速览一下：

add 方法有四个基础参数:

add(name, url, optionObject, callbackFunction)

这里有文档里面对这些参数的描述：

name (string): 加载源文件的别名,如果没设置，url就会被放在这.
url (string): 源文件的地址，是加载器 baseUrl的相对地址.
options (object literal): 加载设置.
options.crossOrigin (Boolean): 源文件请求跨域不？默认是自动设定的。
options.loadType: 源文件是怎么加载进来的？默认是Resource.LOAD_TYPE.XHR。
options.xhrType: 用XHR的时候该怎么处理数据？默认是Resource.XHR_RESPONSE_TYPE.DEFAULT。
callbackFunction: 当这个特定的函数加载完，这个特定的函数将会被执行。

只有url必填（你总得加载个文件吧。）

这里有点用了add方法加载文件的例子。第一个就是文档里所谓的“正常语法”：

.add('key', 'http://...', function () {})
.add('http://...', function () {})
.add('http://...')

这些就是所谓“对象语法”啦：

.add({
  name: 'key2',
  url: 'http://...'
}, function () {})
.add({
  url: 'http://...'
}, function () {})
.add({
  name: 'key3',
  url: 'http://...'
  onComplete: function () {}
})
.add({
  url: 'https://...',
  onComplete: function () {},
  crossOrigin: true
})

你也可以给add方法传一个对象的数组，或者既使用对象数组，又使用链式加载：

.add([
  {name: 'key4', url: 'http://...', onComplete: function () {} },
  {url: 'http://...', onComplete: function () {} },
  'http://...'
]);

（注意：如果你需要重新加载一批文件，调用加载器的reset方法：PIXI.loader.reset();）

Pixi的加载器还有许多其他的高级特性，包括可以让你加载和解析所有类型二进制文件的选项。这些并非你每天都要做的，也超出了这个教程的范围，所以从GitHub项目中获取更多信息吧！