Last Updated:

HTML5 games in 5 minutes

HTML5 games are an unpretentious way to enter the gamedev industry for those who are just mastering programming.

The advantages of such games are many:

  • Easy to create. Just know the standard HTML, CSS, and JavaScript that are standard for the web. The code does not have to be written from scratch: developers have already written engines for creating games. Users are good at small games and simple speakers.
  • Cross-platform. One game can be played by users from different phones, tablets and computers. Accordingly, you can make multiplayer games.
  • Multiple distribution platforms. Developers publish games in the AppStore and Google Play, on special sites, social networking platforms and instant messengers.

In this article, we will run through the main tools for creating HTML5 games and distribution platforms.

Engines, libraries and assets

 
 

An HTML5 game can be written using a standard set of front-end technologies. Generate a page in HTML, describe the styles in CSS and the logic of working in JavaScript. So it will be possible to control everything, but the result will take a lot of time. It's similar to the situation with front-end frameworks.

The engine is the core on which all the main components are built. Most major engines have free versions. But this does not mean that their developers do not earn. So, Phaser has paid plugins, in Construct 3 there is a paid subscription for the full version, other engines will force you to fork out for the sake of publishing the project in the app stores.
 
HTML5 games in 5 minutes

If you're not a big fan of JavaScript, but you like the breadth of HTML5 games and don't want to pay for anything, take a closer look at Defold. Games in Defold are written in Lua, but the finished project can be ported to any platform you are interested in, including creating an assembly for HTML5.

When choosing an engine yourself, use the table from the bebraw repository. The table shows the distribution license, the type of rendering (2D, 3D), the volume occupied, as well as links to projects and documentation.

Library. The engines are sharpened for game development. For fine-tuning animations, sounds and preloading elements, there are separate libraries and module packages, such as CreateJS. For three-dimensional gameplay - Babylon.js. If you decide to bother with the physics of the interaction of objects - study PhysicsJS.

Assets. Games are not only code, but also many different files: sounds, pictures of models and textures - they are also called assets. The kenny.nl collected 20 thousand vector 2D and 3D assets, sounds and interface elements. Tons of pixel art are on the itch.io. The open library of sounds is freesound. Look for 3D models on turbosquid and sketchfab.

Propagation

 

There are several approaches to distribution: to place the game on your own website, game portal, publish as a separate mobile application or in the store of other mobile applications.
  • Gallery of games in mobile applications. Telegram, Facebook, VK, Yandex and other companies are developing their own platforms for the distribution of HTML5 games. So, in Telegram, you can publish a game through @BotFather, and VK accepts games on the Direct Games platform. The real earnings of a small game studio in VK can be estimated by the Mewton Games DTF article.
  • Specialized platforms. There are many sites that work mainly with HTML5 games: html5games, kongregate, newgrounds.com and others.
  • Export to a native application. You can convert HTML5 games to native apps and place them in the iOS and Android app stores. This is done using wrapper applications, for example, PhoneGap assemblies.

Current tournament

 

One example of the relevance of the topic: Sber recently opened registration for the SmartMarket Cup: HTML5 Games tournament. As part of the competition, independent developers and studios can port new or existing games. The contest takes place on SmartMarket, Sbera's platform, where you can create, promote and monetize applications for the Salyut family of virtual assistants.

If you want to participate, register on the tournament page and the SmartMarket Studio platform, download the game before November 26 and pass moderation. All HTML5 games published on the SmartMarket before November 30 will automatically participate in the tournament.

 

The total prize fund is 1.5 million rubles, 750 thousand rubles in two categories: 1st place - 350 thousand rubles, 2nd place - 250 thousand rubles, 3rd place - 150 thousand rubles.