分享开发HTML5跨平台游戏经验及注意要点

标签: 分享 开发 html5 | 发表时间:2012-04-27 08:00 | 作者:[email protected] (秩名)
出处:http://www.kuqin.com/jingyan/

我们刚成立Gamezee的时候,行业中许多人都对HTML5抱有成见,就算是一些对其较为乐观的人士也只是说,HTML5将是未来发展潮流,但目前还不够成熟和稳定,无法制作出当前主导社交游戏领域的Ville类型Flash游戏。

当时我们准备使用HTML5制作一款可同时运行于PC端的Facebook,以及所有iOS设备和Android手机平台移动网络的大型等视距游戏。

这款出自单个团队之手,并且基于HTML5/node.JS的游戏《Skyscraper City》仅运行一个代码库,它是我们这家工作室的开山之作。

《Skyscraper City》这款城建游戏现在已经入驻Facebook及iOS、Android手机平台,结合了社交建设玩法,含有乐高积木风格的元素。玩家可以堆叠任何一种城市单位以建设高塔,或者装饰建筑等。

开发这款游戏并非易事,以下是我们所总结的一些经验:

allisons_city(from gamasutra)

allisons_city(from gamasutra)

1)移动设备的玩家数量多于我们的预期。

我们想制作跨平台HTML5游戏的原因之一就是,我们自己也是游戏玩家。我玩过《CityVille》,并希望外出时也能在手机上玩到这款游戏。Zynga虽然推出移动版《CityVille Hometown》,我也可以在iPhone或Android手机下载这款游戏,但它与原版《CityVille》并不相同,它是另一座城市。而我们的游戏却能提供真正的跨平台体验,你可以在PC电脑、平板电脑、移动设备上玩游戏,并且实现游戏进程在所有设备上的同步。

我们认为多数用户的想法也是如此——他们多数时候在电脑上玩游戏,然后在其他场所时就拿出平板电脑或手机继续体验游戏。但在iPid Touch或iPad上玩游戏的用户要多于在Mac平台,而Android手机游戏玩家又会多于这些苹果游戏用户。

如果我们一开始就清楚这一点,就会花更多时间针对移动设备而非Mac浏览器优化游戏体验。虽然我们设计之初就考虑到移动设备,但我们却只是将其视为次级游戏环境。我们建议其他开发者将优质的手机游戏体验作为首要考虑目标。

2)必须进行多次试验。

我们一开始就有使用Canvas渲染游戏的念头。这在桌面电脑平台上十分管用——完全不存在运行效果的问题。但在iPhone 3GS平台,运行效果很糟糕(我们制作游戏时的每秒渲染画面不足5帧,但iOS 5.0发布之后情况大有好转)。

所以我们只好接二连三地创建一个又一个渲染引擎,直到创建出目前使用的DOM渲染器为止(它适用于多数设备)。这个DOM渲染器使用CSS动画,支持我们在2D图像上使用伪3D CSS变换以触发移动设备上的硬件加速功能(这可以略微提升运行效果)。

3)HTML5仍存在一些难以攻克的软肋。

HTML5上的音效仍然很有问题。游戏开发需考虑的是植入多种声音以响应游戏提示信息及玩家输入操作。但尽管我们进行了多次试验,仍然无法在多数移动设备上实现较理想的音效(游戏邦注:例如,无法让声音即时响应游戏内容或玩家操作),也难以让游戏同时播放响声和音乐。所以我们就选择在电脑版本的游戏中同时保留声音及音乐内容,但移动网页版本仅保留音乐。

在DOM上提升运行效果的一个类似做法是在CSS上进行伪3D变换。这可以在多数移动设备上触发硬件加速,使其获得比Canvas更出色的运行效果。

出于某种原因,有些Android设备(例如三星Galaxy S21)并不支持这种操作,所以你无法针对它们提升游戏运行性能。

以下是我们用来触发3D变换的代码:

/******************************/

/* Makes screen non-selectable and prevents text cursor from displaying */

/******************************/

div {

margin: 0;

padding: 0;

-moz-user-select: -moz-none;

-khtml-user-select: none;

-webkit-user-select: none;

/*3D transform */

-webkit-transform: scale3d(1, 1, 1);

-o-user-select: none;

user-select: none;

}

4)在设计之初就要有跨平台理念。

我们希望手机版本与电脑网页版本的游戏体验更为相近,这意味着我们需要关闭手机版中的缩放功能,在网页版游戏中移除道具拾取的翻转效果,并想法在手机版游戏中植入翻转(我们的想法是通过一个按扭激活或使用手指按压目标道具来实现这一点)。

