整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

公关新思路:别发心灵鸡汤了,来,玩个HTML5手机游戏吧

几天,大家都在玩一款《神经猫》的游戏,又火了,距离脸萌的刷屏还不到一个月。从“疯狂猜图”到“脸萌”,从“flybird”到“特斯拉”和“维多利亚的秘密”,再到“神经猫”,朋友圈的力量开始展现。

作为公关人,如果你还在盯着某某报纸发一个豆腐块新闻,显然很难做出成绩。大叔发现,不少公司的公关品牌团队里已经开始自己招HTML5的开发人员或外聘团队。

一号店此前在朋友圈做的“九宫格”和“索吻游戏”也是找了上海的一个开发团队,总费用接近20万。宝马摇盒子项目的开发费用高达60万,制作方来自一个小团队,10天就超过1100万的参与量。

一位专门做页面手机游戏的创业公司负责人告诉大叔,他之前制作电子贺卡,发现基于HTML5页面的手机游戏在朋友圈十分受欢迎,开始转型专做页面手机游戏,其在世界杯开发的一款射门游戏的PV轻松超过百万。

这位老总介绍,一个游戏的开发费用对外报价至少在10万,而像维多利亚秘密和特斯拉那种翻页浏览的开发费用则低不少,原因是前者有深度交互,而后者只是一个浏览功能,美工更为重要。

神经猫的出现,似乎打破了上面这些所谓的高门槛设置。这一款使用Egret引擎开发的Html5游戏,由南京一名美术和一名程序使用1.5天开发完成。游戏在7月22日下午两点上线,在微信朋友圈迅速引爆,3天时间内游戏访问量超过一个亿。

其实,“神经猫”的创意也是来自抄袭,玩法来自在2007年日本一款名为“黑猫”的游戏,形象来自日本的漫画《全是猫》。为什么会火爆呢?基本符合以上所有应用的特点,好玩简单鼓励分享。

如果你注意自己的朋友圈,也许经常能够看到一些使用Html5制作的小游戏的微信分享,比如此前大热的《2048》《一个都不能死》、《别踩白块儿》等等的各种版。借助微信的快速传播优势,Html5游戏开始显现出另一种生命活力,也开始成为企业植入品牌的另一条路,毕竟大家对心灵鸡汤早就腻烦了,纯文字的内容,更适合微博,而不是朋友圈。

说了这么多,大叔总结一下,利用微信朋友圈进行传播的Html5小游戏正在成为典型现象,目前比较成功的是个人开发者制作的小游戏,利用话题性和病毒性进行传播,这是公关和品牌介入的最好时机。

最后借用一个营销大师的话,大家都喜欢可口可乐,但有多少人会去关注可口可乐的官方微博或微信呢?大叔再加一句,如果可口可乐邀请你玩个小游戏呢?

上月底,一则有关HTML5游戏的的消息震惊业界,蝴蝶互动宣布旗下的《传奇世界》月流水破1500万,成为业内首款千万级别爆款游戏,这无疑给H5游戏行业注入了一针强心剂。从H5诞生以来,对于H5游戏一直唱衰不断,而这又一次把H5游戏推向风口浪尖。

区别于寻常的Flash页游,此游戏采用了H5的Canvas技术,能在PC端和移动端跨平台运行。一直以来,游戏开发都是把前沿技术运用到极致的媒介,H5游戏也不例外,这篇文章会从带你从浅入手,深入H5游戏开发的世界。

1、准备条件

1.1、设计师应该注意的地方

移动端最大的问题在于多种设备,多种平台,多种尺寸,当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的。那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸。现在已经有很多2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计。显然不是。先看一下市面上主流的手机尺寸:

我们在H5开发初期的时候,进行了各种尺寸的设计稿尝试,比如1倍的(320X480)、2倍的(640X1136)、3倍的(1242X2280)像素。最终得出的试验结果是。H5的设计稿一般设计为640X1136即可。即iphone 5s的物理像素(也即是5、5c以及将要发布的5se的物理像素,这一系列手机在iphone的占有率中是最高的), 既满足了retina用户的显示需求,又能降低2G、3G用户加载图片需要的带宽。不过,你若有更高质量的追求,750*1334像素的设计稿也是一个不错的选择。

