火星網(wǎng)校
h5游戲用什么開發(fā)(Hilo)
發(fā)布時間：2023-11-27 23:16:02 瀏覽量：135次
?Hilo
今天推薦一個適合用來做營銷小游戲的 H5 游戲引擎，輕量簡單容易上手，快速上線提前下班靠它了。
Hilo 是阿里團隊推出的一個開源的 H5 游戲引擎，特點是對非游戲從業(yè)的前端開發(fā)者非常友好，輕量無依賴，適合用來開發(fā)營銷小游戲。
Hilo 官網(wǎng)
作為一款阿里團隊內(nèi)部一直在使用游戲引擎，Hilo 活躍在阿里系大量的電商節(jié)日和活動中，比如往年的雙十一狂歡城、手機淘寶中使用 webview 加載的打年獸、618 搶豪車、雙十一紅包雨等 H5 互動游戲，都是基于 Hilo 開發(fā)。
Hilo 作品例子
- 支持模塊化開發(fā)，同時提供獨立版本(可直接引入) / RequireJS(AMD) / CommonJS / SeaJS(CMD) / Kissy 等多種模塊方式的包裝版本和跨終端解決方案，滿足不同前端開發(fā)者的習(xí)慣
- 無依賴于其他包，輕量到只有 70 KB 的體積
- 支持 DOM 渲染，Canvas 渲染和 WebGL 渲染，集成了 Hilo Audio (游戲音頻音效)、 Hilo Preload (預(yù)加載) 和動畫紋理等工具
Hilo 文檔
我學(xué)習(xí)和使用 Hilo 源自于一次時間緊迫的營銷開發(fā)需求 – 紅包雨，這個需求的技術(shù)要求是對動畫流暢度和點擊響應(yīng)速度的保障。使用常規(guī)的 div + css ，貌似難以支撐需求，轉(zhuǎn)而做了 H5 游戲引擎的技術(shù)調(diào)研。
在對比了市面上相對專業(yè)的 H5 游戲引擎（比如 Cocos2d-x / Egret 白鷺引擎 / createjs 和 Phaser），發(fā)現(xiàn)這些引擎不僅專業(yè)，還有海量的文檔，沒有一定的游戲開發(fā)技術(shù)，很難在短時間啃下來。后面偶然發(fā)現(xiàn)了 Hilo 這款不太知名的游戲框架，從它的演變來看，發(fā)現(xiàn) Hilo 屬于阿里前端團隊在實踐中封裝出來的一套工具庫。
從 Hilo 支持的 API 看，Hilo 的設(shè)計思路更加偏向于前端開發(fā)者，而非游戲開發(fā)者，在 javascript 基礎(chǔ)過關(guān)的情況下，借助官網(wǎng)的文檔，上手很快。官網(wǎng)提供了一個循循善誘的 Flappy Bird 休閑小游戲的教程，當(dāng)天我用了一個下午的時間跟著做，游戲開發(fā)中舞臺、場景、動畫、容易等概念基本弄懂，用來做簡單營銷互動小游戲再適合不過了。
在后續(xù)長達(dá) 1 年的工作中，我還基于 Hilo 搭建了一套簡單的內(nèi)部使用可視化互動書編輯器，總結(jié)出使用 Hilo 開發(fā)的幾個需要注意的點：
- 如果要做全屏小游戲，Hilo 沒有提供特別好的全屏適配方案，按照官方提供的代碼例子，整個舞臺以及里面的元素會變形，需要做一些屏幕參數(shù)計算的額外工作
- 可能是阿里外部用的人不太多，官網(wǎng)提供的代碼例子比較少，雖然有交流群，但我遇到奇怪的問題，幾乎都是自行解決
- 如果不是像 2048 這種休閑益智類小游戲，不要選擇 DOM 模式來渲染，DOM 模式雖然性能開銷小，但是對與動畫流暢度和點擊響應(yīng)速度是真不好
- 官方的圖片、音頻預(yù)加載工具不好用，我用的 preload.js 代替的
Hilo 是一個入門級的 H5 游戲引擎，讓前端開發(fā)者不用具備太多游戲開發(fā)知識，就可以開發(fā)互動小游戲，用來做營銷互動游戲或者開發(fā)簡單的休閑小游戲是完全夠用的，也特別適合用 webview 內(nèi)嵌 H5 游戲在 APP 應(yīng)用中。當(dāng)然如果你想轉(zhuǎn)游戲開發(fā)，還是得學(xué)習(xí) Cocos2d-x / Egret 白鷺引擎 / Phaser 這樣的引擎，他們都包含諸如物理引擎、3D 渲染、骨骼動畫等完整支撐，以及提供了對游戲素材生成的工具，甚至可以編譯成原生 APP。在這之前，也可以先花一點點時間了解 Hilo，作為游戲開發(fā)入門的第一課吧。
如果只是為了做動畫效果，可以看看之前推薦的 SpriteJs 和 lucky canvas（抽獎類庫）。
Hilo 是阿里巴巴前端團隊出品的 H5 游戲引擎，源碼基于 MIT 開源協(xié)議托管在 Github 上，任何個人和公司都可以免費下載使用在自己的項目上。
關(guān)注我，持續(xù)分享高質(zhì)量的免費開源、免費商用的資源。
↓↓點擊查看本次分享的網(wǎng)址。
Hilo - 阿里巴巴出品的免費開源 H5 游戲引擎，輕巧無依賴，適合用來開發(fā)營銷互動小游戲｜那些免費的磚
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設(shè)計領(lǐng)域和數(shù)字藝術(shù)教育的重要性，歡迎點擊咨詢報名。
-
2. 手機游戲如何開發(fā)(如何制作傳奇手游，都需要準(zhǔn)備些什么？)
?如何制作傳奇手游，都需要準(zhǔn)備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時代在進(jìn)步游戲在更新，更趨于方便化移動化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費、一鍵制作炫酷特效，適合新手小白?？靵碓囋?！
-
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結(jié)局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經(jīng)濟體系揭秘，不同玩家角色的經(jīng)濟活動
Bigtime加密游戲經(jīng)濟模型分析，探討游戲經(jīng)濟特點，幫助玩家更全面了解這款GameFi產(chǎn)品。
-
6. 3D動畫軟件你知道幾個?3ds Max、Blender、Maya、Houdini大比拼
當(dāng)提到3D動畫軟件或動畫工具時,指的是數(shù)字內(nèi)容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術(shù)動畫的軟件程序。但是,在3D動畫軟件中還包含了其他類型的...
-
7. 3D動漫建模全過程，不是一般人能學(xué)的會的，會的多不是人?
步驟01:面部,頸部,身體在一起這次我不準(zhǔn)備設(shè)計圖片,我從雕刻進(jìn)入。這一次,它將是一種純粹關(guān)注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
8. 如何自己開發(fā)一款游戲(游戲開發(fā)入門必看：五大獨立游戲開發(fā)技巧)
?游戲開發(fā)入門必看：五大獨立游戲開發(fā)技巧無論您是剛剛起步開發(fā)自己的第一款游戲，還是已經(jīng)制作了幾款游戲，本篇文章中的5大獨立游戲開發(fā)技巧都可以幫助您更好地設(shè)計下一款游戲。無論你對游戲有著什么樣的概念，都
-
?三昧動漫對于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應(yīng)并不會推出《巫師4》。因為《巫師》系列在策劃的時候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
10. 3D打印技巧揭秘！Cura設(shè)置讓你的模型更堅固
想讓你的3D打印模型更堅固？不妨嘗試一下Cura參數(shù)設(shè)置和設(shè)計技巧，讓你輕松掌握！
最新文章