像《CityVille》这类游戏设计如果不进行重大调整,根本就不适用于手机平台,因为它一开始就并非瞄准移动设备。它的菜单太大太复杂了,游戏中的东西多得无法在小小的iPhone屏幕中呈现(游戏邦注:所以Zynga才需要针对iOS、Android发布独立版本的《CityVille Hometown》,而非添加一些元素直接将原版游戏移植到手机平台)。

gifts(from gamasutra)

gifts(from gamasutra)

5)不要采用大量堆叠操作。

我们游戏的一大特色就是上文提到的堆叠操作。在城市中创建一个巨型机器人或者建设一个由四根细柱支撑的倒金字塔确实很有趣,但在手机平台上的堆叠操作却问题百出。如果用户的手指不够纤细,有时候就难以准确选中他们想点击的物品。另外,与Flash一样,如果你在屏幕上拖动的对象越多,渲染时间就会越长。

玩家在这款游戏中一开始拥有10 X 10的城市方格,最高可以建设11层楼。如果每一格都建设这么高的楼,那需要渲染的建筑内容就多了(如果玩家的可玩区域扩展4倍后,那么渲染的工作量就更大了)。

所以,虽然堆叠很好玩,但对于扩建后的城市来说却十分不利于玩家操作,它会延长游戏的加载时间(在某些移动设备上的加载时间超过一分钟,在桌面电脑就没有这么明显)。我们现在正在优化游戏渲染大量对象的运行性能,但如果我们提前知道这一点,可能就会不会采用这种棘手的堆叠玩法了。

Skyscraper City(from gamasutra)

Skyscraper City(from gamasutra)

6)善于运用CSS知识

你最好很擅长CSS技术,因为让游戏在桌面电脑平台、Android手机及所有iOS设备的主流浏览器流畅运行,需要用到大量的CSS知识。我们有一个网页开发者的任务就是处理与CSS相关的工作,针对多种移动设备创建可动态变换尺寸的菜单。在电子游戏设计中,有50%的工作用于创建菜单。而HTML5跨平台游戏开发中有50%属于与CSS相关的工作。

以下是我们在这个开发过程中的一些体会:

*我们的实践证明,开发者可以使用HTML5制作出很棒的跨平台等视距游戏。

*如果玩家可以在一个设备上玩某款游戏,多数人就会想在手机或平板电脑上继续体验该游戏。

*制作HTML5跨平台游戏需进行大量试验。

*虽然HTML5很强大,但仍有一些不甚完善之处。

*跨平台游戏体验意味着,游戏设计之初就要考虑到用户在不同设备上的体验。

*不可在手机游戏中植入需进行大量堆叠或过度拖动的操作。

*最好很精通CSS技能。

以下是我们在Facebook平台开发跨平台HTML5游戏的一些极有帮助的参考资料:

1)viewporter. https://github.com/zynga/viewporter. 这个Zynga开源代码允许你获取任何设备的屏幕尺寸,并针对这些屏幕调整游戏大小。它比你自己从头编写代码更省时间(我们用过Viewporter,也自己写过代码,所以才会知道这一点。)

2)Weinre.http://phonegap.github.com/weinre/. 这个远程调试器工作原理类似于Web Inspector,但它运行于移动设备。它有助于追踪iPhone和iPad等设备上的控制台错误信息。

3)JQuery. http://jquery.com/ 你可以利用这个库中现成的代码,省下自己写代码的时间。它对文本动画处理极有用处,我们进行了一些修改并推出了JQuery Mobile,它更适用于移动设备平台。

4)node.JS. http://nodejs.org/ 在你使用Javascript编写内容时,它可以让你省时省力地使客户端代码及服务器相适配。在作为游戏服务器时,node.JS的扩展性能也十分理想。

HTML5 2D Canvas手机游戏开发经验谈
基于HTML5技术跨平台混合式应用开发解决方案UniSDP
开发者分享首次制作iPhone游戏的5点收获
Phonegap + HTML5 开发经验小结
阐述游戏项目本土化过程应注意的要点

[ comments ]

相关 [分享 开发 html5] 推荐:

HTML5开发的十大炫酷Web应用分享与推荐

- - HTML5研究小组
HTML5发展地如火如荼,本文将为大家重点分享基于HTML5开发的十大炫酷Web应用,帮助开发人员更好的领悟HTML5的强大之处,关于HTML5的更多信息,请参考专题:HTML5的应用与炫酷体验. Twimbow 是一个基于 HTML5 开发的 Web 应用,用于帮助用户管理他的社交网络,该应用色彩非常多样.

