阿里開源HTML5小游戲開發框架Hilo實戰教程

言

開發基于Html5的小游戲并不困難，基本思路就是使用Html5的canvas進行游戲圖像繪制，通過監聽Dom元素的touch事件并觸發相應的動畫，來實現游戲的交互。難在于解決開發后面臨的不同設備游戲畫面、音效等兼容性問題。

使用Hilo可以幫助我們解決開發過程遇到的一些常見的坑。在Hilo中，所有元素包括舞臺、舞臺里的人物物品都是一個對象，有著一些相似的屬性，如寬度、高度等。一個對象可以包括另一個子對象，如舞臺對象可以有人物等子對象。所有元素類對象都是Hilo.View類的子類。

下面通過一個手指觸摸拋球動畫的例子為大家介紹一下怎么使用Hilo來開發一個H5小游戲。

一、安裝

引入Hilo類庫。

<script type="javascript" src="hilo-standalone.js" ></script>

二、資源預加載

預先加載各種圖片資源，提升用戶體驗。

//這里可以加開始顯示loading動畫的邏輯
var queue=new Hilo.LoadQueue();
var resources=[
 {id:'ball',type:'png',src:_ball,noCache:false,crossOrigin:'anonymous'},
 {id:'ball2',type:'png',src:_ball2,noCache:false,crossOrigin:'anonymous'},
];
queue.add(resources);
queue.on('complete',function(e) {
 //資源加載完成后的邏輯，比如隱藏loading
});
queue.start();

三、創建舞臺

舞臺是一個各種圖形、精靈動畫等的總載體。所有用Hilo創建的可見的對象都必須添加到舞臺或其子容器后，才會被渲染和顯示出來。舞臺實質上也是一個容器Container，不過它是一個頂級容器。它除開擁有普通容器的功能，它還擁有一些特殊屬性和方法。

html代碼

<div id="game-container"></div>

js代碼

var stage=new Hilo.Stage({
 renderType:'canvas',
 container: document.getElementById('game-container'),
 width: 480,
 height: 320
});

四、啟用事件交互

Hilo對象默認不允許觸發點擊等事件，需要先給舞臺對象啟用。下面這段代碼表示啟用對用戶手指開始觸摸、移動、停止觸摸等事件的事件監聽。

stage.enableDOMEvent(Hilo.event.POINTER_START, true);
stage.enableDOMEvent(Hilo.event.POINTER_MOVE, true);
stage.enableDOMEvent(Hilo.event.POINTER_END, true);

五、創建定時器

用于不斷刷新渲染頁面動畫

var ticker=new Hilo.Ticker(100);
ticker.addTick(stage);
ticker.addTick(Hilo.Tween);
ticker.start();

六、添加舞臺元素

給舞臺添加一個元素“球”。image是資源對象，可以從預加載隊列中獲取，x是球的起始橫坐標，y是球的起始縱坐標，width、height分別是寬度和高度。

var ballImg=queue.getContent('ball');
ball=new Hilo.Bitmap({
 image:ballImg,
 x:ballX,
 y:ballY,
 width:trueBallWidth,
 height:trueBallHeight
});
stage.addChild(ball);

七、監聽觸摸事件

用戶開始觸摸舞臺時記錄一下觸摸點的坐標，觸摸結束后再記錄一下此時觸摸點的坐標，通過這兩個坐標計算出手指滑動的方向，從而控制球往哪個方向拋出。

stage.on(Hilo.event.POINTER_START,function(e)
 e.preventDefault();
 currentEvent=e.changedTouches[0].identifier;
 startTouchXList[currentEvent]=e.changedTouches[0].clientX;
 startTouchYList[currentEvent]=e.changedTouches[0].clientY;
 endTouchXList[currentEvent]=e.changedTouches[0].clientX;
 endTouchYList[currentEvent]=e.changedTouches[0].clientY;
});
stage.on(Hilo.event.POINTER_MOVE,function(e)
 e.preventDefault();
 currentEvent=e.changedTouches[0].identifier;
 endTouchXList[currentEvent]=e.changedTouches[0].clientX;
 endTouchYList[currentEvent]=e.changedTouches[0].clientY;
});
stage.on(Hilo.event.POINTER_END,function(e)
 e.preventDefault();
 endTouchXList[currentEvent]=e.changedTouches[0].clientX;
 endTouchYList[currentEvent]=e.changedTouches[0].clientY;
 //拋球
 throwBall(startTouchXList[currentEvent],startTouchYList[currentEvent],endTouchXList[currentEvent],endTouchYList[currentEvent]);
})

