整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
生手游市場已是紅海，騰訊、網易等寡頭獨霸天下，H5游戲市場或將成為下一個風口。據筆者所知，很多H5游戲開發團隊由于選擇引擎不慎導致項目甚 至團隊夭折。如何選擇適合團隊和項目的引擎，筆者通過學習和項目實踐，總結微薄經驗，供大家參考，非技術人員也可以將本篇內容作為引擎選擇的重要關注點。
選擇H5游戲引擎的思考維度
1、開發語言的支持
2、2D、3D、VR的支持
3、性能
4、引擎的應用廣度
5、設計理念
6、工作流支持力度
7、商業化成熟案例
8、學習資源與技術支持能力
首先，我們要知道，當前主流的游戲引擎有哪些。由于H5引擎有很多，筆者在這里進行了精心的篩選，過濾掉不支持webGL的引擎，以及封裝了第三方渲染內核的JS框架，和不能直接在瀏覽器中運行的JS引擎。
為什么要過濾掉這幾種呢，首先，沒有自己的渲染內核，僅僅是基于第三方的內核作的API封裝，筆者很擔心可持續的性能優化和維護能力。另外，不能在 瀏覽器中直接運行的JS引擎，將限制H5游戲跨平臺的交互能力。還有， 筆者非?？春脀ebGL模式，認為webGL模式才是H5引擎的未來。原因有幾 點：
第一、性能，webGL模式遠超Canvas數倍。DOM模式就不適合用于真正的游戲開發，更不用提。
第二、3D方向，webGL模式理論上可以制作2D和3D游戲，Canvas和DOM模式下只能制作2D游戲。
第三、普及率，webGL的普及率已經非常高了，尤其是支持webGL的騰訊TBS-Blink內核已在4月19日發布，并逐步在微信、QQ空間、QQ瀏覽器、手機QQ等APP中采用靜默安裝方式全面升級。這個普及率在國內帶來的影響，;你懂的……
1、選擇H5游戲開發語言
擁有廣泛開發者的H5游戲開發語言共有三種，分別為Flash AS3、TypeScript、JavaScript。其中Flash AS3、 TypeScript均屬于面向對象的高級腳本語言，通過編譯器將原項目代碼編譯成JavaScript代碼文件運行于瀏覽器之中，面向對象的高級語言無 論是項目開發管理，還是項目開發的工具環境的成熟度都明顯優于JavaScript腳本語言，尤其是中大型項目方面，AS3等高級語言的效率會更高。
從上圖看出，支持JavaScript語言的引擎更多，由于AS3語言的編譯器為Layabox引擎推出的，因此采用AS3作為開發語言的僅有 Layabox引擎。筆者建議在開發中大型游戲項目的時候，采用TypeScript或者是Flash AS3語言進行開發。如果是小型游戲，任選其一即 可。
2、引擎的未來延續能力
選擇一個引擎，并不是簡單的認為，滿足眼前夠用就可以了，引擎的未來延續能力也是很重要的，這個項目是2D，下個項目想開發3D，如果引擎不支持怎 么辦？去換個引擎？如果VR的機會來了，再想發布VR版本，這個引擎不支持，需要重新開發嗎？等等問題，作為開發者盡可能要提前想好。
通過上圖，可以看出，即便是在支持webGL的H5引擎里，有只面向2D游戲的，也有只面向3D游戲的，同時支持2D、3D、VR的H5引擎，從目前看只有Layabox與Egret引擎。
3、性能是核心需求
性能是H5游戲面臨的核心門檻，也是很多H5游戲不被專業玩家認可的重要原因之一。游戲卡頓，不流暢，這樣的產品體驗很難在激烈競爭中生存下來。
H5產業早期的普及階段即將過去，游戲品質在迅速提高，品質中包括精細的美術和炫酷的動畫等。在復雜的游戲項目面前，上述種種元素，其流暢體驗度對游戲引擎是極大的考驗。所以選擇性能優秀的引擎是保證品質的最重要基礎，一定要謹慎。
在游戲項目研發開始時，一定要先對復雜的模塊做DEMO測試，特別是帶背景滾動的游戲。比如橫屏卷軸游戲，對幀數穩定性要求極高，如果滿足不了性能上的需求，可能會帶來眩暈、眼花、疲倦等不良體驗。
在webGL的2D渲染性能方面，pixi.js的性能處于當前的頂級。在webGL的3D渲染性能方面，Three.js非常優秀。在 runtime方面Cocos2d-js也有著原生級的表現，經過對比，筆者認為Layabox性能的綜合實力最強，在各個渲染領域都保持在HTML5引 擎的頂級水平。當然，上圖僅作為參考，對于任何號稱某個引擎性能最牛的論調，一定要親自進行性能DEMO的測試對比，而不要輕易采信。
由于性能是游戲最核心的需求，筆者這里再多說一句，大型項目在系統復雜度、UI復雜度、動畫顯示數量和種類等方面與小型游戲項目完全不在一個量級。 會涉及到比小游戲更復雜的性能優化、內存管理、資源管理等需求，如果選擇了小馬拉大車的低性能引擎，項目夭折可能性非常大，除非最后項目開發者花大量時間 自己優化引擎。所以性能差一點，就會導致結果差很多，不可主觀想象。
4、與引擎的應用廣度
隨著H5游戲品質提升，在其他領域也具備一定的競爭力和價值，一次開發可發行各個領域版本，已成為日漸明確的需求，這里面包括發行原生APP手游和 PC的flash頁游需求，大統一的引擎時代即將來領。目前最火爆的H5游戲《傳奇世界H5》據說有40%的收入來自PC網頁。
發布PC頁游時，由于PC瀏覽器目前對HTML5兼容性不足70%，用戶損耗很大，頁游聯運平臺可能會拒絕或放量很少，只有采用能同時發布Flash版本的引擎，才能解決這個問題。
5、設計理念與定位
設計理念是個比較大的話題，也是個很重要的引擎選擇因素，比如引擎是要專注移動端，還是要面向全平臺多端游戲市場。是注重性能，還是注重工具鏈等等。深入了解不同引擎的理念與定位，才能更好的與游戲產品進行結合。
上圖內容僅作參考，詳情建議去各引擎官網深入了解。
6、工作流支持力度
作為商業級開源引擎，工具鏈的提供與支持也是一種選擇考量要素，比如UI編輯器、粒子編輯器、骨骼編輯器、場景編輯器等等，如果引擎方直接提供或支持，那么將會較大的提升研發效率。本文中提到的7個引擎，只有Egret、Layabox、Cocos2d-JS這三個引擎，在工具鏈方面提供足夠全面的支撐。
7、是否有成熟的商業案例
怎么證明引擎是成熟的？一定要有成熟的商業案例，一般引擎的官網上都會有游戲案例介紹，我們在選擇引擎之前要進行深入體驗，包括：商業案例的數量、 商業案例的種類、穩定性、流暢度（要在低端機里體驗）、項目復雜度、項目相似度等。如果有一些大型成功案例背書會相對安全可靠些。從目前的行業案例來看，Layabox引擎的MMORPG《醉西游》、重度動作游戲《獵刃2》、大型模擬經營游戲《夢幻家園》等無疑是H5引擎技術的最高 水準代表作。但是從卡牌、掛機等類型的付費游戲總體數量來看，Egret引擎明顯占優，充分說明該引擎的市場宣傳力度更勝一籌。
8、學習資源與技術支持能力
能提供什么樣的學習資源，以及技術支持，對于開發者也是重要因素，如果你是技術大牛，只想使用輕量的第三方渲染內核。那么2D游戲，pixi.js 無疑是首選。3D游戲，筆者推薦Three.js。但是這兩種引擎的學習資料都比較稀少。筆者認為學習資料的完善，以及在學習過程中的技術支持力度，將會 很大的幫助你解決引擎使用中的問題。所以，API完善，DEMO完善，文檔完善，社區的響應速度，交流氛圍，以及QQ技術支持等，都可以作為你選擇引擎的 因素考量之一。
9、頁游移植產品的引擎選擇
目前像《醉西游》等優秀H5產品是Flash頁游或手游移植而成，移植類的產品在選用引擎時要注意，代碼是否可以直接移植？如果可以，那將節省大量 的開發成本。比如Flash AS3開發的2D或3D頁游或手游，可以把邏輯與算法代碼直接拷貝移植到Layabox引擎項目中，開發速度提高數倍。
寫在最后：最后提醒一下，千萬不要相信某些引擎的單方宣傳，一定要花一點時間去研究實踐，親自制作DEMO去作一作對比，動手體驗到的才是真理。
針對DEMO測試筆者有幾點建議：
1、采用一個復雜的UI，特別是復雜列表，比如說沒有分頁的背包列表，背包里放上不同的道具圖片，測試滑動時的流暢度，這塊比較考驗性能，元素越復雜，數據越多，尤其能對比出來性能上的差異。
2、包含最復雜戰斗部分，不要寫戰斗邏輯代碼，不然會花的時間太長，只需要把戰斗相關的動畫和復雜的元素放在場景中模擬即可，因為H5游戲性能瓶頸通常在于畫面的顯示。
3、 測試主要目的是看項目在引擎中性能，這是最至關重要的，所以，硬件上，我們要選擇低端安卓手機（比如紅米）進行測試。軟件環境建議使用微信環境測試，首 先，因為微信公眾號是H5的主要渠道之一，其次，微信當前的H5性能低于chrome瀏覽器，在惡劣的環境下更能測試引擎的優劣。
HTML（HyperText Markup Language，超文本標記語言）是用來描述網頁的一種語言，它不是一種編程語言，而是一種標記語言。
HTML5是構建Web內容的一種語言描述方式，HTML5是互聯網的下一代標準，是構建以及呈現互聯網內容的一種語言方式，被認為是互聯網的核心技術之一。HTML產生于1990年，1997年HTML4成為互聯網標準，并廣泛應用于互聯網應用的開發。
HTML5是Web中核心語言HTML的規范，用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的，在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息，HTML5在從前HTML4.01的基礎上進行了一定的改進。
由于HTML5只是在HTML的基礎上進行了新增或者廢棄一些標簽或者特性，本文默認均為HTML5語法，被廢棄的部分就不再提起，HTML一般用于描述網頁的結構，所以一些樣式和腳本方面的標簽和屬性以及關于JavaScript部分的特性也不再提及，重點在于梳理常用標簽體系。
現今瀏覽器的許多新功能都是從HTML5標準中發展而來的。目前常用的瀏覽器有IE、火狐、谷歌、Safari和Opera等等，通過對這些主流web瀏覽器的發展策略調查，發現它們都支持HTML5上采取了措施。
（1）IE瀏覽器
2010年3月16日，微軟MIX10技術大會上宣布其推出的IE9瀏覽器已經支持HTML5。同時還聲稱，隨后將會更多的支持HTML新標準和CSS3新特性。
（2）FireFox瀏覽器
2010年7月，Mozilla基金會發布了即將推出的Firefox4瀏覽器的第一個早期測試版，該版本中Firefox瀏覽器中進行了大幅改進，包括新的HTML5語法分析器，以及支持更多的HTML5語法分析器，以及支持更多的HTML5形式的控制等。從官方文檔來看，Firefox4對HTML5是完全級別的支持。目前，包括在線視頻，在線音頻在內的多種應用都已經在版本中實現。
（3）Google瀏覽器
2010年2月19日，谷歌Gears項目經理通過微博宣布，谷歌將放棄對Gears瀏覽器插件項目的支持，以重點開發HTML5項目。據費特表示，目前在谷歌看來，Gears應用用于HTML5的諸多創新非常相似，并且谷歌一直積極發展HTML5項目。因此只要谷歌不斷以加強網絡標準的應用功能為工作重點，那么為Gears增加新功能就無太大意義了。另外，Gears面臨的需求也在日益下降，這也是谷歌做出吊證的重要原因。
（4）Safari瀏覽器
2010年6月7日，蘋果在開發者發布會公布Safari5，這款瀏覽器支持10個以上的HTML5新技術，包括全屏幕播放、HTML5視頻、HTML5地理位置、HTML5切片元素、HTML5的可拖動屬性、HTML5的形式驗證、HTML5的Ruby、HTML5的Ajaxl.ishi和WebSocket字幕。
（5）Opera瀏覽器
2010年5月5日，Opera軟件公司首席技術官，號稱“CSS之父”的Hakon Wium Lie認為，HTML5和CSS3，將會是全球互聯網發展的未來趨勢，包括目前Opera在內的諸多瀏覽器廠商，紛紛研發HTML5的相關產品，web未來屬于HTML5。
綜上所述，目前這些瀏覽器紛紛朝著HTML5的方向邁進，HTML5的時代即將來臨。
●Notepad++
●Visual Studio Code
●HBuilderX
●Dreamweaver
●Sublime Text
●Webstorm
Webstorm為本文使用的工具，請自行購買激活，也可以使用以上的免費工具，安裝步驟都較為簡單，在此省略！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
單標簽：
<標簽名 [屬性名=屬性值,...]>
成對標簽：
<標簽名 [屬性名=屬性值,...]></標簽名>
<h1>這是一級標題</h1>
<h2>這是二級標題</h2>
<h3>這是三級標題</h3>
<h4>這是四級標題</h4>
<h5>這是五級標題</h5>
<h6>這是六級標題</h6>
<p>這是一個段落</p>
使用示例：
<a href="百度一下，你就知道">打開百度，你就知道！</a>
常見屬性：
屬
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度LOGO">
<table border="1px" cellpadding="0px" cellspacing="0px">
<tr>
<th>表頭一</th>
<th>表頭二</th>
<th>表頭三</th>
<th>表頭四</th>
</tr>
<tr>
<td>單元格一</td>
<td>單元格二</td>
<td>單元格三</td>
<td>單元格四</td>
</tr>
</table>
無序列表：
<ul>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ul>
有序列表：
<ol>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
<li>列表項</li>
</ol>
自定義列表：
<dl>
<dt>+</dt><dd>列表項</dd>
<dt>+</dt><dd>列表項</dd>
<dt>+</dt><dd>列表項</dd>
</dl>
<div>具體內容</div>
<span>具體內容</span>
常見標簽：
基本布局：
常見標簽：
案例演示：
1、form、input、label演示
<form action="" method="get">
<p>
<label for="username">賬戶：</label>
<input type="text" name="username" id="username">
</p>
<p>
<label for="password">密碼：</label>
<input type="password" name="password" id="password">
</p>
<p><input type="submit"></p>
</form>
2、textarea演示
<form action="" method="post">
<textarea name="mycontext" cols="30" rows="10"></textarea>
<input type="submit">
</form>
3、fieldset、legend、select、optgroup、option演示
<form action="" method="post">
<fieldset>
<legend>請選擇你的愛好：</legend>
<select name="myhobby" id="myhobby">
<optgroup label="運動">
<option value="籃球">籃球</option>
<option value="足球">足球</option>
</optgroup>
<optgroup label="電子">
<option value="看電影">看電影</option>
<option value="看電視">看電視</option>
</optgroup>
</select>
</fieldset>
</form>
4、datalist演示
<form action="" method="post">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
5、單選框演示
<form action="" method="post">
<input type="radio" name="sex" id="male" value="male" checked>
<label for="male">Male</label>
<input type="radio" name="sex" id="female" value="female">
<label for="female">female</label>
</form>
6、復選框演示
<form action="" method="post">
<input type="checkbox" name="vehicle" id="bike" value="bike">
<label for="bike">I have a bike</label>
<input type="checkbox" name="vehicle" id="car" value="car">
<label for="car">I have a car</label>
</form>
<iframe src="百度一下，你就知道" frameborder="0" width="500px" height="500px"></iframe>
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的瀏覽器不支持 Audio 標簽。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的瀏覽器不支持 Video 標簽。
</video>
水平線：<hr>
換行：<br>
<b>粗體文本</b>
<code>計算機代碼</code>
<em>強調文本</em>
<i>斜體文本</i>
<kbd>鍵盤輸入</kbd>
<pre>預格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr>縮寫詞或者首字母縮略詞</abbr>
<address>聯系信息</address>
<bdo>文字方向</bdo>
<blockquote>從另一個源引用的部分</blockquote>
<cite>工作的名稱</cite>
<del>刪除的文本</del>
<ins>插入的文本</ins>
<sub>下標文本</sub>
<sup>上標文本</sup>
HTML標簽可以設置屬性，屬性總是以名稱/值對的形式出現，比如：name=“value”，它的主要作用是控制或修飾標簽。
HTML事件可以觸發瀏覽器中的行為，比方說當用戶點擊某個 HTML 元素時啟動一段 JavaScript。
由窗口觸發該事件 (同樣適用于 <body> 標簽)：
表單事件在HTML表單中觸發 (適用于所有 HTML 元素，但該HTML元素需在form表單內)：
通過鍵盤觸發事件，類似用戶的行為：
通過鼠標觸發事件，類似用戶的行為：
通過視頻（videos），圖像（images）或音頻（audio） 觸發該事件，多應用于HTML媒體元素比如：<embed>，<object>，<img>，<audio>和<video>。
課件資料?騰訊文檔
月4日，由9秒社區和騰訊玩吧合作主辦的HTML5游戲開發者大會在京召開，各路游戲精英相聚一堂，會上嘉賓就H5游戲的現狀和未來發展進行了接地氣、有干貨的分享。
如果不是制作精良的，或者有著很好IP的產品，在現在的移動游戲市場中是難以存活的。近年來羽翼漸滿的H5游戲則是一個新的市場延伸，并且有著越來越多的像白鷺、騰訊玩吧這樣投入自身資源支持H5游戲開發者的公司出現，用自己的平臺的資源，去助力推動這個行業的發展。
龍圖游戲CEO楊圣輝表示，在自己不久前的日本之行中觀察到，日本的H5游戲市場十分活躍，以H5游戲產品上市，或者成為核心業務板塊的公司并不稀奇，并且收入規模非常之大，營收達到了上億美金。H5游戲首先是一款游戲，所以核心玩法才是玩家的訴求。開發者需要思考的是如何在玩法上做出較大創新。而技術上的差別會為H5游戲帶來更新的特色，對游戲本身有深刻理解、對核心玩法有深入研究的團體未來在該領域會有很大的作為。楊圣輝稱，H5游戲更適合輕玩法，即使是重度玩家也需要有碎片化或者輕量的游戲，只有針對玩家訴求去做產品才是有效的途徑。
QQ空間技術副總經理石玉磊在會上表示，今年4月騰訊玩吧的單款H5游戲已經超過200萬月流水，雖然與傳統手游相比在一定程度上還有些微不足道，但已經讓很多人打消了H5游戲沒有盈利的看法。這其中核心的數據每個月都會有20%以上的增漲，并且4個月就會翻倍。相比之下現在的傳統手游市場，已是一片紅海，“增長率不用說每個月增長20%，一年增長都不會有那么高，由此可以看出H5的確是一個藍海?！?/p>
在綜合了近年平臺中的游戲數據后，騰訊玩吧發現了H5游戲的四大趨勢：游戲品質逐步提升；游戲類型在多元化的發展；女性玩家市場巨大；社交渠道幫助拉新。并且梳理了游戲類型的數據變化，數據顯示養成、對戰、學習、休閑這四個游戲類型或將會是未來的爆款類型，石玉磊也表示騰訊玩吧將會加大對這四種類型游戲的扶持。
對于H5游戲開發者而言，社交渠道成為了獲取用戶的重要來源，所以H5游戲必須滿足社交性，社交性是原生文化做到的能獲取用戶最大化的有效手段。
很多游戲需要通過廣告來獲得用戶，但成本較高。相比之下社交渠道則是一個高質量低成本的好選擇，“如果有一個好友在和你玩同一款游戲，那么通過QQ或微信給他發送游戲的情況，會起到較好的拉動作用，充分利用這樣的渠道，對開發者來說將是一個高質量的低成本的，拉動新用戶的好渠道?！笔窭诒硎荆瑸榱颂嵘瘟舸媛屎吞嵘剩v訊平臺將向開發者開放包括登錄體系、關系鏈數據、支付體系，以實現H5游戲的社交化，以此刺激玩家去支付，這個也是微信對關系鏈的一個很大的支持。
在會上DataEye的CEO汪祥斌還公布了《HTML5游戲Q2數據報告》報告中顯示，2014年到2015年，移動游戲市場的整體收入規模增速在放緩，增速保持在10%至20%之間。數據表明，APP游戲的成本越來越高，未來的渠道也趨于飽和，已有達到天花板之勢。而在移動用戶增長方面，緣于H5本身具備入口寬泛、易推廣等特征，未來H5游戲將是一個爆發點，2015年H5游戲用戶將達到1.71億。
在H5游戲Q2數據情況方面， Q2跟Q1相比整體數值差額不大。次日留存上，Q2為12.14%，比Q1的10.01%提高2.13個百分點。七日留存走勢上，HQ2七日留存平均為4%左右，比Q1的3.02%的增加1.69個百分點。跳出率穩定在40%左右，40%就是比之前在2014年監測到就明顯的好轉，當時跳出率非常高，說明整個內容方面對玩家的吸引是相當不夠的。ARPPU走勢上，Q1約13.27元，Q2約14.11元，略有提升，但相對來說仍有提升空間。
對于此組數據，汪祥斌認為H5游戲首要解決的問題是高付費，“現有的H5游戲整體的付費情況是達不到要求的，高付費才能帶來渠道對H5的一些推動，高付費是首先要解決的問題?！蹦壳癏5游戲的付費率相對偏低，Q1平均付費率大概1.35%，Q2為1.61%，數據相差不大。其中三個品類游戲在APP游戲里面屬于高吸費的品類：角色扮演、棋牌以及模擬經營。模擬經營類游戲可以在最大限度發揮社交性，棋牌類游戲無論在原生還是H5，都是長期話題、受眾廣，“這三個品類值得H5游戲制作團隊去關注?！?/p>
目前的H5還有著很大的掘金空間，但同時也面臨著一些挑戰。傳統手游也好H5游戲也罷，只有對在游戲模式上超強的創新能力和以不斷邁向精細化為目標，才可以成功。而這也正是如今游戲行業中所面臨的最大的挑戰，任何行業在發展過程中都存在機遇與巧戰，在激烈的市場競爭中狹路相逢，只有“智”者才能生存。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
