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

全棧社群發表於2019-04-11
阿里HTML遊戲開發框架

前言

開發基於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() {
  });
複製程式碼

參考文件

  • 關注微信公眾號“全棧社群”，可獲取更多站長、開發者必備的前端、後端、運維技術乾貨。

  • 18元美國VPS、建站主機：www.salasolo.com

相關文章