我为什么要使用精灵表？
接下来你要做的就是创建一个精灵表。使用带有Phaser的精灵表有两个主要原因：
加快游戏加载速度
现在可以立即加载所有图形，而不是从Web服务器加载大量单个图像。这可以加快游戏的加载时间。
提高帧速率
使用精灵地图集也可以提高游戏性能。使用WebGL纹理只需设置一次即可进行渲染。
“Texture Packer是我们日常工作流程的重要组成部分。
在处理移动html5游戏时，每一点GPU内存都有帮助，因此必须对资产进行智能打包。
而Texture Packer拥有我们所需的所有功能，可以毫不费力地为我们的游戏创建地图集。“Richard Davey（@photonstorm） - Phaser的创造者
设置一个新的Phaser项目
创建一个新的phaser项目非常简单：只需从GitHub 克隆 Phaser 3 Webpack项目模板 ，获取节点模块，然后运行启动脚本 ：
git clone git@github.com:photonstorm/phaser3-project-template.git MyProject cd MyProject npm install npm start启动应用程序时，选择Try TexturePacker Pro。在主窗口中，使用“ 选择数据格式”按钮并从列表中选择“ Phaser 3 ”。您可以使用过滤器更快地找到它。
小心选择Phaser 3格式，只有这个格式支持轴心点编辑，多个包装，一个json文件和普通的地图打包。另外两种Phaser数据文件格式可以与较旧的Phaser版本一起使用。在这种情况下，请查看 本教程 的 先前版本
本教程的 演示项目 已在assets -folder中包含一些图稿。只需将cityscene文件夹拖放到TexturePacker即可。
添加文件夹比添加单个精灵有两个主要优点
在文件夹中添加或删除精灵也会在精灵表中添加或删除精灵。
子文件夹名称成为精灵名称的一部分 - 例如capguy / walk / 0001.png而不仅仅是0001.png
TexturePacker当前默认启用允许旋转。如果这会产生较小的纹理，则打包算法可以旋转精灵。不幸的是，Phaser只支持使用WebGL渲染器旋转精灵。如果要确保游戏在所有设备上运行，则必须禁用旋转功能（Canvas渲染为不支持WebGL的浏览器的后备）。
请在“ 高级设置”页面上禁用该功能。它位于“ 布局”部分，您必须展开才能看到它。之后，使用文件选择按钮输入数据文件。将其命名为cityscene.json并将其放在项目的assets文件夹中。默认情况下，TexturePacker会将纹理图像保存为cityscene.png在同一文件夹中。
最后按Publish sprite sheet创建并保存精灵表。我们现在在TexturePacker中完成了。这就是创建精灵表所需的全部内容。
在Phaser中加载精灵表
项目模板包含一个src / index.js文件，该文件显示一个弹跳的移相器徽标。对于我们的演示应用程序，我们删除了preload()和create()函数，并重用配置作为起点：
import 'phaser'; var config = { type: Phaser.AUTO, parent: 'phaser-example', width: 800, height: 600, scene: { preload: preload, create: create } }; var game = new Phaser.Game(config);preload（）函数用于加载资产。让我们添加自己的一个，加载精灵表：
function preload() { this.load.multiatlas('cityscene', 'assets/cityscene.json', 'assets'); }第一个参数'cityscene'指定在加载后可用于访问图集的密钥。第二个参数'assets/cityscene.json'是要加载的atlas定义，最后一个参数'assets'是存储图像文件的文件夹的名称。
create（）函数用于设置我们的游戏场景。让我们将背景精灵添加到场景中。在工作表内，精灵以其文件名引用（如果您更喜欢没有.png扩展名的精灵名称，请在TexturePacker中启用“修剪子精灵名称” ）：
function create (){ var background = this.add.sprite(0, 0, 'cityscene', 'background.png'); }保存index.js文件后，npm启动脚本将自动重建游戏并刷新浏览器窗口。您只会在左上角看到我们背景图片的四分之一：
默认情况下，精灵的轴心点位于图像的中心，因此调用this.add.sprite(0, 0, ...)将背景精灵的中心置于位置（0,0）。在下一节中，我们将学习如何解决这个问题。
使用TexturePacker设置轴心点
可以在TexturePacker中为每个sprite轻松设置枢轴点。选择TexturePacker窗口左侧的background.png，然后单击工具栏中的Sprite Settings按钮。在左侧，您现在可以启用并配置所选精灵的轴心点：
在预定义输入字段中选择左上角，然后重新发布精灵表。现在重新加载显示您的移相器游戏的浏览器窗口（不会自动检测更改的资产文件）。现在应该完美地放置背景图像：
如果精灵没有按预期显示，那么在浏览器中检查Javascript控制台总是一个好主意。也许没有找到精灵表或你使用了错误的精灵名称？控制台中不应出现任何警告或错误！
添加动画
要在场景中添加一个行走角色，我们必须创建一个动画精灵并在屏幕上移动它。首先，我们必须创建精灵并将其存储在create（）之外声明的变量中：
var capguy;function create (){ var background = this.add.sprite(0, 0, 'cityscene', 'background.png'); capguy = this.add.sprite(0, 400, 'cityscene', 'capguy/walk/0001.png'); capguy.setScale(0.5, 0.5);这将创建一个带有动画的第一帧的精灵：capguy/walk/0001.png并将其放置在positin（0,180）。下一行将精灵缩小50％，因为它对你的场景来说有点太大了。
该函数generateFrameNames()通过在开始和结束之间创建零填充数字来创建一大堆帧名称，由前缀和后缀包围。1是起始索引，8是结束索引，4是要使用的位数：
var frameNames = this.anims.generateFrameNames( 'cityscene', {start: 1, end: 8, zeroPad: 4,prefix: 'capguy/walk/', suffix: '.png'} );结果名称是：
{key：'cityscene'，frame：'capguy / walk / 0001.png'}
{key：'cityscene'，frame：'capguy / walk / 0002.png'}
...
{key：'cityscene'，frame：'capguy / walk / 0008.png'}
现在我们可以创建一个名为walk的动画并将其添加到capguy精灵中：
this.anims.create({ key: 'walk', frames: frameNames, frameRate: 10, repeat: -1 }); capguy.anims.play('walk');}结果是Capguy走在左边界的一个地方：
移动精灵
有几种方法可以在Phaser中移动精灵。你将要做一个简单的动画 - 只需按下精灵并在Capguy离开场景后重置它。
扩展游戏的配置对象，现在也调用一个名为update的函数：
var config = { ... scene: { preload: preload, create: create, update: update }};并添加如下更新函数：
function update(time, delta){ capguy.x += delta/8; if(capguy.x > 800) { capguy.x = -50; }}查看更多关于如何使用TexturePacker为Phaser 3创建精灵表的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did31422