Hio预研

发表于 | 分类于
字数统计: 2,847 字 | 阅读时长 ≈ 10

背景

2014年，一个HTML5游戏——“围住神经猫”以病毒式增长速度刷爆了朋友圈，之后HTML5小游戏就开始一发不可收拾。经过一段时间的酝酿，各个优质的H5纷纷占领各自的朋友圈，如淘宝《穿越整个宇宙向你发来的一封双11邀请函》，腾讯《薛之谦史上最疯狂广告》，天天P图《我的小学生证件照》等等，连起来可以绕地球好多圈。
根据ih5报告可以看出，去年一年游戏H5占比达到了23.9%。而休闲类手游不再以制作精良而取胜，各种奇葩玩法的简单游(微博)戏反而得到用户欢迎。这些H5一般只做目的是促销活动、新品发布，本质上采取的是游戏化营销战略。

详细信息可以查看：2016年度H5最全报告

前期调查及方案

根据2016年 最火的15 款 HTML5 游戏引擎.可以得到去年一年比较热门的免费HTML5游戏框架，共十五款，各个数据如下

Name Updated Time Watch Star Fork Commits Contributors
Three.js 2016/3/28 1590 24041 7768 14825 588
Phaser.js 2016/2/18 837 11782 4095 4423 206
Pixi.js 2016/3/17 656 10063 1942 2860 161
egret 2016/3/30 215 1275 303 4268 25
enchantjs.js 2016/1/4 185 1445 301 1683 27
crafty 2016/3/21 134 2050 473 1807 106
turbulenz 2015/11/23 271 2544 406 1737 13
cocos2d-js 2016/3/30 162 1207 469 4559 45
playcanvas 2016/3/30 164 1784 368 5142 16
melon.js 2016/3/30 13 1579 371 390 40
quintus 2016/2/03 136 1023 412 256 33
Hilo 2016/2/03 173 2449 340 20 2

因为业务核心点为营销，无需开发大型重量级H5游戏，所以选择其中较为轻量的框架。所以放弃如Egret(白鹭)引擎等，尽管其拥有着良好的中文文档与开发者社区。
又例如Three.js，体积约490KB，拥有着高性能的3D WebGL效果，并且能够让我们无需关注webgl实现方式，写出特别炫酷的效果，但相对的是其入门难度高，并且中文资料老旧，网络上Three.js方面的资料比较散乱且良莠不齐，部分中文文档翻译低级错误频出，英文文档本身比较简陋且有不少拷贝错误。
Pixi.js约358KB，与Three.js相同的是，其拥有着高性能的WebGL模式2D渲染引擎，但是也是英文文档；
而Hilo的设计思路更加偏向前端开发者以及简单的营销活动小游戏。经过压缩后体积约65KB，相对于上面两个来说，已经算十分的轻量了。并且拥有中文文档，对于中文开发者来说十分友好，且已经经历多届阿里巴巴双十一，年中大促互动营销活动考验。对于我们业务来说，只需要适配对canvas和css3支持度良好的高级浏览器或者webview，直接使用Hilo基础渲染器而无需在引入其他模块，做到了体积最小。

预研

框架概述

借用Hilo Github上原话：Hilo 是阿里巴巴集团开发的一款HTML5跨终端游戏解决方案，ta可以帮助开发者快速创建HTML5游戏。
官方宣传的其主要特性有一下几点：

  • Hilo 支持多种模块范式的包装版本，包括AMD，CMD，COMMONJS，Standalone多种方式接入。另外，你可以根据需要新增和扩展模块和类型；
  • 极精简的模块设计，完全面向对象；
  • 多种渲染方式, 提供DOM，Canvas，Flash，WebGL等多种渲染方案（目前已经申请专利）；
  • 全端浏览器的支持和高性能方案，独有的Flash渲染方案，即使在低版本IE浏览器下也可以跑起来“酷炫”游戏； DOM渲染方案能显著解决低性能手机浏览器遇到的性能问题；
  • 物理引擎支持——Chipmunk，支持自扩展物理实现；骨骼动画支持——DragonBones，同时内建骨骼动画系统——Tahiti（目前内部使用）；
  • 案例丰富，框架成熟，已经经历多届阿里巴巴双十一，年中大促互动营销活动考验；
    其余详细信息可参见其Github官网

再经过通过其他的一些相关资料收集，总结出Hilo对于开发人员来说的一些优点：

  • 支持canvas dom webgl 三种渲染方式（官方说有FLASH），希望未来的版本能够自适应浏览器，这将是一个巨大的亮点！
  • 支持Canvas的位移，Transform等常见动画效果。
  • 支持导入图片、绘制常见形状等，并且，支持SVG绘图。
  • 支持2D、伪3D。
  • 支持WebGL ，目前没有实现相关3D模型的封装。
  • 自带粒子系统、缓动函数，WebSound可以自适应各种平台。
  • 对于静态、复杂的场景，自动使用DIV潜入静态图片或文字，以提升效率（比如背景图片）。

