Building a Scalable Interactive Game Engine with ECS: Alibaba’s EVA Experience

Background

Three cartoon characters illustrate typical interactive business scenarios: a gold‑farm game where virtual coins can be redeemed for cash, a farm game that upgrades fruit trees through assistance, and a QR‑code‑driven reward system that drives consumption.

By leveraging users’ sense of goal, achievement and social desire, interactive games can increase acquisition, retention and conversion.

Problem to Solve

Alibaba’s various business units need a unified interactive development workflow. The engine must support rapid onboarding, high development efficiency, and comprehensive capabilities, including best‑practice accumulation, an editor, and reusable resources.

Engine Architecture Challenges

Easy‑to‑develop architecture with high extensibility and editor support.

Robust rendering and animation capabilities.

Friendly user experience with performance optimizations and best practices.

Solution: ECS‑Based Engine

Adopting the Entity‑Component‑System (ECS) pattern provides high extensibility and performance. Game objects represent entities, components store data, and systems operate on component data, allowing dynamic addition/removal of abilities.

JS getter/setter tricks collect property changes without costly array traversal; future work may store component data in ArrayBuffer or WebAssembly to better exploit CPU caches.

Editor Support

ECS naturally fits editor design. The editor shows a game‑object manager on the left and a component manager on the right; combined objects are rendered by systems.

A decorator layer exposes component properties, events and types to the editor, enabling visual editing.

Rendering and Animation

Resources are exported by production tools and rendered on a canvas. The engine separates resource loading, object creation, and instantiation to parallelize work and reduce first‑screen load time by 30‑50%.

Animation is decoupled from the rendering engine: skeletal and frame animations are implemented as separate systems, and a rendering adapter provides a unified API for future custom renderers.

For low‑end devices, a tiered‑experience component switches heavy skeletal animation to static images, cutting memory usage by 30‑60%.

Performance & Stability

Parallel loading and immediate instantiation, plus concurrent rendering, address long first‑screen times and crashes caused by large texture atlases.

Accessibility (A11y)

An A11y layer implements the Accessibility Object Model (AOM) interface, automatically detecting system screen‑reader settings and exposing accessible properties to DOM elements. The engine listens to A11y, Transform and Event components to generate appropriate DOM nodes only for objects that need them.

Auto‑detects accessibility on Taobao/Alipay.

Recognizes interactive events on accessible objects.

Debug mode visualizes accessible elements.

Developer Experience

To lower the entry barrier, the engine is wrapped as Rax components, separating canvas‑based game logic from DOM‑based UI. Developers write JSX+Hooks, benefiting from the Rax ecosystem and a set of 20+ ready‑made components covering animation, rendering, state management and scripting.

Conclusion

The EVA engine delivers a highly extensible architecture, editor integration, performance optimizations, accessibility support, and a rich component library, enabling fast development of interactive games across Alibaba’s ecosystem.