作者：Austin Hallock

我刚刚与好友，同时也是指导老师的Tim Campbell（GameForge第三方开发的副总裁）打了通电话。我们谈论了为什么HTML5还不能完全适应各种游戏，需要做出哪些改变等等。在仔细思考了这些问题后我决定将其写成一篇文章进行详细阐述。

因为在Clay.io的工作，我接触了许多HTML5游戏。可以说我玩过大多数HTML5游戏——无论好坏。结果我发现许多大受欢迎的手机和Flash游戏都缺少了核心元素：易用性，游戏化以及故事。

不管是对于台式机还是现代的手机设备，HTML5游戏技术已经蓄势待发了，但问题是我们基于这些技术去开发游戏是件非常困难的事（因为创造出良好性能并不是件易事）。我们通常都缺少支持技术，即不存在同等质量的工具去面向更加成熟的平台（如iOS，Android和Flash）创造游戏。不过随着时间的发展，我们也能使用当前的工具创造出高质量游戏。但值得注意的是，如今的HTML5游戏身上还不具备这三大元素。

易用性

让玩家能够快速决定是否继续游戏，甚至比在网页游戏（只需要通过点击便能移到另一款游戏）中还快。你希望游戏在一开始便具有意义，通常情况下可以使用教程关卡去实现这一点。一个完美的教程能让玩家好似真的在玩游戏一样，但同时包含了一些明显的指南去教授玩家该怎么做。《Clash of Clans》便拥有非常棒的教程。

同时我们还需要让玩家能够略过教程关卡——如果玩家已经玩过游戏多次的话，便不会愿意耐着性子再看完教程内容。

Clash of Clans（from gamasutra）

即使一款游戏拥有非常棒的故事以及有趣的游戏玩法，但是教程内容还是非常重要。HTML5游戏需要使用简单的提示去引导玩家穿越第一个任务。

游戏机制（“游戏化”）

游戏化自有其作用在。你希望游戏能够容易开始但却难以放下——能让玩家在厕所等场所玩5分钟或者3个小时的游戏。

我最喜欢的有关游戏化的例子便是《火箭飞人》（特别是Windows 8版本）。游戏设定非常简单：玩家需要在一个侧面卷轴的背景中躲避电流与导弹。如果《火箭飞人》没有排行榜，成就或任务，我便只会玩一次游戏并再也不想回到游戏中。游戏的成功是基于游戏与社交功能之间的“紧密联系”。

Jetpack Joyride（from gamasutra）

《火箭飞人》所使用的功能：

高分

成就

博彩

在每次游戏最后都会出现一台老虎机

任务

tweet

关卡系统

商店

在游戏中挣得货币

通过购买而升级

故事

故事不应该太过复杂。游戏应该呈献给玩家一些容易理解的故事，帮助他们了解游戏中的角色。最能体现简单故事的一款游戏便是《愤怒的小鸟》——清晰快速地呈现出游戏故事。

Angry Birds（from gamasutra）

《Binary Boy》（HTML5）和《Shift 2》（Flash）的比较便能有效地呈现出游戏故事的影响。作为游戏玩家，我更喜欢《Binary Boy》的风格和游戏玩法，但是《Shift 2》的故事却让这款游戏变得更加吸引人。

《Strandead》是一款包含了故事元素的HTML5游戏——它唯一缺少的便是游戏化元素。而对于Flash游戏，《Learn to Fly 2》则是个很好的例子。同时需要确保玩家能够轻松略过教程。

例子

以下是一些包含了“容易游戏”，“游戏化”以及“故事”三个元素的手机和Flash游戏：

手机游戏

《英雄学院》

《Clash of Clans》

《火箭飞人》（我个人最喜欢的）

《坚守阵地2》

Flash游戏

《野牛复仇记》

《王国保卫战》

如果你认为这些游戏之所以如此优秀是因为依靠着强大的工作室/发行商以及高预算成本，那么我想说的是并非所有游戏都是如此。最近便有两名大学毕业生（其中一个在之前创造了《文字战争》）创造了一款包含了上述元素的出色游戏——《格斗怪物》（游戏邦注：上周刚刚发行，现在已经拥有5万多安装量了），我们能在Google Play找到这款游戏。

能够有效执行上述元素的一家HTML5工作室便是Lost Decade Games，如果着眼于他们的游戏发展（从《Onslaught Arena》到《Onslaught》到《Lunch Bug》再到《Lava Blade》），我们会发现这家工作室已经添加了“游戏化”元素，并创造了合适的教程以降低游戏准入障碍。

HTML5游戏开发者们应该多花些时间于这三个元素中，只有把握住这三大元素他们才能创造出更吸引人且更能留住玩家的游戏。

（本文为游戏邦/gamerboom.com编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦）

HTML5 Games: Learning from Mobile and Flash Games

by Austin Hallock

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:

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.

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

?Hero Academy

?Clash of Clans

?Jetpack Joyride (my personal favorite)

?Fieldrunners 2

Flash Games

?Burrito Bison Revenge

?Kingdom Rush

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.(source:gamasutra)