整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
TML5是移動互聯網的未來嗎？
自2010年喬布斯公開支持并在iOS禁止Flash后，在多數開發者心中，這開始變成一個肯定的答案。
2010年到2011年，HTML5概念被熱炒，受到追捧，甚至不少人預言HTML5應用將會替代原生app。但或許是當初被捧得太高，而不論是生態環境還是技術支持都遠遠算不上成熟，HTML5游戲在短暫熱捧之后遭遇諸多問題，隨后開始陷入冰谷，當初使用HTML5開發游戲的團隊紛紛轉型——HTML5或許將是未來，但現在談論還為時過早。
在被遺忘一段時間之后，現在，一些專注于游戲領域的HTML5引擎服務提供商正在重整旗鼓（詳見今日推送的第二篇文章），這讓我們不由再次回頭審視HTML5游戲走過的整個路程，并開始思考一個問題：在HTML5那條通往“未來”的遙遠道路上，它正站在一個什么樣的位置上？
■過去
2010年4月，蘋果公司宣布禁止FlashPlayer登陸iOS系統，鼓勵開發者使用HTML5技術，這一舉動引起了軒然大波，喬布斯甚至為此撰寫了一篇長文《關于Flash的幾點思考》進行回應。當年十月，Zynga收購了HTML5游戲引擎開發商Dextrose，并在隨后發布了第一款HTML5游戲《MafiaWarsAtlanticCity》。
從2011年開始，HTML5的概念開始火爆，在這一年，諸多大廠紛紛出擊這一領域進行布局，MOTO投資了HTML5游戲公司Moblyng，迪士尼收購了HTML5游戲引擎公司RocketPack。
Facebook社交游戲開發商Wooga也在當年宣布進軍HTML5和iOS游戲領域。
在同一年，Unity確認支持HTML5，Facebook收購HTML5技術團隊Strobe，將自身在移動端的發力重心放在HTML5上。同年，手游大廠EA、Popcap、Gameloft也相繼發布了自己的HTML5游戲。
在2011年底，還有一件重要的事情，Adobe宣布停止在Android系統更新FlashPlayer，并推薦開發者使用HTML5技術開發移動Web應用。
就在看起來形勢一片大好HTML5概念火熱的時候，哀歌從2012年開始唱響。
在2012年開年之際，此前MOTO投資的HTML5游戲開發商Moblyng倒閉是第一個音符，隨后在六月，Wooga宣布停止開發HTML5游戲，他們曾經推出一款HTML5游戲《MagicLand：Island》，但是玩家玩這個游戲的總次數只有130萬次，留存率僅5%，相比之下，他們在iOS平臺推出的《DiamondDash》則獲得了1800萬次的下載。
為這支哀歌譜下強音的是Facebook的失敗。在2012年9月，扎克伯格在接受采訪時表示：“Facebook曾經錯誤地將賭注押在了HTML5上，這是我們最大的戰略錯誤，致使我們錯失了移動市場的發展良機?！?/p>
在那之后，曾經被捧上高位打上未來標簽的HTML5技術在移動端狠狠摔落，HTML5開始淡出視野。
總結下來，HTML5在移動游戲領域所遭遇的困境，主要是由于四個原因：
1、技術不成熟，開發生態不完整
2、沒有合適的載體，瀏覽器渲染性能低下
3、沒有成熟的生態環境（渠道，運營商）
4、受制于網絡環境
這些原因最終造成了游戲功能和表現受限，體驗大打折扣。
在2013年底，下一代JavaScript標準規范ES6草案鎖定并正式發布。
■現在
目前HTML5的框架和庫都普遍偏于Web應用的制作，專注于游戲的偏少，比較流行的HTML5框架包括CreateJS，JQuery，AngularJS和Node.js，專注于HTML5游戲的引擎有Impact、Phaser、Pixi、Createjs、EaselJSPhaser、Turbulenz、GameClosure、Coco2d-HTML5和Egret等。
現在主流網站幾乎全部支持HTML5標準，幾乎所有流行的網站都采用了HTML5技術。但是在移動設備上，還尚未出現非常成熟的HTML5應用或游戲，這一市場還在剛剛起步。游戲方面，此前有一二三國、修仙三國、三國喵喵傳等游戲，而目前，墨麟、游戲谷、光年互動等開發商正在開發HTML5游戲。
正在發生的另外一些事情：
1.各瀏覽器對HTML5標準化的支持正在慢慢趨于一致
2.硬件的變革正在不斷推動采用HTML5技術制作的復雜應用和游戲的用戶體驗的快速提升
3.Web游戲類型在3G/4G網絡下的數據發送接收速度正在變得相對高效，但目前國內總體網絡質量仍不樂觀
4.逐漸涌現出的HTML5游戲引擎和制作工具，開始降低H5游戲制作成本，并提高游戲開發效率
5.混生應用出現，上層使用h5開發，底層使用c++渲染，性能得到很大提升，這種方式是當前階段的主流
6.一些巨頭正在嘗試引領這個市場，騰訊的手機QQ空間的安卓版應用，在前段時間將“玩吧”菜單放置在了底部菜單欄的一級入口；在玩吧中，現在已經上線了不少HTML5游戲，不僅有休閑游戲，也有一些卡牌類的中重度游戲，同時在安裝QQ空間首次登錄時，會自動進入一個名為“讓童年飛”的HTML5休閑游戲，騰訊正在嘗試引導用戶嘗試這些HTML5游戲，不過總體來說，內容還處于匱乏階段，玩吧目前僅提供13款游戲；此外還有百度輕應用等。
看起來一切正在往前有序推進，不過站在游戲開發者角度來說又是什么看法？
在一些開發者看來，HTML5游戲開發快、易調試、跨平臺、推廣成本更低的特點，或許會是其優勢所在，但是問題的核心在于如果不能在游戲體驗上給予玩家更多好處，那么就沒有太多的理由去看好，基于這點才會有市場，別的都是業內臆想。
而對于游戲玩家來說，內容才是永遠的核心。
■未來
HTML5的成熟條件是什么？
TML5游戲從2014年Egret引擎開發的神經貓引爆朋友圈之后，就開始一發不可收拾，今年《傳奇世界》更是突破流水2000萬！從兩年多的發展來看，游戲開發變得越來越復雜，需要制作各種炫麗的效果，還要制作各種基于 2D 或者 3D 的場景。作為一名開發者，分析了當下最火爆，最熱門的HTML5游戲引擎供大家參考，希望大家也能找到屬于自己的那款游戲開發引擎。
1、Construct 2
Construct 2是一個運行于Windows平臺的游戲制作工具，它可以讓沒有任何編程基礎的用戶在短時間內不寫一行代碼快速開發出一款可運行于所有平臺（Windows、Mac、Linux、Android、iOS等）的游戲。
特點：
簡單直觀，入門容易，無需編程也能做游戲，長處是開發射擊及動作類的平面游戲，有豐富的英文資料。
優點：
支持多平臺（Android，iOS，Windows)簡單易用、無需編程知識可以使用，可實時運行游戲；
提供了大量特效，支持物理效果，有開發者商城，在上面可以購買到各種開發插件和游戲素材；
強大的事件系統，可以不通過寫代碼來控制游戲邏輯；
提供了可編程擴展的接口，可以自己開發插件；
完整的文檔以及社區支持。
2、Three.js
Three.js 是一款運行在瀏覽器中的 3D 引擎，你可以用它創建各種三維場景，包括了攝影機、光影、材質等各種對象。你可以在它的主頁上看到許多精采的演示。
3、Phaser
Phaser是一款專門用于桌面及移動HTML5 2D游戲開發的開源免費框架，提供JavaScript和TypeScript雙重支持，內置游戲對象的物理屬性，采用Pixi.js引擎以加快Canvas和WebGL渲染，基于瀏覽器支持可自由切換。
快速、免費、易于維護，使用Phaser來開發2D小游戲的優勢顯而易見。一方面，開發者可以直接通過Koding平臺上的VM開發系統進行代碼編寫及預覽。另一方面，也可以在支持Canvas的瀏覽器中直接安裝Phaser來進行游戲開發。
主要特性：
· JavaScript、TypeScript雙重支持
內置游戲對象的物理屬性
· WebGL、Canvas渲染自由切換
· 完全支持Web音頻
· 輸入：多點觸控、鍵盤、鼠標、MSPointer事件
除了IE 9+、Firefox、Chrome、Safari及Opera等桌面瀏覽器之外，Phaser還支持Mobile Chrome（Android 2.2+）及Mobile Safari（iOS 5+）等移動瀏覽器。使用Phaser進行游戲開發沒有任何語言設定，并且，在Phaser官網上，還提供了非常詳細的開發指南，想要一探究竟的開發者不妨直接登陸Phaser查看。
4、Pixi.js
Pixi.js是一款超快的開源HTML5 2D渲染引擎，使用帶有Canvas回調功能的WebGL。作為JavaScript的2D渲染器，Pixi的目標是，可以提供一個快速且輕量級的2D庫，并能兼容所有設備。此外，讓開發者無需了解WebGL，就可以感受到硬件加速的力量。
主要特性：
· 真正的跨平臺：在今天，開發工具跨平臺已經不是什么稀奇的事了。不過，Pixi.js則是一個可以兼容所有設備的超快HTML5 2D渲染引擎，并且擁有canvas回調功能的WebGL，實現真正的跨平臺。
交互式多點觸控：Pixi不僅支持移動和平板設備，還具有完整的多點觸控輸入識別，讓開發者可以發揮自己的能力去挖掘出它所有的潛力。
WebGL過濾器：當使用WebGL時，Pixi允許你使用自己熟悉且現有的過濾器。當然，你也可以使用自己創建的獨一無二的過濾器，比如自定位移和半色調效果。
著色和混合模式：對設計師來說，會很喜歡這個，Pixi.js允許用戶著色和使用混合模式就像其他常見的視覺包比如Photoshop或Flash。
渲染器自動檢測：這個算是Pixi的一大特色，雖然Pixi是主要作為WebGL 2D渲染器而創建的，但仍支持非WebGL平臺。其解決方案就是創建一個Canvas回調系統，只需一次編碼，Pixi就可無縫管理回調。
簡易API：設計直觀，易于上手。
資源加載：精靈表單、圖形、字體和動畫數據等都可通過Pixi.js來加載和處理。
支持精靈表單（Sprite sheet）。
5、egret
Egret 游戲解決方案包含了開源免費的 HTML5 游戲引擎、Egret 項目開發工具集合、動畫特效制作工具、原生多平臺打包工具、高效的 HTML5 游戲應用加速器、以及支持多渠道的開放平臺等。開發者可以通過Egret項目開發工具快速、高效的制作及開發游戲相關各類內容，加速器將游戲效果提高到與原生游戲相媲美的效果。制作后的游戲發布到開放平臺后，有著優質的渠道資源可以將游戲推薦給更多的用戶，使得游戲開發、發布、推廣變為一體化內容。
主要特性：
基于TypeScript及JavaScript技術，支持Flash到Egret高效轉換，引擎、工具、運行時完整工作流
· 跨平臺：HTML5、iOS、Android、Windows Phone
· 全中文文檔：文檔與開發者社區齊全
· 開源免費，BSD開源協議、任意定制及擴展
最后小編支持：
如果你是一名初學者，或者是即將畢業的應屆生，那么考慮的不是實習過程中給你帶來多大的機會，而是為崗前的技術需求做好最有籌碼的準備，多學習，多花時間努力，多參與企業實例項目獲得實際的項目經驗，那么你的職業就從你能力高低而定位薪水高低，艾悠樂幫助IT行業中百萬學習者成功獲得高薪崗位，如果你也是其中一威有需要幫助的IT愛好者，那么請及時關注 aoyolo 公眾號哦，也可以隨時聯系美女老師QQ:744933732 留下您的聯系方式，我們會及時與您聯系，輕松讓您從屌絲逆襲高富帥`(*∩_∩*)′
前陣子沉迷 Brotato 無法自拔，剛好掘金又出了個 碼上掘金編程挑戰賽，就想著用 Pixi.js 仿一個 Brotato，現在剛好活動告一段落，于是準備開一個新坑，算是做一個復習總結吧，也希望能對 Pixi 感興趣的小伙們有所幫助，國內確實這方面的資料比較少（畢竟 PixiJS 的官網是英文文檔）
官網的解釋：HTML5創建引擎。最快、最靈活的 2D WebGL 渲染器。
詳細點說：PixiJS 的核心是一個渲染系統，它使用 WebGL（或者Canvas）來顯示圖像和其他 2D 視覺內容。 它提供了完整的場景圖（要渲染對象的層次結構），并提供交互支持以啟用處理點擊和觸摸事件。 它是現代 HTML5 世界中 Flash 的自然替代品，但提供了更好的性能和像素級效果，超出了 Flash 所能達到的范圍。 它非常適合在線游戲、教育內容、交互式廣告、數據可視化……任何需要復雜圖形的基于 Web 的應用程序。 再加上 Cordova 和 Electron 等技術，PixiJS 應用程序可以作為移動和桌面應用程序分布在瀏覽器之外。
Pixi API的優勢在于它具有通用性：它不僅僅是一個游戲引擎。 因為你可以完全自由地使用它制作自己喜歡的東西，甚至是創建自己的游戲引擎。
這里大家先做簡單了解，后續會結合案例給大家詳細介紹
作為游戲開發的一環，前期游戲規則的制訂，流程的設置，以及為后續功能擴展留好坑位十分重要，本篇的主要內容會圍繞著游戲設計展開
Brotota 是一個肉鴿類的射擊游戲，主要的游戲流程是怪堆里再規定時間內茍活，擊殺怪物獲得經驗，過關升級可以加強屬性和購買道具
這里我把流程簡化了下，這樣一個無限挑戰的游戲流程就出來了
Brotato 的主角是各種各樣的土豆，這里我就將角色設計成各種水果，當然初版只有一種，但只要把這個角色類設計好，后面的就是一個換膚和添加各種特色機制就可以了，怪物同理，其它的都是些公共元素，簡單設計下就可以
不多不少主要有6個元素，后續篇章將會對這6個部分做逐一的設計與講解，每個都會以 js 中 class 的形式進行設計（BroFruit，Board，Count，Role，Bullet，Monster...），力求盡可能的邏輯解耦與復用，敬請大家持續關注！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
