本教程涵盖了Phaser 3。如果您仍在使用Phaser 2，请访问 如何为Phaser 2创建精灵表。

你将学到什么

• 使用TexturePacker创建精灵表

• 在Phaser 3中加载精灵表

• 使用TexturePacker设置轴心点

• 从精灵表中播放动画

• 优化启动时间并减少下载大小

• 完整的代码在GitHub上

我为什么要使用精灵表？

接下来你要做的就是创建一个精灵表。使用带有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

在启动脚本中使用的WebPack捆绑项目源，并提供您的应用程序在本地主机：8080。

我们将在本教程中创建的完整演示项目也可以在GitHub上找到。

创建精灵表 - 简单的方法

创建精灵表的最简单方法是使用TexturePacker。请从这里下载TexturePacker：

下载TexturePacker

对于macOS

也适用于Windows和Linux

启动应用程序时，选择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;
    }}

关于这一点不多说：自上次更新调用以来的时间（以毫秒为单位）作为第二个参数传递。为了增加Capguy的位置每秒125像素，我们将delta除以8.在到达右边界后，精灵位置被重置为左边界。

优化你的游戏

由此产生的cityscene.png大小约为400kb - 对于快速的互联网连接来说并不多，但对于移动设备来说，优化加载时间可能是个好主意。

TexturePacker允许您显着减少精灵表使用的内存量 - 同时保持精灵质量几乎与原始精灵一样。

要启用此优化，请选择纹理格式PNG-8（已编入索引）： 

这是原始表：410kb 

这是优化表：115kb - 减少72％！ 

Multipack：处理太多精灵的简单方法

那么，如果你在游戏中需要更多的精灵，你会怎么做？

如果您在屏幕上有许多精灵并且您的游戏遇到了性能问题，那么正确的答案是：手动创建多个精灵表。按照您的精灵的绘制顺序和组合精灵来减少绘制调用的数量。

但是对于更多的用户来说，答案要简单得多：

在TexturePacker中启用MultiPack。TexturePacker会根据需要自动打包尽可能多的精灵表来保存所有精灵。

好处是：.json文件包含所有信息，您不必更改一行代码！

最后

这就是本教程的全部内容。您现在应该已经学会了如何使用TexturePacker轻松地向Phaser添加动画。您还看到优化游戏以改善启动时间是多么容易。

以上就是自学php网提供本章的全部教程，请大家多多支持自学php网。