Key Technologies in HTML5 Game Development
Browser games blur the lines between platforms: today’s high internet speeds and powerful hardware enable us to play games from anywhere, smartphone or desktop. You don’t even need to sign up or download anything to get started with a new game!
This new generation of browser games wouldn’t be possible without HTML5. In a nutshell, HTML5 is an umbrella term incorporating much more than just the recent revisions of the good old markup language. By far, the biggest advantage of HTML5 is that games built with this set of technologies are cross-browser and cross-platform, thanks to the unprecedented adoption of open-source tools. The Flash era may invoke nostalgia, but it’s hard to deny that feature updates were scarce, the technology was proprietary, and it was pretty ill-suited for serious game development.
Flash’s decline opened up the door to a more accessible, better world of browser games that also run great on mobile devices. HTML5 empowers developers to create outstanding games, more beautiful, immersive, and feature-complete than ever before. We have the numbers to back it up: our own platform hosts over 10,000 thrilling HTML5 browser games of all kinds, many of which have grown to be immensely popular.
Let’s take a look at the leading technologies behind HTML5 that drive the web forward. The foremost thing that sets HTML5 apart from the older generation of the web is the addition of WebGL and Canvas, as well as the unfathomable variety of frameworks to choose from.
Canvas
If you’ve developed a Flash game before, you’ll find that HTML5 Canvas is closely resemblant to the Flash Stage. It helps developers accomplish largely the same goals: just like Stage, Canvas is a rectangular block that can be manipulated programmatically. We can draw directly to the canvas with paths and images and transform them on the fly. Canvas gives us a single physical display object, but we can create any number of logical display objects.
While Canvas does offer a built-in API for drawing in 2D, it is also capable of rendering 3D. But to do this, you’ll need another API: that’s where the second pillar of HTML5 joins the fray.
WebGL
WebGL is shorthand for Web-based Graphics Library. It’s a powerful JavaScript API that allows browsers to run high-performance 2D and 3D graphics without any third-party plugins. That’s right! With WebGL, browser games can make good use of the device’s graphics capabilities, just like a native app would.
In the context of browser games, this means that your game can employ the hottest graphics trends and look absolutely terrific, on par with AAA titles. But of course, you need to be aware that you’re still bound by hardware: for best results, it’s important that your game is playable on a variety of platforms, ranging from budget phones to gaming PCs. In layman’s terms, compromises must be made if you’re looking to turn in a large player base.
Frameworks
HTML5 is overflowing with frameworks offering different features. All of these frameworks have clear strengths and can be used to create all kinds of media besides games, either deeply interactive or strictly visual.
- With the help of Babylon JS, we can create games in either 2D or 3D.
- Phaser allows for 2D games with a small size that can load instantaneously and run seamlessly on any platform.
- Cocos2d-HTML5, as the name suggests, helps in developing 2D games.
This is but a small fraction of frameworks and game engines available to any aspiring HTML5 game developer. In addition to these general-purpose frameworks, dozens of dedicated game engines also exist, each offering a robust set of tools to make any game concept a reality. We’ve covered a selection of these engines to help you choose the one that suits your needs best. Defold, GDevelop, Construct, and Unity are just a few of them:
With HTML5, you can develop your own multi-platform game. But what should you do when the development is all wrapped up? Show it off to the world, of course! There’s no better place to do it than Yandex Games: we’ll promote your game for free, provide in-depth metrics to help you drive your decisions, and handle the infrastructure.
Publishing on Yandex Gamers is quick, transparent, and completely free of charge — in fact, you can even integrate ads and in-app purchases to turn your game dev passion into a lucrative business. Check out our Developer’s Guide for a quick introduction to our platform, and get ready to enter the scene! We welcome game devs of all levels: if you’ve never tried your hand at game making, there’s never been a better time to begin your journey!