1.2、开发者应该注意的地方

不管在手机浏览器还是在微信客户端或者腾讯新闻客户端开发,内容大都不能全屏显示的。在底部或者顶部多多少少会有一个状态栏的占位,并不能展示手机的全部尺寸。一些手机浏览器底部会有导航,也有些会在顶部和底部都有占位,比如导航栏、状态栏。顶部的占位会把内容往下挤,底部的占位会把内容遮盖住。所以,我们在进行H5页面内容规划布局设计的时候,不能把重要内容放在太偏下或者太偏上的位置,否则前端布局时可能出现内容显示不全的情况。如果有滑动的交互操作,用户很有可能触发浏览器页面的滑动,导致较差的用户体验。

下图为腾讯新闻客户端和微信内置浏览器的占位高度,在640x1136(iphone5s)上他们的高度是一样的。如果你的页面高度超过1008px,页面就会出现滚动功能。

除去顶部大概130px的像素,底部大概150左右的像素,内容的安全高度大概有850左右,怎么布局页面,具体要看你的项目主要在什么环境上运行。

2、开始动手

2.1、页面流程

当我们在玩一个简单的H5游戏的时候,其流程通常会包含以下步骤:

1、 出现一个载入进度条,载入一些必须的图片、音频、字体等文件;

2、 显示主菜单,提示用户开始游戏;

3、 进入游戏主逻辑。在游戏过程中,当用户胜利或者失败,或是触发了某个按钮或者按键时,游戏会退出,显示结果页面。

4、用户分享游戏或者关闭游戏。

也就是说一个完整的H5游戏,至少有3个页面不可或缺,就是加载页、游戏页、结果页。由此也可以延伸出多个页面,比如开始页,分享页等。

2.2、资源的加载

区别于普通的网页的开发,H5游戏需要大量的视觉听觉素材,并且用户的网络的带宽有限。当你使用了很多的图片、声音、视频以及媒体文件的时候,用户会花费一些时间等待浏览器从服务器下载。 如果在编写游戏时, 你不把它放在心上,不提前加载而直接使用, 等你开发完游戏到真实的用户场景上运行时,你就会碰到问题多多,因为图片和声音文件是异步加载的,你的JavaScript代码会在资源全部加载完成前执行。这常常导致一个红叉的图片在上蹿下跳,声音效果在需要时不播放或者延迟很久冒出来一个声音. 好的开发习惯是创建一个预加载器,延后脚本代码的执行,直到所有的资源都下载完毕为止,这个时候才放出游戏的开始按钮,让用户参与游戏。

我们经常会看到,一些站点在首次进入的时候会先显示一个进度条,等资源加载完毕后再呈现页面,进度条大概像这样:

以图片的加载为例,大致的代码应该是这样:

至于预加载的技术原理,其实也相当简单,就是维护一个资源列表,挨个去加载列表中的资源,然后在每个资源加载完成的回调函数中更新进度即可。

当前加载完的资源个数/pic总数*100,就是加载进度的百分比了。

当然,我们没必要手动写自己的加载器,很多优秀的游戏框架已经帮我们做到了,比如phaser,下面是phaser实现预加载的代码,具体的示例点我,点我

在上述的例子中,我们先创建一个游戏对象,然后往这个游戏对象中添加了两个方法,boot方法执行的时候准备了一张进度条图片,loaderState方法执行的时候,加载游戏所需的图片,并在页面上显示当前的进度。在多关卡的游戏中,加载的设置尤为重要。

3、理解游戏

3.1、认识phaser

对于一款游戏来说,框架就是它的基石。好的框架能是开发者利器,能够帮助开发者做出强有力的,跨浏览器的游戏,能给广大玩家带来更精致的作品。Phaser是一款专门用于移动及桌面的HTML5 2D游戏开发的开源免费框架,内置游戏物理引擎,它也就是传说中100行代码之内搞定Flappy Bird的神器。通过这个框架我们可以很容易地开发桌面和移动的小游戏。接下来我会以这个框架为基础,了解游戏的开发知识。

你可以点击这里获取phaser源码。点我,点我!

