作者 | 明非
阿裡巴巴曆時2年自研開發的互動遊戲引擎Eva.js正式開源，緻力于讓前端工程師更低成本的開發互動遊戲，并已經在淘寶、天貓、支付寶、優酷、考拉、菜鳥、盒馬等業務場景中使用。
官網：
https://eva.js.org Github: https://github.com/eva-engine/eva.js
為什麼要做 Eva.js ?
背景
一個高速發展的APP，一定會去做拉新，留存，促活，轉化。而遊戲中的使命感、社交欲、擁有感、成就感等等正是令人上瘾的元素，将業務與遊戲相結合，進行“遊戲化”，可以實作産品的營運目的。是以，市場上出現了很多遊戲化産品。比如淘寶、支付寶、京東、餓了麼、拼多多、招商銀行等等 APP 都有類似的遊戲化互動項目。
遊戲引擎
團隊在曆年互動遊戲探索中，使用過 Cocos/Egret/Laya 等遊戲引擎開發互動遊戲，他們有很多的優勢，比如說他們都是大而全的引擎，能實作非常多的遊戲能力，一體化比較好，從編輯器到釋出一套流程搞定，跨平台能力不錯，能夠釋出 Android/iOS/Web。
但随着我們對互動遊戲的了解，發現前端互動類遊戲大多數隻是一些簡單的互動和動畫；對于前端來說，我們需要更低的學習成本去實作互動遊戲，并且有很多非常優秀的東西不能被摒棄，例如使用 HTML/CSS 來實作UI更加友善，在 Canvas 裡面實作動畫性能更好。
渲染引擎
後來我們就開始基于 PixiJS 探索，PixiJS 提供了非常強大的渲染能力、更小的體積、更好的性能。團隊近幾年來基于 PixiJS 做了非常多有利于前端開發互動遊戲的工作。我們的Eva.js的底層也使用了 PixiJS 作為渲染引擎。
關于 Eva.js
願景和目标
Eva.js的願景是讓前端工程師更低成本的開發互動遊戲，我們希望做到
- 高效開發：Eva.js 提供最基礎的互動遊戲元件，讓前端工程師幾行代碼就能做出效果。
- 性能：提供高效的運作時以及渲染能力。
- 可擴充性：使用 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 作者交流，微信：maydayfantast