A brief introduction to HTML5 games: what they are written on, how they are distributed, where developers get textures, models, and sounds.
There are many advantages to these games:
- They are easy to create. All you need to know is standard web HTML, CSS, and JavaScript. You don’t have to write the code from scratch: developers have already written engines for creating games. Users enjoy small games and simple dynamics.
- Cross-platform compatibility. Users with different phones, tablets, and computers can play the same game. This makes it possible to create multiplayer games.
- Multiple distribution platforms. Developers publish games on the AppStore and Google Play, on special sites, social media platforms, and messengers.
In this article, we will go over 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. Create a page in HTML, describe the styles in CSS, and the logic in JavaScript. This way, you can control everything, but the result will take a long 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 that doesn’t mean their developers don’t make money. For example, Phaser has paid plugins, Construct 3 has a paid subscription for the full version, and other engines will make you pay to publish your project in app stores.
If you’re not a big fan of JavaScript, but you like the widespread use of HTML5 games and don’t want to pay for anything, take a look at Defold. Games in Defold are written in Lua, but the finished project can be ported to any platform you’re interested in, including creating a build for HTML5.
When choosing an engine yourself, use the table from the bebraw repository. The table lists the distribution license, rendering type (2D, 3D), space occupied, as well as links to projects and documentation.
Libraries. Engines are tailored for game development. For fine-tuning animations, sounds, and preloading elements, there are separate libraries and module packages, such as CreateJS. For 3D gameplay, there is Babylon.js. If you decide to delve into the physics of object interaction, check out PhysicsJS.
Assets. Games are not just code, but also a variety of different files: sounds, model images, and textures—these are also called assets. Kenny.nl has a collection of 20,000 vector 2D and 3D assets, sounds, and interface elements. There are tons of pixel art on itch.io. An open sound library is freesound. Look for 3D models on turbosquid and sketchfab.
Distribution
There are several approaches to distribution: place the game on your own website, a gaming portal, publish it as a separate mobile application, or in a store of other mobile applications.
- Specialized platforms. There are many sites that work primarily with HTML5 games: html5games, kongregate, newgrounds.com, and others.
- Export to native apps. You can convert HTML5 games into native apps and publish them in app stores for iOS and Android. This is done using wrapper apps, such as PhoneGap builds.