How to make HTML5 games?

With the departure of Flash from browsers, the need to make browser games on something else has increased a little more than completely. There is no alternative in technologies, there is only one – HTML5 technology.

And in order to start making HTML5 games, it would be good to first choose a tool for this, since there is a choice in HTML5 engines and frameworks for games)

First, we’ll look at HTML5 engines and frameworks that are good for creating 2D games, and then we’ll look at 3D.

It is worth talking about HTML5 rendering technologies, there are two of them: canvas and WebGL. The crux of the difference: canvas is for 2D rendering and works flawlessly in almost all browsers, while WebGL is for 3D rendering and may not work in all browsers.

For HTML5 2D a couple of years ago it was very important that the engine could render to canvas, not just WebGL, since game portals took games only on canvas. But now the situation is changing and WebGL is becoming more commonplace and an indicator of high rendering speed compared to canvas. But if you are making a 2D HTML5 game, then just in case it should be able to render on canvas – suddenly the sponsor doesn’t want WebGL.

I will briefly review the top from this table in order)

The main feature of PixiJS is rendering speed. The authors claim it is the fastest 2D rendering engine so far. Basically, WebGL renders are used wherever possible and only for older browsers is rendering to canvas automatically enabled.
At the office. the site has a bunch of examples and documentation.

The engine is the choice of many large offices and I think you can be sure that they know what they are doing.

It is worth saying that if you compare a pixie with a more game engine (for example, a phaser), then in a pixie you will need to find and connect such libraries as physics, twinning, etc.

If you want such basic things to be out of the box right away, then please read Phaser.

Phaser is an open source HTML5 game engine. He is well supported by Richard Davy and the community around him. PixiJS is used for rendering, so it can render to canvas or webGL by choice and don’t worry about speed.
Tons of examples at the office. site, huge community and excellent forum.

under the hood there are already a couple of physics engines, a library for tweening, a math library, tile mapping and much more that you can see for yourself in the examples section.

There are ready-made templates in MS Visual Studio for new Phaser projects using the TypeScript language.

I chose this engine after a lot of deliberation between CreateJS, PixiJS and Phaser and I was satisfied. After Haxe + OpenFL, there was a pleasant feeling that I was developing a game, not crutches for developing a game) I immediately decided to use TypeScript and was pleasantly surprised that MSVS has ready-made project templates.

ImpactJS has been at the top of the HTML5 Canvas Game Engine rankings since 2010, when it first appeared in public. It is a JavaScript game engine. Comes with the Ejecta Framework, which helps you publish games to iOS and tvOS. Ejecta takes sources in js and compiles it for OpenGL. According to the developers, the games will not differ from native Objective-C games.
A feature is the presence of a native level editor called Weltmeister. In it, you can define and use game objects, such as enemies, NPCs, triggers, etc. up to linking them into logical circuits.

But such delights are no longer free, ImpactJS costs $ 99 USD. But, if you weigh everything, then I think this amount will be recouped and justified after 1-2 games sold.

I myself had no experience with the impact, but I like it in appearance.

The advantage of the CreateJS framework is that it is quite unified for browsers and is supported by Adobe, etc. this is a kind of guarantee (probably) that the framework will be updated and produce a minimum of bugs in browsers. Although you and I know that Adobe support means nothing)
But seriously, the framework looks neat and I know at least 2 people who love it and are not going to climb to something even more convenient, for example Phaser.

Seamless embedding of any API, ads, etc.

Construct 2 logo Construct 2 is famous for making it possible to do something without requiring deep programming skills from the creator, i.e. is precisely the constructor, hence the popular one.
For example, as a programmer, I don’t like the paradigm of “constructor without code”, because I can lose a lot in the flexibility of my program at different stages. Imagine that you have been making the game for a month, the sale process is in progress, you have already agreed with the sponsor, you need to embed its API into the game and then you understand that fig knows how to embed API in js in this constructor.

Now let’s look at what you can use to make HTML5 3D games.

Unity 5 is one of the best engines for creating 2D and 3D games and also supports export to HTML5 WebGL.
I think there will be quite a few Unity WebGL games on the portals.