不得了啦！支撐雙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