Phaser是一个单独的js文件,你可以通过script的标签来使用它。

<script type="text/javascript" src="phaser.js"></script>

3.2、游戏开发的世界观

游戏的界面分三个层次,世界、舞台和摄像机。如果把游戏看做通过手机观看的一部话剧,话剧都是在舞台上进行表演的,舞台的背后是世界。我们看到的画面都是通过现场的摄像机提供给我们的。摄像机有一个视角,这个视角到哪里,我们就能看到哪里的画面,游戏中所有看的见的东西,都是在舞台中的。可以把舞台看成游戏中所有对象最顶层的一个容器,然而舞台下面就是世界了,可以把它看成仅次于舞台的一个顶层容器,世界与舞台不同的地方在于,舞台的大小是你可视元素(对象)的大小,是固定大小的,但是世界确实是可以改变大小的,甚至是无限大的,而且可以随时设置成我们想要的大小,世界默认的大小是舞台的大小,我们看到的画面都是通过摄像机对象得到的,摄像机对象有个视角范围,这个范围跟舞台的大小范围是一样的,如果世界的范围是大于舞台的,那么摄像机就可以在世界中任意移动了,移动到不同的位置,我们就能看到不同的东西。

所有展示的东西,都在舞台上,世界有多大,摄像机就可以走多远,改变世界的大小,摄像机才可以在舞台上移动。世界限制你的范围,舞台给你准备素材,摄像机展示多彩的界面。理解了世界、舞台、摄像机的概念,面向对象的游戏编程就好理解多了。

游戏对象:game

可以通过以下代码,创建一个宽为640,高为1136的canvas标签,canvas的父标签是id=“gamezone”的div,当创建完毕后,生成一个game对象,然后会直接执行state对象中的方法。

var game = new Phaser.Game(

640,1136,Phaser.CANVAS,'gamezone',state

);

舞台:game.stage

世界:game.world

摄像机:game.camera

通过代码,我们可以更好的理解游戏的世界,具体的示例,点我,点我!使用前后左右键可以移动摄像机的视角,点击屏幕可以把视野聚焦到火鸡身上。

3.3、游戏场景的生命周期

场景:game.state

场景指的是游戏中不同的界面或内容,比如游戏菜单界面为一个场景,真正玩游戏的界面为一个场景,不同的关卡又是不同的场景等等。场景能把一个复杂的游戏分成许多小块,各个场景可以独立出来,从而简化游戏的开发。游戏中的场景概念更加广泛,例如一个只是执行某些准备工作的但是没有实质的画面显示出来的state(状态),我们也把它叫做一个场景。一个游戏正是由众多场景所组成的。当我们创建一个游戏对象后,但这只是一个空的游戏,里面什么东西都没有,接下来往游戏里添加场景,并在不同的条件下切换场景,这样,一个个场景就构成了不同的游戏。

第一段代码示例中的

就是添加场景和启动场景。

场景的添加可以随意的,不按顺序,场景的启动也是,满足条件后触发即可,有些场景用户在结束游戏后都看不到也用不到,比如游戏的商店的场景(场景3),但是它确确实实存在过的。

把一个场景单拿出来,查看场景的内部的代码,代码循环:

每一个场景都会拥有这一个到五个方法,preload、create、update、render至少要存在一个,其中,update和render会循环执行,直到下一个场景开始。为什么要这么设计呢?举个例子来说,网速是H5的短板,可以在在游戏启动时只加载主菜单所需的资源,以提高游戏启动的速度。然后在每进入一关时,加载这一关所必须的资源。这样能更好的改善用户体验。

3.4、元素

理解完世界和场景这两大块,算是理解游戏开发的70%了,剩下的就是些细微的东西了,让我们先对它有一些认识,等使用的时候可以再查手册。

元素就是游戏的显示对象,顾名思义就是能够在舞台上显示的对象,也就是我们在游戏中所能看到的东西,我们只有了解了这些显示对象,才能做出一个好游戏。

文字(Text):

我们可以通过文本对象,显示浏览器默认的字体和你通过css加载的字体,它是对canvas文本的的一个包装。

图形(Graphics):

