圣诞刚过,元旦将至。2011年12月29日,天不亮,北京城就悄悄地飘起了小雪。这是入冬以来北京的第二场雪,这场雪时断时续地下了大半天。雪不大,但除了路面和人行道,建筑物和树枝都披上了银装。这银装的京城似乎专门在为一个节日而装扮起来了。

下午,“HTML5年度Home Party暨首届原创游戏大赛颁奖典礼”在京仪大酒店隆重举行。这次活动本着“自由、开放、激情、活力”的宗旨,一方面是为了向业界展示HTML5技术在中国普及应用的成果,另一方面是为在“HTML5 in China暨首届HTML5原创游戏大赛”中入围的HTML5游戏颁奖。来自全国各地的前端攻城师和HTML5游戏爱好者济济一堂,600人的大会议厅座无虚席,共同庆祝这个属于自己的节日。

创新工场创办人李开复博士首先致辞。开复老师上台第一句话,就是向大家提问(大意):你们谁看了我一周多前(12月18日)的微博?我向大家推荐了几款Google用HTML5做的彩蛋。有80%的人都说看到了;20%的人说——咦,怎么什么都没有发生?这说明浏览器对HTML5的支持已经可以让大家放心地使用了。随后的发言主旨一如既往:“HTML5是草根的胜利,未来的互联网是属于草根的。”这不禁让人联想起2011年6月10日下午,“HTML5 in China暨首届HTML5原创游戏大赛启动大会”上开复老师的致辞。所不同的是,这一次他的语气更加坚定、例证更有说服力。他说,苹果、谷歌等大公司都在不遗余力地支持HTML5,作为开放标准,连Adobe都放弃Flash转而支持它了,HTML5即将进入主流。以下是开复老师在微博上的个人发言总结

HTML5即将进入主流:1)HTML5是工程师和草根领跑,2)现在大公司开始投入,包括参会的谷歌,微软,Facebook,甚至Adobe,3)浏览器支持已经很普及,从最近谷歌彩蛋可以看出,4)电子商务,新闻,游戏都开始使用,5)国外预测2013年将有10亿台手机支持,6)明年期待杀手级应用。(HTML5大会发言)

开复老师致辞之后,是HTML5研究小组负责人 @田爱娜 的简短发言。她简单回顾了“HTML5研究小组”自今年2月成立以来组织过的活动,感谢了为推广普及HTML5应用做出努力和贡献的小组成员、布道者、志愿者,以及各大浏览器厂商和活动赞助商——包括图灵公司。HTML5研究小组发展可谓迅猛,为推动HTML5发展做出了贡献。小组的网站(http://www.mhtml5.com/)也有声有色。

接下来,是“入围作品演示、讲解,评委点评”环节,以下是笔者现场记录并结合比赛网站资料整理的优秀作品介绍。

1. 拯救PAPA

游戏简介: 《拯救PAPA》是一款益智类的物理小游戏,玩家需要运用最多3个工具的配合使用,将游戏里的不同PAPA(红黄方块)放到指定的地方,以此获得足够的能量便能通关。游戏总共15个关卡,多个结局,要完成不同结局需要重复进入某些关卡达成不同的过关数据收集,相同的关卡,不同的玩法,十分耐玩。同时,需要运用到键盘(快捷键1、2、3切换不同工具)+鼠标(开启、移动工具)的配合,并且需要玩家简单的思考如何处理障碍、计算得失、适当地做出放弃选择,具备一些动作元素与策略性,可玩性高。

enter image description here

  • 试玩地址:http://game.mhtml5.com/game/works/72Fu9F8ApmrWmmPb/
  • 开发时间:全职编程及美工1个月
  • 主要技术:box2D、SpritSheet
  • 嘉宾点评:界面设计精美。
  • 现场报道:有嘉宾指出box2D这个物理框架可能会有性能问题,讲解人表示开发时对这个框架做了优化,比如删除了一些与游戏无关的功能,这个游戏在PC上能达到30FPS。这是一款由专业公司组织开发的游戏,开发过程大致是先划出线框图,然后编码测试,同时美工设计界面元素,最终将程序与界面组合起来。现在游戏关卡又增加了9关(原来15关),将来会开放关卡设计器,由玩家自己设计。笔者感觉这款游戏与iPad的Isaac Newton's Gravity类似。

2. 开心鬼大作战

游戏简介: 一款以开心鬼为角色的冒险过关游戏,是开心鬼系列游戏之一,由于时间紧迫,本游戏只完成了30%(未添加社交模板)。玩家使用方向键,或者W\A\S\D键来控制开心鬼的行动方向。本游戏使用的类库等所有代码均为自主研发。

enter image description here

  • 试玩地址:http://game.mhtml5.com/game/works/bXxhCzUISwMhGUpx/
  • 开发时间:业余2周
  • 主要技术:Canvas、Audio、LocalStorage
  • 嘉宾点评:(@大城小胖)碰撞检测使用的是像素碰撞(不是几何碰撞、方形碰撞)性能做到这样已经不容易了。关于游戏中的碰撞检测,可以参考这篇文章“http://www.ppzhu.net/2010/07/21/游戏中的碰撞检测/”
  • 现场报道:游戏灵感源于《开心鬼》系列电影,还将考虑继续开发《开心鬼的前世今生》,是一款社交游戏,游戏中的角色在今生可能遇到前世的自己。

3. 兔子的旅行

游戏简介: 奔跑的兔子爱跳跃也爱旅行,爱奔跑更爱速度。背上火箭筒,开始这梦幻之旅吧!!跨平台支持,特别针对iPhone4及iTouch4做了优化:1. 除了touch操作方式之外,游戏还加入了体感支持,使用陀螺仪检测手机的运动,只需转动手机即可操作主角(右转小跳,前转二级跳)。2. 全屏模式支持,提供原生APP的完美体验。现在就添加到桌面,让它成为你下一个心爱的游戏吧!

  • 试玩地址:http://game.mhtml5.com/game/works/2SsnaWQAWc1DwOtD/
  • 开发时间:20小时
  • 主要技术:在iPod Touch和Android(Opera浏览器)中使用陀螺仪检测
  • 嘉宾点评:手机浏览器中的音频怎么处理的?由于iOS为节约流量,默认限制网页下载音频文件。必须通过用户手工操作才能下载。游戏中以用户按键或旋转设备作为触发开关,解除默认限制。难点是9个人组合在一起协同开发。
  • 现场报道:这个游戏的优势在于跨桌面和移动平台。

4. 3D炸弹人

游戏简介:3D动作类型炸弹人,游戏主角使用夜惊混主人翁。方向键:W,S,A,D;放炸弹:空格;游戏运行过程中鼠标点击摄像头:切换视角。

  • 试玩网址:http://game.mhtml5.com/game/works/45a9ntP5aTkDO8Z4/
  • 开发时间:3个月
  • 主要技术:3D Max建模导出动画、WebGL、LocalStorage、Audio、Ajax、缓冲池
  • 嘉宾点评:这个游戏使用的3D引擎是开源呢,还是会贡献给大家(意思完全一样 :))?会开源的(掌声)。另外,注意使用原创音频(背景音乐好像是其他游戏的背景音乐)。
  • 现场报道:开发这个游戏的目标就是测试浏览器对硬件加速的支持,另外也是为了完善已有的3D引擎,为今后开发更健壮的游戏打基础。

