HTML5 Game Engine In-depth Review

Recently I saw an article online titled "The 15 Most Popular HTML5 Game Engines in 2016". There are already many solutions for HTML5 games, but there is no comparative data on which one is better or worse. I spent a few days to do a relatively complete comparative analysis of the 12 free open source engines mentioned in the article, hoping it will be helpful to everyone.

When comparing technical products, there are usually multiple dimensions for comparison, not just the technical aspects, but also many non-technical aspects that will affect our usage results. This article conducts multiple comparisons from the following dimensions.

1. 2D vs 3D
2. programming language
3. Design Concept & Function
4. Workflow
5. performance
6. Study Materials
7. Commercial Applications

2D vs 3D, programming language comparison

2D vs 3D

In the field of games, the most straightforward classification method is the distinction between 2D and 3D. Usually we think of them as two different products in the field of game engines. The engines mentioned in the original article are indeed the most popular HTML5 game engines at present. Many engines are of the type that can cover both 2D and 3D. We compare them through a table.

programming language

Game engines based on HTML5 technology must use JavaScript as the script, and only JavaScript can run in the browser. However, many JavaScript alternatives have appeared on the market, such as TypeScript, CoffeeScript, LiveScript, etc. Different languages ​​have different direct positioning and different language philosophies. Some game engines are also quite interesting in their language selection.

in conclusion

As can be seen from the table, the following three engines are of the type that cover both 2D and 3D.

• Egret
• Turbulenz
• PlayCanvas

The winning programming languages ​​in the field of web games are JavaScript and TypeScript. However, most HTML5 game engines still use JavaScript. Only 4 engines choose to support TypeScript.

From the current front-end technology environment, many front-end frameworks or engines may launch TypeScript language branches in the future. Since AngularJS announced that it would use TypeScript for development, TypeScript has been widely recognized by the front-end. It has to be said that Microsoft has fought well in the open source circle.

Design Concept & Function

Architecture design is a big subject. The design pattern of open source engine architecture mainly depends on the author's programming philosophy and product positioning. It is more meaningful to compare and discuss design ideas and functions together than to discuss functions separately. The more functions an engine has, the better. Functions should be determined around the positioning of the engine. This idea is particularly evident in some engines. Let's analyze each engine one by one.

Three.js

position

The Three.js project was created on April 24, 2010. So far, it is considered a relatively old open source project. In fact, Three.js is not defined as a game engine. In the Github homepage, the author clearly defines the positioning of Three.js as "JavaScript 3D library". It is just a 3D library based on JavaScript language. Of course, you can use it to do anything, whether it is a game or a cool 3D display.

Design Concept

Three.js was designed to create a very lightweight 3D library that can help developers quickly build 3D content based on HTML5. At the same time, by exposing simple APIs, the complexity of 3D content development is minimized.

In terms of rendering environment, Three.js supports two rendering modes: WebGL and CCS3D. Based on the current usage and standard popularity, developers prefer WebGL rendering.

Function

This article mainly intends to make an in-depth analysis of 2D game engines, so there is no comparison between the functions of Three.js and those of popular 3D engines.

Pixi.js

position

Many people will think that Pixi.js is a game engine when they first see its official website. However, the author defines Pixi.js as a "2D WebGL renderer with canvas fallback" on the homepage, which means it is a WebGL renderer that relies on canvas. So don't be surprised when you see that Pixi.js provides only a few functions, because it is just a renderer.

Design Concept

The design concept of Pixi.js is largely derived from its positioning, which is to be a renderer and to make the rendering function the strongest. Such positioning will make Pixi.js the rendering core of other engines. You can often see some game engines or products developed based on Pixi.js.

Pursuing the ultimate rendering performance is the primary task of Pixi.js. In order to make Pixi.js easier to use, the author refers more to the very mature 2D rendering architecture - Flash in API design, and the provided API also refers to ActionScript as much as possible.

For example, create a display object, which is encapsulated as PIXI.Sprite in Pixi.js. If you need to display an image, use PIXI.PIXI.Texture to fill the rendering data. Finally, set the coordinates of the display object, and the code looks like the following.

 var stage = new PIXI.Container(); var texture = PIXI.Texture.fromImage( 'bunny.jpg' ); var bunny = new PIXI.Sprite(texture); bunny.position.x = 80; bunny.position.y = 60; stage.addChild(bunny);

