在今天,利用 HTML5 開發和發布大型跨平台網遊,可行性如何?要解決哪些問題?


謝謝繼新邀請。正好最近我們團隊的拙作《修仙三國》正式發布,這款產品的特色在於是首個利用HTML5技術研發的大型角色扮演類網遊並且同時在多個平台全面發行,我們自己當然是相信其品質和體驗堪為HTML5同類遊戲標杆。謝謝繼新,以及不少關注和支持我的朋友們,一直在問我這款遊戲的研發過程。我不敢敝帚自珍,現將自己過去一年多時間內所經歷過的種種酸甜苦辣和抉擇都一一撰寫出來,本文並非技術開發指導的具體教程,而是一個團隊在通往HTML5遊戲商業化之路的種種艱辛努力和寶貴經驗,希望沒有辜負邀請。

早在2012年,經過一番痛苦的嘗試之後,我們發現手機用戶對於HTML5遊戲的體驗確實不如想像中理想。究其根本原因是因為手機上的瀏覽器使用率要比PC較低,很多時候手機用戶的網路環境並不佳,他們對使用網頁打開的應用或者遊戲都存在一定的偏見,覺得過慢或者消耗流量花費金錢而避而遠之,同時手機瀏覽器也無法使用腳本的方式將網頁直接留存在歷史記錄或者書籤內導致不少用戶無法返回遊戲,這些使得我們在推廣和玩家留存上遭遇了很大的阻力。但是在此前遊戲產品推廣運營的過程中我們也意外的發現,幾乎有一半的玩家選擇了同時用PC和手機來體驗我們的遊戲,還有更多的玩家在用平板電腦,雖然基數很少但帶給了我們很大的鼓舞,也堅定了我們繼續下去的決心。

於是去年7月份,團隊的核心成員聚在一起,開始商量如何繼續做下一款HTML5網遊。最初提出做MMORPG的想法遭到了不少人的反對,理由還是在於HTML5屢遭人詬病的性能問題。很多人認為做卡牌類型或者SLG遊戲才是HTML5遊戲最好的方向,畢竟當時手機卡牌類遊戲方興正艾。但最終我還是努力說服了所有人,畢竟技術是發展進步的,無論是手機瀏覽器還是硬體,在遊戲長達一年的研發周期中,誰都很難預料到未來的急速變化。我們應該著眼於下一階段,做更超前一步的事情。現在已經可以看到手機瀏覽器幾乎每個版本在對HTML5的支持方面都有令人欣喜的進步!而我們為什麼不能做一些超越自己能力的挑戰。經過市場調查發現2.5D視角的角色扮演類遊戲有著其它遊戲難以企及的代入感,最受玩家青睞。最後,團隊所有人一致決定,一定要做一個「毀人三觀」的HTML5多人角色扮演跨平台網遊!

最後的準備當然是技術的選型和工具,在完成幾個Demo之後,大家最終還是決定採用回合制的遊戲方式,但也表示永遠不會放棄做實時戰鬥MMOARPG的夢想,將會放在下款遊戲!我們在開發上選擇用Chrome和iPhone的Safari作為主適配平台,因為這兩個分別是PC和手機表現最好的HTML5瀏覽器,可以用來調試。而編碼主要採用Aptana工具,這個繼承自Eclipse的優秀腳本編輯器可以非常方便的幫助我們完成編碼和調試等一系列工作。而MMORPG遊戲開發必不可缺少的地圖編輯器和動畫編輯器等工具,我們也是提前準備需求,簡單且滿足遊戲開發即可。

很快,在2012年10月份我們正式啟動了開發工作,整個團隊都開始有條不紊的投入進來了,每個人都非常熱情的參與到了遊戲中。由於我們採用了HTML5的引擎,這讓我們比一般遊戲開發團隊做起來效率更高,速度更快。舉個例子,我們可以直接通過瀏覽器來調試自己的遊戲腳本,而不用任何編譯工作,讓所有人直接加入測試並提出各自的體驗反饋,節省了大量的時間和精力,尤其是對於跨平台開發,並不需要若干個不同系統的客戶端團隊例如iOS,Andriod,Flash與伺服器相互溝通交流,無論是研發成本還是開發周期都大大的節省了,也同時也給測試帶來了極大的便利。在整個研發過程中,我們每個人都是策劃,都可以提出自己認為好玩的觀點,大家在一起匯總評估,也會利用HTML5的優勢快速完成幾個demo去體驗調整。在開發過程中所有成員時刻都保持著危機意識,我們腦海裡面有很多假想敵,逼迫著我們每天加班加點趕項目,尤其是我們的前端主程幾乎就沒有度過一個完整的周末,只是為了讓遊戲運行得更穩定一些,體驗更好一些。新的項目從立項到內測版本發布一共不到8個月的時間(我們的前後端代碼全是從零開始寫的,基本沒有復用)。大家有這樣的覺悟,是因為我們之前做的幾款產品都犯了一個致命的錯誤——研發周期太長,最後的結果就是貽誤戰機,沒有在市場最需求的時候將產品發布出去,因此對於這個重量級產品的修仙三國,每一個人都不敢有絲毫怠慢。

