H5游戲開發(fā)指南

一直以來，游戲開發(fā)都是把前沿技術(shù)運用到極致的媒介，H5游戲開發(fā)也不例外，這篇文章會從帶你從淺入手，深入H5游戲開發(fā)的世界。

1、準(zhǔn)備條件

1.1、設(shè)計師應(yīng)該注意的地方

移動端最大的問題在于多種設(shè)備，多種平臺，多種尺寸，當(dāng)我們在做手機(jī)端H5網(wǎng)頁設(shè)計稿時（當(dāng)然包含微信端的H5網(wǎng)頁設(shè)計），如果沒有做過類似的移動端的設(shè)計，UI設(shè)計師和前端工程師肯定會糾結(jié)的。那么多手機(jī)屏幕尺寸，設(shè)計稿應(yīng)該按照哪一個尺寸作為標(biāo)準(zhǔn)尺寸?，F(xiàn)在已經(jīng)有很多2K分辨率的手機(jī)屏幕了，設(shè)計稿是不是也要把寬高跟著最大分辨率來設(shè)計。顯然不是。先看一下市面上主流的手機(jī)尺寸：

我們在H5開發(fā)初期的時候，進(jìn)行了各種尺寸的設(shè)計稿嘗試，比如1倍的（320X480）、2倍的（640X1136）、3倍的（1242X2280）像素。最終得出的試驗結(jié)果是。H5的設(shè)計稿一般設(shè)計為640X1136即可。即iphone 5s的物理像素（也即是5、5c以及將要發(fā)布的5se的物理像素，這一系列手機(jī)在iphone的占有率中是最高的）， 既滿足了retina用戶的顯示需求，又能降低2G、3G用戶加載圖片需要的帶寬。不過，你若有更高質(zhì)量的追求，750*1334像素的設(shè)計稿也是一個不錯的選擇。

1.2、開發(fā)者應(yīng)該注意的地方

不管在手機(jī)瀏覽器還是在微信客戶端或者騰訊新聞客戶端開發(fā)，內(nèi)容大都不能全屏顯示的。在底部或者頂部多多少少會有一個狀態(tài)欄的占位，并不能展示手機(jī)的全部尺寸。一些手機(jī)瀏覽器底部會有導(dǎo)航，也有些會在頂部和底部都有占位，比如導(dǎo)航欄、狀態(tài)欄。頂部的占位會把內(nèi)容往下擠，底部的占位會把內(nèi)容遮蓋住。所以，我們在進(jìn)行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)一個載入進(jìn)度條，載入一些必須的圖片、音頻、字體等文件；

2、 顯示主菜單，提示用戶開始游戲；

3、 進(jìn)入游戲主邏輯。在游戲過程中，當(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)常會看到，一些站點在首次進(jìn)入的時候會先顯示一個進(jìn)度條，等資源加載完畢后再呈現(xiàn)頁面，進(jìn)度條大概像這樣：

以圖片的加載為例，大致的代碼應(yīng)該是這樣：

至于預(yù)加載的技術(shù)原理，其實也相當(dāng)簡單，就是維護(hù)一個資源列表，挨個去加載列表中的資源，然后在每個資源加載完成的回調(diào)函數(shù)中更新進(jìn)度即可。

當(dāng)前加載完的資源個數(shù)/pic總數(shù)*100，就是加載進(jìn)度的百分比了。

當(dāng)然，我們沒必要手動寫自己的加載器，很多優(yōu)秀的游戲框架已經(jīng)幫我們做到了，比如phaser，下面是phaser實現(xiàn)預(yù)加載的代碼，具體的示例點我，點我

在上述的例子中，我們先創(chuàng)建一個游戲?qū)ο?，然后往這個游戲?qū)ο笾刑砑恿藘蓚€方法，boot方法執(zhí)行的時候準(zhǔn)備了一張進(jìn)度條圖片，loaderState方法執(zhí)行的時候，加載游戲所需的圖片，并在頁面上顯示當(dāng)前的進(jìn)度。在多關(guān)卡的游戲中，加載的設(shè)置尤為重要。

3、理解游戲

3.1、認(rèn)識phaser

對于一款游戲來說，框架就是它的基石。好的框架能是開發(fā)者利器，能夠幫助開發(fā)者做出強(qiáng)有力的，跨瀏覽器的游戲，能給廣大玩家?guī)砀碌淖髌?。Phaser是一款專門用于移動及桌面的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ā)的世界觀