The display architecture in Pixi.js is completely based on Flash design. All display objects are combined into a tree data structure, but the internal structure has been optimized for WebGL rendering, and the upper layer is not much different from Flash.

Function

The functions in the game engine can be subdivided into many categories, and it is impossible to explain all the details of each category in one article. I have divided all the functions into a secondary category for easy analysis.

Phaser

position

I deliberately put Pixi.js first in the analysis because Phaser itself does not have its own rendering core. Just like Pixi.js's positioning is different, Phaser's positioning is "Desktop and Mobile HTML5 game framework", which is called "HTML5 game framework for desktop and mobile terminals". Phaser does not define itself as an Engine, but a framework. Therefore, when you see Phaser's functional design and its rendering core, you will not be confused.

Design Concept

Because it positions itself as a game framework, Phaser is quite comprehensive in terms of game functions. Most of the functions you can think of have been implemented for you. In terms of rendering, Phaser does not have its own rendering kernel, but directly references Pixi.js. This is indeed a wise move, because Pixi.js is very powerful in rendering performance. As mentioned above, the programming language, game development itself has complex logic and many algorithms, and Phaser's support for TypeScript is also very knowledgeable.

In terms of architecture, Phaser is highly encapsulated. As for the display part, if you have used Pixi.js, you will find that the design ideas themselves are not much different, but the API is much more convenient to use. Phaser prepares everything you need for a game. When we want to create a game interface, we can customize it for different stages when Phaser is initialized.

 var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update });

As shown in the above line of code, Phaser defines preload, create, update and other methods for us. When using them, you only need to fill in the callback function. When the resource is loaded, Phaser will call the preload callback for you. When the screen is refreshed, you can call the update callback.

In other aspects, the signal and plug-in system are the biggest features of Phaser.

Function

Phaser has many functions, but most of them are implemented by other third parties.

Egret

position

Egret is a rising star in HTML5 game engines, and its positioning is no longer just an HTML5 game engine. The official positioning is a "game solution", and HTML5 is not mentioned too much. The reason is that Egret not only provides a game engine based on HTML5 technology, but also provides native packaging tools and many peripheral products, making it a "solution".

Design Concept

Here we analyze the Egret Engine product separately. Its language uses TypeScript and it has 2D and 3D versions. In terms of architecture design, like Pixi.js, it refers to the mature 2D architecture system of Flash. In terms of API, it also refers to ActionScript. Not only that, because of TypeScript, in the event system, it also implements an event registration mechanism such as addEventListener in imitation of ActionScript.

In terms of the kernel, Egret Engine adopts a modular design. This allows different functions to be decoupled. More interestingly, the automatic dirty rectangle technology that Flash is proud of is also implemented in Egret Engine. In canvas mode, dirty rectangles will improve rendering performance, which is more advantageous than other engines.

If you know Flash, you don't need to learn too much to use Egret Engine.

Function

Due to its modular design, Egret Engine puts different functions into different modules. These modules are provided in the form of libraries. The following table shows the sum of all supported modules, but does not include the platform API part, such as the encapsulation of WeChat API.

enchant.js

position

enchant.js is not an engine, but a framework. At the same time, enchant.js is not only used for games, but also for apps.

Design Concept

Given that it supports both game and app development, this framework must take some things into consideration and cannot be free-handed in terms of games. In terms of architecture design, not all elements are designed in an OOP manner, and the internal use is practice-driven, and asynchronous processing is effectively combined. In terms of games, only animation-related functions are supported. The enchant.js framework provides a set of plug-in mechanisms, and you can inject the functional modules you use into the enchant.js framework as plug-ins.

enchant.js also provides an online image library for developers to use the materials for free. When it comes to game effects, most of them are small games.

Function

The functions provided by the enchant.js framework itself are very limited. If you need other functions, you must expand it yourself or find corresponding plug-ins.

craftyJS

position

craftyJS defines itself as a framework for JavaScript games.

Design Concept

Due to the positioning of the framework, craftyJS provides some system-level support in design, such as encapsulating canvas and DOM rendering methods into the same set of APIs, minimizing file size, entity component system, display object encapsulation, collision detection, event system, and many functional component modules. All modules rely on the design of the entity component system.

In actual testing, craftyJS's API design is also the most uncomfortable to use.

Function

Turbulenz

position

