Pixi官方文档译文（2）

最新推荐文章于 2024-04-27 18:02:41 发布

翻译最新推荐文章于 2024-04-27 18:02:41 发布 · 2.3k 阅读

文章标签：

#pixi

本文介绍如何使用TexturePacker工具创建纹理集，并利用Pixi.js加载纹理集来高效创建Sprite。详细步骤包括准备图片、配置TexturePacker及加载纹理集。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过纹理集创建Sprite(Make a sprite from a tileset sub-image)

如果你开发的游戏很复杂，庞大，那么使用纹理集的方式去创建sprite是非常高效的一种行为。一个纹理集其实就是一个json文件，这个文件中包含了每一个子图片的名字、坐标、大小等属性。
制作纹理集的方式很简单，在这里我们使用Texture Packer工具，这是一个收费工具，但可以使用”教育免费版“。（下载好TP工具，开始下面步骤）

第一步，把零散的图片准备好，命好名字（到时候通过名字来获得图片的纹理对象），放在一个文件夹下：

这里写图片描述

下一步，打开TP工具，选择 JSON Hash模式，拖动所有的图片到TP的工作区，设置方法如下图：
这里写图片描述

最后点击publish按钮。设置好json文件名字，和文件存放路径。

加载图片纹理集

使用Pixi的loader对象加载图片纹理集，例如我们创建的纹理集名字叫treasureHunter.json。

loader
  .add("images/treasureHunter.json")
  .load(setup);

一旦加载完毕，Pixi的Texture Cache对象会存储所有纹理的信息，你可以通过图片文件的名字来调用图片文件对应的纹理对象，(“blob.png”, “dungeon.png”, “explorer.png”, etc.)

下面看一下具体使用代码：

// 方式一
var sprite = new Sprite(
  resources["images/treasureHunter.json"].textures["frameId.png"]
);
// 方式二(建议封装一下原始api)
var id = PIXI.loader.resources["images/treasureHunter.json"].textures; 
var sprite = new Sprite(id["frameId.png"]);