图形对象是对canvas绘图的一个包装,简便快捷的绘制出多边形。

图像(Image):

图像是一个轻量级对象,你可以使用它来显示任何不需要物理引擎或者动画的任务东西。它可以旋转、缩放、剪切,并接收输入事件。它可以完美的用于标识、背景、简单的按钮和其他非精灵类图形。

精灵(Sprite):

精灵是游戏的生命体,几乎可用于所有的可视化物体。基本上,精灵是有一套坐标和渲染在画布上的纹理所组成。精灵也包括了一些额外的属性,例如物理移动、输入处理、事件、动画等等。

瓦片(TileSprite):瓦片精灵是个有着重复纹理的精灵。纹理可以被滚动、缩放,并且自动包裹边缘。请注意,TileSprites 和普通的精灵默认没有输入处理方法和物理引擎刚体,两者都必须要启用后才会具有这些特性。

组:(Group)

组是一个用于显示各种对象(包括 Sprites 和 Images)的容器。我们可以把许多对象放进一个组里,然后就可以使用组提供的方法对这些对象进行一个批量或是整体的操作。比如要使组里的对象同意进行一个位移,只需要对组进行位移就可以了,又比如要对组里的所有对象都进行碰撞检测,那么就只需要对这个组对象进行碰撞检测就行了。

接下来以瓦片精灵为例,讲述各个元素的使用。瓦片精灵类似于css中的背景平铺,具体事例点我,点我,这里所有大背景图,都是有一张小小的瓦片拼接出来的,按上下左右可以移动视角。

3.5、物理引擎

若要使一个游戏更逼真,那一定离不开物理引擎,物理引擎是通过为游戏中的物体赋予真实的物理属性,计算运动、旋转和碰撞之后的效果。就是把现实世界的牛顿定律,应用到虚拟世界当中去。物理引擎是独立于游戏引擎存在的一个库。物理引擎的种类很多,例如box2d,cocos,three等,各有优劣,各有擅长。Phaser就内置了三种物理引擎arcade、ninja、P2(pixi 2d)。P2在这里要单独提一下,P2作为一个JS的2D渲染器,它的目标是提供一个快速的、轻量级而且是兼任所有设备的2D库。对于支持webgl的浏览器,P2将使用webgl绘图,不支持webgl的浏览器就降级至canvas,Pixi渲染器可以使开发者享受到硬件加速,但并不需要了解WebGL。进当然不限于这些引擎,你可以另外添加自己需要的物理引擎。下面是物理引擎的一个实例。

事例中对厨师和火鸡进行碰撞检测,类似于超级玛丽的踩怪物,厨师踩到火鸡是,由于火鸡是刚体,然后就会厨师就会反弹。当关闭火鸡的刚体属性后,厨师就直接从火鸡中穿过去了,与他碰撞的是世界的边界了。具体的示例,点我,点我!

3.6、动画

动画能够使游戏的画面更流畅。动画分两种,一种是补间动画,一种是逐帧动画。

在做动画时,我们只需要在动画的开头和结尾设定好状态,在中间只需要做一些过渡,就能实现图画的运动;插入中间的过渡是由计算机自动运算而得到的。这种动画叫做补间动画。在phaser中,Tween对象就是专门用来实现补间动画的。通过game.add的tween方法得到一个Tween对象,这个方法的参数是需要进行补间动画的物体。然后我们可以使用Tween对象的to方法来实现补间动画。

在例子中,我们设定了一个图片,让它在两个点之间来回走动,具体事例,点我,点我。

如果想实现更复杂一点的动画,那就需要逐帧动画了。

不同于补间动画,逐帧动画的每一帧都需要单独制定,而不像补间动画那样只需要制定开始和结束的那两个关键帧,同时逐帧动画是通过图片来实现的,我们可以给它的每一帧都指定一张图片,然后这些帧连续起来播放,就形成了一个动画。

下图准备了一张含有4帧图片的图片,把这4张图连起来一起循环播放,就成了一个动画。

我们把篮球的序列图加载成一个sprite对象,它有个animations属性,该对象有一个add方法,用来添加动画,还有一个play方法,用来播放动画。这样,一个循环变动的篮球就实现了。具体示例,点我,点我!