The Turbulenz engine is actually a game engine for games in its own game platform. Because it is bound to its own platform, it provides many low-level APIs in the engine. With these low-level APIs, some system-level functions in the Turbulenz game platform can be called.

Design Concept

Since the Turbulenz engine is designed more for itself and provides more runtime support, in a strict sense, the Turbulenz engine is not a pure HTML5 game engine. In order to meet the needs of its own channels, the Turbulenz engine strives to add more complete functions and improve its operating performance.

Function

Since Turbulenz has expanded many functions and launched Low Level API and High Level API at the same time, we will not analyze the functions of the complex system here. If you are interested, you can visit its official website.

cocos2d-js

position

cocos2d-js was born as the golden key of Cocos2D-X. It is just a branch of Cocos2D-X that implements HTML5.

Design Concept

The design concept of cocos2d-js and Cocos2D-X is the same. You can see that all APIs and syntax are completely based on Cocos2D-X. People in China are already very familiar with Cocos2D-X, so I won’t introduce it in detail here.

Function

The functions provided by cocos2d-js are quite complete, and you can find almost all the functions you need in the game.

PlayCanvas

position

PlayCanvas is mainly used for 3D rendering. This article mainly discusses 2D, so I will not go into too much analysis of PlayCanvas.

melonJS

position

melonJS is a lightweight HTML5 game framework that extends its functionality through a plugin mechanism.

Design Concept

melonJS is lightweight in all functional designs. You can see many functions and build your own functional modules based on them. melonJS has very good support for Tiled Map, and compatibility is also the focus of melonJS.

Function

Quintus

position

Quintus positions itself as a simple and easy-to-use JavaScript game engine that supports both mobile and PC.

Design Concept

Quintus is designed to be modular and lightweight, and uses concise and friendly JavaScript syntax as much as possible. In the design of JavaScript API structure, standard OOP mode is used as much as possible. Quintus also uses jQuery and implements events and a selector syntax through jQuery plug-in. In terms of language design, Quintus does not restrict the use of traditional inheritance, which makes the component model easier to reuse.

Function

Quintus itself does not support WebGL, provides relatively few features, and is ranked low on Github.

Hilo

position

The Hilo engine comes from the Alibaba front-end team. From the homepage of the official website, the positioning of this engine is relatively vague. Hilo is a cross-terminal interactive game solution, and it is also called a comprehensive solution. From its evolution, Hilo belongs to a set of tool libraries summarized by Alibaba front-end in practice. The overall engine was not originally planned and designed.

Design Concept

Judging from the features supported by Hilo, Hilo's design concept is more inclined towards front-end developers rather than game developers. Hilo provides packaged versions of various module paradigms, which actually meet the habits of different front-end developers. These features are completely preferred by front-end engineers. For games, these features may not be the highest priority. As a common engine for Alibaba's internal team, it should be very suitable for Alibaba, and the application scenario is sufficient for making simple marketing interactive games.

Function

Hilo's functions are relatively simple, and for game development, there are many missing functions.

Workflow

For team development, workflow building is very important, and I personally value this. If it is a small team or individual developer, there may not be much demand for this. When the project scale becomes larger, a good workflow will achieve twice the result with half the effort.

Because the functions of the engines are different, the tools involved will also be different, so I will not make a table comparison here.

Three.js

3D is not within the scope of this article, and Three.js is not a game engine, so there is no such thing as a game development workflow. Here is a brief introduction to the online editor provided by Three.js.

The online editor provided by Three.js should be developed based on Three.js. It does not have many functions, but it is quite small.

Pixi.js

As a renderer, Pixi.js has very simple tool support. It does not provide any tools except a library.

Phaser

Phaser, like Pixi.js, does not provide any tool support, and only recommends two code editors on its official website. It also provides a simple online code editor.

Egret

Egret provides a lot of tools, which also fits the positioning of its solutions. You can see the following tool support in the entire Egret system.

Egret Wing: An IDE editor produced by Egret. While providing code editing functions, it also has a built-in visual UI editor. It is used in conjunction with the GUI and EUI frameworks in Egret Engine.

ResDepot: This is a small tool used to configure the game resource loading table. If there are many game resources, you can use this small tool to drag and drop to complete it.

TextureMerger: A small tool for texture merging, which functions a bit like TexturePacker.

DragonBones Pro: DragonBones animation editor for the skeletal animation solution in Egret.

Egret Inspector: A Chrome browser-based plug-in that can debug Egret games.

