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

時間 2019-11-09

標籤阿里開源 html5 html 遊戲開發框架 hilo 實戰教程欄目阿里巴巴简体版

原文原文鏈接

前言

開發基於Html5的小遊戲並不困難，基本思路就是使用Html5的canvas進行遊戲圖像繪製，經過監聽Dom元素的touch事件並觸發相應的動畫，來實現遊戲的交互。難在於解決開發後面臨的不一樣設備遊戲畫面、音效等兼容性問題。javascript

使用Hilo能夠幫助咱們解決開發過程遇到的一些常見的坑。在Hilo中，全部元素包括舞臺、舞臺裏的人物物品都是一個對象，有着一些類似的屬性，如寬度、高度等。一個對象能夠包括另外一個子對象，如舞臺對象能夠有人物等子對象。全部元素類對象都是Hilo.View類的子類。html

下面經過一個手指觸摸拋球動畫的例子爲你們介紹一下怎麼使用Hilo來開發一個H5小遊戲。前端

1、安裝

引入Hilo類庫。java

<script type="javascript" src="hilo-standalone.js" ></script>
複製代碼

2、資源預加載

預先加載各類圖片資源，提高用戶體驗。git

//這裏能夠加開始顯示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();
複製代碼

3、建立舞臺

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

html代碼

<div id="game-container"></div>
複製代碼

js代碼

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

4、啓用事件交互

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

stage.enableDOMEvent(Hilo.event.POINTER_START, true);
stage.enableDOMEvent(Hilo.event.POINTER_MOVE, true);
stage.enableDOMEvent(Hilo.event.POINTER_END, true);
複製代碼

5、建立定時器

用於不斷刷新渲染頁面動畫後端

var ticker = new Hilo.Ticker(100);
ticker.addTick(stage);
ticker.addTick(Hilo.Tween);
ticker.start();
複製代碼

6、添加舞臺元素

給舞臺添加一個元素「球」。image是資源對象，能夠從預加載隊列中獲取，x是球的起始橫座標，y是球的起始縱座標，width、height分別是寬度和高度。bash

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

7、監聽觸摸事件

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

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]);
})
複製代碼

8、動畫實現

實現球飛出的動畫，用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() {
  });
複製代碼