Gamasutra: The Art & Business of Making Gamesspacer
View All     RSS
August 20, 2014
arrowPress Releases
August 20, 2014
PR Newswire
View All
View All     Submit Event





If you enjoy reading this site, you might also want to check out these UBM Tech sites:


 
HTML5 Games: Learning from Mobile and Flash Games
by Austin Hallock on 02/24/13 03:07:00 pm   Expert Blogs   Featured Blogs

The following blog post, unless otherwise noted, was written by a member of Gamasutra’s community.
The thoughts and opinions expressed are those of the writer and not Gamasutra or its parent company.

 

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).

Clash of Clans Tutorial

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.

Gamification elements in Jetpack Joyride

Features Jetpack Joyride Employs:

  • High scores
  • Achievements
  • Gambling
    • A slot machine at the end of each play
  • Missions
  • Tweeting screenshots
  • A level system
  • Store
    • Coins earned in games
    • Can purchase upgrades

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.

Quick, Clear, Cute Story

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.


Related Jobs

Mobilityware
Mobilityware — Irvine, California, United States
[08.19.14]

Senior UI Artist
The Digital Animation and Visual Effects School
The Digital Animation and Visual Effects School — Orlando, Florida, United States
[08.19.14]

Instructor - Video Game Asset Production
Galxyz Inc.
Galxyz Inc. — Mountain View, California, United States
[08.18.14]

Educational Game Curriculum Designer
Zindagi Games
Zindagi Games — Camarillo, California, United States
[08.18.14]

Software Engineer






Comments


Justin Richard Mata
profile image
It doesn't seem like the word "gamification" is being used here properly. When someone speaks of gamification, I expect it to be about taking something that is not a game, and applying game concepts to it to make it more fun (or game-like) for the people who normally interact with it. Jetpack Joyride is a game because it was built to be a game, not because it was "gamified".

Daan Brinkhuis
profile image
But the term is used as an improving term, I guess. If a game lacks some of the features a game should have, then I think saying the game "lacks gamification" or "needs to be gamified" is a correct way to do it.

Austin Hallock
profile image
The reason I used that word is in the startup world I'm surrounded by, it has become synonymous with things like achievements, high scores, leveling, etc... A lot of web startups are looking to 'gamify' by adding those features.

Kevin Oke
profile image
What is really being talked about here are a wide birth of AEM features (user Acquisition, Engagement, Monetization) that are prevalent in mobile/social.

Matt Hackett
profile image
It's the macro-game that's being gamified. Where JJ could have just been a game where you pop in and get a high score (think Donkey Kong), instead there's an additional meta game of progression and rewards that add to the micro-game (the gameplay involving collecting coins).

Przemyslaw Szczepaniak
profile image
As HTML5 mobile games developers we could add one word "AWARENESS" of market - this is the thing I put out frequently in my blog entries. This refers to a lack of support. I noticed that publishers, developers, investors, huge companies still don't understand the idea of HTML5 gaming (some developers just wrap flash games into HTML5). To be honest web based gaming can't go out if big companies won't give it a "green light". There are many cool and fun HTML5 games out there now. I read Boostermedia's report - there is around 1000 HTML5 mobile games on market, and many of them have great graphics, quality of code and gameplay - did we hear about many of them? Not really I think. We, as indie gaming company put a high pressure on those factors - you may as well check our games to see. I agree that factors you mentioned are important, but to be more optimistic, the market needs to be more AWARE of existance of such solutions. Luckily my researches prove that more and more publishers experiment with HTML5, and they do put an interest into adding more HTML5 games to their networks. A kind of App Store based on HTML5 games would be a great solution for that, don't you think ;)?

Austin Hallock
profile image
@Przemyslaw I agree with the awareness issue. You and I have chatted before, but for everyone else, one of our goals at Clay.io is to take that App Store model and apply it to HTML5 (cross-platform) games. Our initial focus has been on the developer tools, but we're slowly starting to transition to acquiring more consumers to make the marketplace worthwhile, and known to more than just early-adopter folks.

Matt Hackett
profile image
Thanks for the mention Austin :-)

Keith Thomson
profile image
I didn't even realize that Jetpack Joyride had a leaderboard... Though, I guess I'm #1 on my friends list on it. (For the Vita version.)

GameViewPoint Developer
profile image
The reason HTML5 games are not taking off is because you can't distribute them like you can a .swf game. They are locked to one site, so people can't take the game put it on their own website and make money off of it. If HTML5 games were packagable in some way then they might take off, but other wise they will always just be something used for advergaming, and big games portals.

And this is from someone who loves the idea of HTML5 games and tools, but there are just too many basic market issues with them.

GameViewPoint Developer
profile image
Double post. I really need to get a new mouse.


none
 
Comment: