HTML5游戏开发实战分享

现在越来越多的人开始尝试使用html5开发游戏应用,随着设备性能的提高,以及硬件API支持度的完善,这些条件让使用html5开发出一个媲美原生体验的游戏应用变得可能,或许你已经是迫不及待了。Web的优势不言而喻,跨平台特性可以大大降低应用的开发成本;知道地址就够了,服务器端更新,这些同时又能降低用户的获取成本。 但目前来说,使用html5技术还是会碰到不少挑战,本文主要分享手机QQ中一款html5游戏的实战经验,我们在开发的过程中,做了一些创新的地方,希望能给大家打开更多思路。

首先让来大家来玩一款游戏。在手机QQ的好友聊天对话框中,按右下角的“+”号键,即会出现“一起玩”的黄色Logo,点击Logo,即可进入“一起玩”平台选择游戏。

一起玩中的两款游戏都是html5应用,下面是开发过程中的一些要点。

技术选型:Canvas 还是 DOM (html+css+js)

看了很多介绍html5游戏开发的文章,大多数案例都是使用Canvas来制作,目前已有不少优秀的游戏引擎了。但我并没有选择Canvas,我们这次需要做的是一个轻量级小游戏,我不想使用那些笨重的框架。并且Canvas也有一些缺点,比如没有实现动画的API,你必须依靠定时器和其他事件来更新Canvas,对文本的渲染支持也是比较差,由于Canvas里面没有dom节点,当某个元素需要执行交互事件(如click)的时候只能是通过坐标来判断。
那如果以传统的DOM页面形式来制作会怎么样呢?事实上我们可以发现传统页面制作的方式有很多优点,比如元素布局使用css控制, 动画可以用css3 的animation与transition,以及屏幕尺寸适配可以使用media query,最关键的是,我们对这些技术非常熟悉。所以“捏泡泡”游戏我最后选择了使用html+css +js来开发。

巧妙地使用css3动画

一款游戏肯定包含非常多的动画元素。在jQuery横行的时代,我们用$.fn.animate函数用得不亦乐乎。css3出来后,我们可以更方便简单地编写动画。Css3动画与js结合使用,基本上能完成游戏中的各种动画。

这个是泡泡爆炸动画UI,每个泡泡爆炸效果共有4帧,使用css3 animation属性我们很容易就制作出一个类似gif的动画,并且还能使用js进行控制。

参考代码:

.bubble s {
    background-image: url(../img/game/bubble.png);
}

.bubble.cleared s {
    opacity: 0;
    -webkit-transition: opacity 50ms 200ms;
    -webkit-animation: blowup 250ms step-end;
}

@-webkit-keyframes blowup {
    30% {background-position:-70px  0}
    60% {background-position:-140px  0}
    100% {background-position:-210px  0}
}

上面的代码,只需要给泡泡元素添加一个类名.cleared, 就能触发爆炸效果。
Css3动画主要有transition与animation两个属性,transition可控制元素变形、缩放、透明度等属性的变化,animation则是一个动画帧的概念,允许创建多个帧组合成一个动画,以达到更精细的动画控制。Css动画的另一个优势是可以与js完美结合,我们完全可以用css编写一个复杂的动画,再使用js非常简单地控制。

一些css动画教程:
Using CSS transitions:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions
Using CSS animations:https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations
这里推荐一个css动画库,包含很多常见的动画效果,供做参考。
Animate.css: http://daneden.github.io/animate.css/

多终端分辨率适配

先看不同设备下的界面自适应。

iPhone4s

Samsung Galaxy Note II

对应移动端应用来说,分配率适配是个逃不过的问题。我不知道传统的手机游戏是如何处理这个问题的,但是我这次很轻松就完成了适配。这是web的一个优势,相对于Canvas来说,这也是css的一个优势。使用百分比布局以及media query,我们很容易就能控制元素位置与可视区域。比如上面的两个画面,在不同的屏幕尺寸下,首先是可视区域不一样,更大的屏幕将看到更宽的内容,其实也只是修饰性内容更完整而已,游戏主要操作区域在所有屏幕下都是保证可见的;其次可以看到中间的弹窗间距以及泡泡排列间距,都很好地适应了不同的屏幕尺寸。在游戏的设计上,我们是以iPhone4s(960*640)尺寸为标准进行设计的。

设备功能API

在普通的浏览器环境中,浏览器对一些设备功能的支持还不够,各个浏览器也存在着很多兼容性问题,我们可能无法做到像原生游戏一样那么好的效果。
手机QQ团队的同学已经考虑到了这个问题,他们开发了一系列的api接口,只要是从手Q中的webview访问,就能调用这些api,比如媒体播放、麦克风、重力感应、震动等很酷的设备功能, 这对于html5应用来说无疑是很大的支持。

性能优化

所有人都在怀疑移动端网页的性能,但实际上并没有想像中的那么糟糕。目前手Q大部分用户已经是4.x安卓版本了,浏览器性能及api支持度都有了很大提高。在“捏泡泡”游戏中,我们也只是对比较常见的低端机型做降级处理,取消了一部分动画效果,不影响整个游戏的体验,其余的优化则跟传统的网页优化相似。
这里特别分享一下我们的图片压缩方式。一般的游戏都会大量地使用png图片,在PS中png图不像jpg,可以选择导出的质量,我们需要使用第三方压缩工具进行压缩处理。在对比了多款图片压缩类库后,我们最终选择了pngquant。这个库对png图压缩效率高的惊人,最高能减少70%多的体积。虽然采用的是有损压缩,但肉眼是无法看出差别的。

离线缓存

离线缓存是html5一个新特性,不仅可以让应用能够离线使用, 对于web应用,提升应用的载入速度对于用户体验来说也是非常重要的。
标准的html5 application cache目前的兼容性并不好,各种坑,目前业务上的使用基本还处在试用阶段。离线缓存是一种浏览器技术,对于hybrid app来说,我们可以自己实现它。
手Q目前已实现一套完整的离线缓存机制,支持离线包版本管理及更新。以“捏泡泡”游戏为例,大致的应用流程如下:
点击进入游戏 – 是否已存在该离线包?否,则第一次直接进入web页面, 后台自动下载离线包,第二次开始直接使用离线包资源;已存在,则直接使用离线包,后台请求服务器离线包版本是否变化,若有新版本则后台自动更新。
所以当你第二次打开游戏的时候,几乎是零等待的。

CSS动画,requestanimationframe, Canvas, 设备功能,离线缓存,这些已经满足开发一款游戏应用的基本要求了,相信会更多html5游戏出现。同样地,native + html5 也将是未来移动端最理想的开发模式。

2 comments on “HTML5游戏开发实战分享

  1. 人生没有完美,幸福没有百分。幸福在生活的点点滴滴中,它是来自心灵深处的一种感觉,常常藏在许多的小事物中,多半时候,那是一种触及心灵深处的悸动,小小的悸动,却泛出甜美的感受,于是乎,幸福的滋味便溢了出来。

发表评论

电子邮件地址不会被公开。 必填项已用*标注