在经过预研之后，发现Hilo无疑是对我们现在业务来讲最为合适的轻量游戏框架，为了对其进行更深一步研究，仿照双十一红包雨，使用Hilo进行实现，探究其内部的内容。以下列出几点两者实现方式对比（因为整体红包雨实现逻辑不同，所以仅列举部分进行比较）：

  1. 补间动画：
    补间是一个概念，允许您以平滑的方式更改对象的属性值。您只需要知道要更改哪些属性，当补间程序运行结束时应该具有哪些最终值，以及应该花费多长时间，补间引擎将会从开始到结束点处理中间值。
    双十一红包雨补间动画计算与移动是通过人工编写，代码如下：
    双十一红包雨补间动画
    Hilo红包雨补间动画计算与移动则通过Tween.js进行计算，并且提供多种的缓动功能，如线性，二次，立方，四分，五次，正弦，指数，圆形，弹性，反向和反弹等。调用代码如下：

    可以看出，原生实现的优势在于可以减少引入代码量，但却要增加手写工作量；而引入Hilo(集成了Twenn.js)优势在于可以少写很多代码，但缺点是增加了页面体积。

  2. 资源加载：
    双十一红包雨自己编写资源加载器。如图:

    Hilo已经为我们封装好相应的资源预加载模块，如图:

  3. 资源管理:
    双十一红包雨通过将一系列素材以及素材状态放入数组进行管理，后续需要人为的去更新、删除等。如图:

    而通过使用Hilo，可以不用关心素材管理，通过将素材挂载在创建的Container中，Hilo为我们自动化的进行管理。

  4. 素材添加：
    双十一红包雨同样是通过原生canvas方法实现。如图

    Hilo红包雨则是通过Hilo提供的位图方法建立红包,节省编码时间，如图

  5. 最终效果：
    最终两者效果如下

在完成仿制红包雨后，总结了一些Hilo的优缺点（仅针对个人在实验过程中发现的优缺点，并不能代表整个框架的优缺点）

优点：
  • 学习之后，可以进行快速的轻量级互动游戏类页面开发。
  • 对于前端开发者来说，学习成本较其他低。
  • 相较于其他互动游戏解决方案，Hilo总体只有60多KB。
  • 整合了Tween,Ease，具有缓动效果。
  • 具有中文Api文档，对中文开发者友好。
缺点：
  • API文档略简洁，实例相对较少，困难解决成本相对较高。
  • 一些功能并不完善，例如drag拖动等（开始拖动时，被拖动元素并不是自动的提升到最高层级，会被其他更高层级物体盖住）。
  • 部分方法内部实现方式略简单粗暴。

##拼图预热活动

需求效果：

  1. 传入一张整图，等分九宫格
  2. 可以在边界内自由进行拖拽，当进入九格中任意一格时，取消拖拽事件后能完美的放置于格子中。
  3. 拖拽完成后无法在进行拖拽。
  4. 具有定时器，计步等功能。

思路

  1. 拼图图像初始化：
  • 创建一个Container容器用于放置拼图内容，针对非正方形图片进行拉升。
    在Hilo中，Container是所有容器类的基类。每个Container都可以添加其他可视对象为子级。相较于使用Canvas需要设置繁多，在Hilo中只需要实例化一个Container容器用于放置素材并设置属性就行了。
  • 根据传入参数进行分割（如33/44等），位置随机但不会出现一开始拼图就完成的情况。
    在位置进行变化时使用Hilo中整合的Tween.js自动创建补间动画，使拼图块移动自然不生硬。
  1. 拼图拖拽
  • 对分割的图象绑定拖拽事件，每次拖拽完成都会判断一次游戏是否结束，当游戏结束时将游戏状态返回。
    这里使用Hilo封装好的拖拽函数startDrag，开始监听拖拽事件,如图
  • 此处有一难点，如何在用户拖动拼图的时候自动吸附到对应的格子。出于游戏体验与扩展性，在游戏初始化时将图像分割数限定在了>=2，<=4这一范围，所以拖动的格子不会大于4，所以拟合一个多次方程，使其满足：传入图像本身移动距离，输出图像应该移动的距离，使其只能移动到事先分割的格子中，并且当进入一定范围内，松手图片可以完美的放置在格子中。
  • 每一次成功的图像交换，步数加一。
  • 当游戏结束，删除拖拽事件。
    Hilo使用stopDrag停止监听拖拽事件：

###实现效果

###性能
因为Hilo整体体积约65KB，通过Chrome控制台观察，在模拟常规4G网络速度加载的情况下，大概花费了721ms，在Wifi情况下加载时间约为100ms。
在拼图初始化时，通过Hilo的Ticker函数将运行帧率控制在24帧左右，在这一帧率人体肉眼可以看到连续画面不会出现卡顿感，并且相比于高帧率可以有效的降低性能消耗。在通过Chrome工具Timeline观察可知，在拼图初始化过程中，运行帧率也是在24帧左右,可以流畅的运行。

扩展/兼容性

  • 每个大功能模块皆挂载在window.game下，不造成变量污染。
  • 理论上可以做到任意NN个分割，但不建议分割为44以上。
  • 针对不是正方形的图片进行了拉伸处理。

总结

经过两个项目的开发，个人认为hilo作为一款轻量级的营销游戏类H5引擎还是不错的，能够帮助我们减轻开发负担，提高开发效率；但毕竟没有对Hilo进行更多的研究，其中也有很多其他的坑是还没有踩到的，根据网上其他的开发者的描述来说，Hilo还是有很多不足之处，也希望开发者能够更多的完善它。

参考资料

  1. 2016年度H5最全报告：原来这行水这么深
  2. Hilo官方网站
  3. 2016年最火的15款HTML5 游戏引擎