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


沉迷于学习无法自拔

前言

先来说说Phaser.js的优缺点

优点

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

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

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

缺点

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

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

局限

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

应用场景

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



有人做了漂亮的游戏,但却不是我

经验分享

• 学习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游戏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一起快乐的玩耍~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,670评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,928评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,926评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,238评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,112评论 4 356
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,138评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,545评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,232评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,496评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,596评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,369评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,226评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,600评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,906评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,185评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,516评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,721评论 2 335

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,065评论 25 707
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,505评论 18 399
  • 步驟1: 設置 actionAtItemEnd. 步驟2: 監聽 AVPlayerItemDidPlayToEnd...
    ShinrenPan阅读 2,085评论 0 3
  • 文/陌宇轩 看够了 受够了 为何又死缠不休
    小哲小诗阅读 211评论 0 0
  • APP栅格规范: Android界面的最小间距是8dp(16px),而规范的图像资源尺寸为16dp,24dp,32...
    Only天然暖宝宝阅读 523评论 0 0