Hilo - 阿里巴巴出品的免费开源 H5 游戏引擎,轻巧无依赖,适合用来开发营销互动小游戏

今天推荐一个适合用来做营销小游戏的 H5 游戏引擎,轻量简单容易上手,快速上线提前下班靠它了。
Hilo - 阿里巴巴出品的免费开源 H5 游戏引擎,轻巧无依赖,适合用来开发营销互动小游戏

关于 Hilo

Hilo 是阿里团队推出的一个开源的 H5 游戏引擎,特点是对非游戏从业的前端开发者非常友好,轻量无依赖,适合用来开发营销小游戏。

Hilo 官网
Hilo 官网

作为一款阿里团队内部一直在使用游戏引擎,Hilo 活跃在阿里系大量的电商节日和活动中,比如往年的双十一狂欢城、手机淘宝中使用 webview 加载的打年兽、618 抢豪车、双十一红包雨等 H5 互动游戏,都基于 Hilo 开发。

Hilo 作品例子
Hilo 作品例子

Hilo H5 游戏引擎的技术特性

  • 支持模块化开发,同时提供独立版本(可直接引入) / RequireJS(AMD) / CommonJS / SeaJS(CMD) / Kissy 等多种模块方式的包装版本和跨终端解决方案,满足不同前端开发者的习惯
  • 无依赖于其他包,轻量到只有 70 KB 的体积
  • 支持 DOM 渲染,Canvas 渲染和 WebGL 渲染,集成了 Hilo Audio (游戏音频音效)、 Hilo Preload (预加载) 和动画纹理等工具
Hilo 文档
Hilo 文档

开发使用感受

我学习和使用 Hilo 源自于一次时间紧迫的营销开发需求 – 红包雨,这个需求的技术要求是对动画流畅度和点击响应速度的保障。使用常规的 div + css ,貌似难以支撑需求,转而做了 H5 游戏引擎的技术调研。

在对比了市面上相对专业的 H5 游戏引擎(比如 Cocos2d-x / Egret 白鹭引擎 / createjs 和 Phaser),发现这些引擎不仅专业,还有海量的文档,没有一定的游戏开发技术,很难在短时间啃下来。后面偶然发现了 Hilo 这款不太知名的游戏框架,从它的演变来看,发现 Hilo 属于阿里前端团队在实践中封装出来的一套工具库。

从 Hilo 支持的 API 看,Hilo 的设计思路更加偏向于前端开发者,而非游戏开发者,在 javascript 基础过关的情况下,借助官网的文档,上手很快。官网提供了一个循循善诱的 Flappy Bird 休闲小游戏的教程,当天我用了一个下午的时间跟着做,游戏开发中舞台、场景、动画、容易等概念基本弄懂,用来做简单营销互动小游戏再适合不过了。

Hilo 开发教程
Hilo 开发教程

在后续长达 1 年的工作中,我还基于 Hilo 搭建了一套简单的内部使用可视化互动书编辑器,总结出使用 Hilo 开发的几个需要注意的点:

  1. 如果要做全屏小游戏,Hilo 没有提供特别好的全屏适配方案,按照官方提供的代码例子,整个舞台以及里面的元素会变形,需要做一些屏幕参数计算的额外工作
  2. 可能是阿里外部用的人不太多,官网提供的代码例子比较少,虽然有交流群,但我遇到奇怪的问题,几乎都是自行解决
  3. 如果不是像 2048 这种休闲益智类小游戏,不要选择 DOM 模式来渲染,DOM 模式虽然性能开销小,但是对与动画流畅度和点击响应速度是真不好
  4. 官方的图片、音频预加载工具不好用,我用的 preload.js 代替的

使用建议

Hilo 是一个入门级的 H5 游戏引擎,让前端开发者不用具备太多游戏开发知识,就可以开发互动小游戏,用来做营销互动游戏或者开发简单的休闲小游戏是完全够用的,也特别适合用 webview 内嵌 H5 游戏在 APP 应用中。当然如果你想转游戏开发,还是得学习 Cocos2d-x / Egret 白鹭引擎 / Phaser 这样的引擎,他们都包含诸如物理引擎、3D 渲染、骨骼动画等完整支撑,以及提供了对游戏素材生成的工具,甚至可以编译成原生 APP。在这之前,也可以先花一点点时间了解 Hilo,作为游戏开发入门的第一课吧。

如果只是为了做动画效果,可以看看之前推荐的 SpriteJs 和 lucky canvas(抽奖类库)。

免费开源说明

Hilo 是阿里巴巴前端团队出品的 H5 游戏引擎,源码基于 MIT 开源协议托管在 Github 上,任何个人和公司都可以免费下载使用在自己的项目上。

实用工具

Pico.css - 简单优雅的纯 CSS 开源 UI 框架,用原始的 HTML 元素标签来做界面

2022-3-29 14:01:55

实用工具

Open Doodles - 一组免费商用的涂鸦风格的人物角色插画素材,画风飘逸有趣

2022-3-29 14:10:33

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