八、動畫實現

實現球飛出的動畫，用Hilo.Tween.to方法來控制tmpBall對象移動。

var tmpBall=new Hilo.Bitmap({
 image:ballImg,
 x:ballX,
 y:ballY-5,
 width:trueBallWidth,
 height:trueBallHeight
});
stage.addChild(tmpBall);
//球飛出
Hilo.Tween.to(tmpBall,{
 x:endPoint.x,
 y:endPoint.y,
 width:trueBallWidth/percent,
 height:trueBallWidth/percent
},{
 duration:ballSpeed,
 delay:0,
 ease:Hilo.Ease.Linear.EaseNone,
 onComplete:function() {
 });

參考文檔

官網：http://hiloteam.github.io/index.html
官方演示：http://hiloteam.github.io/examples/index.html

關注微信公眾號“全棧社區”，可獲取更多站長、開發者必備的前端、后端、運維技術干貨。
18元美國VPS、建站主機：https://www.salasolo.com

家好，很高興又見面了，我是"高級前端?進階?"，由我帶著大家一起關注前端前沿、深入前端底層技術，大家一起進步，也歡迎大家關注、點贊、收藏、轉發，您的支持是我不斷創作的動力。

什么是 Phaser

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser 是一個快速、免費且有趣的開源 HTML5 游戲框架，可跨桌面和移動 Web 瀏覽器提供 WebGL 和 Canvas 渲染，也可以使用第 3 方工具將游戲編譯為 iOS、Android 和本機應用程序。開發者可以使用 JavaScript 或 TypeScript 進行開發。

Phaser 3.80 的發布帶來了一系列新功能和改進，豐富了開發人員的體驗，亮點包括：

WebGL 上下文丟失處理：一個強大的解決方案，即使在 WebGL 上下文丟失的情況下也能保持游戲平穩運行，從而確保游戲不間斷
壓縮紋理改進：添加了對 BPTC 和 RGTC 文件格式、sRGB 色彩空間的支持以及圍繞 Mipmap 級別的大量更新。
Base64 加載器集成：允許加載 Base64 編碼資源，促進需要嵌入式資源（例如：可播放廣告）的環境的開發流程更加順暢。
縮放管理器捕捉模式：一項新功能允許開發人員為游戲尺寸設置 “捕捉” 值，非常適合像素藝術游戲和需要精確縮放控制的游戲。
圖塊地圖增強功能：修復和更新了圖塊碰撞和渲染、增強了圖塊到精靈創建屬性以及對基于圖塊的游戲元素的更多控制。

目前，Phaser 由 Phaser Studio Inc 積極開發和維護，由于快速支持和開發人員友好的 API，Phaser 目前是 GitHub 上最受好評的游戲框架之一。

目前 Phaser 在 Github 通過 MIT 協議開源，有超過 36.3k 的 star、7.1k 的 fork、33.4k 的項目依賴量，是一個值得關注的前端開源項目。

如何使用 Phaser

開發者可以通過 NPM 安裝，也可以通過 CDN 引入：

npm install phaser
// npm 安裝
<script src="//cdn.jsdelivr.net/npm/phaser@3.80.1/dist/phaser.min.js"></script>
// cdn 引入

如果開發者熟悉 Web 開發和打包程序，Phaser 已經發布了一系列項目模板來幫助快速開始游戲，比如：Vite、Webpack、Esbuild、Rollup、Parcel 等等。

下面是 Phaser 官方的基礎示例：

const config={
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    // 畫布大小
    physics: {
        default: 'arcade',
        arcade: {
            gravity: {y: 200}
        }
    },
    scene: Example
    // 場景就是下面的 Example
};
const game=new Phaser.Game(config);

config 是一個非常標準的 Phaser 3 游戲配置對象，其表明使用 WebGL 渲染器，將畫布的大小設置為 800 x 600 像素，啟用 Arcade 物理。

class Example extends Phaser.Scene
    constructor (){
        super();
    }
    preload (){
        this.load.setBaseURL('https://labs.phaser.io');
        // 將 Base URL 設置為 Phaser 服務器并加載 3 個 PNG 文件
        this.load.image('sky', 'assets/skies/space3.png');
        this.load.image('logo', 'assets/sprites/phaser3-logo.png');
        this.load.image('red', 'assets/particles/red.png');
    } 
    create (){
        this.add.image(400, 300, 'sky');
        const particles=this.add.particles(0, 0, 'red', {
            speed: 100,
            scale: { start: 1, end: 0 },
            blendMode: 'ADD'
        });

        const logo=this.physics.add.image(400, 100, 'logo');
        logo.setVelocity(100, 200);
        logo.setBounce(1, 1);
        logo.setCollideWorldBounds(true);
        particles.startFollow(logo);
    }
}

