Top 15 HTML5 Game Engines of 2016

HTML5 games have been on a tear ever since The Nero Cat at Egret engine exploded in 2014, and this year Legendary World hit 20 million. In the last two years or so, game development has become more and more complex, requiring all kinds of stunning effects and all kinds of 2D and 3D Settings. As a developer, this article analyzes the most popular HTML5 game engine for your reference, and hopes that you can find your own game development engine.

I collected more than 40 HTML5 open source game engines on Github, analyzed their popularity from the star, fork and other parameters, and finally selected the top 15 (including three non-open source game engines) by comprehensive elements.

free

charge

1.Construct 2

Construct 2 is a Windows game making tool that allows users with no programming background to quickly develop a game for all platforms (Windows, Mac, Linux, Android, iOS, etc.) without writing a single line of code in a short period of time. The free version exports the game to HTML5. The paid version is available for personal (£79) and enterprise (£259) and can be exported to all platforms, as well as offering more special effects and music. If you make more than $5,000 using the tool, you need to upgrade to the Enterprise edition.

Features:

Simple and intuitive, easy to get started, without programming can also do games, strengths are the development of shooting and action plane games, there is a wealth of English information.

Advantages:

1. Support for multiple platforms (Android, iOS, Windows)
2. Easy to use, no programming knowledge can be used, can run the game in real time;
3. There are plenty of special effects, physics support, and a developer store where you can buy a variety of development plug-ins and game materials.
4. Powerful event system, can control the game logic without writing code;
5. Provides a programmable extension interface, you can develop their own plug-ins;
6. Complete documentation and community support.

Disadvantages:

1. Not open source and lacking in Chinese language tutorials;
2. Web pages and mobile phones are hardware products with lower performance than computers, so developers need to make better use of system resources, even in Windows platform, because the output format of Windows is made by using the Chrome browser kernel, that is to say, it essentially runs on the browser.

Comments: use the most HTML5 business engine, update fast and developer mall support is very good, recommend! **

2,Three.js

Three. Js is a 3D engine that runs in a browser and allows you to create a variety of 3D scenes, including cameras, lights, textures and other objects. You can see many excellent demonstrations on its home page.

3,Phaser

Phaser is an open source, free framework for desktop and mobile HTML5 2D game development. It offers dual JavaScript and TypeScript support, built-in physical properties for game objects, a Pixi.js engine to speed up Canvas and WebGL rendering, and browser-based switching.

Fast, free and easy to maintain, the advantages of using Phaser to develop small 2D games are obvious. On the one hand, developers can write and preview code directly from the VM development system on the Koding platform. On the other hand, you can also install Phaser directly in a Canvas enabled browser for game development.

Main features:

1. Dual support for JavaScript and TypeScript
2. The physical properties of the built-in gameobject
3. WebGL and Canvas render freely switch
4. Full support for Web audio
5. Input: multi-touch, keyboard, mouse, MSPointer event
6. In addition to desktop browsers such as IE 9+, Firefox, Chrome, Safari and Opera, Phaser also supports Mobile Chrome (Android 2.2+) and Mobile Safari (iOS 5+). There is no language set for developing games using Phaser, and on the Phaser website, there is a very detailed development guide for those who want to check it out.

4,Pixi.js

Pixi.js is an ultra-fast open source HTML5 2D rendering engine that uses WebGL with Canvas callback. As a 2D renderer for JavaScript, Pixi aims to provide a fast and lightweight 2D library that is compatible with all devices. In addition, developers can feel the power of hardware acceleration without having to know about WebGL.

Main features:

1. True cross-platform: It’s not uncommon these days for development tools to be cross-platform. However, pixi.js is a super fast HTML5 2D rendering engine that works with all devices, and WebGL with canvas callback, making it truly cross-platform.
2. Interactive multi-touch: Pixi supports not only mobile and tablet devices, but also full multi-touch input recognition, allowing developers to exploit its full potential.
3. WebGL Filters: Pixi allows you to use familiar and existing filters when using WebGL. Of course, you can also use your own unique filters, such as self-positioning shift and halftone effects.
4. Color and Blend modes: Designers will love this, pixi.js allows users to color and use blend modes just like other common visual packages like Photoshop or Flash.
5. Renderer autodetection: This is one of the main features of Pixi, although Pixi was created primarily as a WebGL 2D renderer, it still supports non-WebGL platforms. The solution is to create a Canvas callback system that allows Pixi to seamlessly manage callbacks with a single encoding.
6. Simple API: Intuitive design, easy to use.
7. Resource loading: Sprite forms, graphics, fonts, and animation data can all be loaded and processed through Pixi.js.
8. Support Sprite Sheet.

5,egret

Egret games solutions include an open source, free HTML5 game engine, Egret project development tools, animation effects tools, native multi-platform packaging tools, efficient HTML5 game application accelerators, and open platforms that support multiple channels. The Egret project development tool allows you to quickly and efficiently create and develop all kinds of content for your game, bringing it up to par with native games. After the game is released to the open platform, it has high-quality channel resources to recommend the game to more users, making the game development, release and promotion into an integrated content.

Main features:

