Hilo阿里H5游戏开发框架

所属分类:其他-游戏

 42287  374  查看评论 (11)
分享到微信朋友圈
X
Hilo阿里H5游戏开发框架 ie兼容10

更新时间:2020-07-28 01:21:47

更新说明:更新下载文件,添加实例.


Hilo - HTML5 互动游戏引擎

Hilo是一个开放式的框架,提供多种模块化范式的版本供您使用,您可以下载:

Standalone 独立版本For RequireJS(AMD) 版本For CommonJS 版本For SeaJS(CMD) 版本For Kissy 版本

然后把Hilo类库引入到页面中:

<script src="hilo-standalone.js"></script>

创建舞台

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

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

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

创建定时器

舞台Stage上的物体的运动等变化,都是通过一个定时器Ticker不断地调用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提供的各种可视类来创建各种图形、精灵动画,尽情发挥您的创造力,开始您的HTML5游戏之旅吧!

相关插件-游戏

jQuery拼图游戏

jQuery实现移动拼图游戏~
  游戏
 27344  325

js版星际争霸

js版星际争霸
  游戏
 64050  304

植物大战僵尸

html5植物大战僵尸
  游戏
 51876  591

jQuery自定义概率转盘抽奖

自定义开始抽奖、禁止抽奖、抽奖结束功能,可实现自定义抽奖概率
  游戏
 31627  320

讨论这个项目(11)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    只如初见 0
    2019/10/29 17:42:40
    入口文件能否在传一下,感谢 回复
    hht0856 0
    2017/9/14 11:19:38

    下载文件中没有index.html文件啊,入口在哪呢

        落汽0
        2017/9/15 17:47:43

        我擦嘞以前明明有的。。。。

        hht08560
        2017/9/22 17:05:15
        你这就是一个库文件,例子都没有。。。
        落汽0
        2017/10/25 22:50:45

        以前自带的,不知道为啥没了

    回复
    小恶魔 0
    2017/7/28 8:34:06

    请问这个压缩包解压完之后应该怎么操作?

        落汽0
        2017/7/28 15:00:10

        你部署服务器了吗?wamp之类的,然后直接访问index。html就行,要不你直接打开试试

    回复
    明月半倚深秋 0
    2017/6/27 8:37:33
    这个框架好强大。。。正好最近一直在研究canvas。多谢了
        落汽0
        2017/6/29 20:19:57

        感觉是做sprite那种动画效果比较好

    回复
    O(∩_∩)O~ 0
    2017/6/27 8:32:10

    看起来很牛的样子

        落汽0
        2017/6/29 20:20:42

        哈哈用着也挺简单的

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复