Eva. Js, an interactive game engine developed by Alibaba after two years of self-development, is officially open source. It is committed to enabling front-end engineers to develop interactive games at a lower cost, and it has been used in taobao, Tmall, Alipay, Youku, Kaola, Cainiao, Hema and other business scenes.

  • Website: eva.js.org
  • Making: github.com/eva-engine/…

Why eva.js

background

A rapidly developing APP is bound to do new, retention, activation and transformation. And the sense of mission, social desire, sense of ownership, sense of achievement and so on in games are addictive elements. The combination of business and game, gamification, can achieve the purpose of product operation. So there are a lot of gamified products on the market. For example, Taobao, Alipay, JINGdong, Ele. me, Pinduoduo, China Merchants Bank and other apps all have similar gamification interactive projects.

The game engine

During the exploration of interactive games over the years, the team used game engines such as Cocos/Egret/Laya to develop interactive games. They have many advantages. For example, they are large and complete engines that can realize a lot of game capabilities. Able to publish Android/iOS/Web.

But with our understanding of interactive games, we find that front-end interactive games are mostly simple interactions and animations; For the front end, we need a lower learning cost to implement interactive games, and there are many excellent things that can not be abandoned, such as using HTML/CSS to implement THE UI is more convenient, and the animation performance in the Canvas is better.

Rendering engine

Then we started exploring PixiJS, which offered great rendering power, smaller size, and better performance. The team has done a lot of work in recent years with PixiJS to help develop interactive games on the front end. PixiJS is also used as the rendering engine for our underlying eva.js.

About Eva. Js

Vision and Goals

Eva.js’ vision is to make it cheaper for front end engineers to develop interactive games, and we want to do that

  • Efficient development: Eva.js provides the most basic interactive game components that front-end engineers can create in a few lines of code.
  • Performance: Provides efficient runtime and rendering capabilities.
  • Extensibility: Using THE ECS architecture, minimizing the ECS kernel + rendering (currently GZIP 130K), plug-ins can be extended through the plug-in mechanism.

What did we do

Evajs implements animation and rendering capabilities commonly used in interactive games, as well as physics and sound plugins commonly used in games. We made some performance optimizations for load and run time, which we’ll cover later. In the user experience to achieve barrier-free.

Eva.js is still in the growth stage, and more features will be added in the future.

We use the ECS design pattern in Eva. Js presented is the GameObject/Component/System. Component: Describes the ability of an object to store data. System: implementation capability

For simple interactive game development, gameObjects and Components are all we need.

const spriteAnimation = new GameObject('name')
spriteAnimation.addComponent(new SpriteAnimation({
  resource: 'resourceName'
}))
game.scene.addChild(spriteAnimation)
Copy the code

In this way, we can simply display a frame animation in an interactive game.

Technical analysis

Loading plan

In general, game objects are created after resources are loaded, and then the game objects will parse resources when they find that certain resources are needed. For example, resource parsing of bone animation takes a long time and is displayed slowly on low-performance mobile phones. In the browser, resources are loaded without affecting CPU performance, so we made a number of optimizations.

  • Game resource parsing and resource loading parallel (not the same resource)
  • Create objects and load resources in parallel
  • Render and resource load in parallel

The diagram above shows a flow chart for one resource load. This way, while one resource is being parsed and rendered, other resources are not being loaded. This method also preloads the resources so that they are parsed during preloading and rendered without parsing.

For example, when the keel animation system is installed, the instantiation method of the keel will be registered. When the resources are loaded successfully, the resources will be automatically resolved.

resource.registerInstance(RESOURCE_TYPE.DRAGONBONE, ({data}) => {
  factory.parseDragonBonesData(data.ske);
  factory.parseTextureAtlasData(data.tex, Texture.from(data.image));
});
Copy the code

Slowdown the CPU slowdown by setting the CPU performance to 6 x slowdown12

  • PixiJS: 1200 ms
  • Eva. Js: 950 ms

Property change collection

An important advantage of the ECS architecture is that Component attributes are stored in the CPU cache in order. The data transfer speed in the CPU cache is very fast. Programming languages such as C/C++ can operate the CPU cache directly, so the System traversal detects Component attribute changes very quickly. But in JavaScript, there is no way to manipulate the CPU cache directly.

In fact, many attributes are not changed every frame, such as the resource attribute of the picture component, so for those components that do not change often, we can save more performance by listening.

In EVa.js, we have implemented a component listener. The system will add the components and attributes concerned to the component listener. During the game, component addition/deletion/attribute modification will be cached, and the system can read the cached contents in each frame and perform corresponding operations.

Accessibility,

In Web development, we achieve accessibility by using semantic tags, HTML structures, and WAI-aria attributes. But in interactive game development, we use a label as a rendering canvas for the game, but the label is just a bitmap, it doesn’t provide any information about the object that has been drawn on it. Therefore, canvas content cannot be exposed to screen readers like semantic HTML. Therefore, we added a layer of A11yLayer on Canvas to realize barrier-free object model AOM on A11yLayer. Currently, AOM is still in the draft, and we temporarily use DOM to achieve it. A11y system is implemented by using the attribute monitoring capability provided by EVa.js. In real business development, for complex interactions and animations, we will redesign the interactive gameplay for barrier-free people. Through barrier-free support, more users can also participate in our interactive games.

State management

In React/Vue, we often use Redux/VUex to manage the state and maintain a unified set of data. Under the EVa.js system, we designed a state management system called EvaX, through which we can maintain a common data. Components on multiple different objects may logically run with the same piece of data.

Life values, such as the game is not only on people’s head, according to the characters in the game will be based on what the life value to show different forms, we will EvaX component is bound to the game object, but to listen to a data, if the data changes, can operate on the data on the other components on the current game object or event, Good for decoupling of game objects or components.

conclusion

According to incomplete statistics, eva. js covers more than 9 apps and more than 30 projects at present, and even eva. js can be found on Tmall Genie. Alibaba’s NPM package has been downloaded for more than 30,000 times, covering more than 500 million users.

In the future, EVa.JS will enable front-end developers to develop interactive games at a lower cost from the three aspects of performance, developer experience and interactive ability. It is hoped that the community contributors can work together to maintain eva.js open source community, and that EVa.JS can lead the development of interactive technology in the future. More technologies are realized and defined by eva.JS interactive developers!

Website: eva.js.org

Making: github.com/eva-engine/…

— — — — — — — — — — — — — — — — —

The author | Ming

Edit | orange

New retail product | alibaba tao technology