Egret iOS & Android Support: These two things can package your HTML5 game into a native APP.

There are some other tools, but their positioning is different from game development. If you are interested, you can visit its official website.

From the above analysis, we can see that Egret has done a very good job in supporting workflows, from Wing code writing, to ResDepot and TextureMerger resource integration, to Inspector debugging, and native packaging. Basically, every link in the game development process is supported by tools.

enchant.js

enchant.js does not provide any tool support, and there is no introduction to any related supporting tools on the official website.

craftyJS

craftyJS also does not provide any tool support and is just an open source code library.

Turbulenz

Turbulenz contains many tools in the directory you downloaded, most of which are related to format conversion. All tools are command-based tools and do not provide any visual operation software support.

cocos2d-js

Cocos2d-js has changed a lot in recent years, but the support for this branch of JS is very little. A while ago, a new tool called Cocos Creator was released. I haven't used it specifically, but the screenshots seem to have the shadow of Unity3D. From the introduction, it should have good support for games, but the editing aspect is still lacking.

PlayCanvas

PlayCanvas also provides an online editor, but for its 3D features. The editor looks very similar to the online editor provided by Three.js. Here are some screenshots directly from the official documentation for you to see.

melonJS

MelonJS does not provide any tool support other than the source code library. However, its official homepage contains links to several other editors, such as the famous Tiled map editor.

Quintus

Quintus does not provide any tool support.

Hilo

Hilo does not provide any tool support.

Summarize

The result is not surprising. For open source game engines, maintaining libraries consumes a large part of the author's energy, not to mention making software products such as editors. Many engines rely on some popular third-party tools, such as Tiled, TexturePacker, etc. Although the functions can be realized, there are still more or less some problems in the whole workflow. Only Egret and Cocos2D-js provide relevant visual editing tools. And the two have completely different understandings of workflow. It is not difficult to see from the product that Cocos2D-JS is more like Unity3D, providing a large and comprehensive software for developers. Egret uses different tools for different roles, divides products according to roles, and designs products for different roles and various links in the development process.

Relatively speaking, Egret's approach makes each tool more vertical, with deeper functions, and does not make the tool appear bloated. Cocos Creator strives to be complete, with one software to solve all problems.

performance

For performance testing, I only did a rendering stress test on the 2D game engine.

The test content is to compare the frame rate data when the number of objects rendered on the same screen is the same. In order to ensure the fairness of the test, I used the same computer and the same version of Chrome browser for the test. The game scene size was 800*600 and the displayed picture was also the same. Each engine rendered 5000, 10000, and 20000 display objects on the same screen.

There was a problem with the rendering of the craftyjs engine, so no data comparison is made here.
The Quintus engine does not support WebGL rendering mode, so no data comparison is made on this page.
The Phaser rendering kernel uses Pixi.js, so the Phaser rendering data refers to the Pixi.js results.

The code written for all engines is roughly the same. It starts with a for loop, creates a certain number of display objects, and then rotates each display object in the loop.

The test code is as follows:

Pixi.js

 var renderer = PIXI .autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb}); document.body.appendChild(renderer.view); var stage = new PIXI.Container(); var texture = PIXI .Texture.fromImage('bunny.jpg'); var tnum = 5000 ; console.log("render Object Number:",tnum); var bunnys = []; for(var i = 0 ;i < tnum ;i++) { var bunny = new PIXI.Sprite(texture); bunny.position.x = Math .random()*800; bunny.position.y = Math .random()*600; stage.addChild(bunny); bunnys.push(bunny); } animate(); function animate() { requestAnimationFrame(animate); for(var i = 0 ;i < tnum ;i++) { bunnys[i].rotation += 0.1; } renderer.render(stage); }

Egret

 class Main extends egret.DisplayObjectContainer { public constructor() { super(); this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this); } private tnum:number = 100000 ; private bunnys:egret.Bitmap[] = []; private onAddToStage(event:egret.Event) { console.log("render Object Number:",this.tnum); this.stage.dirtyRegionPolicy = egret .DirtyRegionPolicy.OFF; RES.getResByUrl('resource/bunny.jpg',this.onComplete,this,RES.ResourceItem.TYPE_IMAGE); } private onComplete(event:any) { var img:egret.Texture = < egret.Texture > event; for(var i:number = 0 ;i < this.tnum ;i++) { var bunny = new egret.Bitmap(img); bunny.x = Math .random()*800; bunny.y = Math .random()*600; this.addChild(bunny); this.bunnys.push(bunny); } this.addEventListener(egret.Event.ENTER_FRAME, this.animate,this); } private animate(evt:egret.Event) { for(var i:number = 0 ;i < this.tnum ;i++) { this.bunnys[i].rotation += 1; } } }