關于每一句代碼的含義可以參考文末資料，本文不再過多贅述。

參考資料

https://github.com/phaserjs/phaser

https://newdocs.phaser.io/docs/3.80.0

TML5技術的興起有多方面的原因，其中比較重要的一點就是，越來越多的開發者選擇以網頁的形式來制作應用軟件與游戲。本文通過設計一款卷軸類游戲，介紹了如何利用lufylegend游戲引擎來開發基于HTML5的Web游戲。

1、HTML5技術特點

HTML5是HTML的最新規則版本，它有很多優點，其中比較重要的一點是具有強大的跨平臺特性。HTML5增加了很多新的元素，其中包括與Web游戲設計緊密相關的Canvas元素。

從文字處理到電子游戲，它們所需的全部圖形功能，Canvas元素都會提供。盡管它在各個平臺中的性能有所差異，不過總的來說，Canvas的運行速度還是很快的。瀏覽器廠商們在遵循HTML5規范方面做得都相當好，所以，編碼良好的Canvas應用程序無需修改即可在兼容HTML5的瀏覽器中運行。

2、lufylegend開發框架

現在的游戲開發變得越來越復雜，需要制作各種炫麗的效果，還要制作各種基于2D或者3D的場景。為了節省游戲開發者的時間，讓開發者集中精力在游戲的創新上，出現了許許多多的游戲引擎。

lufylegend是一個HTML5開源引擎，它實現了利用仿ActionScript3.0的語法進行HTML5的開發，包含了LSprite，LBitmapData，LBitmap等多個AS開發人員熟悉的類，支持Google Chrome，Firefox，Opera，IE9，IOS，Android等多種熱門環境。

3、利用HTML5技術來設計卷軸類游戲

在本游戲制作中，可以將游戲層次劃分為：進度條顯示層、背景層、人物層、障礙層。進度條顯示層用來顯示圖片讀取時的進度，背景層用來顯示不斷卷動的背景圖片，人物層用來顯示游戲中的主角，障礙層用來顯示不斷出現的各種地板。

本游戲利用HTML5的跨平臺特點，分別給游戲添加鍵盤事件和觸屏事件，以使游戲在電腦上和智能手機上都能運行。

3.1、游戲初始化

先利用LSprite對象的graphics屬性和LTextField對象制作游戲標題和游戲說明文字，然后定義一個進度條，利用LLoadManager來顯示進度條，最后給背景層backLayer增加鼠標點擊事件。主要代碼如下：

　　loadingLayer=new LoadingSample2（50）； 
　　backLayer.addChild（loadingLayer）； 
　　LLoadManager.load（imgData，function（progress）{ 
　　loadingLayer.setProgress（progress）； 
　　}，gameInit）；

當點擊游戲畫面的時候，首先要將背景層清空，然后添加背景圖片。LSprite的die函數表示移除所有的事件監聽，removeAllChild函數表示移除所有子對象。主要代碼如下：

　　backLayer.addEventListener（LMouseEvent，MOUSE_UP，gameStart）； 
　　function gameStart{ 
　　backLayer.die； 
　　backLayer.removeAllChild；}

3.2、顯示卷軸背景

新建一個Background類，在其構造器內建立3個LBitmap對象，并依次顯示。因為背景圖片是可以無縫銜接的，所以顯示到畫面上就好像一張圖片一樣。