4、小技巧

4.1、用ps切完设计图后,原图对于移动端来说偏大,可以使用tinypng(tinypng.com)进行压缩,这里的图片压缩还是相当好用,可以节省用户不少带宽。也可以使用腾讯智图(zhitu.tencent.com)来进行压缩,区别于tinypng,它能为你提供高大上WebP格式的图片。

4.2、在进行页面布局的时候,脱离设备,按照640x1136像素进行布局,然后在页面的meta里加入

进行0.5倍缩放。这时候屏幕能适应320x568宽度的手机屏,对于比较宽的手机,会有些黑边。你也可以通过phaser进行缩放。

scaleMode会更改canvas的大小达到适配的目的。

4.3、如果你想学习phaser,这里有650+的例子和文档,你也可去百度搜一篇Flappy Bird开发的教程,这样的学习会更高效。

5、结尾

当试着用百度搜索了一些“H5游戏开发”之后,发现网上教程很多,什么“45分钟学会H5游戏开发”,“100行代码做个H5游戏”比比皆是,于是就改了主意,从另一角度来阐释游戏开发。H5游戏开发的思路大都是来自于Flash,Flash有一套现成的开发流程,把它的思想理解之后,对于H5游戏开发好处多多。再次把焦点回到市场上来,“今年将是H5游戏的元年!”,这个口号一直喊了5年,市场渐渐疲软。直到2016年第一款千万级别的产品出世,让游戏行业重新认识到原来H5游戏也是可以赚钱的。以现在的眼光来看待H5游戏行业,无论从技术层面还是用户层面来讲,H5游戏的市场都呈现越来越广阔的状态。

刘春鹏

腾讯前端工程师

腾讯网前端开发工程师,腾讯网首页、天天快报WEB版项目技术负责人,致力于HTML5页面开发。

使到今天,赵霏提到5年前艰苦的创业历程都觉得记忆犹新。2010年,赵霏以及有腾讯背景的黄何合伙创立了磊友科技,开始开发HTML5的解析引擎和手机浏览器,同时也成为了移动端HTML5领域第一批掘金者。

但还不到一年,公司的发展便遭遇到瓶颈。“从技术角度审视,研发完全自主内核的浏览器引擎的难度不亚于一个操作系统,从商业角度来看,手机HTML5浏览器也不适合一个创业团队,尤其是在当时的市场环境下,最后苹果系统的Safari浏览器快速发展和演变也同时粉碎了我们的梦想。”赵霏在一篇日志随笔中说道。由于难以追赶Safari迭代的速度,他认为作为创业团队很难在浏览器上面取得成绩,所以决定停止开发HTML5浏览器,将磊友科技的主要精力转向HTML5游戏开发。

图左为赵霏。图右为黄何

■HTML5

HTML5是HTML最新的修订版本,是一种技术标准。它的主要应用场景是浏览器,不过由于浏览器引擎的不断进化,HTML5已经可以和其他应用和技术进行混合并无缝嵌入其中,这让H5能应用在更广的场景中——比如微信。

2010年4月,乔布斯曾亲自公开表态:“移动时代是低功耗设备、触摸屏界面和开放网络标准的时代,Flash已经落伍。”他认为Flash过于封闭,安全性低,耗电量大,而且不支持触摸屏——不管这些批评是出于什么目的——但几乎当时所有人都认为只有HTML5这样的技术标准才会在移动设备和个人电脑上同样取得成功。在获得乔布斯的支持之后,科技巨头们纷纷加入,其中就包括Facebook。在这种气氛中,磊友科技获得了中经合和创新工场的共同投资,并一跃成为游戏行业的新锐。

但HTML5风光的日子没有维持多久。 到了2012年,在几经探索,却看不到成果的状况下,HTML5技术几乎在世界范围内被打入冷宫。Facebook创始人马克·扎克伯格接受采访时甚至公开宣称专注在HTML5上面是他“有史以来犯过的最大的错误”,HTML5无法让Facebook在移动端向用户提供流畅的使用体验。马克·扎克伯格承认“从长期来看,HTML5是最有前途的技术。但是HTML5现在还没有准备好。”