游戲的界面分三個層次，世界、舞臺和攝像機(jī)。如果把游戲看做通過手機(jī)觀看的一部話劇，話劇都是在舞臺上進(jìn)行表演的，舞臺的背后是世界。我們看到的畫面都是通過現(xiàn)場的攝像機(jī)提供給我們的。攝像機(jī)有一個視角，這個視角到哪里，我們就能看到哪里的畫面，游戲中所有看的見的東西，都是在舞臺中的?？梢园盐枧_看成游戲中所有對象最頂層的一個容器，然而舞臺下面就是世界了，可以把它看成僅次于舞臺的一個頂層容器，世界與舞臺不同的地方在于，舞臺的大小是你可視元素（對象）的大小，是固定大小的，但是世界確實是可以改變大小的，甚至是無限大的，而且可以隨時設(shè)置成我們想要的大小，世界默認(rèn)的大小是舞臺的大小，我們看到的畫面都是通過攝像機(jī)對象得到的，攝像機(jī)對象有個視角范圍，這個范圍跟舞臺的大小范圍是一樣的，如果世界的范圍是大于舞臺的，那么攝像機(jī)就可以在世界中任意移動了，移動到不同的位置，我們就能看到不同的東西。

所有展示的東西，都在舞臺上，世界有多大，攝像機(jī)就可以走多遠(yuǎn)，改變世界的大小，攝像機(jī)才可以在舞臺上移動。世界限制你的范圍，舞臺給你準(zhǔn)備素材，攝像機(jī)展示多彩的界面。理解了世界、舞臺、攝像機(jī)的概念，面向?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

攝像機(jī)：game.camera

通過代碼，我們可以更好的理解游戲的世界，具體的示例，點我，點我！使用前后左右鍵可以移動攝像機(jī)的視角，點擊屏幕可以把視野聚焦到火雞身上。

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的短板，可以在在游戲啟動時只加載主菜單所需的資源，以提高游戲啟動的速度。然后在每進(jìn)入一關(guān)時，加載這一關(guān)所必須的資源。這樣能更好的改善用戶體驗。

3.4、元素

理解完世界和場景這兩大塊，算是理解游戲開發(fā)的70%了，剩下的就是些細(xì)微的東西了，讓我們先對它有一些認(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）的容器。我們可以把許多對象放進(jìn)一個組里，然后就可以使用組提供的方法對這些對象進(jìn)行一個批量或是整體的操作。比如要使組里的對象同意進(jìn)行一個位移，只需要對組進(jìn)行位移就可以了，又比如要對組里的所有對象都進(jìn)行碰撞檢測，那么就只需要對這個組對象進(jìn)行碰撞檢測就行了。

接下來以瓦片精靈為例，講述各個元素的使用。瓦片精靈類似于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。進(jìn)當(dāng)然不限于這些引擎，你可以另外添加自己需要的物理引擎。下面是物理引擎的一個實例。

事例中對廚師和火雞進(jìn)行碰撞檢測，類似于超級瑪麗的踩怪物，廚師踩到火雞是，由于火雞是剛體，然后就會廚師就會反彈。當(dāng)關(guān)閉火雞的剛體屬性后，廚師就直接從火雞中穿過去了，與他碰撞的是世界的邊界了。具體的示例，點我，點我！

3.6、動畫

動畫能夠使游戲的畫面更流暢。動畫分兩種，一種是補間動畫，一種是逐幀動畫。

在做動畫時，我們只需要在動畫的開頭和結(jié)尾設(shè)定好狀態(tài)，在中間只需要做一些過渡，就能實現(xiàn)圖畫的運動；插入中間的過渡是由計算機(jī)自動運算而得到的。這種動畫叫做補間動畫。在phaser中，Tween對象就是專門用來實現(xiàn)補間動畫的。通過game.add的tween方法得到一個Tween對象,這個方法的參數(shù)是需要進(jìn)行補間動畫的物體。然后我們可以使用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）進(jìn)行壓縮，這里的圖片壓縮還是相當(dāng)好用，可以節(jié)省用戶不少帶寬。也可以使用騰訊智圖（zhitu.tencent.com）來進(jìn)行壓縮，區(qū)別于tinypng，它能為你提供高大上WebP格式的圖片。

4.2、在進(jìn)行頁面布局的時候，脫離設(shè)備，按照640x1136像素進(jìn)行布局，然后在頁面的meta里加入

進(jìn)行0.5倍縮放。這時候屏幕能適應(yīng)320x568寬度的手機(jī)屏，對于比較寬的手機(jī)，會有些黑邊。你也可以通過phaser進(jìn)行縮放。

scaleMode會更改canvas的大小達(dá)到適配的目的。

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ā)。