Background類的run函數是將Background對象中的3個子圖片向上移動一個STAGE_STEP步長，這個步長會在定義部分提前定義好相應的值，待第一個LBitmap對象移出屏幕后，就會把第二個LBitmap對象的坐標賦值給第一個LBitmap對象，然后再重新計算其他兩個LBitmap對象的坐標。相關代碼如下：

　　Background.prototype.run=function{
　　var self=this；
　　self.bitmap1.y-=STAGE_STEP；
　　self.bitmap2.y-=STAGE_STEP；
　　self.bitmap3.y-=STAGE_STEP；
　　if（self.bitmap1.y<-self.bitmap1.getHeight）{
　　self.bitmap1.y=self.bitmap2.y；
　　self.bitmap2.y=self.bitmap1.y+self.bitmap1.getHeight；
　　self.bitmap3.y=self.bitmap1.y+self.bitmap1.getHeight*2；}}

在循環播放監聽函數onframe中不斷調用Background類的run函數，就可以達到背景卷動的效果。

3.3 添加地板

在這個游戲中，有各種各樣的地板，這些地板有一些共同的屬性，比如它們都在不停地向上移動。為了實現這些共同的屬性，先建立一個Floor類，作為所有地板的父類，這個父類里包含了所有地板的公共部分。Floor類的定義如下：

　　function Floor{ 
　　base（this，LSprite，[]）； 
　　var self=this； 
　　self.hy=0；

　　self.setView； 
　　} 
　　Floor.prototype.setView=function{} 
　　Floor.prototype.onframe=function{ 
　　var self=this； 
　　self.y-=STAGE_STEP； 
　　}； 
　　Floor.prototype.hitRun=function{}

其中，hy屬性是用來控制游戲主角相對于地板的位置，setView函數用于給地板設定皮膚，每調用一次onframe函數，地板就向上移動一個STAGE_STEP長度。當游戲主角落到每個地板上，會根據地板的不同而有不同的表現，比如強制左移，強制右移，或者向上跳起等，hitRun函數就是為了實現這些不同的表現而建立的。

有了公共類Floor，各種各樣的地板子類都必須繼承自Floor，并重寫相應的setView、onframe和hitRun函數。

3.4、添加游戲主角

主角類Chara繼承自LSprite，其主要屬性有：moveType用來控制游戲主角是左移還是右移，hp表示當前血量，mapHp表示最大血量，hpCtrl用來控制血量恢復的速度，isJump用來表示游戲主角的當前狀態是否處于跳躍狀態，index用來控制動作變換的快慢，speed表示下落的速度，_charOld用來記錄游戲主角每次下落之前的y坐標。

Chara類的changeAction函數用于控制游戲主角的動作，定義如下：

　　Chara.prototype.changeAction=function{ 
　　var self=this； 
　　if（self.moveType=="left"）{hero.anime.setAction（3）；} 
　　else if（self.moveType=="right"）{hero.anime.setAction（2）；} 
　　else if（hero.isJump）{hero.anime.setAction（1，0）；} 
　　else{hero.anime.setAction（0，0）；} }

changeAction函數的原理是根據moveType來設定游戲主角的動作是左移還是右移，當既不是左移也不是右移的時候，則判斷其狀態是不是跳躍，是則設定動作為跳躍，否則設定動作為站立。

3.5、游戲數據顯示

游戲的數據包括游戲主角的血量和總共下降的層數，首先建立幾個變量來表示這些數：layers表示下降的層數，初始值為0；layersText用來將層數的數值顯示到畫面上；hpText用來將血量顯示到畫面上。然后建立showInit函數來進行文字顯示的初始化，主要代碼如下：

　　function showInit{ 
　　layersText=new LTextField； 
　　layersText.x=10； 
　　layersText.y=20； 
　　layersText.size=20； 
　　layersText.weight="bolder"； 
　　layersText.color="#ffff00"； 
　　backLayer.addChild（layersText）； 
　　}

完成以上的工作，游戲制作完成，在瀏覽器中運行。

4、結束語

本文介紹了如何在游戲中實現卷軸滾動效果，游戲雖然簡單，但是里面有彈跳、墜落、重力等內容，這些同時也是一般橫版過關游戲的組成部分，相信會對想制作橫版過關游戲的朋友起到一定的借鑒作用。

在線咨詢

上一篇：jQuery知識一覽
下一篇：國有銀行校招正式啟動，2020郵儲先行，廣東有22個

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商