hilo.js基础案例

JavaScript015

hilo.js基础案例,第1张

http://hilo-js.github.io/

无依赖,模块化,小,兼容性良好,自动化构建,阿里巴巴集团开发的html5跨终端游戏框架,帮助快速开发html5游戏。支持多种模块规范的版本,目前公司开发游戏使用的是commonJS这种方式。

舞台(Stage)--是一个大的载体,所有要展现在页面中的内容都需要添加到舞台中,才会渲染。

定时器(Ticker)--舞台上的内容发生变化和运动,通过一定的频率一直刷新运行

可视对象(Bitmap)--舞台上的一切都是可是对象,图片,文字,雪碧图/精灵图

x:100

y:100

scaleX: .2, //缩放比例

scaleY: .2 //缩放比例

x:100

y:100

scaleX: 1.4, //缩放比例

scaleY: 1.4 //缩放比例

demo      //项目名称

       dist      //静态资源文件

              images      //图片存放处

              index.html      //html入口文件

       index.js      //js入口文件

       stage.js      //舞台js

       bird.js      //可视对象js

舞台只有一个

可视对象可以有无数个

针对不同的可视对象,君使其东而东之,使其西之而西之。

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、案例丰富,框架成熟,已经经历多届阿里巴巴双十一,年中大促互动营销活动考验;

舞台Stage是一个各种图形、精灵动画等的总载体。所以可见的对象都要添加到舞台或其子容器后,才会被渲染出来。

Stage构造函数接收一个参数properties,此参数包含创建stage的各种属性。

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

舞台上的一切对象都是可视对象,可以是图片、精灵、文字、图形,甚至DOM元素等等。Hilo提供了一些基本的可视类供您使用,比如添加一个图片到舞台上:

要想舞台上的图形、精灵动画等对象能响应用户的点击、触碰等交互事件,就必需先为舞台开启DOM事件响应,然后就可以使用View.on()来响应事件。

接下来,您就可以开始利用hilo提供的各种可视类来创建各种图形、精灵动画,尽情发挥您的创造力,开始您的HTML5 游戏 之旅吧!

Hilo对于开发H5 游戏 的开发者和对Web端渲染感兴趣的小伙伴来说值得一看,Hilo有诸多案例可供参考,如果你想继续深入了解它,可移步官方文档或者Github一探究竟!