阿里跨终端H5

Hilo它是由阿里巴巴集团开发的 HTML5 跨终端游戏解决方案可以帮助开发者快速创建 HTML5 游戏。具有以下特点：独立模块设计，支持各种模块范式的包装版本；面向对象的程序开发；包括多种渲染模型 Canvas，DOM 和 WebGL 等等；多台式机和移动浏览器兼容；使用； Flash Shim 来支持 IE ;支持物理扩展： Chipmunk；支持骨动画扩展： DragonBone！

1、Hilo 包括支持各种模块范式的包装版本，包括AMD，CMD，COMMONJS，Standalone以多种方式访问。此外，您还可以根据需要添加和扩展模块和类型；

2.极简主义的模块设计，完全面向对象；

3、多种渲染方法， 提供DOM，Canvas，Flash，WebGL各种渲染方案(目前已申请专利)；

4.全端浏览器支持和高性能方案，独特的Flash渲染方案，即使在低版IE浏览器下也能跑“酷”游戏； DOM渲染方案能显著解决低性能手机浏览器遇到的性能问题；

5.物理引擎支持——Chipmunk，支持自扩展物理实现；骨骼动画支持——DragonBones，与此同时，内建骨骼动画系统——Tahiti(内部使用)；

6.案例丰富，框架成熟，多次经历阿里巴巴双十一，年中互动营销活动考验；

<script src="http://www.toutiao.com/a6738379197732880908/hilo-standalone.js"></script>

舞台Stage是各种图形、精灵动画等的总载体。因此，在渲染之前，可见的对象必须添加到舞台或其子容器中。

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

Stage结构函数接收一个参数properties，该参数包含创建stage的各种属性。

通过定时器Ticker不断调用舞台Stage上物体的运动等变化Stage.tick()实现刷新的方法。

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

舞台上的所有对象都是视觉对象，可以是图片、精灵、文字、图形，甚至DOM元素。Hilo为您提供了一些基本的视觉类别，例如在舞台上添加一张图片：

var bird = new Hilo.Bitmap({
 image: 'images/bird.png'
}).addTo(stage);

如果舞台上的图形、精灵动画和其他对象能够响应用户的点击、触摸和其他交互事件，则必须打开DOM事件响应，然后才能使用View.on()响应事件。

stage.enableDOMEvent(Hilo.event.POINTER_START, true);
sprite.on(Hilo.event.POINTER_START, function(e){
 console.log(e.eventTarget, e.stageX, e.stageY);
});

接下来，你可以开始使用hilo提供的各种视觉类别来创建各种图形和精灵动画，充分发挥你的创造力，开始你HTML游戏之旅吧！

Hilo对于开发H5游戏开发者和对Web端渲染感兴趣的小伙伴值得一看，Hilo有很多案例可供参考。如果你想继续深入了解它，你可以移动官方文件或Github来了解它！

声明：易商讯尊重创作版权。本文信息搜集、整理自互联网，若有来源标记错误或侵犯您的合法权益，请联系我们。我们将及时纠正并删除相关讯息，非常感谢！