1. Based on TypeScript and JavaScript technology, support Flash to Egret efficient conversion, engine, tools, runtime complete workflow
2. Cross-platform: HTML 5, iOS, Android, Windows Phone
3. Full Chinese documentation: complete documentation and developer community
4. Open source free, BSD open source agreement, arbitrary customization and extension

6,enchantjs

Enchant. Js is a simple JavaScript framework that allows you to develop simple games and applications using HTML5 and JavaScript. It is still developed and maintained by UEI’s Akihabara Research Centre. The online demo

7,crafty

Crafty is a small, simple, lightweight 2D HTML5 game engine that provides drawing entities via Canvas or DOM, Sprite maps, and SAT advanced collision monitoring support. It was created by an individual (Louis Stowasser) and co-developed by several developers on Github.

advantages

1. Small volume
2. Lightweight engine, not too tied down by frame
3. Supports both PC and mobile browsers

Eight,turbulenz

Turbulenz is an open source HTML5 game engine that provides an SDK that runs on Windows, MacOS, and Linux, allowing developers to create high-quality, hardware-accelerated 2D and 3D games. These include asynchronous resource loading, effects and particle rendering, support for physics, collision detection and animation, 3D sound support, support for network interaction and social network sharing, scene and resource management.



Advantages:

1. Powerful function, support BOTH 2D and 3D

2. Open source engine based on MIT protocol

9,cocos2d-js

Cocos2d-js is a 2D open source free HTML5 game engine based on the Cocos2D-X API. It is currently rendered via Canvas and will support WebGL in the future. It is developed and maintained by the domestic CoCOS2D-X core team, with Google, the industry leader and a strong HTML5 promoter, providing support for the project. Engineers from Zynga, Google and other big companies also worked on its design.

Advantages:

1. Similar to Cocos2d’s API, it’s easy to get started
2. Chinese documents are complete and rich in information
3. Open source engine based on MIT protocol

10,playcanvas

PlayCanvas is an enterprise-class open source JavaScript framework based on the WebGL game engine. It has a number of development tools to help you quickly create 3D games. Playcanvas.js was created by a professional community and wasn’t originally open source, but now you can fork PlayCanvas.js on Github and use it for free in your next 3D game project.

It also provides a cloud-centric editor in the browser, and getting started with PalyCanvas is as easy as navigating to the editor’s URL.

11,melonjs

MelonJS is a new, lightweight, sprite-based 2D game engine. Compatible with all HTML5 browsers including Chrome, Safari, Firefox, Opera. Support for multichannel. Provides basic physics and collision mechanisms (to ensure low CPU requirements), a basic set of entity objects (extensible). Supports tween animation effects. A state manager (easy to manage loading, menus, options and on-off state in the game screen). Provides some basic GUI elements. A customizable loader.

12,quintus

Quintus is an easy-to-use, lightweight, open source HTML5 JavaScript game engine that includes a modular engine that makes it easy to develop games, run multiple instances on the same page, and supports both desktop and mobile browsers. Quintus uses object-oriented thinking for HTML5 game development and relies on jQuery to provide event handling and element selection.

13,ImpactJS

ImpactJS is a javascript-based HTML5 game engine that supports both PC and mobile browsers. It is currently the most popular HTML5 game engine aside from Construct2 and costs $99 to use.

ImpactJS was once so popular that the z-Type game developed using ImpactJS was voted one of the top 20 games by many foreign websites.

Advantages:

1. Provides a flexible level editor to quickly build game maps
2. Provides powerful debugging tools
3. Ejecta can render the results of JavaScript execution through OpenGL, which can achieve similar efficiency with native applications on iOS platform
4. Well documented, there are two books devoted to ImpactJS development
5. Support for physics
6. Support to write their own plug-ins to extend

Disadvantages: 1. Non-open source and lack of Chinese tutorials; 2. The update is slow and the function is not powerful enough.

14,GameMaker

GameMaker, like Construct 2, is a game making tool that can be exported to various platforms and is available for free, standard ($49.99), Professional ($99.99) and Master ($799.99). The free version can only be exported for Mac and Windows. Exporting HTML5 requires the Master or Professional version (which costs an additional $99.99).

Advantages and disadvantages: The advantages are similar to Construct2, but not as cost-effective

15,Hilo

Hilo, a set of HTML5 cross-terminal interactive game solution open source! . Hilo has supported several large-scale and daily marketing activities of Singles’ Day, such as Taobao and Tmall Carnival City. The kernel is very simple, providing a variety of rendering schemes including DOM, Canvas, Flash, WebGL and so on, meeting the requirements of full terminal and performance.

Main features:

1. Minimal kernel: The Hilo core module is extremely lean and retains the most essential modules for a 2D game engine, while adopting modular management.
2. Perfect Access & Extension: Hilo supports packaged versions of a variety of module paradices, including AMD, CMD, Standalone access in a variety of ways. In addition, you can add and extend modules and types as needed.
3. Various rendering methods: DOM, Canvas, Flash, WebGL and other rendering schemes are provided, which can meet the requirements of cross-end and high performance.
4. Complete peripheral tools: provides animation editors, Yeoman scaffolding and ancillary development tools for typical case production.
5. Abundant cases: supported Tmall and mobile shopping for many large-scale and daily activities, such as Singles’ Day, mid-year Promotion, etc. Represent products such as carnival city.