enchant.js

 enchant(); window.onload = function () { var game = new Game(800, 600); game.fps = 60 ; game.preload('bunny.jpg'); game.onload = function () { var tnum = 100000 ; console.log("render Object Number:",tnum); var bunnys = []; var scene = new Scene(); game.pushScene(scene); for(var i = 0 ;i < tnum ;i++) { var sprite = new Sprite(50, 50); sprite.image = game .assets['bunny.jpg']; sprite.x = Math .random()*800; sprite.y = Math .random()*600; scene.addChild(sprite); bunnys.push(sprite); } game.addEventListener('enterframe', function() { for(var i = 0 ;i < tnum ;i++) { bunnys[i].rotation += 1; } }); }; game.start(); };

Turbulenz

TurbulenzEngine = WebGLTurbulenzEngine.create({ canvas: document.getElementById("canvas") }); var graphicsDevice = TurbulenzEngine.createGraphicsDevice({}); var draw2D = Draw2D.create({ graphicsDevice: graphicsDevice }); var bgColor = [1.0, 1.0, 0.0, 1.0]; var tnum = 50000; console.log("render Object Number:", tnum); var bunnys = []; for (var i = 0; i < tnum; i++) { var sprite = Draw2DSprite.create({ width: 50, height: 50, x: Math.random() * 800, y: Math.random() * 600, color: [1.0, 1.0, 1.0, 1.0], rotation: Math.PI / 4 }); bunnys.push(sprite); } var texture = graphicsDevice.createTexture({ src: "bunny2.jpg", mipmaps: true, onload: function (texture) { if (texture) { for (var i = 0; i < tnum; i++) { var sprite = bunnys[i]; sprite.setTexture(texture); sprite.setTextureRectangle([0, 0, texture.width, texture.height]); } } } }); var PI2 = Math.PI * 2; var rotateAngle = PI2 / 360; // 1 deg per frame function update() { if (graphicsDevice.beginFrame()) { graphicsDevice.clear(bgColor, 1.0); draw2D.begin(); for (var i = 0; i < tnum; i++) { var sprite = bunnys[i]; sprite.rotation += rotateAngle; sprite.rotation %= PI2; // Wrap rotation at PI * 2 draw2D.drawSprite(sprite); } draw2D.end(); graphicsDevice.endFrame(); } } function render() { var tnum = 5000; console.log("render Object Number:", tnum); for (var i = 0; i < tnum; i++) { sprite.position.x = Math.random() * 800; sprite.position.y = Math.random() * 600; } }

