Why should you develop games in HTML5?

If you’re interested in developing games that are deployable across many devices, HTML5 should be your number one consideration. Adobe Flash is no longer the de-facto engine running the web, and in fact, Google has frowned on Flash landing pages (which were oh so popular in days of old) for quite some time. And while you could learn how to develop native mobile apps using the Android SDK, for example, you’ll be limited to that single platform for game distribution.

This is where HTML5 comes into play – this article will highlight why HTML5 is a major competitor as tool for game development, and why you should consider diving into it.

 

Brief history of Flash

The 1990s was an adventurous time in the wild-west of the internet. Without going too far back into dinosaur territory, let’s say browser-based gaming was restricted primarily to Java in the mid-90s. Online browser-based games were not invented yet, with the exception of MUDs (text-based roleplaying games). It wasn’t until Macromedia Shockwave made a splash on the scene (pun intended) that browser games with graphics became a real possibility for PC users, around the 2000 era.

Macromedia made huge bank on its flash game portal, and even offered a downloadable Shockwave Arcade, which would allow you to download their flash games locally and play them offline. Macromedia then offered a toolkit specifically tailored to creating games, and that’s when Flash games really took off. Websites like Newgrounds allowed Flash developers to upload their creations, but monetization had not quite entered the scene yet. The majority of Flash developers uploading to Newgrounds were simply using the website as a portfolio, in hopes of getting hired to larger development projects.

Macromedia was eventually acquired by Adobe, and Flash began to creep into all corners of the web. Flash development became a lucrative career, as it powered many aspects of the web, from banner-ads to website landing pages. However, all good things must come to an end.

 

Flash goes out like, well, a flash

While Flash dominated the web for many years, developers were longing to part ways. Vendors complained about Adobe’s lack of a reusable source code license. Flash has also been criticized for its many security vulnerabilities. In fact, Steve Jobs announced in 2010 that Flash would not be allowed on the iPhone due to its security flaws, and Alex Stamos of Facebook called for Adobe to completely abandon Flash.

While HTML has always been a part of web design, it is only in recent years that HTML started to shape itself as a viable alternative to Flash. HTML5 became significantly implemented in various web browsers such as Firefox, Chrome, and Safari, as Flash became further outdated. Because HTML5 can usually be written alongside CSS and Javascript, many web developers have turned to HTML5 for a majority of their needs.

Because of HTML5’s versatility, it is currently seen as a leading alternative to Flash for browser-based gaming. Adobe realized this some time ago in fact, and started offering a native way to convert Flash to HTML5. One of the main reasons is the open-source nature of HTML5. Popular, free toolkits like Phaser allow developers to start creating browser games, without purchasing any licensing fees. Another advantage of HTML5 is its cross-platform capabilities, meaning the same game can be deployed across web browser or mobile devices, which we’ll expand on later.

 

How developers are monetizing HTML5 games

Licensing is currently a hot model. Flash game portals are technically not allowed to monetize their games, due to the user-agreement with Adobe. Because HTML5 games like Slither.io are not restricted to such clauses, developers can freely sell their HTML5 games to numerous browser game portals. Non-exclusive licenses (the website owners pays to put the HTML5 game on their website) can be lucrative, but typically these game portals will want to share ad revenue with you, not pay cash up-front. This is of course an incentive to create unique games that drive traffic.

Below – Run 3, a tremendously successful Browser game.

In-game advertising is another useful method. Ad networks like Leadbolt, CPMStar, and Clay.io offer simple ways to implement ads into HTML5 games. A developer can host their creations on their own site and gain ad-revenue from website traffic, then fork the game over to game portals and agree to a share of their ad-revenue.

In-game purchases (commonly seen in mobile games or MMORPGs) are theoretically possible, but a hurdle is the current technical limitations of HTML5 games. It’s not that HTML5 can’t produce a nice 3D multiplayer game (Agario 3D being a case in point), but browser-based MMORPGs are not being primarily developed in HTML5. So if you aim to offer in-game purchases for your HTML5 game, a bit of research needs to be done on hurdles you may face, namely designing a game in HTML5 that is visually attractive enough for users to spend money on.

Below – 3D version of the wildly successful Agar.io

HTML5 games and mobile devices

As I mentioned above, a great aspect of HTML5 is that it can be further expanded with Javascript and CSS. While game apps for Android and Ios devices are usually written in native toolkits, there exists a way to implement HTML5 games on these devices as hybrid apps. By hybrid app I mean, the HTML5 elements can be wrapped in a device’s native browser, and deployed as an app. There are numerous ways to achieve this.

An extremely simple example would be PhoneGap, which is a free tool that can be used to create an app installation file with a few bits of code. So theoretically, you could have your HTML5 game hosted on Yourgamedomain.com, then use PhoneGap to create an Android app that simply wraps your website in a full-screen browser (giving it the appearance of a full-screen game app). This “app” can then be deployed to mobile app stores, and because it is simply a website inside a webview wrapper, you can still monetize it with ads. You could, for example, use a Google Admobs plug-in as part of your .apk package.

 

HTML5 game development resources

https://hacks.mozilla.org/2013/09/getting-started-with-html5-game-development/

http://mobile.smashingmagazine.com/2012/10/19/design-your-own-mobile-game/

http://html5devstarter.enclavegames.com/

http://www.gamasutra.com/blogs/AustinHallock/20130224/187213/HTML5_Games_Learning_from_Mobile_and_Flash_Games.php

http://html5gamedevs.com/

—-

About the Author

This post was written by browser game development expert Katie Green from CrazyGames.com – One of the World’s leading browser game websites.