In the thousands of HTML5 games Iâ€™ve seen and played, the biggest downer is that so many are just using â€śHTML5â€ł as an alternative way to create either â€śmobileâ€ť or â€śFlashâ€ť games. The problem with that approach is HTML5 is neither Flash nor a native mobile language. Building a game with HTML5 just to put it in the iOS and Android app stores is pointless, youâ€™re going to have a game that performs worse than it would with Unity or Adobe AIR.Â Rather than trying to emulate native mobile games with HTML5,Â we as developers need to develop games specificallyÂ forÂ HTML5 â€“ taking advantage of the unique offering it brings.
Often times the easiest way to drill home a point is to analyze historical examples. Letâ€™s look at two of the biggest names in gaming in the past 5 years, and how they got where they are by buildingÂ forÂ the platform.
Zynga blew up to a $9 billion dollar evaluation because it completely understood the Facebook platform and how to effectively distribute and monetize their games through it.
There were plenty of good games on Facebook before Zynga Poker and FarmVilleâ€¦ heck, there was evenÂ Farm TownÂ (the same idea as FarmVille â€“ before FarmVille). Zynga just really understood how to build a game for Facebook and have it spread virally by taking advantage Facebookâ€™s social features: inviting friends (in a more personal way â€śbe my neighborâ€ť), posting progress to a playerâ€™s wall, and various achievements.
The notion of really understanding a platform and building for it can also be seen in Zyngaâ€™s sharp decline. They were slow to make the shift to mobile and are no longer able to take advantage of some of the Facebook features that caused them to grow so quickly.
A Physics-based Cannon Game wasnâ€™t something new Rovio came up with for Angry Birds -Â Crush the CastleÂ from before Angry BirdsÂ looks awfully similar â€“ but Rovio turned it into a game that works flawlessly with touch, something the iPhone made possible at a large scale. If Angry Birds had used the same mechanic of a cannon instead of the more touch-friendly slingshot, the game arguably wouldnâ€™t have become the cultural icon it is.
It did take Rovio 51 games to get to Angry Birdsâ€™ success, but during those first 51 games they clearly learned how to develop for the iOS platform.
So whatâ€™s the â€śtouchâ€ť and â€śsocialâ€ť of HTML5? To find those we have to look closely at what makes HTML5 and The Web as a platform unique.
Distribution is often cited as a major issue for HTML5 app and games â€“ for good reason. We still havenâ€™t seen an HTML5 game that masters distribution.
What weâ€™re forgetting is how powerful of a distribution model we already have with how the web works. We have links, and more importantly, we have ways for people to virally spread links. Content, articles, videos, etc. reach millions of views and plays just through links â€“ games however havenâ€™t seen the same success. To some extent, Flash games have done well, but I still donâ€™t think games have reached the level of success videos and content have (especially on all devices including mobile).
I havenâ€™t seen many games creatively use links â€“ certainly none off the top of my head. They link to the gameâ€™s â€śplayâ€ť page, and thatâ€™s it.Â I should be able to join a friend with a link, resume a game based on a link, challenge a friend to beat my score with a link and so on.
Part of this falls on the tool makers â€“ developers donâ€™t want to spend time getting these things to work; features that arenâ€™t completely about the gameplay. At Clay.io, weâ€™re trying to help with this, and have implemented aÂ â€śLinksâ€ť API featureÂ that makes it easy to do the three scenarios I mentioned.
Iâ€™m sure there are still aÂ tonÂ of cool things we could be helping developers with that weâ€™re notâ€¦ Game developers are the most creative bunch of people Iâ€™ve ever worked with, so if you have a creative idea to take advantage of The Web as a platform, and you think we can help, reach out to me atÂ [email protected].
HTML5 is the perfect vehicle for games that make use of multiple devices. The Wii U was the first to really bring this mainstream with its controller acting as a second-screen for the TVâ€¦ The thing is, you developers donâ€™t need a Wii U or special controller to make this happen â€“ the Wii U controller is pretty much a standard controller with a phone screen shoved in the middle.
The best example Iâ€™ve seen of this is in a year old demo video by EA. The game is called Strike Fortress and itâ€™s a game that takes advantage of the phone + PC setup. You can see the demo video here.
Battlefield 4 is doing a variation of this where, because the game is complex enough, there are different game modes based on the device used (tablet vs PC/Console). On a tablet, you act as a teamâ€™s â€śCommanderâ€ť with a 2D top-down view and certain specialized abilities. See the trailer for Commander Mode here. This type of gameplay seems like a perfect place for HTML5 to fit in, especially when WebGL is mature enough to provide console-quality experiences.
I have no idea what technology stack EA is using forÂ Battlefield 4â€˛s Commander Mode, but itâ€™s the type of thing I think HTML5 is built for.
This is one is obvious, but I feel obligated to include it. I still see countless HTML5 games that are built just for the desktop web that donâ€™t take mobile into consideration â€“ keep in mind, these are types of games that would actually play well on a touch screenâ€¦
If youâ€™ve built an HTML5 game, distribute it as many places as you possibly can. Off the top of my head: the iOS App Store, Google Play, Windows App Store, Chrome Web Store, Facebook, Firefox Marketplace, Amazon Appstore, Flash Portals, and the list goes on.
This whole post encompasses building for HTML5 as a platform, but that also consists of building for all of the platforms HTML5 works on â€“ it is a bit more work, but itâ€™s worthwhile. That includes supporting input on a variety of devices (touch vs keyboard & mouse) and having the game scale to many different sizes.
Search engines have long been the best way to get people viewing content. Social media has made a huge impact in the past few years, but SEO remains a powerful tool for The Web, even on mobile. Games arenâ€™t very optimized for search engines though. The portals games are found on are usually optimized, but as an HTML5 game developer you can do that optimization on your own.Â Clay.ioÂ does it, as does Kongregate, etc.. but if someone is searching for something relevant to your game, wouldnâ€™t you rather them directly visit your page?
The canvas element itself obviously isnâ€™t indexable, but you can surround the game with some description text to help, and apply some common SEO techniques to try and get more search traffic.
For reference,Â Slime SoccerÂ on Clay.ioÂ consistentlyÂ gets 2,500Â unique plays per month from search traffic on one keyword.
You can find a plethora of articles on how to choose keywords (the fact that itâ€™s a game shouldnâ€™t matterÂ tooÂ much), but one of the best isÂ How To Do Keyword Research.
Your game doesnâ€™t need to be in the iOS App Store or Google Play to be played on mobile devices. That is aÂ hugeÂ benefit. Sure, itâ€™s good to have it in both of those stores (and is easy enough to achieve), but the fact that it can be played without requiring an install and the extra bulk of the stores is a big opportunity.
Consumers are now discovering games through chat apps like WeChat and Kik â€“ both of which have had some success on the HTML5 front primarily in Asia. The App Store model is generally good, but it can make discovering unique new games very difficult â€“ apps like WeChat and Kik are a different approach to finding games. More info on this can be foundÂ hereÂ andÂ here.
In addition to these chat applications, there are the more established mobile apps like Facebook and Twitter where games can be played directly from the appâ€™s webview. Thatâ€™s a much better user experience in that sense then going through the app stores. Build games that work well with this model.
HTML5 is a beast of its own; letâ€™s break free from trying to emulate native mobile apps, and start developing games that take advantage of everything HTML5 offers!