当时的HTML5没有最终标准,其标准制定者WHAT工作组和W3C一度因方向不同而无法达成共识,导致迟迟无法定稿。在遭遇Fcaebook公开放弃后,HTML5的热度迅速冷却下来——雪上加霜的是,有研究机构认为HTML5的兴起将令苹果在2015年时损失30%的利润增长。或许是出于对这种前景的担忧,苹果决定加强对App Store内基于Web技术的应用的管控。

即使在这种惨状下,HTML5仍然保留了一部分拥护者。“从媒体到用户,围观的人太急了。”黄何在Facebook放弃HTML5之后对媒体解释,“一种新技术的成熟需要一个缓慢的过程,从思考、产品、Demo、市场化接受最终到工程师的采用。”

■每年都是HTML5元年

论及中国HTML5游戏的历史,不可避免地要提到腾讯的微信。微信朋友圈功能上线后,除了允许用户发表文字和图片,同时也允许用户将网页分享到朋友圈。这给HTML5技术提供了一个良好的传播环境。微信成功地将部分原生App的流量导入近网页中。也将“朋友圈导流”的思路做到了极致。对于HTML5开发公司而言,微信和朋友圈让他们的产品变得更加有价值。

HTML5游戏的“元年”至少可以追溯到2013年,当时大量媒体使用“HTML5元年”这个令人兴奋的、史诗式的修辞,而磊友科技的HTML5游戏《黎明帝国》甚至比这个词出现得更早。2012年2月,《黎明帝国》投入运营,“《黎明帝国》的推出,不是一颗投向市场的炸弹,它更像是一封檄文,告诉世界:我们可以做到,也许还不够好,但会越来越好。”一篇报导中这样写。

但市场看到的下一款应用HTML5游戏“檄文”却是1年以后的事了。2014年07月,由南京泥巴怪公司使用HTML5技术开发的《围住神经猫》在朋友圈一夜爆红,这个原本只为“拉点用户”而花一天功夫做的HTML5小游戏,两天之内就成为了微信朋友圈最流行的娱乐产品。3日浏览量达到2亿次的《围住神经猫》给了行业恢复信心的资本,探讨HTML5未来的文章开始成倍增长。“HTML5元年”的概念被再次提起,“2014年是HTML5游戏发展元年,继Egret引擎开发的《围住神经猫》走红后,HTML5 游戏被越来越多人所接受和认可。”一篇文章中这样预测,语气中充满坚定的信念:“在未来,HTML5移动游戏将被越来越多的人接受。”

但在《围住神经猫》之后,我们再也没有看到相同影响力的HTML5游戏出现,与此同时,被看做是最佳土壤的微信也以维护用户体验为由限制HTML5游戏在朋友圈传播。对于那些想要依靠微信成功的开发者而言,这让他们的生存更加艰难。虽然此时距离上一个可被堪称“爆发”的现象已经过去了6个月以上,但这仍然不妨碍2015年成为了第三个“HTML5爆发元年”。

■流量变现

对于从业者、游戏厂商、应用厂商和投资机构而言,HTML5游戏最大的前景是“剩余流量的变现”。那些用户量巨大的应用(比如天气、壁纸、日历等应用)迫切需要一种有效的途径将流量转化为收入,而游戏在此之前已经被验证为是流量变现的最优方式。想想看,不用下载APP,没有跳转,也不用忍受等待,用户直接在应用中进行游戏(而且充值),这种美好的前景让每一个从业者如痴如醉。

变现始终是流量主们最大的痛点,一款应用每天有超过千万的打开量,但应用的开发者却无法从这些用户手里得到足够的收益。WIFI万能钥匙副总裁王小书曾在一次访谈中以自己的产品举例,国内像WIFI万能钥匙一样的超级应用有很多,这些应用无一例外的都有着巨大的用户量和富余流量。虽然广告以及增值服务在当前是它们主要的收入来源,但是通过开放接入H5游戏,就可以将富余流量天然的转化到HTML5游戏上;另一方面,工具性应用需要依靠包括HTML5游戏在内的更多服务保持应用的粘性和吸引力,而这些应用未来将成为HTML5游戏最为重要的入口之一。他说:“这是一个双赢生态。”