5. 射击游戏

游戏简介:这个游戏没有可玩性(作者 @06wj 语),主要是为了展示HTML5所能实现的眩目的效果。

enter image description here

  • 试玩地址:http://game.mhtml5.com/game/works/xfNk8MaEm2DdOgp1/
  • 开发时间:未知
  • 主要技术:Canvas
  • 作者的更多游戏:http://06wjin.sinaapp.com/html5/
  • 现场报道: @06wj 现场的讲解引来阵阵笑声,首先——“这款游戏没有可玩性”,引来哄堂大笑。主持人说这位工程师不善言谈,作者云:“主要没有PPT”(好悲剧…准备的ppt坏了。——作者微博)——又大笑。后来提及在iOS中流畅,在其他设备中非常不流畅——狂笑不止。

作品演示、讲解,评委点评之后的节目欣赏:梦&旋律(dreaming rhythms),使用了先进的体感捕捉技术,将两位舞蹈家(ellaLee、adam)的影像投射到大银幕上(是通过浏览器视频展示的?存疑),很震撼。据节目制作人贾岳杭,本来是想捕捉人物的骨骼,但保险起见没有采用该方案。他还提到了“神经元网络计算”和“可汗学术中文网”。

上半场的内容基本上就结束了。

下半场的时候,主要是在现场和场外跟赵锦江(傲游前端开发组组长)、郑柯(infoQ总编辑)、王潇(百度知识搜索部程序员 @尼奥_)、曹栋清(百度Web前端攻城师 @东木青水)、韩宗年(百度前端?)、张双男(百度前端?)、王劲(射击游戏作者 @06wj)及其他与会人士聊天,错过了“HTML5商业游戏展示与技术讲解”、“日本HTML5游戏市场现状与机会”、“HTML5游戏引擎”和“HTML5打包工具PhoneGAP”等几个应用展示。好在,现场有视频,回头可以在网上看到。

这次会议上又见到了魏子钧(@大城小胖),还合了影。见到了李正林(下半场展示了“HTML5游戏引擎”),认识了朱彤(中合江通公司,@淡定的老狗)、谢子斌(Opera产品市场总监)、赵隽(HTML5研究小组上海分站负责人)、黄蔚瀚(HTML5研究小组高级成员)、亓光宇(微软开发技术资深顾问)、朱兆龙(优视品牌推广部主管),一位女士,人人网市场经理张兰。

另外,我的同事李盼也参会写了“风光无限——我看到的HTML5年度Home Party”,欢迎移步。