欢迎来到[自学php网] ①群 287460651

主页 > 游戏引擎 > Phaser游戏引擎 >

如何使用TexturePacker为Phaser 3创建精灵表

来源:未知    时间:2019-08-21 14:59 作者:小飞侠

[导读] 本教程涵盖了Phaser 3。如果您仍在使用Phaser 2,请访问 如何为Phaser 2创建精灵表 。 你将学到什么 使用TexturePacker创建精灵表 在Phaser 3中加载精灵表 使用TexturePacker设置轴心点 从精灵表中...

本教程涵盖了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 ”。您可以使用过滤器更快地找到它。

为TexturePacker选择Phaser 3导出器

小心选择Phaser 3格式,只有这个格式支持轴心点编辑,多个包装,一个json文件和普通的地图打包。另外两种Phaser数据文件格式可以与较旧的Phaser版本一起使用。在这种情况下,请查看本教程先前版本

本教程的演示项目已在assets -folder中包含一些图稿。只需将cityscene文件夹拖放到TexturePacker即可。

添加文件夹比添加单个精灵有两个主要优点

  • 在文件夹中添加或删除精灵也会在精灵表中添加或删除精灵。

  • 子文件夹名称成为精灵名称的一部分 - 例如capguy / walk / 0001.png而不仅仅是0001.png

为Phaser 3创建精灵表

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启动脚本将自动重建游戏并刷新浏览器窗口。您只会在左上角看到我们背景图片的四分之一:

Phaser 3中的枢轴点不好

默认情况下,精灵的轴心点位于图像的中心,因此调用this.add.sprite(0, 0, ...)将背景精灵的中心置于位置(0,0)。在下一节中,我们将学习如何解决这个问题。

使用TexturePacker设置轴心点

可以在TexturePacker中为每个sprite轻松设置枢轴点。选择TexturePacker窗口左侧的background.png,然后单击工具栏中的Sprite Settings按钮。在左侧,您现在可以启用并配置所选精灵的轴心点:

编辑Phaser 3锚点

在预定义输入字段中选择左上角,然后重新发布精灵表。现在重新加载显示您的移相器游戏的浏览器窗口(不会自动检测更改的资产文件)。现在应该完美地放置背景图像:

将精灵与Phaser 3对齐

如果精灵没有按预期显示,那么在浏览器中检查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 3动画精灵

移动精灵

有几种方法可以在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(已编入索引): ä¼˜åŒ–Phaser 3的精灵表

这是原始表:410kb Phaser 3中的高品质精灵表

这是优化表:115kb - 减少72%! ä½¿ç”¨å¸¦æœ‰Phaser 3的png-8(pngquant)精灵表来节省内存

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

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

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

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

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

好处是:.json文件包含所有信息,您不必更改一行代码!

使用Phaser 3处理许多精灵

最后

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


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


最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有www.zixuephp.com

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com