一些Phaser.js做游戏App的经验


一些Phaser.js做游戏App的经验_第1张图片
沉迷于学习无法自拔

前言

先来说说Phaser.js的优缺点

优点

1. 开发效率高,优秀的封装和丰富的工具对象可以帮你极快的完成游戏开发。

2. 渲染能力优秀,底层使用同样是成功开源项目的pixi.js作为渲染支持。

3. 大量的示例代码, 没错官网上摆着大量的示例代码也有部分是完整游戏,这足以让要尝试游戏开发的新人们垂涎欲滴。

缺点

1. 缺乏辅助工具,没有这些辅助工具的支持游戏制作很难变为流水线工作,团队开发效率会大打折扣。

2. js游戏APP目前都有的瓶颈,内存占用较高。小游戏内存占用很容易就达到100mb以上是目前js游戏引擎都面临的一个性能问题。其中除了js运行时占用,底层webview的内存占用超过半数,至于webview性能是还有大幅优化提升空间还是受移动设备硬件局限这里不再深究。

局限

Phaser引擎只能开发2D游戏。严格来说这不算是一个缺点,因为引擎开发者声明只专注2D游戏引擎实现。

应用场景

我认为Phaser游戏引擎虽然在商业游戏开发上无法与cocos2d或者Unity3D相抗衡,但是它成熟的功能支持以及良好的性能表现也可以在游戏开发选择中占有一席之地。如果你是小游戏(单人)开发者,或者游戏开发学习教学,Phaser引擎都会是个不错的选择。



一些Phaser.js做游戏App的经验_第2张图片
有人做了漂亮的游戏,但却不是我

经验分享

• 学习Phaser首先阅览官网的API文档(LEARN->左侧API Documentation )与Examples展示,了解Phaser的能力范围。另外也会有很多开发者在官网的News栏目中分享自己的项目、工具插件和经验。除此之外html5gamedevs论坛是除官网之外Phaser资源最集中的网站。

• 理解Phaser的设计,Group、Cache、Loader、State。

Group

除了Phaser.Group类型,部分显示对象也可以为其增加孩子元素,不过使用的方法与Group略有不同,比如:增加子元素 Group.add() 、Sprite.addChild()。

通常我们会用Group把显示对象分组方便操控,例如:把敌方单位与右方单位放入不同的Group,更具体点把卡牌游戏中不同玩家的牌放入不同的Group中显示和操作。

Cache

Phaser总是缓存资源增加复用性。资源加载后,通过一个字符串类型的key访问获取,虽然Phaser在载入资源函数总让你设置访问key,但是只有你需要额外写代码控制的资源才需要一个唯一的名字,既然是字符串你当然也可以用本地化语言,比如说设置Button对象设置key为“充值按钮”。API文档中Cache类的公开属性里罗列了引擎支持载入的资源类型。

通常你不需要手动去释放缓存,也许你会觉得自己开发的游戏内存占用较高是不是该手动释放掉缓存来降低占用率。我的建议是使用chrome任务管理,打开“JavaScript使用的内存”,这个选项内存占用是可以考虑优化的,而其他的内存占用可以通过特别的手段优化,文章稍后会细说。

Loader

Phaser引擎的支持加载的资源格式相当丰富,除了能加载纹理图片、视频音频、json、xml、动态加载JavaScript的能力让游戏热更新实现变得十分轻松。另外,关于其他文本格式的支持可以通过text格式加载后再解析。

值得一提的是加载进度条的实现,有一种方式是通过Loader.start()开始加载,并用onFileComplete、onLoadComplete等函数监视刷新载入进度。这里会有两个陷阱

1. Loader.start() 虽然可以控制开始加载的时机,但是并不意味着资源加载可以放到State的其他步骤。资源加载函数总是放在State类的preload函数中。

2. onFileComplete 收到信号不代表资源文件已经被加载进内存,而是说该资源被放入加载任务队列,整个载资源过程是个异步并发的过程。同样onLoadComplete 信号也不能说明资源已经被加载到内存中,而是引擎调用在State类的create函数时资源一定可以被使用(已经加载至内存中)。

State

状态类让游戏开发变得简便。Phaser引擎为每个状态提供了缓存、资源访问的快捷支持。开发者只需要实现包含特定方法的类就可以作为State状态使用。以下罗列的方法中*表示必须实现,-表示可选。

- init          初始化状态

* preload   加载状态中用到的资源

* create     创建显示对象

- shutdown 释放当前状态的占用(如状态切换)

- paused    处理游戏暂停

很好,不过状态拆分粒度多大比较合适呢?从引擎的支持看来为状态提供了很多支持,这说明一个状态对象占用的内存空间不少,关于这点可以通过console打印整个对象核实。所以我认为Phaser的状态用于游戏的大粒度拆分比较合理,比如按游戏场景切分为:游戏大厅,游戏房间,游戏场景123。除此之外部分特殊的部分也可拆分开,比如将引导状态,启动时的欢迎屏等于其他状态分更有利于项目维护。至于简单的状态变化,游戏内部可以用更轻量的方式处理,毕竟减少内存花费就js游戏App目前内存占用率高的环境下还是必要的。


一些Phaser.js做游戏App的经验_第3张图片
忍无可忍的你向这些折磨人的小妖精发射出愤怒的子弹

内存

之前反复提到了内存问题,Phaser游戏App到底内存占用有多高呢,用Cordova打包的App,在Android系统的手机上,图片资源不合并处理,一些手机很容就占用200MB以上(如:Mx4 Pro)。这比起cocos与Unity3D的js游戏App 100MB的占用高出一倍着实让人难以接受。大家先别着急,其实优化办法还是有的,而且优化后内存占用会与那两个引擎相差不过。

优化一: 使用crosswalk代替Cordova的webview,强制开启WebGL性能更佳。相应的Phaser.Game也要显示设置为WebGL渲染。

* 注意使用crosswalk之后可能导致mp3格式的音频资源无法加载(会报错),目前官方暂时没有给出解决方案,不过有网友说可以通过将mp3格式转ogg来绕过该问题。

优化二: 合并小图,过多的图片载入会让底层渲染好烦更多的内存,适当的合并小图减少渲染时的内存消耗。推荐使用ShoeBox工具合图(也就是制作SpriteSheet),使用default项目生产即可。

另外,如果要从cocos的plist中提取切分图,可以使用

Sprite-Plist-Extractor 

位图字体

使用官方推荐的网站 littera 制作起来也是棒棒哒~


还有呢

还有的话就是我做了一个移动设备快速显示布局的框架,使用yaml格式的配置文件,基本实现了根据美术设计的界面原型图为各个图片资源配置好坐标就能完成显示的框架。这在不规则布局的界面是很实用的,当然美术设计人员也可以直接在配置中调整坐标查看效果。

PhaserMobileLayout

最后,祝大家能够和Phaser一起快乐的玩耍~

你可能感兴趣的:(一些Phaser.js做游戏App的经验)