火星網(wǎng)校
h5小游戲如何開發(fā)(阿里跨終端的H5游戲開發(fā)解決方案)
發(fā)布時(shí)間：2023-11-27 04:23:26 瀏覽量：112次
?阿里跨終端的H5游戲開發(fā)解決方案
Hilo是由阿里巴巴集團(tuán)開發(fā)的一款 HTML5 跨終端游戲解決方案，可以幫助開發(fā)者快速創(chuàng)建 HTML5 游戲。有以下特征：獨(dú)立模塊設(shè)計(jì)，支持多種模塊范式的包裝版本;面向?qū)ο蟪绦蚧_發(fā);多重渲染模型，其中包括 Canvas，DOM 和 WebGL 等;兼容多臺(tái)臺(tái)式機(jī)和移動(dòng)瀏覽器；使用 Flash Shim 來支持 IE ;支持物理擴(kuò)展： Chipmunk；支持骨骼動(dòng)畫擴(kuò)展： DragonBone！
1、Hilo 支持多種模塊范式的包裝版本，包括AMD，CMD，COMMONJS，Standalone多種方式接入。另外，你可以根據(jù)需要新增和擴(kuò)展模塊和類型；
2、極精簡(jiǎn)的模塊設(shè)計(jì)，完全面向?qū)ο螅?/p>
3、多種渲染方式, 提供DOM，Canvas，F(xiàn)lash，WebGL等多種渲染方案（目前已經(jīng)申請(qǐng)專利）；
4、全端瀏覽器的支持和高性能方案，獨(dú)有的Flash渲染方案，即使在低版本IE瀏覽器下也可以跑起來“酷炫”游戲； DOM渲染方案能顯著解決低性能手機(jī)瀏覽器遇到的性能問題；
5、物理引擎支持——Chipmunk，支持自擴(kuò)展物理實(shí)現(xiàn)；骨骼動(dòng)畫支持——DragonBones，同時(shí)內(nèi)建骨骼動(dòng)畫系統(tǒng)——Tahiti（目前內(nèi)部使用）；
6、案例豐富，框架成熟，已經(jīng)經(jīng)歷多屆阿里巴巴雙十一，年中大促互動(dòng)營(yíng)銷活動(dòng)考驗(yàn)；
- 獲取JS（參考文檔或者從Github下載最新版本js文件）
<script src="http://www.toutiao.com/a6738379197732880908/hilo-standalone.js"></script>
- 創(chuàng)建舞臺(tái)
舞臺(tái)Stage是一個(gè)各種圖形、精靈動(dòng)畫等的總載體。所以可見的對(duì)象都要添加到舞臺(tái)或其子容器后，才會(huì)被渲染出來。
var stage = new Hilo.Stage({
renderType:'canvas',
container: containerElem,
width: 320,
height: 480
});
Stage構(gòu)造函數(shù)接收一個(gè)參數(shù)properties，此參數(shù)包含創(chuàng)建stage的各種屬性。
- 創(chuàng)建定時(shí)器
舞臺(tái)Stage上的物體的運(yùn)動(dòng)等變化，都是通過一個(gè)定時(shí)器Ticker不斷地調(diào)用Stage.tick()方法來實(shí)現(xiàn)刷新的。
var ticker = new Hilo.Ticker(60); ticker.addTick(stage); ticker.start();
- 創(chuàng)建可視對(duì)象
舞臺(tái)上的一切對(duì)象都是可視對(duì)象，可以是圖片、精靈、文字、圖形，甚至DOM元素等等。Hilo提供了一些基本的可視類供您使用，比如添加一個(gè)圖片到舞臺(tái)上：
var bird = new Hilo.Bitmap({
image: 'images/bird.png'
}).addTo(stage);
- 事件交互
要想舞臺(tái)上的圖形、精靈動(dòng)畫等對(duì)象能響應(yīng)用戶的點(diǎn)擊、觸碰等交互事件，就必需先為舞臺(tái)開啟DOM事件響應(yīng)，然后就可以使用View.on()來響應(yīng)事件。
stage.enableDOMEvent(Hilo.event.POINTER_START, true);
sprite.on(Hilo.event.POINTER_START, function(e){
console.log(e.eventTarget, e.stageX, e.stageY);
});
接下來，您就可以開始利用hilo提供的各種可視類來創(chuàng)建各種圖形、精靈動(dòng)畫，盡情發(fā)揮您的創(chuàng)造力，開始您的HTML5游戲之旅吧！
Hilo對(duì)于開發(fā)H5游戲的開發(fā)者和對(duì)Web端渲染感興趣的小伙伴來說值得一看，Hilo有諸多案例可供參考，如果你想繼續(xù)深入了解它，可移步官方文檔或者Github一探究竟！
熱門課程推薦
熱門資訊
-
探討游戲引擎的文章，介紹了10款游戲引擎及其代表作品，涵蓋了RAGE Engine、Naughty Dog Game Engine、The Dead Engine、Cry Engine、Avalanche Engine、Anvil Engine、IW Engine、Frostbite Engine、Creation引擎、Unreal Engine等引擎。借此分析引出了游戲設(shè)計(jì)領(lǐng)域和數(shù)字藝術(shù)教育的重要性，歡迎點(diǎn)擊咨詢報(bào)名。
-
2. 手機(jī)游戲如何開發(fā)(如何制作傳奇手游，都需要準(zhǔn)備些什么？)
?如何制作傳奇手游，都需要準(zhǔn)備些什么？提到傳奇手游相信大家都不陌生，他是許多80、90后的回憶；從起初的端游到現(xiàn)在的手游，說明時(shí)代在進(jìn)步游戲在更新，更趨于方便化移動(dòng)化。而如果我們想要制作一款傳奇手游的
-
3. B站視頻剪輯軟件「必剪」：免費(fèi)、炫酷特效，小白必備工具
B站視頻剪輯軟件「必剪」，完全免費(fèi)、一鍵制作炫酷特效，適合新手小白。快來試試！
-
4. Steam值得入手的武俠游戲盤點(diǎn)，各具特色的快意江湖
游戲中玩家將面臨武俠人生的掙扎抉擇,戰(zhàn)或降?殺或放?每個(gè)抉定都將觸發(fā)更多愛恨糾葛的精彩奇遇?！短烀嬗肪哂卸嗑€劇情多結(jié)局,不限主線發(fā)展,高自由...
-
5. Bigtime加密游戲經(jīng)濟(jì)體系揭秘，不同玩家角色的經(jīng)濟(jì)活動(dòng)
Bigtime加密游戲經(jīng)濟(jì)模型分析，探討游戲經(jīng)濟(jì)特點(diǎn)，幫助玩家更全面了解這款GameFi產(chǎn)品。
-
6. 3D動(dòng)漫建模全過程，不是一般人能學(xué)的會(huì)的，會(huì)的多不是人?
步驟01:面部,頸部,身體在一起這次我不準(zhǔn)備設(shè)計(jì)圖片,我從雕刻進(jìn)入。這一次,它將是一種純粹關(guān)注建模而非整體繪畫的形式。像往常一樣,我從Sphere創(chuàng)建它...
-
7. 3D動(dòng)畫軟件你知道幾個(gè)?3ds Max、Blender、Maya、Houdini大比拼
當(dāng)提到3D動(dòng)畫軟件或動(dòng)畫工具時(shí),指的是數(shù)字內(nèi)容創(chuàng)建工具。它是用于造型、建模以及繪制3D美術(shù)動(dòng)畫的軟件程序。但是,在3D動(dòng)畫軟件中還包含了其他類型的...
-
?三昧動(dòng)漫對(duì)于著名ARPG游戲《巫師》系列，最近CD Projekt 的高層回應(yīng)并不會(huì)推出《巫師4》。因?yàn)椤段讕煛废盗性诓邉澋臅r(shí)候一直定位在“三部曲”的故事框架，所以在游戲的出品上不可能出現(xiàn)《巫師4》
-
9. 3D打印技巧揭秘！Cura設(shè)置讓你的模型更堅(jiān)固
想讓你的3D打印模型更堅(jiān)固？不妨嘗試一下Cura參數(shù)設(shè)置和設(shè)計(jì)技巧，讓你輕松掌握！
-
10. 虛幻引擎5節(jié)省存儲(chǔ)空間用這招!緩存的清理與設(shè)置
眾所周知,虛幻引擎5(下面簡(jiǎn)稱UE5)特別占用存儲(chǔ)空間,僅一個(gè)版本安裝好的文件就有60G,這還不包括我們?cè)谑褂脮r(shí)保存的工程文件和隨之產(chǎn)生的緩存文件。而...
最新文章