我們曾經為新產品做了兩年的儲備,HTML5雖然有很多優點,但是劣勢也很明顯,性能問題、工具不全、沒有成熟的開發框架等等,這一切我們從一開始就明白,所以決定一切都自己動手一點一滴積累起來。我們的遊戲引擎包括了自己完成的一個包括地圖模塊,動畫模塊,UI控制項模塊以及物理引擎和各種編輯工具,內容都很簡單容易上手,我們希望能夠用《修仙三國》這款遊戲的成功來驗證這款引擎的實用性,同時我們也計劃在明年初可以將這套成熟的HTML5遊戲引擎開放給更多的開發夥伴。

我們始終堅信HTML5是一條正確道路,在產品研發的過程中我們也遇到了數不清的困難,毫不誇張的說每個困難都足以讓我們的產品難產甚至絕望。在此其間在團隊內部也發出過一些質疑,大家甚至懷疑我們能否將產品最終做出來,畢竟這是一條充滿荊棘之路。但是隨著大家眾志成城一個個難關被攻克、產品的發布,逐漸打消了所有人的疑慮。

在我看來技術只是一種呈現的手段,真正的玩家是不會關心技術的,要讓產品成功光靠技術也是不夠的,我們所堅持努力的HTML5隻是希望讓遊戲做得更快點,能在有限的時間內多做一些好遊戲服務於更多的玩家罷了,為此目標,我們盡了最大的努力。

在開發進展中我們碰到的各種困難,比如UI體驗不夠流暢,因為HTML5的特性中並沒有對於GUI有任何的新標準。我們還是沿用HTML4中就已經制定好的HTML標籤,再加上一些CSS3的新樣式做出一些之前做不到的特效而已。但是和native應用中的UI界面比起來還是有較大的差距。其次在HTML5中的遊戲音效有一些問題,所以我們目前沒辦法大規模的使用音效,這讓遊戲的表現力會受到一些影響,不過為此我們正在做出努力,相信隨著HTML5最終標準的確立,各大瀏覽器對於多媒體標準的實現上一定會有很大改進,到那時候這一切都不再是問題。接下來就是編輯器也需要優化,因為HTML5是一個標準,不像flash一樣有專門的團隊針對遊戲開發的需求設計出各種各樣的開發工具。我們的編輯器都是靠自己來完成開發,但是之前由於時間有限所以我們編輯器的功能也比較簡單,未來我們希望可以將各種編輯工具進行優化,使之功能更加強大。在手機屏幕和平板電腦,PC不同尺寸之間的兼容性我們也做了深入的考慮,雖然瀏覽器可以自動縮放遊戲的解析度,但隨之帶來的操作性和字體大小等細節都消耗了我們大量的時間不斷的優化調整,力爭將產品做到最好。

今年6月份,產品終於告一段落,遊戲的畫面頗為精美,無論是場景和人物設計都是採用了3D建模轉2D的方式,遊戲的策劃和技術也都耗費了我們大量的心血。可在推廣問題上大家又有了爭執。最後我們經驗豐富的投資人創新工場的汪華給了寶貴的建議,這使我們決定採用在智能手機上主推安裝包而平板電腦和PC則重點推廣Web鏈接的方案。這樣最大限度的發揮HTML5技術優勢,即可打包提供下載安裝,又可通過網頁直接在瀏覽器內打開。經過我們實際調查分析,認為手機用戶和平板電腦用戶存在著不同,手機用戶的網路條件不如Pad強,而且瀏覽器的使用率也遠低於平板電腦,平板電腦尤其是Pad用戶對於Web的產品延續了PC的習慣,他們對直接打開,免下載免安裝的網頁遊戲有著強烈的需求,可由於眾所周知的原因,這塊卻一直都是個藍海,一塊空白。 所以最後又面臨打包上蘋果AppStore平台的問題,好在這塊我們早已積累了豐富的經驗,具體請詳見 HTML5 遊戲移植為 iOS 原生應用,需要注意哪些地方?有什麼經驗可以分享? 經過一番努力和不斷改進,產品最終順利的通過並且上線了。目前這款遊戲已經開始免費下載,如果大家覺得這篇小文對你們有所幫助的話,也請大家支持一下我們,輕點一下app下載,給留個好評,謝謝啦!

