不得了啦！支撑双11五亿玩家的互动游戏引擎开源啦！

阿里巴巴历时2年自研开发的互动游戏引擎Eva.js正式开源，致力于让前端工程师更低成本的开发互动游戏，并已经在淘宝、天猫、支付宝、优酷、考拉、菜鸟、盒马等业务场景中使用。前端

官网：eva.js.orgvue

为何要作Eva.js

背景

一个高速发展的APP，必定会去作拉新，留存，促活，转化。而游戏中的使命感、社交欲、拥有感、成就感等等正是使人上瘾的元素，将业务与游戏相结合，进行“游戏化”，能够实现产品的运营目的。因此，市场上出现了不少游戏化产品。好比淘宝、支付宝、京东、饿了么、拼多多、招商银行等等 APP 都有相似的游戏化互动项目。git

游戏引擎

团队在历年互动游戏探索中，使用过 Cocos/Egret/Laya 等游戏引擎开发互动游戏，他们有不少的优点，好比说他们都是大而全的引擎，能实现很是多的游戏能力，一体化比较好，从编辑器到发布一套流程搞定，跨平台能力不错，可以发布 Android/iOS/Web。github

但随着咱们对互动游戏的理解，发现前端互动类游戏大多数只是一些简单的交互和动画；对于前端来讲，咱们须要更低的学习成本去实现互动游戏，而且有不少很是优秀的东西不能被摒弃，例如使用 HTML/CSS 来实现UI更加方便，在 Canvas 里面实现动画性能更好。vuex

渲染引擎

后来咱们就开始基于 PixiJS 探索，PixiJS 提供了很是强大的渲染能力、更小的体积、更好的性能。团队近几年来基于 PixiJS 作了很是多有利于前端开发互动游戏的工做。咱们的Eva.js的底层也使用了 PixiJS 做为渲染引擎。编程

关于Eva.js

愿景和目标

Eva.js的愿景是让前端工程师更低成本的开发互动游戏，咱们但愿作到redux

高效开发：Eva.js 提供最基础的互动游戏组件，让前端工程师几行代码就能作出效果。canvas
性能：提供高效的运行时以及渲染能力。设计模式
可扩展性：使用 ECS 架构，最小化ECS内核+渲染（目前 gzip 130K），经过插件机制能够扩展插件。

咱们作了什么

Evajs 实现了互动游戏经常使用的动画和渲染能力，也有游戏中经常使用的物理和音效插件。咱们针对加载和运行时作了一些性能优化，后续会着重讲解。在用户体验方面实现了无障碍化。

Eva.js 如今还在成长阶段，将来将会有更多的功能加入进来。

咱们使用了 ECS 的设计模式，在 Eva.js 里面呈现是 GameObject/Component/System。

GameObject：游戏中的物体，他只是无心义的空壳，只能用来存放 Component
Component：描述物体的能力，存放数据。
System：实现能力

在简单的互动游戏开发过程当中，咱们只须要使用 GameObject 和 Component 便可。

const spriteAnimation = new GameObject('name')
spriteAnimation.addComponent(new SpriteAnimation({
    resource: 'resourceName'
}))
game.scene.addChild(spriteAnimation)
复制代码

咱们经过这个方法，就能够简单的在互动游戏里面显示出来一个帧动画。

技术解析

加载方案

通常游戏都是在资源加载之后来建立游戏对象，游戏对象发现有须要某个资源之后再去解析资源，像骨骼动画这种资源解析时间比较长，在低性能手机上显示比较慢。在浏览器中，资源在加载的过程当中不影响 CPU 的运行，因此咱们作了一系列的优化。

游戏资源解析和资源加载并行（非同一资源）
建立对象和资源加载并行
渲染和资源加载并行

上图是某一资源加载使用的流程图，经过这种方式，在某一资源解析和渲染的时候，也不会影响其余资源加载。这个方法也会前置资源的解析，这样，在预加载的时候会解析资源，后续使用资源的时候无需解析，直接渲染。

