HTML5 Games: Learning from Mobile and Flash Games

I just got off the phone with a friend and advisor of mine, Tim Campbell – VP of Third Party Development at GameForge. We spoke a bit on why HTML5 hasn’t completely taken off yet for games, and what needs to happen for that to take place… this got me thinking, so I decided to flesh that out some, and write a blog post about what areas HTML5 games are lacking in.

Given my role at Clay.io, I see a lot of HTML5 games. In fact, I’d argue I’ve played the majority of HTML5 games – good and bad. The recurring theme however, is the lack of a few core elements that are commonly found in popular mobile and Flash games: Easiness to pick up, gamification elements, and story.

The technology for HTML5 games is ready without a question on desktops — I would argue it’s also ready on modern mobile devices (see Strandead), it’s just more difficult to develop for (since good performance is hard to achieve). What’s somewhat lacking is the supporting technology, there just isn’t the same quality of tools for creating games as there are for the more mature platforms like iOS, Android and Flash. That will come with time though, and quality games can most-definitely be made with the current tools. However, the three things I’ve noticed missing from HTML5 games can most-definitely be done.

Easy to Pick Up and Start Playing

Gamers make decisions on whether or not they want to continue playing a game very quickly, even quicker with web games where they can move on to the next one with just one click. You want your game to make sense from the start, and a lot of times that can be done with a tutorial level. An ideal tutorial is letting the user play the game like they normally would, but with obvious pointers as to what they should be doing. Clash of Clans (the screenshot below) is an example of a good tutorial.

It’s also important that the tutorial level can be skipped — just like you don’t like sitting through cut-scenes if you’ve already played through a game twice, the same goes for tutorials…(even more so).

For an HTML5 game that has good story, and fun gameplay, but would really benefit from a tutorial, see: Ages of Irving. What it really needs is simple pointers to guide the player through the first mission.

Game Mechanics (“Gamification”)

However overused the word gamification may be, it has its place. You want your game to be easy to pick up, but also hard to put down – something that can be played for 5 minutes on the toilet, or 3 hours on the toilet… errr, wherever.

My favorite example of gamification is Jetpack Joyride (especially the Windows 8 version). The premise of the game is about as simple as it gets: a side-scroller where you avoid the electricity and missiles. If I were to play Jetpack Joyride, without leaderboards, achievements, missions, etc… I would play it once and never think about it again. The reason the game has enjoyed as much success as it has is how “sticky” the game is with its social features.

Features Jetpack Joyride Employs:

This is the part where I mention Clay.io, and how we can help with that. Our API is iOS Game Center’s equivalent for HTML5 games with features like high scores,  achievements, social integration, screenshots, in-game payments, etc… You can see more info here, or view the documentation.

Story

The story doesn’t need to be anything extravagant – it probably shouldn’t be in fact. Something easy to consume, but gets the player to care a bit more about the character in the game. When I say simple story, think Angry Birds – quick and clear.

A good example of the effect of a story is the comparison of Binary Boy (HTML5), and Shift 2(Flash). As a game player, I prefer the style and gameplay of Binary Boy, but the story in Shift 2 makes the game much more appealing.

Strandead is an example of an HTML5 game that included the story element, and I think it works pretty well – the gamification element is the only missing component. For flash games, see Learn to Fly 2 as a good reference. Like the tutorial, make sure this is skippable.

Examples

Below are some examples of mobile and Flash games that do all three of: “easy to pick up”, “gamification”, and “story” very well. Many you’ve likely played before, but play around in them a bit more to get a good feel for the elements HTML5 games could really improve on.

Mobile Games

Flash Games

If you think they’re able to do this because they’re large studios/publishers with high budgets… that’s not the case with every game. Two recent college graduates (one of which is a friend, and initial creator of Word Wars) were able to create a very polished game that includes everything listed above – their game, Monster Rivals (released last week and now has 50,000+ installs) can be found on Google Play.

One HTML5 studio that has done the aforementioned features pretty well is Lost Decade Games - if you look at how their games have progressed (Onslaught Arena -> Onslaught -> Lunch Bug -> Lava Blade), they’ve added ‘gamification’ elements, and lowered the barrier to entry with quality tutorials.

My challenge to HTML5 developers is to spend more time on these three things – doing so will make game engage and retain much better than they currently do! I’d love to see this discussed more in the comments.