业界迫切希望推出一个新的模式,新的标准,而站立在潮头的人或公司则可以从中获得最大的好处。有一种思潮认为,正如网页游戏在客户端游戏之外开辟了一个巨大的游戏市场,并让一大批拥有巨大流量的网站获得足够利润一样,HTML5游戏也将在移动端上复现这一成功。对于不同角色的人,这个愿景有不同的光辉之处,“它可以改编目前渠道独大的地位”“它可以让流量快速变现”“它可以让开发者更有效率地进行开发”,每个光辉之处都显得足够耀眼。

也正是这些光辉推动了“HTML5元年”这个词在过去3年内无数次地被提起,被看好。仿佛在为HTML5的第3个元年助威,2015年,整个HTML5产业链条上落子无数。从引擎商、工具商、runtime、流量终端到内容商,所有人(又一次)规划着宏伟的蓝图,在移动互联网的江山上纵横驰骋。“这是个数千亿美元的盘子!”一位受访者对触乐如此表达。

现任磊友科技CEO赵霏也向触乐网表示,随着现在大环境的改变,有更多的公司参与到HTML5的开发中,现在整个行业要比以前更具生机。

但问题是,钱有了,生机也有了,但游戏在哪儿?

■开发者们

2013年4月,赵霏撰写博文,文章中说,磊友曾经希望用公司新游戏的表现告诉其他HTML5游戏开发者们,拥抱HTML5的时机已经成熟。但游戏并没有激起太多反响。他们又尝试推出了两款游戏,但均遭遇失败。磊友科技放弃了HTML5游戏,转向“游戏化营销”。

同样放弃HTML5游戏的还有神奇时代。2013年之前,神奇时代一直致力于开发HTML5和原生技术的混合应用——用95%的HTML5来实现内核功能,包括界面在内的5%的工作则由原生技术完成。2013年8月,神奇时代被天舟文化收购,他们完全放弃了HTML5而转向纯原生开发。

赵霏先生有点怀疑HTML5游戏会复现页游的成功,在采访中他向触乐记者提到了这一点。他认为目前行业内还没有一款此类模式成功的案例,磊友科技曾经尝试过进行联运,但却没有达到预想中的效果。“PC页游的兴起实际上是用户时间的转移——客户端游戏需要用户花费大量时间下载、学习玩法,游戏拥有足够的深度,而网页游戏的兴起实际上标志着用户玩游戏的时间和学习成本下降,从而补足了某些非深度用户群体玩游戏的需求。”他补充“但对于移动游戏而言,原生游戏本来就已经足够休闲和碎片化,即使重度手游的数量逐渐增多,也无法阻碍原生手游本来具有的轻度化特点。除了无需下载以外,很难说HTML5游戏究竟该如何打败原生手游,复制PC页游的成功模式。”

“HTML5游戏的主要优势是免安装,或者是安装便利,对于当前网络环境而言,体积很大的重度HTML5游戏没有太大意义” HTML5资深开发者魏子钧说,他认为HTML5技术未来将主要用于“中度游戏”的开发上,所谓中度游戏,就是休闲玩法加上“中国式成长系统”,目前大多数游戏也是这么做的。

很显然,像《围住神经猫》那样的游戏是不可能达到“流量变现”这一宏伟目标的,它们太小,太轻度,以至于很难挖掘付费点,用户可以轻易地抛弃它们,正如用户轻易地尝试它们一样。所以业界需要重度游戏,需要那种“真正像游戏的游戏”。但至少目前这些游戏还没有出现。触乐记者尝试了目前市面上几款“相对重度”的HTML5游戏”,但结果并不令人兴奋,被称做“新派放置RPG手游”的《狂挂传奇》不光卡顿现象严重,在游戏机制上也没有任何创新;而《摩尔战记》则基本上抄袭了《点杀泰坦》。

