Thanks to the rapid pace of improvement in web development technologies, HTML 5 has a great deal of tooling to help you develop and iterate faster. Learn about them in this article.
I recently developed Massive Match, the Massively Multiplayer Match 3. I chose to use HTML5 technologies to build it and find out how far the development tooling has come.
HTML 5 gaming has come a long way since it was introduced. Modern browsers are very fast, there are great libraries to handle rendering via WebGL (like phaser) and thanks to fast cross compilers, you can even use a typed language if you want (Yes, not javascript!).
Maybe you are an indie developer looking for a quicker easier way to develop games, or you've read of googles latest moves to get rid of flash and are looking for an alternative, if so, read on and enjoy.
In my last game, everything was coded in C# (using monogame), including all of the user interface. When building the menus, overlays and other parts of the UI I spent a lot of time tweaking layout numbers, rebuilding and restarting the game to test them.
In comparison, when building UI using HTML and CSS there are a lot of good features built in. Boxes and gradients can be added without needing art. There is a layout engine built in. Advanced text styling doesn't have to be coded from scratch. Custom fonts. Even animations are included.
When working on UI, small tweaks can take up a lot of the iteration process. All modern browsers include built in dev tools that allow you to edit the layout and style parameters live within your game while watching the resulting changes applied in real time.
You generally shouldn't use HTML for the in game UI as updating it has a performance cost, but for menus and other seldom changing UI it is perfect and can save a lot of development time.
If you've never coded an HTML5 game before, you probably haven't used Javascript. If you have, it probably wasn't a great experience. Javascript is a dynamic language (no type checking) based on prototype inheritance. It isn't well suited for writing large complex applications like games. Runtime errors are common as when you make changes you can only check they are valid by running the code to check it works.
Luckily cross compiling to javascript is commonplace nowadays. Even web developers who code javascript will generally write their code in a newer ES6/ES7 dialect and cross-compile it back to ES3/5 which the majority of browsers support.
But we can do even better than that. Typescript is an alternative language that quickly crosscompiles in to javascript. Typescript is like javascript with types, allowing your IDE and the compiler to check that your code is valid before you try run it. This helps prevent bugs like referencing undefined fields or variables, or treating a number like an array.
There are plenty of other languages you can use, check out this list on the webpack site for other alternatives.
Websites and games require a lot of iteration. The shorter the time between making a change and seeing it in action the better. As such, a lot of tools have been created to fill this need.
One of these is webpack-dev-server, it watches your files and when any of them changes (Code, Data or Assets) it will recompile anything that needs it and refresh your browser window, immediately showing you the changes in action.
This is an area that still isn't perfect, but it has come a long way.
Websockets are a technology that allow you to open a TCP client->server connection to send data in real time. This what powers games like agar.io and massivematch.io.
If you want client<->client UDP, that is even possible now (in Chrome/Firefox, and coming one day to Edge) using WebRTC data channels.
This is pretty new, but if you really want it you can have your code reload without losing state. React (a user interface library) ships with support for this. You can edit your code to change functionality and UI components around and they will be live reloaded without losing the state of the application. When you are 4 screens deep, you'll stay there, you don't need to traverse back in again.
Implementing this in your own game will take a bit of work and probably won't be worth it. But if you want it then webpack ships with the building blocks that will allow you to make it possible.
Gamepads are well supported everywhere except mac.
You can ship your game as a desktop application using NW.js or Electron
Free and really good editors are available (VS Code, Atom)
WebGL is supported on mobile (iOS / Android).
Audio and Video are well supported, including run time generation of audio via the WebAudio API.
HTML5 game development is more than viable. There is great tooling, lots of features built in to reduce development friction and great libraries to use. If you haven't tried it, check it out for your next project.
Read more about:
BlogsYou May Also Like
.png?width=300&auto=webp&quality=80&disable=upscale)