AppStore(打包版)下載地址:

https://itunes.apple.com/cn/app/xiu-xian-san-guo/id635818432?mt=8

Web官網地址:

修仙三國 官方網站

修仙三國 (手機訪問)

有人問起安卓平台,我們已經和多家優秀的第三方手機瀏覽器廠商進行了合作,相信安卓版本在不久就會藉助他們強大的HTML5技術的早日出現在玩家的手機中吧!

順便也回復一下前面幾位大神的觀點吧

從目前瀏覽器的準備來看,移動平台的iOS的Safari,Andriod系統的uc,TX等第三方瀏覽器,PC平台上的Chrome,FF,甚至360極速,這些主流瀏覽器都已經為HTML5做好了準備,即便是多人實時動畫也可以在這些平台上得到較好的體驗。這些年我們也可以看到包括ARM,Inter這些硬體廠商也在底層方面對HTML5技術提供了更好的支持。我們的遊戲是3D轉2.5D效果的,但相信未來出現真正3D的web遊戲也不是什麼太遙遠的事情。前路艱險,但總是需要人不懈探索吧。所有的技術都是由簡單粗淺一步一步的發展起來。

開發源碼的安全問題,js除了混淆和加密確實沒有特別好的辦法。混淆後的源碼的可讀情況這個就見仁見智了,總之肯定不如二進位的安全性高,但直接拿來就讀也不是什麼特別容易的事情吧。

HTML5可以像Flash等Web多媒體技術一樣,支持分階段下載資源包也支持離線應用資源,這些都為用戶體驗帶來了便利。

最後我再解答一下採用HTML5技術開發遊戲的跨平台優勢吧。

1)用HTML5開發手機應用和遊戲的效率會稍高一些,成本也會略有降低。這主要體現在各種智能手機終端的移植上,我們前端都是javascript工程師,而打包移植的工作有1個人就可以快速搞定。不需要同時維護若干個團隊和若干個版本。

2)用HTML5開發,遊戲升級版本更新會更方便,只要不涉及原生代碼的改動,我們都可以在後台安排腳本更新即可,無需用戶再去下載安裝覆蓋等麻煩,也減少了因此而帶來的用戶流失。

3)用HTML5開發的網頁遊戲跨平台的能力較強,可以運行在PC,平板,手機等所有支持HTML5的瀏覽器內,這樣可以讓玩家無論是在電腦還是手機都可以跨平台體驗遊戲的樂趣,從後台數據看,大部分用戶是願意接受在不同的時段使用不同設備,電腦和手機來體驗我們的遊戲。

4)HTML5開發手機應用和遊戲相對來講會比較安全,由於瀏覽器的限制,我們是絕對無法讀取用戶的隱私信息或設置暗扣陷阱。

5)雖然HTML5頁游有以上的好處,但目前HTML5遊戲的市場環境還並不成熟,很多用戶還是比較習慣安裝app來玩遊戲的習慣,所以我們也採用同時推安裝包和鏈接兩種方式來儘可能的覆蓋我們的用戶群,因此webapp的推廣方式還是非常靈活的。在HTML5領域,我們已經做到了我們能做到的最好表現。

我們希望自己只簡簡單單的做好一款遊戲,不斷完善,更加吸引用戶,更加好玩,而不再關注自己究竟做的是蘋果遊戲還是安卓遊戲究竟是網頁遊戲還是手機遊戲,認真的做一個簡單快樂的遊戲團隊。研發這款大型HTML5頁游大概花費了我們兩年的時光,從最初的立項到引擎和工具的搭建,眼見她一步步成型,其中的喜悅無法用言語表達。我們選擇了HTML5技術作為自己的創業方向,也經歷了諸多質疑,迷茫和無奈的時刻,但我們堅信付出總會得到回報,只要滿懷希望,熱情和汗水就會看到山頂的曙光。在諸多質疑聲中百折不撓,在幾經絕望中迎接曙光,這樣的人生才真正充實。《修仙三國》對於磊友只是一個里程碑,距離我們真正的目標其實還很遠,期待自己的H5引擎可以幫助更多的Web開發者在跨平台方面做得更加精彩!

登高,坡頂自有青天;倘若有一朵白雲在天邊閃耀,那就望雲爬坡吧!再次為所有堅持自己夢想而不懈努力的人喝彩!

(本文為知乎答覆好友提問,同時也歡迎各大媒體自由轉載但請註明知乎的出處,謝謝!)


