首頁 > html教程 > HTML熱點 閱讀:0更新時間:2020-12-20 09:49:49

HTML5大作《時之召喚》研發經驗分享

悟空間作為H5大型游戲研發領域的先行者之一,一直致力于大型H5游戲的原創與精品化探索。近日,悟空間副總裁何楓應邀出席了“TFC&Layabox大型html5金秋新品發布會”,并在發布會上以“大型H5游戲的探索者”為主題。就《時之召喚》的產品研發經驗與技術研發歷程進行了分享。


為什么立項做大型H5游戲《時之召喚》?

悟空間在做大型H5游戲《時之召喚》之前,曾經也做過一些輕度的H5游戲。何楓認為,輕度H5游戲與社交的結合非常自然,傳播很容易,但從長遠來看,輕度H5游戲只適用于營銷等硬場景上,并不是CP們可以長遠發展依賴的產品形態,因為輕度游戲很難有深度的用戶粘性,很難獲得商業的盈利,悟空間此前只是對輕度H5游戲進行過一些探索,如今之所以將演講主題取名為“大型H5游戲的探索者”,是因為經過輕度游戲的技術積累,現在推出了《時之召喚》這款真正的大型H5游戲。

早在立項手游之時,悟空間就思考了利用H5該做出什么樣的一款手游的問題,結合在瀏覽器內容上的積累,最終定下了產品立項時的幾個基調:重度、深度與廣度,只有玩家有了足夠大的探索空間,開發者才有足夠大的運營何盈利空間。此外就是希望在玩法上能有所創新,于是就在2013年正式啟動產品的立項工作。當時在H5平臺上日漫題材還是相對空白的領域,因此選擇了要做一款日漫類型的帶有創新性玩法的RPG。

《時之召喚》內容設計及與IP結合經驗

接下來,何楓對《時之召喚》這款產品做了深入淺出的介紹,比如為了保證讓玩家的可探索空間足夠大,產品在設計之初就將游戲的主地圖與主城都設計的異常龐大。盡管大家看到的最多只能是一個屏幕大小,但實際上可供探索的空間差不多是這個屏幕的6-9倍那么大。為了實現巨大地圖與場景的效果,甚至到了每一幀都需要實時檢測的地步,運行起來的壓力也十分巨大。


在《時之召喚》整個游戲的內容規劃上,悟空間沒用第三方IP,因此采用了自己的原創IP。從角色設計、腳本設計,到世界觀設計,都是自己開始堆砌的,也做了角色背景的設置。雖然做起來是挺有積累,但是其實這個過程很艱難,也耗費了非常大的精力?!稌r之召喚》里每一個場景都有很豐富的腳本設計,每一個角色屬性都非常龐大,這也帶來了很大的運營空間和活動空間。而在戰斗畫面方面,整體畫面呈現得不錯。悟空間甚至自己還做了一些關于《時之召喚》這個漫畫IP的運營。

悟空間針對《時之召喚》的技術開發歷程

在介紹完《時之召喚》這款大型H5游戲的基本情況后,何楓接著介紹了整個游戲的技術開發過程,順便也簡單地介紹了悟空間和Layabox之間的淵源。

悟空間摸索了很長時間,最早的時候是很典型的渲染,完全是Canvas做的,后來重新寫了一遍,整個過程都遇到了很多問題。悟空間雖然也進行了調優,但是很難整體上實現調優。尤其是不同瀏覽器內核對canvas渲染加速支持的碎片化問題,很難保證所有的瀏覽器上都能達到同樣的效果。為此,悟空間曾經嘗試過一些比較經典的加速算法,這種方式在某一些渲染上效果不錯,有一些就差了點,所以很難找到特別好的方式來解決所有的問題。

在Canvas渲染方面,有些API是渲染性能殺手,典型的就是像素級讀寫API,例如getImageData, putImageData。提到H5運行性能時,不只是渲染,還有一個很重要的性能挑戰,就是在JS自身的運行性能。JS本身是一種很靈活的高級語言,在這些對應用層非常靈活的機制對底層瀏覽器內核卻會帶來巨大的性能挑戰。這方面,其實有一些坑,需要上層應用開發者特別注意;悟空間本身有瀏覽器內核開發的技術背景,在JS本身的架構設計方面,運行性能是非常不錯的。

