幾天,大家都在玩一款《神經(jīng)貓》的游戲,又火了,距離臉萌的刷屏還不到一個月。從“瘋狂猜圖”到“臉萌”,從“flybird”到“特斯拉”和“維多利亞的秘密”,再到“神經(jīng)貓”,朋友圈的力量開始展現(xiàn)。
作為公關(guān)人,如果你還在盯著某某報紙發(fā)一個豆腐塊新聞,顯然很難做出成績。大叔發(fā)現(xiàn),不少公司的公關(guān)品牌團隊里已經(jīng)開始自己招HTML5的開發(fā)人員或外聘團隊。
一號店此前在朋友圈做的“九宮格”和“索吻游戲”也是找了上海的一個開發(fā)團隊,總費用接近20萬。寶馬搖盒子項目的開發(fā)費用高達60萬,制作方來自一個小團隊,10天就超過1100萬的參與量。
一位專門做頁面手機游戲的創(chuàng)業(yè)公司負(fù)責(zé)人告訴大叔,他之前制作電子賀卡,發(fā)現(xiàn)基于HTML5頁面的手機游戲在朋友圈十分受歡迎,開始轉(zhuǎn)型專做頁面手機游戲,其在世界杯開發(fā)的一款射門游戲的PV輕松超過百萬。
這位老總介紹,一個游戲的開發(fā)費用對外報價至少在10萬,而像維多利亞秘密和特斯拉那種翻頁瀏覽的開發(fā)費用則低不少,原因是前者有深度交互,而后者只是一個瀏覽功能,美工更為重要。
神經(jīng)貓的出現(xiàn),似乎打破了上面這些所謂的高門檻設(shè)置。這一款使用Egret引擎開發(fā)的Html5游戲,由南京一名美術(shù)和一名程序使用1.5天開發(fā)完成。游戲在7月22日下午兩點上線,在微信朋友圈迅速引爆,3天時間內(nèi)游戲訪問量超過一個億。
其實,“神經(jīng)貓”的創(chuàng)意也是來自抄襲,玩法來自在2007年日本一款名為“黑貓”的游戲,形象來自日本的漫畫《全是貓》。為什么會火爆呢?基本符合以上所有應(yīng)用的特點,好玩簡單鼓勵分享。
如果你注意自己的朋友圈,也許經(jīng)常能夠看到一些使用Html5制作的小游戲的微信分享,比如此前大熱的《2048》《一個都不能死》、《別踩白塊兒》等等的各種版。借助微信的快速傳播優(yōu)勢,Html5游戲開始顯現(xiàn)出另一種生命活力,也開始成為企業(yè)植入品牌的另一條路,畢竟大家對心靈雞湯早就膩煩了,純文字的內(nèi)容,更適合微博,而不是朋友圈。
說了這么多,大叔總結(jié)一下,利用微信朋友圈進行傳播的Html5小游戲正在成為典型現(xiàn)象,目前比較成功的是個人開發(fā)者制作的小游戲,利用話題性和病毒性進行傳播,這是公關(guān)和品牌介入的最好時機。
最后借用一個營銷大師的話,大家都喜歡可口可樂,但有多少人會去關(guān)注可口可樂的官方微博或微信呢?大叔再加一句,如果可口可樂邀請你玩?zhèn)€小游戲呢?
上月底,一則有關(guān)HTML5游戲的的消息震驚業(yè)界,蝴蝶互動宣布旗下的《傳奇世界》月流水破1500萬,成為業(yè)內(nèi)首款千萬級別爆款游戲,這無疑給H5游戲行業(yè)注入了一針強心劑。從H5誕生以來,對于H5游戲一直唱衰不斷,而這又一次把H5游戲推向風(fēng)口浪尖。
區(qū)別于尋常的Flash頁游,此游戲采用了H5的Canvas技術(shù),能在PC端和移動端跨平臺運行。一直以來,游戲開發(fā)都是把前沿技術(shù)運用到極致的媒介,H5游戲也不例外,這篇文章會從帶你從淺入手,深入H5游戲開發(fā)的世界。
1、準(zhǔn)備條件
1.1、設(shè)計師應(yīng)該注意的地方
移動端最大的問題在于多種設(shè)備,多種平臺,多種尺寸,當(dāng)我們在做手機端H5網(wǎng)頁設(shè)計稿時(當(dāng)然包含微信端的H5網(wǎng)頁設(shè)計),如果沒有做過類似的移動端的設(shè)計,UI設(shè)計師和前端工程師肯定會糾結(jié)的。那么多手機屏幕尺寸,設(shè)計稿應(yīng)該按照哪一個尺寸作為標(biāo)準(zhǔn)尺寸。現(xiàn)在已經(jīng)有很多2K分辨率的手機屏幕了,設(shè)計稿是不是也要把寬高跟著最大分辨率來設(shè)計。顯然不是。先看一下市面上主流的手機尺寸:
我們在H5開發(fā)初期的時候,進行了各種尺寸的設(shè)計稿嘗試,比如1倍的(320X480)、2倍的(640X1136)、3倍的(1242X2280)像素。最終得出的試驗結(jié)果是。H5的設(shè)計稿一般設(shè)計為640X1136即可。即iphone 5s的物理像素(也即是5、5c以及將要發(fā)布的5se的物理像素,這一系列手機在iphone的占有率中是最高的), 既滿足了retina用戶的顯示需求,又能降低2G、3G用戶加載圖片需要的帶寬。不過,你若有更高質(zhì)量的追求,750*1334像素的設(shè)計稿也是一個不錯的選擇。
1.2、開發(fā)者應(yīng)該注意的地方
不管在手機瀏覽器還是在微信客戶端或者騰訊新聞客戶端開發(fā),內(nèi)容大都不能全屏顯示的。在底部或者頂部多多少少會有一個狀態(tài)欄的占位,并不能展示手機的全部尺寸。一些手機瀏覽器底部會有導(dǎo)航,也有些會在頂部和底部都有占位,比如導(dǎo)航欄、狀態(tài)欄。頂部的占位會把內(nèi)容往下擠,底部的占位會把內(nèi)容遮蓋住。所以,我們在進行H5頁面內(nèi)容規(guī)劃布局設(shè)計的時候,不能把重要內(nèi)容放在太偏下或者太偏上的位置,否則前端布局時可能出現(xiàn)內(nèi)容顯示不全的情況。如果有滑動的交互操作,用戶很有可能觸發(fā)瀏覽器頁面的滑動,導(dǎo)致較差的用戶體驗。
下圖為騰訊新聞客戶端和微信內(nèi)置瀏覽器的占位高度,在640x1136(iphone5s)上他們的高度是一樣的。如果你的頁面高度超過1008px,頁面就會出現(xiàn)滾動功能。
除去頂部大概130px的像素,底部大概150左右的像素,內(nèi)容的安全高度大概有850左右,怎么布局頁面,具體要看你的項目主要在什么環(huán)境上運行。
2、開始動手
2.1、頁面流程
當(dāng)我們在玩一個簡單的H5游戲的時候,其流程通常會包含以下步驟:
1、 出現(xiàn)一個載入進度條,載入一些必須的圖片、音頻、字體等文件;
2、 顯示主菜單,提示用戶開始游戲;
3、 進入游戲主邏輯。在游戲過程中,當(dāng)用戶勝利或者失敗,或是觸發(fā)了某個按鈕或者按鍵時,游戲會退出,顯示結(jié)果頁面。
4、用戶分享游戲或者關(guān)閉游戲。
也就是說一個完整的H5游戲,至少有3個頁面不可或缺,就是加載頁、游戲頁、結(jié)果頁。由此也可以延伸出多個頁面,比如開始頁,分享頁等。
2.2、資源的加載
區(qū)別于普通的網(wǎng)頁的開發(fā),H5游戲需要大量的視覺聽覺素材,并且用戶的網(wǎng)絡(luò)的帶寬有限。當(dāng)你使用了很多的圖片、聲音、視頻以及媒體文件的時候,用戶會花費一些時間等待瀏覽器從服務(wù)器下載。 如果在編寫游戲時, 你不把它放在心上,不提前加載而直接使用, 等你開發(fā)完游戲到真實的用戶場景上運行時,你就會碰到問題多多,因為圖片和聲音文件是異步加載的,你的JavaScript代碼會在資源全部加載完成前執(zhí)行。這常常導(dǎo)致一個紅叉的圖片在上躥下跳,聲音效果在需要時不播放或者延遲很久冒出來一個聲音. 好的開發(fā)習(xí)慣是創(chuàng)建一個預(yù)加載器,延后腳本代碼的執(zhí)行,直到所有的資源都下載完畢為止,這個時候才放出游戲的開始按鈕,讓用戶參與游戲。
我們經(jīng)常會看到,一些站點在首次進入的時候會先顯示一個進度條,等資源加載完畢后再呈現(xiàn)頁面,進度條大概像這樣:
以圖片的加載為例,大致的代碼應(yīng)該是這樣:
至于預(yù)加載的技術(shù)原理,其實也相當(dāng)簡單,就是維護一個資源列表,挨個去加載列表中的資源,然后在每個資源加載完成的回調(diào)函數(shù)中更新進度即可。
當(dāng)前加載完的資源個數(shù)/pic總數(shù)*100,就是加載進度的百分比了。
當(dāng)然,我們沒必要手動寫自己的加載器,很多優(yōu)秀的游戲框架已經(jīng)幫我們做到了,比如phaser,下面是phaser實現(xiàn)預(yù)加載的代碼,具體的示例點我,點我
在上述的例子中,我們先創(chuàng)建一個游戲?qū)ο螅缓笸@個游戲?qū)ο笾刑砑恿藘蓚€方法,boot方法執(zhí)行的時候準(zhǔn)備了一張進度條圖片,loaderState方法執(zhí)行的時候,加載游戲所需的圖片,并在頁面上顯示當(dāng)前的進度。在多關(guān)卡的游戲中,加載的設(shè)置尤為重要。
3、理解游戲
3.1、認(rèn)識phaser
對于一款游戲來說,框架就是它的基石。好的框架能是開發(fā)者利器,能夠幫助開發(fā)者做出強有力的,跨瀏覽器的游戲,能給廣大玩家?guī)砀碌淖髌贰haser是一款專門用于移動及桌面的HTML5 2D游戲開發(fā)的開源免費框架,內(nèi)置游戲物理引擎,它也就是傳說中100行代碼之內(nèi)搞定Flappy Bird的神器。通過這個框架我們可以很容易地開發(fā)桌面和移動的小游戲。接下來我會以這個框架為基礎(chǔ),了解游戲的開發(fā)知識。
你可以點擊這里獲取phaser源碼。點我,點我!
Phaser是一個單獨的js文件,你可以通過script的標(biāo)簽來使用它。
<script type="text/javascript" src="phaser.js"></script>
3.2、游戲開發(fā)的世界觀
游戲的界面分三個層次,世界、舞臺和攝像機。如果把游戲看做通過手機觀看的一部話劇,話劇都是在舞臺上進行表演的,舞臺的背后是世界。我們看到的畫面都是通過現(xiàn)場的攝像機提供給我們的。攝像機有一個視角,這個視角到哪里,我們就能看到哪里的畫面,游戲中所有看的見的東西,都是在舞臺中的。可以把舞臺看成游戲中所有對象最頂層的一個容器,然而舞臺下面就是世界了,可以把它看成僅次于舞臺的一個頂層容器,世界與舞臺不同的地方在于,舞臺的大小是你可視元素(對象)的大小,是固定大小的,但是世界確實是可以改變大小的,甚至是無限大的,而且可以隨時設(shè)置成我們想要的大小,世界默認(rèn)的大小是舞臺的大小,我們看到的畫面都是通過攝像機對象得到的,攝像機對象有個視角范圍,這個范圍跟舞臺的大小范圍是一樣的,如果世界的范圍是大于舞臺的,那么攝像機就可以在世界中任意移動了,移動到不同的位置,我們就能看到不同的東西。
所有展示的東西,都在舞臺上,世界有多大,攝像機就可以走多遠,改變世界的大小,攝像機才可以在舞臺上移動。世界限制你的范圍,舞臺給你準(zhǔn)備素材,攝像機展示多彩的界面。理解了世界、舞臺、攝像機的概念,面向?qū)ο蟮挠螒蚓幊叹秃美斫舛嗔恕?/p>
游戲?qū)ο螅篻ame
可以通過以下代碼,創(chuàng)建一個寬為640,高為1136的canvas標(biāo)簽,canvas的父標(biāo)簽是id=“gamezone”的div,當(dāng)創(chuàng)建完畢后,生成一個game對象,然后會直接執(zhí)行state對象中的方法。
var game = new Phaser.Game(
640,1136,Phaser.CANVAS,'gamezone',state
);
舞臺:game.stage
世界:game.world
攝像機:game.camera
通過代碼,我們可以更好的理解游戲的世界,具體的示例,點我,點我!使用前后左右鍵可以移動攝像機的視角,點擊屏幕可以把視野聚焦到火雞身上。
3.3、游戲場景的生命周期
場景:game.state
場景指的是游戲中不同的界面或內(nèi)容,比如游戲菜單界面為一個場景,真正玩游戲的界面為一個場景,不同的關(guān)卡又是不同的場景等等。場景能把一個復(fù)雜的游戲分成許多小塊,各個場景可以獨立出來,從而簡化游戲的開發(fā)。游戲中的場景概念更加廣泛,例如一個只是執(zhí)行某些準(zhǔn)備工作的但是沒有實質(zhì)的畫面顯示出來的state(狀態(tài)),我們也把它叫做一個場景。一個游戲正是由眾多場景所組成的。當(dāng)我們創(chuàng)建一個游戲?qū)ο蠛螅@只是一個空的游戲,里面什么東西都沒有,接下來往游戲里添加場景,并在不同的條件下切換場景,這樣,一個個場景就構(gòu)成了不同的游戲。
第一段代碼示例中的
就是添加場景和啟動場景。
場景的添加可以隨意的,不按順序,場景的啟動也是,滿足條件后觸發(fā)即可,有些場景用戶在結(jié)束游戲后都看不到也用不到,比如游戲的商店的場景(場景3),但是它確確實實存在過的。
把一個場景單拿出來,查看場景的內(nèi)部的代碼,代碼循環(huán):
每一個場景都會擁有這一個到五個方法,preload、create、update、render至少要存在一個,其中,update和render會循環(huán)執(zhí)行,直到下一個場景開始。為什么要這么設(shè)計呢?舉個例子來說,網(wǎng)速是H5的短板,可以在在游戲啟動時只加載主菜單所需的資源,以提高游戲啟動的速度。然后在每進入一關(guān)時,加載這一關(guān)所必須的資源。這樣能更好的改善用戶體驗。
3.4、元素
理解完世界和場景這兩大塊,算是理解游戲開發(fā)的70%了,剩下的就是些細微的東西了,讓我們先對它有一些認(rèn)識,等使用的時候可以再查手冊。
元素就是游戲的顯示對象,顧名思義就是能夠在舞臺上顯示的對象,也就是我們在游戲中所能看到的東西,我們只有了解了這些顯示對象,才能做出一個好游戲。
文字(Text):
我們可以通過文本對象,顯示瀏覽器默認(rèn)的字體和你通過css加載的字體,它是對canvas文本的的一個包裝。
圖形(Graphics):
圖形對象是對canvas繪圖的一個包裝,簡便快捷的繪制出多邊形。
圖像(Image):
圖像是一個輕量級對象,你可以使用它來顯示任何不需要物理引擎或者動畫的任務(wù)東西。它可以旋轉(zhuǎn)、縮放、剪切,并接收輸入事件。它可以完美的用于標(biāo)識、背景、簡單的按鈕和其他非精靈類圖形。
精靈(Sprite):
精靈是游戲的生命體,幾乎可用于所有的可視化物體。基本上,精靈是有一套坐標(biāo)和渲染在畫布上的紋理所組成。精靈也包括了一些額外的屬性,例如物理移動、輸入處理、事件、動畫等等。
瓦片(TileSprite):瓦片精靈是個有著重復(fù)紋理的精靈。紋理可以被滾動、縮放,并且自動包裹邊緣。請注意,TileSprites 和普通的精靈默認(rèn)沒有輸入處理方法和物理引擎剛體,兩者都必須要啟用后才會具有這些特性。
組:(Group)
組是一個用于顯示各種對象(包括 Sprites 和 Images)的容器。我們可以把許多對象放進一個組里,然后就可以使用組提供的方法對這些對象進行一個批量或是整體的操作。比如要使組里的對象同意進行一個位移,只需要對組進行位移就可以了,又比如要對組里的所有對象都進行碰撞檢測,那么就只需要對這個組對象進行碰撞檢測就行了。
接下來以瓦片精靈為例,講述各個元素的使用。瓦片精靈類似于css中的背景平鋪,具體事例點我,點我,這里所有大背景圖,都是有一張小小的瓦片拼接出來的,按上下左右可以移動視角。
3.5、物理引擎
若要使一個游戲更逼真,那一定離不開物理引擎,物理引擎是通過為游戲中的物體賦予真實的物理屬性,計算運動、旋轉(zhuǎn)和碰撞之后的效果。就是把現(xiàn)實世界的牛頓定律,應(yīng)用到虛擬世界當(dāng)中去。物理引擎是獨立于游戲引擎存在的一個庫。物理引擎的種類很多,例如box2d,cocos,three等,各有優(yōu)劣,各有擅長。Phaser就內(nèi)置了三種物理引擎arcade、ninja、P2(pixi 2d)。P2在這里要單獨提一下,P2作為一個JS的2D渲染器,它的目標(biāo)是提供一個快速的、輕量級而且是兼任所有設(shè)備的2D庫。對于支持webgl的瀏覽器,P2將使用webgl繪圖,不支持webgl的瀏覽器就降級至canvas,Pixi渲染器可以使開發(fā)者享受到硬件加速,但并不需要了解WebGL。進當(dāng)然不限于這些引擎,你可以另外添加自己需要的物理引擎。下面是物理引擎的一個實例。
事例中對廚師和火雞進行碰撞檢測,類似于超級瑪麗的踩怪物,廚師踩到火雞是,由于火雞是剛體,然后就會廚師就會反彈。當(dāng)關(guān)閉火雞的剛體屬性后,廚師就直接從火雞中穿過去了,與他碰撞的是世界的邊界了。具體的示例,點我,點我!
3.6、動畫
動畫能夠使游戲的畫面更流暢。動畫分兩種,一種是補間動畫,一種是逐幀動畫。
在做動畫時,我們只需要在動畫的開頭和結(jié)尾設(shè)定好狀態(tài),在中間只需要做一些過渡,就能實現(xiàn)圖畫的運動;插入中間的過渡是由計算機自動運算而得到的。這種動畫叫做補間動畫。在phaser中,Tween對象就是專門用來實現(xiàn)補間動畫的。通過game.add的tween方法得到一個Tween對象,這個方法的參數(shù)是需要進行補間動畫的物體。然后我們可以使用Tween對象的to方法來實現(xiàn)補間動畫。
在例子中,我們設(shè)定了一個圖片,讓它在兩個點之間來回走動,具體事例,點我,點我。
如果想實現(xiàn)更復(fù)雜一點的動畫,那就需要逐幀動畫了。
不同于補間動畫,逐幀動畫的每一幀都需要單獨制定,而不像補間動畫那樣只需要制定開始和結(jié)束的那兩個關(guān)鍵幀,同時逐幀動畫是通過圖片來實現(xiàn)的,我們可以給它的每一幀都指定一張圖片,然后這些幀連續(xù)起來播放,就形成了一個動畫。
下圖準(zhǔn)備了一張含有4幀圖片的圖片,把這4張圖連起來一起循環(huán)播放,就成了一個動畫。
我們把籃球的序列圖加載成一個sprite對象,它有個animations屬性,該對象有一個add方法,用來添加動畫,還有一個play方法,用來播放動畫。這樣,一個循環(huán)變動的籃球就實現(xiàn)了。具體示例,點我,點我!
4、小技巧
4.1、用ps切完設(shè)計圖后,原圖對于移動端來說偏大,可以使用tinypng(tinypng.com)進行壓縮,這里的圖片壓縮還是相當(dāng)好用,可以節(jié)省用戶不少帶寬。也可以使用騰訊智圖(zhitu.tencent.com)來進行壓縮,區(qū)別于tinypng,它能為你提供高大上WebP格式的圖片。
4.2、在進行頁面布局的時候,脫離設(shè)備,按照640x1136像素進行布局,然后在頁面的meta里加入
進行0.5倍縮放。這時候屏幕能適應(yīng)320x568寬度的手機屏,對于比較寬的手機,會有些黑邊。你也可以通過phaser進行縮放。
scaleMode會更改canvas的大小達到適配的目的。
4.3、如果你想學(xué)習(xí)phaser,這里有650+的例子和文檔,你也可去百度搜一篇Flappy Bird開發(fā)的教程,這樣的學(xué)習(xí)會更高效。
5、結(jié)尾
當(dāng)試著用百度搜索了一些“H5游戲開發(fā)”之后,發(fā)現(xiàn)網(wǎng)上教程很多,什么“45分鐘學(xué)會H5游戲開發(fā)”,“100行代碼做個H5游戲”比比皆是,于是就改了主意,從另一角度來闡釋游戲開發(fā)。H5游戲開發(fā)的思路大都是來自于Flash,F(xiàn)lash有一套現(xiàn)成的開發(fā)流程,把它的思想理解之后,對于H5游戲開發(fā)好處多多。再次把焦點回到市場上來,“今年將是H5游戲的元年!”,這個口號一直喊了5年,市場漸漸疲軟。直到2016年第一款千萬級別的產(chǎn)品出世,讓游戲行業(yè)重新認(rèn)識到原來H5游戲也是可以賺錢的。以現(xiàn)在的眼光來看待H5游戲行業(yè),無論從技術(shù)層面還是用戶層面來講,H5游戲的市場都呈現(xiàn)越來越廣闊的狀態(tài)。
劉春鵬
騰訊前端工程師
騰訊網(wǎng)前端開發(fā)工程師,騰訊網(wǎng)首頁、天天快報WEB版項目技術(shù)負(fù)責(zé)人,致力于HTML5頁面開發(fā)。
使到今天,趙霏提到5年前艱苦的創(chuàng)業(yè)歷程都覺得記憶猶新。2010年,趙霏以及有騰訊背景的黃何合伙創(chuàng)立了磊友科技,開始開發(fā)HTML5的解析引擎和手機瀏覽器,同時也成為了移動端HTML5領(lǐng)域第一批掘金者。
但還不到一年,公司的發(fā)展便遭遇到瓶頸。“從技術(shù)角度審視,研發(fā)完全自主內(nèi)核的瀏覽器引擎的難度不亞于一個操作系統(tǒng),從商業(yè)角度來看,手機HTML5瀏覽器也不適合一個創(chuàng)業(yè)團隊,尤其是在當(dāng)時的市場環(huán)境下,最后蘋果系統(tǒng)的Safari瀏覽器快速發(fā)展和演變也同時粉碎了我們的夢想。”趙霏在一篇日志隨筆中說道。由于難以追趕Safari迭代的速度,他認(rèn)為作為創(chuàng)業(yè)團隊很難在瀏覽器上面取得成績,所以決定停止開發(fā)HTML5瀏覽器,將磊友科技的主要精力轉(zhuǎn)向HTML5游戲開發(fā)。
圖左為趙霏。圖右為黃何
■HTML5
HTML5是HTML最新的修訂版本,是一種技術(shù)標(biāo)準(zhǔn)。它的主要應(yīng)用場景是瀏覽器,不過由于瀏覽器引擎的不斷進化,HTML5已經(jīng)可以和其他應(yīng)用和技術(shù)進行混合并無縫嵌入其中,這讓H5能應(yīng)用在更廣的場景中——比如微信。
2010年4月,喬布斯曾親自公開表態(tài):“移動時代是低功耗設(shè)備、觸摸屏界面和開放網(wǎng)絡(luò)標(biāo)準(zhǔn)的時代,F(xiàn)lash已經(jīng)落伍。”他認(rèn)為Flash過于封閉,安全性低,耗電量大,而且不支持觸摸屏——不管這些批評是出于什么目的——但幾乎當(dāng)時所有人都認(rèn)為只有HTML5這樣的技術(shù)標(biāo)準(zhǔn)才會在移動設(shè)備和個人電腦上同樣取得成功。在獲得喬布斯的支持之后,科技巨頭們紛紛加入,其中就包括Facebook。在這種氣氛中,磊友科技獲得了中經(jīng)合和創(chuàng)新工場的共同投資,并一躍成為游戲行業(yè)的新銳。
但HTML5風(fēng)光的日子沒有維持多久。 到了2012年,在幾經(jīng)探索,卻看不到成果的狀況下,HTML5技術(shù)幾乎在世界范圍內(nèi)被打入冷宮。Facebook創(chuàng)始人馬克·扎克伯格接受采訪時甚至公開宣稱專注在HTML5上面是他“有史以來犯過的最大的錯誤”,HTML5無法讓Facebook在移動端向用戶提供流暢的使用體驗。馬克·扎克伯格承認(rèn)“從長期來看,HTML5是最有前途的技術(shù)。但是HTML5現(xiàn)在還沒有準(zhǔn)備好。”
當(dāng)時的HTML5沒有最終標(biāo)準(zhǔn),其標(biāo)準(zhǔn)制定者WHAT工作組和W3C一度因方向不同而無法達成共識,導(dǎo)致遲遲無法定稿。在遭遇Fcaebook公開放棄后,HTML5的熱度迅速冷卻下來——雪上加霜的是,有研究機構(gòu)認(rèn)為HTML5的興起將令蘋果在2015年時損失30%的利潤增長。或許是出于對這種前景的擔(dān)憂,蘋果決定加強對App Store內(nèi)基于Web技術(shù)的應(yīng)用的管控。
即使在這種慘狀下,HTML5仍然保留了一部分擁護者。“從媒體到用戶,圍觀的人太急了。”黃何在Facebook放棄HTML5之后對媒體解釋,“一種新技術(shù)的成熟需要一個緩慢的過程,從思考、產(chǎn)品、Demo、市場化接受最終到工程師的采用。”
■每年都是HTML5元年
論及中國HTML5游戲的歷史,不可避免地要提到騰訊的微信。微信朋友圈功能上線后,除了允許用戶發(fā)表文字和圖片,同時也允許用戶將網(wǎng)頁分享到朋友圈。這給HTML5技術(shù)提供了一個良好的傳播環(huán)境。微信成功地將部分原生App的流量導(dǎo)入近網(wǎng)頁中。也將“朋友圈導(dǎo)流”的思路做到了極致。對于HTML5開發(fā)公司而言,微信和朋友圈讓他們的產(chǎn)品變得更加有價值。
HTML5游戲的“元年”至少可以追溯到2013年,當(dāng)時大量媒體使用“HTML5元年”這個令人興奮的、史詩式的修辭,而磊友科技的HTML5游戲《黎明帝國》甚至比這個詞出現(xiàn)得更早。2012年2月,《黎明帝國》投入運營,“《黎明帝國》的推出,不是一顆投向市場的炸彈,它更像是一封檄文,告訴世界:我們可以做到,也許還不夠好,但會越來越好。”一篇報導(dǎo)中這樣寫。
但市場看到的下一款應(yīng)用HTML5游戲“檄文”卻是1年以后的事了。2014年07月,由南京泥巴怪公司使用HTML5技術(shù)開發(fā)的《圍住神經(jīng)貓》在朋友圈一夜爆紅,這個原本只為“拉點用戶”而花一天功夫做的HTML5小游戲,兩天之內(nèi)就成為了微信朋友圈最流行的娛樂產(chǎn)品。3日瀏覽量達到2億次的《圍住神經(jīng)貓》給了行業(yè)恢復(fù)信心的資本,探討HTML5未來的文章開始成倍增長。“HTML5元年”的概念被再次提起,“2014年是HTML5游戲發(fā)展元年,繼Egret引擎開發(fā)的《圍住神經(jīng)貓》走紅后,HTML5 游戲被越來越多人所接受和認(rèn)可。”一篇文章中這樣預(yù)測,語氣中充滿堅定的信念:“在未來,HTML5移動游戲?qū)⒈辉絹碓蕉嗟娜私邮堋!?/p>
但在《圍住神經(jīng)貓》之后,我們再也沒有看到相同影響力的HTML5游戲出現(xiàn),與此同時,被看做是最佳土壤的微信也以維護用戶體驗為由限制HTML5游戲在朋友圈傳播。對于那些想要依靠微信成功的開發(fā)者而言,這讓他們的生存更加艱難。雖然此時距離上一個可被堪稱“爆發(fā)”的現(xiàn)象已經(jīng)過去了6個月以上,但這仍然不妨礙2015年成為了第三個“HTML5爆發(fā)元年”。
■流量變現(xiàn)
對于從業(yè)者、游戲廠商、應(yīng)用廠商和投資機構(gòu)而言,HTML5游戲最大的前景是“剩余流量的變現(xiàn)”。那些用戶量巨大的應(yīng)用(比如天氣、壁紙、日歷等應(yīng)用)迫切需要一種有效的途徑將流量轉(zhuǎn)化為收入,而游戲在此之前已經(jīng)被驗證為是流量變現(xiàn)的最優(yōu)方式。想想看,不用下載APP,沒有跳轉(zhuǎn),也不用忍受等待,用戶直接在應(yīng)用中進行游戲(而且充值),這種美好的前景讓每一個從業(yè)者如癡如醉。
變現(xiàn)始終是流量主們最大的痛點,一款應(yīng)用每天有超過千萬的打開量,但應(yīng)用的開發(fā)者卻無法從這些用戶手里得到足夠的收益。WIFI萬能鑰匙副總裁王小書曾在一次訪談中以自己的產(chǎn)品舉例,國內(nèi)像WIFI萬能鑰匙一樣的超級應(yīng)用有很多,這些應(yīng)用無一例外的都有著巨大的用戶量和富余流量。雖然廣告以及增值服務(wù)在當(dāng)前是它們主要的收入來源,但是通過開放接入H5游戲,就可以將富余流量天然的轉(zhuǎn)化到HTML5游戲上;另一方面,工具性應(yīng)用需要依靠包括HTML5游戲在內(nèi)的更多服務(wù)保持應(yīng)用的粘性和吸引力,而這些應(yīng)用未來將成為HTML5游戲最為重要的入口之一。他說:“這是一個雙贏生態(tài)。”
業(yè)界迫切希望推出一個新的模式,新的標(biāo)準(zhǔn),而站立在潮頭的人或公司則可以從中獲得最大的好處。有一種思潮認(rèn)為,正如網(wǎng)頁游戲在客戶端游戲之外開辟了一個巨大的游戲市場,并讓一大批擁有巨大流量的網(wǎng)站獲得足夠利潤一樣,HTML5游戲也將在移動端上復(fù)現(xiàn)這一成功。對于不同角色的人,這個愿景有不同的光輝之處,“它可以改編目前渠道獨大的地位”“它可以讓流量快速變現(xiàn)”“它可以讓開發(fā)者更有效率地進行開發(fā)”,每個光輝之處都顯得足夠耀眼。
也正是這些光輝推動了“HTML5元年”這個詞在過去3年內(nèi)無數(shù)次地被提起,被看好。仿佛在為HTML5的第3個元年助威,2015年,整個HTML5產(chǎn)業(yè)鏈條上落子無數(shù)。從引擎商、工具商、runtime、流量終端到內(nèi)容商,所有人(又一次)規(guī)劃著宏偉的藍圖,在移動互聯(lián)網(wǎng)的江山上縱橫馳騁。“這是個數(shù)千億美元的盤子!”一位受訪者對觸樂如此表達。
現(xiàn)任磊友科技CEO趙霏也向觸樂網(wǎng)表示,隨著現(xiàn)在大環(huán)境的改變,有更多的公司參與到HTML5的開發(fā)中,現(xiàn)在整個行業(yè)要比以前更具生機。
但問題是,錢有了,生機也有了,但游戲在哪兒?
■開發(fā)者們
2013年4月,趙霏撰寫博文,文章中說,磊友曾經(jīng)希望用公司新游戲的表現(xiàn)告訴其他HTML5游戲開發(fā)者們,擁抱HTML5的時機已經(jīng)成熟。但游戲并沒有激起太多反響。他們又嘗試推出了兩款游戲,但均遭遇失敗。磊友科技放棄了HTML5游戲,轉(zhuǎn)向“游戲化營銷”。
同樣放棄HTML5游戲的還有神奇時代。2013年之前,神奇時代一直致力于開發(fā)HTML5和原生技術(shù)的混合應(yīng)用——用95%的HTML5來實現(xiàn)內(nèi)核功能,包括界面在內(nèi)的5%的工作則由原生技術(shù)完成。2013年8月,神奇時代被天舟文化收購,他們完全放棄了HTML5而轉(zhuǎn)向純原生開發(fā)。
趙霏先生有點懷疑HTML5游戲會復(fù)現(xiàn)頁游的成功,在采訪中他向觸樂記者提到了這一點。他認(rèn)為目前行業(yè)內(nèi)還沒有一款此類模式成功的案例,磊友科技曾經(jīng)嘗試過進行聯(lián)運,但卻沒有達到預(yù)想中的效果。“PC頁游的興起實際上是用戶時間的轉(zhuǎn)移——客戶端游戲需要用戶花費大量時間下載、學(xué)習(xí)玩法,游戲擁有足夠的深度,而網(wǎng)頁游戲的興起實際上標(biāo)志著用戶玩游戲的時間和學(xué)習(xí)成本下降,從而補足了某些非深度用戶群體玩游戲的需求。”他補充“但對于移動游戲而言,原生游戲本來就已經(jīng)足夠休閑和碎片化,即使重度手游的數(shù)量逐漸增多,也無法阻礙原生手游本來具有的輕度化特點。除了無需下載以外,很難說HTML5游戲究竟該如何打敗原生手游,復(fù)制PC頁游的成功模式。”
“HTML5游戲的主要優(yōu)勢是免安裝,或者是安裝便利,對于當(dāng)前網(wǎng)絡(luò)環(huán)境而言,體積很大的重度HTML5游戲沒有太大意義” HTML5資深開發(fā)者魏子鈞說,他認(rèn)為HTML5技術(shù)未來將主要用于“中度游戲”的開發(fā)上,所謂中度游戲,就是休閑玩法加上“中國式成長系統(tǒng)”,目前大多數(shù)游戲也是這么做的。
很顯然,像《圍住神經(jīng)貓》那樣的游戲是不可能達到“流量變現(xiàn)”這一宏偉目標(biāo)的,它們太小,太輕度,以至于很難挖掘付費點,用戶可以輕易地拋棄它們,正如用戶輕易地嘗試它們一樣。所以業(yè)界需要重度游戲,需要那種“真正像游戲的游戲”。但至少目前這些游戲還沒有出現(xiàn)。觸樂記者嘗試了目前市面上幾款“相對重度”的HTML5游戲”,但結(jié)果并不令人興奮,被稱做“新派放置RPG手游”的《狂掛傳奇》不光卡頓現(xiàn)象嚴(yán)重,在游戲機制上也沒有任何創(chuàng)新;而《摩爾戰(zhàn)記》則基本上抄襲了《點殺泰坦》。
那些成功案例也從某個微妙的角度阻礙著重度游戲的出現(xiàn),幾乎所有人都認(rèn)為HTML5“更適合小游戲”。甚至連白鷺引擎CEO陳書藝先生都覺得這是個問題,“現(xiàn)在很多(HTML5游戲)的開發(fā)者不愿意去創(chuàng)新,不愿意去思考。比如說他們就照搬一個市面上流行的游戲過來,不去考慮用戶的特性,就去做一些‘微創(chuàng)新’‘微調(diào)整’,直接就生搬硬套地也會讓用戶感覺很不好。”他同時還認(rèn)為,營銷也給玩家一種所有HTML5游戲就是小廣告的錯覺,這對HTML5游戲的口碑是有害的,造成了一些用戶不愿意點擊HTML5游戲。
似乎從誕生之日起,HTML5游戲就擺脫不了”廉價、低端、不值錢“的標(biāo)簽。
但問題在于,現(xiàn)在更多的開發(fā)者仍然要通過“互動廣告”維持生計,他們從大品牌和廣告公司手上接下制作HTML5廣告的單子,“每個單子大概2000至20000元不等,我甚至還見過作為4A廣告套餐的一部分, 賣了10幾萬的。現(xiàn)在每個月大概有6、7個公司找我(下單子)。”魏子鈞說。
正如《七雄爭霸》于頁游、《圍住神經(jīng)貓》于HTML5小游戲一樣,“重度HTML5”游戲也需要一個范例,一個標(biāo)桿,一次巨大的成功。“你得做個HTML5游戲,比其他人都好,好到足以讓騰訊猛推,然后事情就成了。”一個從業(yè)者對觸樂記者說,開發(fā)者們當(dāng)然想成為這個幸運兒,但他們同時也擔(dān)心風(fēng)險。
而資本甚至比開發(fā)商更著急。
■資本游戲
投資機構(gòu)永遠是嗅覺最敏銳的那批人,創(chuàng)新工場是已知國內(nèi)最早涉足HTML5領(lǐng)域的投資機構(gòu),早在2013年,創(chuàng)新工場創(chuàng)始人李開復(fù)先生就曾預(yù)言“隨著HTML5技術(shù)被越來越多的開發(fā)者和廠商大力支持和持續(xù)探索,2013年肯定會有一個殺手級的應(yīng)用出現(xiàn)。”2014年11月, 白鷺引擎獲得雷軍旗下的順為資本千萬美元融資,這是HTML5領(lǐng)域中已知最大的一筆投資。2015年1月,創(chuàng)新工場又投資了HTML5分發(fā)平臺“火速輕應(yīng)用”。該公司CEO趙九州接受媒體采訪時表示:“這(資本流入)是HTML5業(yè)界的大事,大佬的底層推動將有利于整個行業(yè)的發(fā)展。我們趕上了一個好時候。”除此此外, HTML5游戲分發(fā)平臺蘿卜游戲、9G游戲也都獲得了百萬級的投資。騰訊、百度、獵豹、360等互聯(lián)網(wǎng)行業(yè)巨頭都在積極布局“自己的”HTML5生態(tài)鏈。
技術(shù)當(dāng)然是HTML5面對的問題,HTML5的標(biāo)準(zhǔn)問題到現(xiàn)在也很難說“被徹底解決”,陳書藝先生曾經(jīng)從技術(shù)角度向觸樂記者解釋了HTML5游戲至今仍未能大規(guī)模推廣的另一個原因。他表示在白鷺做runtime之前,曾發(fā)現(xiàn)由于各種瀏覽器的性能不一樣,導(dǎo)致用戶的體驗也不一樣。不同瀏覽器的適配問題也是阻礙玩家甚至是從業(yè)者接受HTML5游戲的原因之一。
但從資本層面而言,資本倒逼技術(shù)的情況正在出現(xiàn)。從好的角度上來講,這種敘事從邏輯上是可以說通的,足夠多的錢可以招募到足夠多的精英,足夠多的精英可能解決足夠困難的問題,從理論上來講,所有的問題當(dāng)然可以得到解決。現(xiàn)在業(yè)界的共識是現(xiàn)在的技術(shù)水平可以開發(fā)足夠重度的游戲,而且“幾乎沒有難度”。
但另一個問題在于,同樣的話語我們已經(jīng)聽過太多次,無論是在2013年的HTML5元年,還是2014年的HTML5元年,還是2015年的HTML5元年,我們都能在大量報導(dǎo)中看到從業(yè)者信誓旦旦地指出問題已經(jīng)解決,前景一片大好,時機已經(jīng)成熟。幾乎每一個昨天曾令無數(shù)開發(fā)者折戟的技術(shù)壁壘,在今天都會讓整個朋友圈的人刷屏向你保證“已經(jīng)解決了,就是現(xiàn)在,就是今天!”在當(dāng)前的浮躁情緒下,如此頻繁的宏大敘事未免令人不安。
現(xiàn)在,市場上已經(jīng)開始宣傳“距離下一款千萬量級的游戲只有一步之遙”,但問題是從2013年到2015年,雖然游戲的量級由百萬到千萬,但一步仍然只是一步。我們當(dāng)然相信HTML5在很大幾率上會被廣泛采用,但我們不知道那一天是哪一天。我們也相信HTML5技術(shù)會催生出優(yōu)秀的成功游戲,但正如沒有人能夠預(yù)測《圍住神經(jīng)貓》甚至是《Flappy Bird》的成功一樣,我們也同樣不知道那一款游戲是哪一款。
從2013年到現(xiàn)在,今年已經(jīng)是第三個HTML5元年了。
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。