那些成功案例也从某个微妙的角度阻碍着重度游戏的出现,几乎所有人都认为HTML5“更适合小游戏”。甚至连白鹭引擎CEO陈书艺先生都觉得这是个问题,“现在很多(HTML5游戏)的开发者不愿意去创新,不愿意去思考。比如说他们就照搬一个市面上流行的游戏过来,不去考虑用户的特性,就去做一些‘微创新’‘微调整’,直接就生搬硬套地也会让用户感觉很不好。”他同时还认为,营销也给玩家一种所有HTML5游戏就是小广告的错觉,这对HTML5游戏的口碑是有害的,造成了一些用户不愿意点击HTML5游戏。

似乎从诞生之日起,HTML5游戏就摆脱不了”廉价、低端、不值钱“的标签。

但问题在于,现在更多的开发者仍然要通过“互动广告”维持生计,他们从大品牌和广告公司手上接下制作HTML5广告的单子,“每个单子大概2000至20000元不等,我甚至还见过作为4A广告套餐的一部分, 卖了10几万的。现在每个月大概有6、7个公司找我(下单子)。”魏子钧说。

正如《七雄争霸》于页游、《围住神经猫》于HTML5小游戏一样,“重度HTML5”游戏也需要一个范例,一个标杆,一次巨大的成功。“你得做个HTML5游戏,比其他人都好,好到足以让腾讯猛推,然后事情就成了。”一个从业者对触乐记者说,开发者们当然想成为这个幸运儿,但他们同时也担心风险。

而资本甚至比开发商更着急。

■资本游戏

投资机构永远是嗅觉最敏锐的那批人,创新工场是已知国内最早涉足HTML5领域的投资机构,早在2013年,创新工场创始人李开复先生就曾预言“随着HTML5技术被越来越多的开发者和厂商大力支持和持续探索,2013年肯定会有一个杀手级的应用出现。”2014年11月, 白鹭引擎获得雷军旗下的顺为资本千万美元融资,这是HTML5领域中已知最大的一笔投资。2015年1月,创新工场又投资了HTML5分发平台“火速轻应用”。该公司CEO赵九州接受媒体采访时表示:“这(资本流入)是HTML5业界的大事,大佬的底层推动将有利于整个行业的发展。我们赶上了一个好时候。”除此此外, HTML5游戏分发平台萝卜游戏、9G游戏也都获得了百万级的投资。腾讯、百度、猎豹、360等互联网行业巨头都在积极布局“自己的”HTML5生态链。

技术当然是HTML5面对的问题,HTML5的标准问题到现在也很难说“被彻底解决”,陈书艺先生曾经从技术角度向触乐记者解释了HTML5游戏至今仍未能大规模推广的另一个原因。他表示在白鹭做runtime之前,曾发现由于各种浏览器的性能不一样,导致用户的体验也不一样。不同浏览器的适配问题也是阻碍玩家甚至是从业者接受HTML5游戏的原因之一。

但从资本层面而言,资本倒逼技术的情况正在出现。从好的角度上来讲,这种叙事从逻辑上是可以说通的,足够多的钱可以招募到足够多的精英,足够多的精英可能解决足够困难的问题,从理论上来讲,所有的问题当然可以得到解决。现在业界的共识是现在的技术水平可以开发足够重度的游戏,而且“几乎没有难度”。

但另一个问题在于,同样的话语我们已经听过太多次,无论是在2013年的HTML5元年,还是2014年的HTML5元年,还是2015年的HTML5元年,我们都能在大量报导中看到从业者信誓旦旦地指出问题已经解决,前景一片大好,时机已经成熟。几乎每一个昨天曾令无数开发者折戟的技术壁垒,在今天都会让整个朋友圈的人刷屏向你保证“已经解决了,就是现在,就是今天!”在当前的浮躁情绪下,如此频繁的宏大叙事未免令人不安。

现在,市场上已经开始宣传“距离下一款千万量级的游戏只有一步之遥”,但问题是从2013年到2015年,虽然游戏的量级由百万到千万,但一步仍然只是一步。我们当然相信HTML5在很大几率上会被广泛采用,但我们不知道那一天是哪一天。我们也相信HTML5技术会催生出优秀的成功游戏,但正如没有人能够预测《围住神经猫》甚至是《Flappy Bird》的成功一样,我们也同样不知道那一款游戏是哪一款。

从2013年到现在,今年已经是第三个HTML5元年了。