互动中国分享: 21款HTML5 开发框架和开发工具

- - DamnDigital
HTML5 在不同的领域让网页设计更强大的. 快速,安全,响应式,互动和美丽,这些优点吸引更多的 Web 开发人员使用 HTML5. HTML5 有许多新的特性功能,允许开发人员和设计师创建应用程序和网站,带给用户桌面应用程序的速度,性能和体验. 接下来的这些21款优秀的 HTML5 框架和开发工具可以帮助你开发项目更快,更容易.

分享开发HTML5跨平台游戏经验及注意要点

- - 酷勤网-挖经验 [expanded by feedex.net]
我们刚成立Gamezee的时候,行业中许多人都对HTML5抱有成见,就算是一些对其较为乐观的人士也只是说,HTML5将是未来发展潮流,但目前还不够成熟和稳定,无法制作出当前主导社交游戏领域的Ville类型Flash游戏. 当时我们准备使用HTML5制作一款可同时运行于PC端的Facebook,以及所有iOS设备和Android手机平台移动网络的大型等视距游戏.

Adobe、标准和HTML5 -HTML5 and CSS3 开发

- - HTML5研究小组
“[提供商之间的]最激烈的竞争将与 标准密切相关. 大部分聪明人的眼睛将紧盯着技术标准. 但在计算机行业,新标准既可能是无限财富的源泉,也可能导致企业帝国的毁灭. 尽管存在着如此多的风险,标准仍然点燃了无限激情”. —The Economist, 1993年2月23日. 在编写这段有关标准化的话时,计算领域的主要争议是Unix是否是一个可行的操作系统(以及是否为IBM、DEC和HP的更多专用操作系统带来了挑战),以及哪个视窗平台(SUN/AT&T还是IBM/DEC/HP)将成为标准.

12款实用的HTML5干货分享

- - HTML5资源教程
今天我们要来分享12款实用的HTML5应用插件,内容涉及到按钮、表单、进度条、图片等,大家一起来看看这些干货吧. 1、漂亮的CSS3动画进度条 可自定义进度条颜色. 今天我们要再来分享一款很漂亮的CSS3动画进度条,我们可以用它来显示每一项数据的所占的比例,效果很不错. 之前我们也有分享过很多功能强大的CSS3进度条,像 纯CSS3进度条 华丽5色进度条示例、 CSS3 SVG 进度条 Loading 动画 炫酷发光特效都和今天分享的这款比较类似,可以看看.

HTML5历史与开发介绍-HTML5 入门教程

- - BlogJava_首页
HTML的发展历史和HTML5的诞生. HTML 5是近十年来Web开发标准最巨大的飞跃. 和以前的版本不同,HTML 5并非仅仅用来表示Web内容,它的新使命是将Web带入一个成熟的应用平台,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化. (HTML5也有了自己的logo).

HTML5 Canvas开发框架:CasualJS Framework

- Jimmy - ITeye论坛最新讨论
CasualJS Framework是根据ActionScript3?.0的架构开发的一套适用于HTML5 Canvas的面向对象的开发框架. 虽然Canvas提供了强大的绘图功能,但满足不了高级开发的需要. 利用CasualJS的显示对象架构及渲染机制,你可以轻松的在Canvas中操控各种位图、图形、影片剪辑等显示对象.

HTML5游戏开发工具推荐:IMPACT

- iDesperadO - HTML5研究小组
Impact 是一个 JavaScript 游戏引擎,可以为桌面和手机浏览器开发令人惊叹的 HTML5 游戏. 我已经试过了四个其他 JavaScript 游戏引擎,这是我用过的第一个比较有意义的(……)Impact 是市场上第一个真正专业级的 JavaScript 和 HTML5 游戏引擎. ——《Game Developer Magazine》,2011年5月.

HTML5开发:原理与实现

- - Web App Trend
在这篇文章中, W3C 浏览器技术核心标准工作成员 Mike Smith 谈论了 HTML5 到底是什么,并给出了一些对开发人员有用的资源,可以让他们跟进不断演化的标准. 我们正处于Web平台更新换代的过程之中. HTML5通常被用来描述这一过程,尽管更新换代中的技术并不局限于HTML5标准所定义的特性.

HTML5开发工具大盘点

- - CSS库
相信到目前你应该已经对Canvas这一神奇的HTML5新元素有了一定的了解. 在本文中,我们将深入了解画布的功能及特点,学习如何在HTML中利用Canvas绘制图形以及其它类型对象. 正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下:   一、HTML5开发工具之Adobe Dreamweaver.