HTML5 games are not new and are already a fairly well-known technology for many developers. Flash technology conditionally retired back in 2010, leaving behind a vast developer experience in hundreds of books and thousands of articles. Finally, Adobe promises to end support for Flash by 2020. It is believed that the reason for this was Apple’s refusal to support Flash in browsers, starting in 2010, as well as the emergence of Canvas technology.

How to do

In 2015. we were officially presented with the new HTML5 standard, which turned the entire industry upside down. In addition to the appearance of many semantic elements, such as <section>, <article>, <menu>, etc., many elements have become available to us to better manage media content, such tags as: <audio>, <video>, <canvas>, etc. This standard is a new breath of fresh air aimed at structuring websites and improving the performance of web applications. Currently, the standard is generally accepted and if you are just taking your first steps into web development, then you should definitely familiarize yourself with HTML5.

Canvas (literally “canvas”) – html-element designed to create a two-dimensional raster image using JavaScript. The origin is in the upper left corner. Browser support currently inspires confidence:

With the help of WebGL, we can create high-quality 3D graphics and use the full potential and capabilities of a PC video card. Canvas is used everywhere for displaying charts, creating browser games, embedding complex video elements into a page, and this is not all the capabilities of this technology.

In this article I want to consider a popular and fairly well-developed free framework – Phaser. Framework positions itself as a platform for creating browser-based 2D games. Official site. The first stable release took place in 2016. It was version 2.6.5, which is currently very popular, well-documented, and there are hundreds of examples of using the Framework on the official site. We can talk about the pros and cons for a long time, but currently the biggest disadvantage of version 2.x.x is the complete lack of development support, since the developers are focused on fixing bugs and adding new functionality to version 3.x.x. Phaser incorporates the very best of technology available. It supports WebGL rendering for amazing performance, uses the Pixi.js graphics engine, and supports three kinds of physics:

  • Arcade – ideal for creating indie games, allows you to handle collisions, control gravity, control acceleration, body weight and much more;
  • Impact – an engine similar to Arcade that allows you to create space shooters;
  • MatterJs is a material physics engine based on the idea of ​​the interaction of bodies using links (threads), suitable for creating games with complex physical logic and body interaction.

A real sensation among developers in 2018. produced version 3.x.x, which showed us a new level of quality and convenience in creating browser games. The new version allows you to write high-quality, performance, object-oriented code in JavaScript or TypeScript. I suggest that you start learning Phaser from the latest version in the 3.x branch, since version 2.x will completely retire. In addition to completely overhauling the frameword structure, developers have completely gotten rid of Pixi.js and added many useful development tools. Full support for atlas, sprite, bones animation, tile. To integrate these technologies, I recommend using the following programs:

Atlas, sprite – combining images into one and creating a json markup file. This can significantly reduce file size. To create the atlas, I prefer to use the shareware TexturePacker program. On the site you will find instructions for integration and preview of features;

Bones – character animation not by changing slides (a very large amount of data), but by transforming the original image. In the Dragon Bones program, work is divided into two stages – creating bones and creating animations. The entrance threshold is quite small, in a couple of days you can study the technology and start using it. This allows you to create smooth and beautiful animation of game elements and characters;

Tile – Creates a map consisting of elements of a fixed size (squares). Each of the squares can contain some kind of game sprite. This technology for describing the game map significantly reduces development time and makes the process of creating maps simpler and more convenient. To work with tiles, I suggest using the free Tiled tile editor.

Phaser3 is well documented, has a lot of examples and a very good architecture. You can find the latest news about version 3.x here.