《時之召喚》是一個2D游戲,WebGL不僅僅可以作3D,2D也可以用,悟空間就是把比較前沿的HTML5技術拿到2D領域來應用。到目前為止,國內悟空間仍然是唯一一家CP完全用WebGL來開發H5重度手游的。

WebGL的好處就是上層應用直接調用底層硬件加速;但是WebGL本身也需要很多調優,比如減少三角數量,優化紋理組合,通過臟運算減少CPU側計算等。騰訊QQ手機瀏覽器X內核對WebGL的整體支持效果非常不錯,這給《時之召喚》選擇直接基于X5內核運行的信心所在。不過在基于WebGL的整個開發過程還是遇到了不少問題,比如說對于不同的手機,存在一些手機OS底層對硬件渲染的支持問題;另外WebGL的開發和調試非常不同于傳統的基于CPU運算的應用,如果CP直接基于WebGL開發游戲,難度是比較高的,CP要有非常充分的準備。在這方面,悟空間也非常希望與其他HTML5手游CP交流。


《時之召喚》項目立項比較早,悟空間跟Layabox董事長謝成鴻早已結識,在Layabox還沒有發布的時候,謝成鴻就在游戲設計和技術方面給了年輕的悟空間很多指導。最近,謝成鴻建議將《時之召喚》這款產品在Layabox的運行器(Laya.Player)上跑一下;結果悟空間發現,基于標準HTML5/JS/WebGL的產品,可以在Laya.Player上達到非常出色的運行效果!

悟空間對H5技術及相關產業鏈的看法

悟空間作為一家長期專注H5行業的創業公司,也有一些技術性產品,因此對于H5的技術以及相關產業鏈也有著自己的思考與看法,何楓從兩個方面進行了總結,如下:

第一方面,就技術產業鏈來說,整個H5技術是趨于成熟的,可以說,所有的難題都是有解決方案的,包括優秀的引擎支持,以及渲染的問題,這是完全可以解決的。同時,包括運營效率問題,以及預算的方式,其實都可以在很大程度上提升性能。H5在運營性能上,并不會成為特別大的問題。此外,就悟空間看來,還有一個加載的問題,像QQ空間,它的WIFI加載游戲比例很高,但是現實中還有很多是3G和4G網絡的情況。由于大型游戲的加載還是依賴網絡,所以需要考慮一下,加載過程中能不能解決分層次加載,先加載輪廓,別人玩的時候再加載圖片,這跟傳統的手機端游有一點區別。

第二方面,H5生態鏈是走向成熟的,包括平臺、技術、渠道、發行、支付等等,比如網易也發布了《悟空歸來》,真正推出他們H5的游戲,從對大廠的吸引力來看整個產業鏈是在走向成熟的。還有一些值得大家去思考的問題,H5游戲究竟應該做成什么樣子?H5有它獨特的優勢,極易傳播,極易與社交結合,有獨特的渠道和流量,有獨特的應用場景。如何充分利用H5的這些優勢,整個行業還在探索,這是值得大家思考的問題。

最后,何楓介紹了悟空間的團隊特點:悟空間是一個比較年輕化的國際化團隊。在北美還有一個完整獨立的團隊,也在做H5游戲,但只是針對海外市場來做;中國團隊是在北京,非常歡迎美術、技術、運營等合作,也非常歡迎各方人才加入團隊。


長按識別圖中二維碼,關注Layabox公眾帳號!

beylze編程學院,一個分享編程知識和seo優化知識的網站。跟著beylze一起學習,每天都有進步。

通俗易懂,深入淺出,一篇文章只講一個知識點。

文章不深奧,不需要鉆研,在公交、在地鐵、在廁所都可以閱讀,隨時隨地漲姿勢。

文章不涉及代碼,不燒腦細胞,人人都可以學習。

當你決定關注beylze(公眾號:beylze),你已然超越了90%的其他從業者!

相關文章

優秀教程

国产亚洲欧美日韩