例如在龙骨动画系统安装的时候，会注册龙骨的实例化方法，当资源加载成功后就自动解析资源。

resource.registerInstance(RESOURCE_TYPE.DRAGONBONE, ({data}) => {
  factory.parseDragonBonesData(data.ske);
  factory.parseTextureAtlasData(data.tex, Texture.from(data.image));
});
复制代码

在 Chrome 的 DevTool，的 performance 面板中，将 CPU 的性能调至 6 x slowdown，10个不一样骨骼动画分别渲染10次，完整渲染时间，测试的数据：

PixiJS：1200ms
Eva.js：950ms

属性变化收集

ECS 架构中有个重要的优点，会把组件的属性按照顺序存放在 CPU 缓存当中，CPU 缓存中的数据传输速度是很是的快，C/C++ 等编程语言能够直接操做 CPU 缓存，因此，System 遍历检测 Component 属性变化是很是快的，可是在 JavaScript 中，咱们没有办法直接操做 CPU 缓存。

其实不少属性不是每一帧都会改变的，例如图片组件的资源属性，因此针对哪些不常常变更的组件，咱们经过监听的方式将会更加节省性能。

在 Eva.js 中，咱们实现了组件监听器，系统将本身关注的组件以及属性添加至组件监听器，在游戏过程当中，组件添加/删除/属性修改将会缓存，系统在每帧能够读取缓存的内容，进行相应的操做。

无障碍化

在 Web 开发中，咱们经过使用语意化的标签、HTML 结构，以及 WAI-ARIA 属性来实现无障碍化。可是在互动游戏开发中，咱们使用标签做为游戏的渲染画布，但标签只是一个位图，它并不提供任何已经绘制在上面的对象的信息。因此 canvas 的内容不能像语义化的 HTML 同样暴露给屏幕阅读器。因此咱们在Canvas上面增长了一层 A11yLayer，在A11yLayer上实现无障碍对象模型 AOM，目前 AOM 还在草案当中，咱们临时使用 DOM 实现。A11y 系统就是使用了Eva.js提供的属性监听能力实现的。在真正的业务开发中，对于复杂的交互和动画，咱们会为无障碍人群从新设计交互玩法，经过无障碍化的支持，可让更多的用户也能够参与到咱们的互动游戏中来。

状态管理

在 react/vue 中，咱们常用 redux/vuex 来进行状态管理，维护一套统一的数据，在 Eva.js 体系下，咱们设计了一套状态管理系统，叫作 EvaX，经过 EvaX 咱们能够维护一份共有数据，多个不一样的对象上的组件可能会使用同一份数据进行逻辑运行。

好比游戏中的生命值，不只在人的头顶上会显示，游戏中的人物也会根据生命值的多少来展现不一样的形态，咱们将 EvaX 组件绑定到游戏对象上，可对某个数据进行监听，若是数据发生变化，能够操做当前游戏对象上其余组件上的数据或者事件，有利于游戏对象或组件的解耦。

总结

据不彻底统计，目前 Eva.js 覆盖了9个以上的 APP，30多个项目，甚至在天猫精灵上也会有 Eva.js 的身影，阿里巴巴内部的 NPM 包下载次数3w屡次，覆盖用户数超5亿。

将来，Eva.js 会从性能，开发者体验，互动能力三个方向，让前端开发者更低成本的开发互动游戏。但愿广大社区贡献者能够一块儿来维护 Eva.js 开源社区，但愿将来 Eva.js 可以引领互动技术的发展，更多的技术是由 Eva.js 互动开发者们实现和定义出来的！

官网：eva.js.org

Github: github.com/eva-engine/…

来给 Eva.js star 支持一下吧，欢迎你们加入开源社区一块儿维护 Eva.js！添加做者微信可加入开源社区群：maydayfantast