任何框架都有一種使用範圍或者說局限,那麼它之於某一類項目是否可行,取決於團隊對這個框架的熟悉程度。這種對框架的了解和熟悉,決定了團隊是否可以繞開框架不完善甚至不支持的地方,是否可以在作出適合在框架下生長的項目計劃。我想這就是如果要採用HTML5作為項目框架首要解決的問題:足夠熟悉HTML5

很佩服趙霏和他的團隊。他們已經證明今天HTML5開發和發布大型跨平台網遊是可行的。我也認為如此,而且正在計劃在後面一個非常重要的項目中啟用HTML5,但是還不會把HTML5作為項目的基礎,而是僅僅作為一種輔助或擴展設計。

這樣做是因為我對HTML5現狀的理解:

1 HTML5,準確的說,還並沒有成為真正意義的標準。首先它還不是ISO的標準。其次對W3C來說,目前HTML5還只是候選推薦(candidate recommendation),完整的最終定義至少要等到明年。

2 客觀上,HTML5在各個瀏覽器引擎上的實現還差距頗大。Wiki上一篇 http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) 可以非常直觀的看到這個碎片化的現象。

3 對於各家瀏覽器引擎廠商來說,主觀上雖然也不會阻撓HTML5統一,但只怕不會把優化HTML5性能或者完整實現HTML5定義的規格,作為自己第一優先的工作。特別是標準化緩慢的進度令人沮喪,而HTML5並不是來自用戶觸發的需求,就很難責怪廠商有這樣的安排了。


產品過於依賴某種技術框架不是好事。

就像頁游,由於瀏覽器和flash插件的限制,性能總不能像端游那樣發揮得自由自在。

一款端游產品,多號多開是沒問題的,但移植到flash後,最多雙開,再多必死,因為flash播放器已經限定了像系統申請的內存大小。

而在移動設備上用html和app的差別,就像頁游和端游的差別。

app可以做得很龐大精美,然後用戶通過wifi或pc下載安裝,然後在2G數據網路下使用。

html就沒這優勢了,一邊玩一邊下載資源,按當前運營商的小水管和昂貴的資費,誰都接受不了。而且哪天把瀏覽器緩存清了,所有資源都要重新下載,那就哭死去吧。


HTML5就是一個套套,帶套XX能爽嗎?

產品一旦有起色了,就很快會面臨要加個功能得在有限的API環境下繞半天。。。時間都浪費在前戲上了。

要做體驗好的產品,首先得保證技術不是首要問題。否則一輩子只能玩上半場。


調用顯卡3d加速方面,pc和手機上各終端各瀏覽器的支持與默認開啟情況不一,2d canvas方面應該表現都差不多了,具體速度看手機。

前段時間研究html5音頻,看到網上討論好像這塊也不是很理想,不過有人專門提供這方面的js庫。

以前手機屏幕尺寸小,兩邊界面布局差距太大,現在應該還好吧。所以應該沒有天大的困難。手機端可能還是得考慮


手機答。

只說一個資源問題。大型網遊大多有著宏大的場景和豐富的模型貼圖材質,這些東西打成客戶端都是很大的,比如最近流行的dota2的安裝包要3.6G左右。那把這些資源一把載入到客戶端顯然不現實。如果做一些策略,實現類似POI的根據遊戲狀態再動態載入相應的資源,就需要服務端得做很多支持,並且負載巨大,載入慢了還會影響體驗。

在當下的網路環境,這個問題不是太好解決。更不提渲染質量和遊戲體驗了。


純HTML5開發遊戲是發展方向,對於大多數開發者來說目前技術還不太成熟,需要好的框架,其實傳統JS+AJAX再配合部分HTML5和CSS3技術完全可以開發出跨平台的大型網頁遊戲,而且相比AS3更方便迭代,將來轉HTML5框架也很方便,因為要素都是基於HTML和CSS的。我個人開發的世界兵棋遊戲就是使用的該技術框架,有興趣的朋友可以看下視頻,http://www.tudou.com/programs/view/FL8FA0Epy1o/?from=singlemessageisappinstalled=1


回答這個問題前應該先問問「為什麼要用html5開發遊戲?」


推薦閱讀:

想做一個H5,想請教一般需要如何構思創意及思路?
如果html傳輸全部使用json, browser 將會快很多?
HTML5定稿意味著什麼,原生應用生態系統要被顛覆嗎?
相比px而言,在響應式web設計中,em有何優勢?
求科普,請問HTML5究竟是什麼?

TAG:網頁遊戲 | 手機遊戲 | HTML5 |