Fi & Google: College Hoops 2011投篮小游戏及背后的大工程


URL:http://google.com/collegebasketball2011

2011年全美高校联盟篮球锦标赛期间,照例Google 必将带来鼎力的支持和精彩的计划。今年也不例外,今年Google特别将全美共14个比赛场地全部以3D建模形式在线上搭建赛场,通过Google Earth地理实景显示各个赛区。进入Google Earth即可全方位的观看赛场情景。另外Google还创作了跟比赛有关的Google Docs模板,以及Chrome Web Store应用,方便用户跟踪赛程赛况。此外,本次Google专门与互动制作公司伙伴合作,欲搭建以HTML5为平台的线上篮球竞技游戏项目。作为与Google合作多次的伙伴,Fantasy Interactive自然是首选之一,担任此次项目的创意执行代理。

资料来源:Fi Work Stories
翻译:Antonia Huang@DamnDigital
编辑:Vivian Peng@DamnDigital(原创内容,转载请注明来自DamnDigital

项目需求:

开发:根据Google提出的要求,搭建一个基于HTML5平台的线上篮球互动游戏

设计:整个项目设计方面最大的挑战在于它不仅仅是一个游戏,需要把互动游戏有机地整合在一个具有计数统计功能的网站平台之中,使整体游戏与线下的赛事一样形成竞技性和统一的规模感。 

HTML5的优势

HTML5对于浏览器来说具有重大的革新意义,它赋予浏览器更多可能性:带来3D实景互动体验。在HTML5平台经验上,由于Fi此前与Google已有多次合作经验,例如《 20 Things and Canvas Defense》等项目,都为本次项目打下了坚实的经验基础。因此,这次Fi对此项目还是具有较高的信心的。

互动整合:

网站将基于 Google Maps 和 Google Earthe这两大谷歌应用相互结合的基础上建立。对于这两个较为复杂的应用来说,完美地整合并嵌入互动游戏,是具备一定的难度的。就我们而言,在难度面前要做的就是具体化,形象化,即为整个项目寻找一个立足点,这次项目里,我们认为整合是重中之重,而整合这些功能元素的关键在于必须保证两个应用功能特色的同时,营造并增加视觉与体验的美感与统一感。

程序开发:延续Fi一贯风格,将Canvas元素进行到底

Canvas元素(*)的应用,是使作品在使用大量图像的同时保证最佳质感的最基本方法之一。尽管,Canvas在功能性实现上有些简单。但是,这一元素无论对于平台的加载压力和工作过程来说都更为简单,并且,只要将其与其他元素进行创新结合,必然有画龙点睛的效果,就好比一个篮球的设计上,使用Canvas元素使得篮球在投射过程中和进框等一系列动态过程都体现绝佳的呈现效果。

玩转人体工程学

这次程序代码编写的过程中,最大的挑战在于需要模拟出球触到球网时的种种动态反应,包括各种情况下所对应的不同动态都需要一一对应实现。比如当球投中篮筐,篮筐应该如何相应呈现动态,当球投在了篮板上,篮筐与球网的反应:当篮球投进篮筐中,或者打中篮板球时,球网会怎样变化等等。最终的结果是要营造出与真实几乎一致的地球重力影响下的视觉动态呈现效果,这需要通过动态模拟和动画效果来完成。

项目过程——设计,优化,再设计,再优化

Fi的每个项目都是以创意为出发点,从设计草图开始, 到头脑风暴, 创意点子生成等等一系列过程中团队成员的全情投入。Fi考虑的不仅仅是客户,还有客户的客户等等。这里你可以看到游戏的第一张草图。在射篮游戏中间,还穿插了两个额外的小游戏。Fi在考虑是否要加入点节奏感。

关于细节

一旦项目的工作范围和创意方向确定下来后,Fi就要考虑:用户怎样能用HTML5玩射篮。角度应该怎样?是否有趣?Fi甚至做了一个“谷歌”为主场的篮球场,考虑是不是用它作为游戏场景,不过后来还是放弃了这个点子,因为看起来总觉得有点“刻意”。

关于设计元素

对项目过程来说,最让人觉得不可思议的就是昨天对大家来说还是个难以逾越的大难题,走到死胡同里出不来,而到了第二天,却莫名其妙地迎刃而解了,真的让人难以相信,但有些问题换个角度看待也许就会变得很简单。比如这些分数计算器和时间的代码,一开始真的让我们的程序员几乎崩溃了!第二天就发现其实解决这个问题非常简单!哈哈

项目后记:

“这个项目给了我们绝佳的实践机会和宝贵的经验,通过这一项目我们亲身体会到了HTML5所具有的广阔的可能性,就这一项目来说,HTML5实现了在不影响浏览器加载速度和体验速度的同时,又能保证最佳的3D动态交互效果。这就是HTML5所具有的魅力。”

——Fi团队

平衡是关键
相比Flash以及各种插件,HTML5平台下的体验速度相对来说仍然是有一定的差距。但是,无独有偶,正是这一点细微的时间差,却给游戏本身带来了更加平衡出彩的节奏感。 此外,加上各种设计元素和互动体验技术,对用户而言,游戏整体的体验感受与众不同!

这只是开始
虽然现在还有很多浏览器还不支持HTML5,但是不可否认,它是推动浏览器和互联网浏览体验的绝佳契机——而不断通过类似于这款游戏这样的实验性项目,一方面能够向世界充分展示HTML5不可抗拒的优势,另一方面也推动了HTML5这一技术本身的更多潜能的被发掘与更多实现。

马上去亲身体验一下吧:Google College Hoops 2011

Client:HTC
Release Date:March, 2011
Technologies:HTML 5


* Canavas:  <Canavas>是一个新的HTML元素,这个元素可以被Script语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做动画。




1 Comment

Have Your Say »

Required

Required, never published

无觅相关文章插件,快速提升流量