HTML5游戏开发的五个最佳实践
HTML5是伟大的,因为它多才多艺的 - 它没有具体针对单一的平台.更重要的是,HTML5是无所不在的. 就我所知的,它在你的PC上,你的手机上,你的平板设备上,甚至在你的厨房电器上.
就凭HTML5-多才多艺和无所不在这两个特点 -- 不辩自明, 为什么众多的开发者们备受鼓舞. 然,众所周知,"一旦开发者们被激发了灵感,他们常常会编写游戏."(好吧,可能只是我做了.)
幸运的是,有关HTML5游戏开发的文章比比皆是. 然而, 在你打算使用HTML5编写游戏之前, 我不得不给你一些建议.
你能从本文中学习到什么? 我將提及HTML5游戏开发框架, 怎样通过支持智能手机和手持设备使受众更广泛, 怎样管理游戏状态, 怎样解决性能问题, 怎样支持大多数浏览器平台.
因此,直奔主题,这里有5个创建HTML5游戏的最佳实践,实战!("实战"增加了戏剧效果)
最佳实践 #1:使用框架
编写简单游戏在HTML5中是很容易的,但是当你押宝在HTML5上,你就需要做更多的准备,确保游戏顺利运行.
例如,当你使用了很多的图片,声音效果,和其它的资源,它们会花费一些时间等待浏览器从服务器下载. 如果在编写游戏时, 你不把它放在心上, 你会焦头烂额. 因为图片和声音文件是异步加载的,你的JavaScript代码会在资源全部加载完成前执行.这常常导致"popping"(图片不可用),声音效果在需要时不播放. 好的修正方法是创建一个预加载器,延后脚本代码的执行,直到所有的资源都下载完毕为止.
另一个问题是,你很可能想在不同的机器和/或不同的浏览器,以不同的速度运行你的游戏. 对此, 当你没有更多做为的时候,你仍要确保动画和移动速帧独立于游戏运行平台.
实际上, 每个游戏都很多功能性的样板代码. 幸运的是, 你不必自己从头编写. 有很多框架让你仅关注游戏逻辑, 而不是去担心这些琐碎(和大)的事, 确保你的游戏顺利运行.
使用框架唯一需要注意的是, 你有太多选择. 像ImpactJS框架, 皆在帮助开发游戏的方方面面, 而像EaselJS框架主要关注图形处理. 最后还是由你来挑选你认为最舒服的框架. 这些可能让人摸不着头脑, 但在JavaScript世界, 确定了框架往往意味着确定了编程风格。
- ig.module(
- 'monster'
- )
- .requires(
- 'impact.game',
- )
- .defines(function(){
- Monster = ig.Entity.extend({
- eyes: 42
- });
- });
一个好例子是ImpactJS, 它不仅提供图形显示的抽象或播放声音效果, 也织入了自定义对象和继承模型,如上所示:
Ascend Arcade delivered three games in three months using the ImpactJS framework.
尽管有很多的HTML5游戏现在依赖于某种形式的框架, 很多开发者仍然坚持一路颠簸, 试图重新构建一切. 然而这可能是一个好的学习经验, 但如果你想在合理的时间完成, 使用框架是正确的方法. 一个好的例子是, Ascended Arcade 使用 ImpactJS框架, 在三个月中发布了三款有意思的(有些受到好评)游戏.
最佳实践 #2: 认真考虑小的和触摸屏的设备
可能HTML5的销售卖点之一是,它可以工作于桌面PC, 手持电脑甚至智能手机.(如果你还没有看过Windows Phone 7 Mango上运行的IE9, 看看这个视频).
跨平台(take that,Webster's 字典!)特性是HTML5与身俱来的, 常常只需付出少量的额外工作便可做到. 然而, 有几个你需要认真考虑的事情...
首先也是最重要的, 屏幕尺寸可能在不同设备中区别很大. 如果想让你的HTML5游戏在移动设备上运行良好,你要么确保它们支持多个分辨率,要么不超过WVGA框架大小800x480.
纵然这样,既然大多数移动设备缺乏一次渲染整个网页的能力, 采用先进的缩放和平移技术编写游戏可能会适得其反. 这可以通过viewport标记关闭.下面的代码片段將使游戏窗口占满可用的横向屏幕. 设置属性"user-scaleable"为"no"告知手机浏览器禁用平移, 否则常常会导致手指控制游戏的冲突。
- <meta name="Viewport"
- content="width=device-width; user-scaleable=no; initial-scale=1.0"
- />
就算游戏在小屏幕设备上渲染没问题, 你也应该停下来思考一下输入问题. 大多数仅支持触摸式的设备拥有个虚拟键盘,他们可能会占用太多屏幕空间来控制游戏角色. 如果严格的触摸式输入出了问题, 你应该创建一个受限的虚拟键盘,仅仅创建游戏需要的按钮(如方向键). 然而,最好的做法是控制你的游戏,不需要额外的屏幕元素. 一个很好的例子是Spy Chase游戏,你用一个手指控制自动车(一些你不可能在实际生活中尝试的东西)。
最佳实践 #3:自动保存玩家进度
像site pinning特性, 试图给web浏览器web应用程序和常规的桌面应用同样的地位. 然而, 作为应用程序运行的网站想法太新了, 网页要维持客户端状态. 关闭Microsoft Word前,你可能会三思后行, 但是可能不会对于一个开放的网页谨慎行事.大部分时间, 它不是问题 --- 大多数网页要嘛是无状态的, 要嘛是在服务器上维护记录你的信息。
然而, 浏览器游戏, 是非常不同的小怪兽. 既然JavaScript代码运行在客户端, HTML5游戏状态通常都保持在瞬时内存中(又称RAM).关闭游戏器窗口,你辛苦赚取的积分就付之东流了。
现在, 你可能会认为, 一个明智的用户会足够谨慎, 他们连续玩了8小时, 不关闭游戏. 但事故常有发生, 特别是当打开了多个选项卡或突然断电。
一言蔽之: 当编写HTML5游戏的时候, 绝对的最佳实践是定期保持玩家进度, 允许玩家恢复上一次关闭网页时的状态。
现在,你应在哪保存玩家的进度呢?过去,显而易见的地方是服务器端或浏览器cookie. 两个解决方案都不是特别有吸引力. 服务器端方案, HTTP请求不得不每次构造需要存储或取回的信息. 使用cookie的方案, 你的空间就非常有限了, cookie的可用空间大大依赖于浏览器配置。
更好的可行方案是使用HTML5 DOM storage. DOM storage 通过一个接口, 让你为每个网站保存几兆的数据, 它类似于一个key-value存储(或者一个JavaScript expando对象). 这非常方便,但在HTML5游戏上下文中, 你也可能需要记住复杂的数据结构 --- 一些DOM storage非原生支持的结构。
幸运的是,现代的JavaScript引擎都有内建的机制, 將对象序列化成紧凑的结构,如JSON. 使用这种方案, DOM storage也可以记住复杂信息.接下来的两个助手函数, 使用HTML5 DOM storage和ECMAScript5的内建JSON特性, 解决了游戏状态的存储和取回。
ECMAScript5:
- function saveState(state) {
- window.localStorage.setItem("gameState", JSON.stringify(state));
- }
- function restoreState() {
- var state = window.localStorage.getItem("gameState");
- if (state) {
- return JSON.parse(state);
- } else {
- return null;
- }
- }
最佳实践 #4: 使用监控器
开发游戏的一个最大挑战是加入越来越多的游戏特性的同时能保持高帧率.
好消息是, 浏览器比过去几年快了很多,HTML5游戏运行在恒定的60fps已经成为现实.
这实属不易. 对于IE9,意味着要编写一个全新的JavaScript引擎, 使用多CPU内核和基于Direct2D的完全的硬件加速渲染管道.
7. HTML5最佳实践
本文来源:https://www.51html5.com/a2457.html
﹝HTML5游戏开发的五个最佳实践﹞相关内容
- 关于HTML5的五个错误理解
- div+css表单布局的五个小技巧
- 快速提升CSS编码能力的五个必备知识点
- 关于移动应用开发的五大要点
- html5游戏开发-零基础开发RPG游戏-开源讲座(二)-跑起来吧英雄
- html5游戏开发-零基础开发RPG游戏-开源讲座(一)
- html5游戏开发-零基础开发RPG游戏-开源讲座(三)-卷轴&对话实现 ... ...
- 游戏开发技术的新革命!丰富多彩的HTML5游戏
- 14个最佳的HTML/CSS设计和开发框架
- Zynga在Kik推首款为移动平台开发的HTML5游戏