阿里开源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() {});
复制代码