cocos2d-js

 window.onload = function (){ cc.game.onStart = function (){ //load resources cc.LoaderScene.preload(["bunny.jpg"], function () { var tnum = 100000 ; console.log("render Object Number:",tnum); var bunnys = []; var MyScene = cc .Scene.extend({ onEnter:function () { this._super(); var batchNode = cc .SpriteBatchNode.create("bunny.jpg"); this.addChild(batchNode); for(var i = 0 ;i < tnum ;i++) { var sprite = cc .Sprite.create("bunny.jpg"); sprite.setPosition((Math.random()*800), (Math.random()*600)); batchNode.addChild(sprite);                       bunnys.push(sprite); } this.scheduleUpdate(); }, update:function () { for(var i = 0 ;i < tnum ;i++) { bunnys[i].setRotation(bunnys[i].getRotation()+1); } this.scheduleUpdate(); } }); cc.director.runScene(new MyScene()); }, this); }; cc.game.run("gameCanvas"); };

melonJS

 var PlayScreen = me .ScreenObject.extend( { onResetEvent: function() { me.game.world.addChild(new me.ColorLayer("background", "#5E3F66", 0), 0); for (var i = 0 ; i <   5000 ; i++) { me.game.world.addChild(new Smilie(i), 3); } } }); var Smilie = me .Sprite.extend({ init : function (i) { this._super( me.Sprite, "init", [ (-15).random(800), (-15).random(600), { image: me.loader.getImage(game.assets[0].name) ,width : 50 ,height : 50 } ] ); this.rotation = 0 ; this.alwaysUpdate = true ; }, update : function () { this.rotation += 3/180*Math.PI; this this.angle = this.rotation ; return true; },} );

Hilo

 function init(){ var stage = new Hilo.Stage({ renderType: 'canvas' , container: gameContainer, width: 800, height: 600 }); var sum = 5000; var bitmaps = []; var ticker = new Hilo.Ticker(); ticker.addTick(stage); ticker.start( true ); for ( var i = 0; i < sum; i++) { var bmp = new Hilo.Bitmap({ image: 'images/hero.jpg' , rect: [0, 0, 50, 50], x: Math.random()*800, y: Math.random()*600 }).addTo(stage); bitmaps.push(bmp); } function animate() { requestAnimationFrame(animate); for ( var i = 0; i < sum; i++) { bitmaps[i].rotation += 0.1; } } animate(); }

My computer configuration is as follows:

Final test results

in conclusion

According to the above test method, we can make a rough ranking of engine performance:

1. Pixi.js and Turbulenz
2nd place: Egret
Third place: Cocos2d-js
4. Hilo
No. 5: enchant.js
6. melonJS

Finally, a picture of the test effect is released

Study Materials

Usually, we will choose a product with more complete documentation for learning and use, after all, we will encounter various problems during use. Now the documentation and discussion groups of game engines have become standard features of products. The following table compares these "standard features" of various engines.

in conclusion

From the comparison table above, we can see that most engines have done a relatively in-depth job in documentation and tutorials, but the degree of completion varies. Most of them are in English, which may be a bit more expensive for domestic developers to learn. Among them, the two engines that support Chinese, Egret and Hilo, are both Chinese products. In terms of documentation, Egret does a very good job. Developers can check a lot of Chinese materials from its edn.egret.com.

In terms of learning difficulty, Egret is the easiest, both in terms of completeness and Chinese popularity.

Commercial Applications

This part of the comparison is about the proportion in commercial product applications. When an engine is widely used in commercial products, it is enough to prove that this engine has commercial product use value. In layman's terms, if others can use this thing to make games, you can too. So let's make a rough analysis of these two aspects.

I don't know anything about the foreign HTML5 game market, and it's too big to analyze, so I'll just analyze the domestic market and see which engine is used the most.

I used Sina Weibo, a popular HTML5 gaming platform in China, as the data sampling basis. One person has limited energy and it is impossible to do a complete job. Since the client encrypts the game address, it cannot be obtained directly. So I used some debugging tools to look at the tags of the game webpage to determine what engine the game was made with.

The final statistical results are as follows:

A total of 50 games were found, as shown in the table above. Among the 50 engines, 6 were developed using pure HTML5, 30 were developed using Egret, 14 were developed using Cocos2d-js, 1 was developed using laya, and 1 was developed using createjs.

The statistical results are as follows:

It is not difficult to see that Egret and Cocos2D-js have jointly divided up most of the market. Egret's share is more than half, reaching 58%. It seems that Egret is still very strong in the domestic HTML5 game market.

Summarize

1. Three.js: As a long-established 3D library, it already has many cases and is currently a good choice in PC multi-web 3D.
2. Phaser: The documentation, tutorials, and examples are very good, and the functions are rich. It is very suitable for independent game development and small teams.
3. Pixi.js: As a renderer, its rendering performance is absolutely excellent, but its support for game functions is very poor, so it is suitable for geek programmers.
4. Egret: It has good performance and excellent support for workflow. It is suitable for medium and heavy HTML5 game development. It has been verified by many commercial projects and is very suitable for commercial teams.
5. enchant.js: Performance deviation, not recommended.
6. craftyJS: The documentation and tutorials are not perfect, and it is difficult to find corresponding technical support. It is not recommended.
7. Turbulenz: Excellent performance, but tied to its own business, not very suitable for the domestic market.
8. cocos2d-js: An old engine with a mid-range performance and relatively complete workflow support. It is recommended.
9. PlayCanvas: A heavy 3D game development engine. This article does not recommend 3D.
10. melonJS: The performance is not ideal, not recommended.
11. Quintus: Does not support WebGL mode, has poor performance, and is not recommended.
12. Hilo: A work by Alibaba's front-end team, it is more suitable for front-end development engineers. It is quite different from professional game development and is recommended for small interactive marketing with HTML5.