如何开发一款优秀的HTML5游戏？ - 推酷
如何开发一款优秀的HTML5游戏？
作者：Brian McHarg
HTML5经常被称赞为是Flash的游戏皇冠的继承人。它提供了真正的跨平台开发，让你能够在完成游戏创造后便将其同时带向台式机，平板电脑与手机上。这一技术也能够运行于智能电视上，或安装于台式机和其它设备的原生应用中。它甚至能够通过内置于浏览器中而运行于像Xbox 360或PlayStation 3等主机上。
对于任何想要跨越不同设备和平台开发游戏的人来说，HTML5无疑是个最吸引人的前景。但这里也存在一些显著的挑战。
这一术语本身（就像它所呈现的说明）对于不同人的描述也具有不同的意义。对于客户而言，HTML5是承诺简单，划算的跨平台传递的神圣技术。
对于开发者，这是各种不同技术相结合的术语，这些技术包括JavaScript，Web Sockets, Web Audio, Canvas, CSS3, WebGL等等—-每个都带有自己在不同平台的标准，优势以及限制。
但是对于用户：这却是完全不相干的—-它们只是他们正在使用并变得习惯的体验和性能。作为开发者，这便是我们所面临的主要挑战，特别是当你的目标是将游戏带到更多设备上的时候。
台式机vs手机vs跨平台
现在，我们都很熟悉运行于台式机浏览器中的HTML5游戏的神奇例子。通常是浏览器制造商自己创造或资助这款游戏，并在自己的软件上呈现其特殊的优势，或为了让特殊的API转变成符合HTML5的规格。
像《HelloRun》等游戏，或一些出色的Chrome实验，如《Racer》或《Arcade Fire’s Reflektor》都是使用HTML5可以做到的优秀典例。如果你想要看到这一系统未来的潜能，着眼于像three.js等程序库，以及最近的开放源Turbulenz或Epic对于自己的Unreal引擎的HTML移植。
而如果你着眼于运行在基于OS2.3的Android设备的这些例子，你将获得完全不同的体验，或者在某些情况下甚至不会取得任何体验。
是的，这是一个已经问世将近3年的操作系统，但它仍只拥有1/3的Android安装基础，基于你的目标用户群体，这一数值还可以变得更高。
这不只针对于较早的Android版本。你将在运行于iOS 5的苹果设备上，或者像Kindle Fire等更低功率的设备上看到同样的情况。实际上，现在并没有哪一款手机设备将允许上述的任何一个演示。
就像之前所提到的，对于大多数客户而言，选择HTML5的理由是确保他们基于浏览器的游戏将真正是跨平台的游戏。如果你只是面向台式机开发游戏，那么Unity和Flash都会是你的首要选择。它们都拥有强大的浏览器支持，并且也能作为原生应用输出设备，带你基于同样的代码走向手机和平板电脑。
在HTML5上开发跨平台游戏存在两个明显的挑战。第一个便是HTML5规格的不固定性。这可能导致分裂的功能支持—-不只是源于设备与设备之间，同时还是关于每个设备上的浏览器。此外，你还要基于一个不断变化的功能和支持开发游戏。
着眼于最近发布的iOS 7，它便打破了许多对HTML5游戏来说所必要的功能，或者Firefox 25的发布添加了Web Audio支持，同时破坏了许多HTML5游戏的音频执行。如此我们可以看到任何问题都有可能在一夜间就发生，而不受你这个开发者的控制。
其次，也就是开发者所面临的更大挑战是手机性能与能力的巨大变化。甚至当使用一个一致的功能集时，你的游戏将如何在不同设备间运行着。
为了理解存在多少变化，你可以运行多个JavaScript基准中的一个以测试设备的性能。举个例子来说吧，通过Canvas渲染100个精灵将在设备上基于60帧/秒执行，就像iPhone 4S或5，Galaxy S3，Nexus7或Lumia 820。但如果你在像HTC Desire（19帧/秒），Galaxy Ace（7帧/秒）或iPad 1（9帧/秒）等设备上尝试同样的代码，你将努力获得一些可游戏内容的代表。
如果你的项目瞄准了手机或平台电脑，特别是如果其中还包含这些早前或低功率的设备，你就需要尽早地进行测试。基于这种方法，你将理解设备范围的限制，并有效地调整技术方法与游戏设计。
如果你的项目并未瞄准手机或平板电脑，它也应该这么做。有将近1/3的英国网页浏览数是来自手机和平板电脑，基于如此快的增长速度，如此看来在2014年它们将超越台式机的浏览数。
尽管在工作时间，PC仍然是主导，但是在早晨手机更受欢迎，而晚上则是平板电脑—-作为那时候最理想的网页浏览和游戏工具。
选择你的战斗
在Chunk，我们已经为广播公司和品牌开发了2年的跨平台HTML5游戏。我们已经为BBC和迪士尼等在HTC Desire，iPad 4，Nuxus 7以及Xbox360等平台上运行各种内容的客户创造过许多基于浏览器的手机游戏。
Agent Alert Field Missions（from develop-online）
作为开发者，能够决定想要怎样程度的分裂是件好事，但是我们的目标用户以及他们所使用的设备才是最重要的决定要素。通过与孩童品牌合作，我们经常能够发现自己受制于早前“传下来的”手机或廉价且低功率设备。
然而，基于谨慎的设计以及大量的优化，我们仍有可能在手机网页上创造出吸引人的游戏体验。
我们从这些体验总学到了什么？以下是关于HTML5游戏开发的10大小秘诀：
1.考虑你的用户。你的目标用户群体是什么，他们使用怎样的设备？如果你拥有网页参数，着眼于这些参数去理解你的访客使用的设备的核心范围，并根据这些设备想出解决方法。
2.基于你脑中的技术设计游戏。是的，这一直都是事实，但HTML5的限制和分裂让它变得更加重要。WebGL将让你创造出一款优秀的3D第一人称射击游戏，但它却不能运行于平板电脑上—-如果那是你的唯一目标平台的话。
3.熟悉。这是快速检查你想要在每个浏览器或设备中使用的任何HTML5功能支持的最快捷的方法。
4.将更多设备“填满”你的工作室，尽可能在更多不同的OS版本上运行。模拟器将在开发过程中起到很大的帮助，但为了获得代码运行的准确图像，你必须在设备上进行测试。还有一些优秀的社区引导型设备测试实验室，如，这将帮助你访问更多的模式。像eBay这些地方也能够帮助你获得一些早前的手机，并将其带到测试实验室。
5.保持领先。HTML5规格总是不断变化着，设备支持也是如此，所以你需要在这些开发中保持优势。这对于音效等领域更加重要，即像WebAudio API等功能能够彻底改变能力。
6.在开发中保持灵活。在这一周可行的内容也许在下一周就失效了。所以你必须确保自己能够足够灵活地适应这些在创造过程中发生的改变。
7.想办法扩展功能。对于手机来说最有效的方法可能并不适用于传统的网页设计。着眼于能够帮助你在手机上创造出有趣体验的方法，然后延伸到可触及的其它平台的功能与效果。使用用户代理或媒体咨询瞄准这些设备并向每个设备传达定制的体验。
8.想尽一切办法测试限制然后尝试着推动能力，但记得你正致力于还处于幼儿期的技术，任何过分复杂或野心太大的项目都有可能彻底毁了你。
9.考虑内容的生命线。能力一直在改变着，随着设备上出现新功能，内容也将快速过时。如果你的游戏将依赖于合理的时间长度，那就运行你自己回头去修改漏洞并进行更新。
10.最后一个？尽可能且更频繁地测试每个设备。
HTML5将成为一种面向跨平台浏览器游戏而持续发展的技术，这是毋庸置疑的。虽然现在它可能还具有种种缺陷，但这是大多数出于幼儿期的技术都具有的问题。
像CreateJS框架或WebGL等工具都将在开发流程中帮助你解决各种程序问题。你总是希望能够变得更加顺利，而在未来几乎每一款连接设备都会有HTML5功能，当然也包括像Xbox One以及PlayStation 4等主机。
熟悉能够帮助你检查能力，定期且持续地对更大范围的设备进行测试。在游戏设计中你必须保持实事求是，如此不仅能够帮助你缓解现在的问题，同时当设备支持更加强大时，你才能拥有一个强大的立足点。
本文为游戏邦/编译，拒绝任何不保留版权的转载，如需转载请联系：游戏邦
HTML5 – Game on?
By Brian McHarg
HTML5 is often (rightly!) lauded as the heir to Flash’s gaming throne. It offers true cross-platform development that allows you to build once and deploy to desktop, tablet and mobile. It’s a technology that can run on Smart TVs, or wrapped in a native application for desktop and devices. It can even run on consoles like the Xbox 360 or PlayStation 3 via their built in browsers.
HTML5 is an understandably attractive prospect for anyone looking to develop games across a large number of devices and platforms. But there remain some distinctive challenges.
The term itself, much like the specification that it represents, has a different meaning depending on who’s describing it. For clients, HTML5 is a technology that promises the Holy Grail of simple, cost effective, cross-platform delivery.
For developers, it’s the collective term for dozens of di JavaScript, Web Sockets, Web Audio, Canvas, CSS3, WebGL to name a few – each with their own standards, strengths and limitations from platform to platform.
But for users: it’s irrelevant – they just want the same experiences and performance they’ve become accustomed to, whatever they’re using. And as developers, that’s where our main challenge lies, especially if your aim is to deliver your game across a range of devices.
Desktop vs Mobile vs Cross Platform
By now we’ll all be familiar with the fantastic examples of HTML5 games that run within desktop browsers. They’re often created or funded by browser manufacturers themselves to showcase particular strengths in their own software, or to make the case for particular APIs they’d like to see ratified into the HTML5 specification.
Games such as HelloRun, or some of the excellent Chrome Experiments such as Racer or Arcade Fire’s Reflektor are great examples of what can be achieved in-browser using HTML5. If you want to see the future potential, look to libraries like three.js, the recently open-sourced Turbulenz or Epic’s HTML5 port of their Unreal Engine.
However, try looking at some of these examples on an Android device running OS2.3 (Gingerbread) and you’ll have a very different experience, or in some cases no experience at all.
Yes, that’s an operating system that’s nearly three years old, but it still represents almost a third of the installed Android base, a figure that could be even higher depending on your target demographic.
It’s not just older versions of Android. You’ll see a similar experience on Apple devices running iOS 5, or lower powered devices like the Kindle Fire. In actual fact, there isn’t currently a single mobile device that will run every one of the above demos well.
As mentioned earlier, for most clients the reason for choosing HTML5 is to ensure that their browser-based game is truly cross-platform. If you’re developing for desktop only, Unity and Flash are both strong options that should always be considered. They both have good browser support and the ability to export to devices as a native application, giving you a route to mobile and tablet from the same code should you require it.
There are two obvious challenges when developing cross platform games in HTML5. The first is the fluid nature of the HTML5 specification. This can result in fragmented feature support not just from device to device, but from browser to browser on each of those devices. Not just that, you’re developing against a constantly moving set of capabilities and support.
Just look at the recent launch of iOS 7, which broke a number of key features essential for HTML5 gaming, or the launch of Firefox 25 which finally added Web Audio support but at the same time broke the audio implementation of a large number of HTML5 games. Not quite ‘the foolish man built his house upon the sand’, but indicative of the problems that can happen overnight and are out with your control as a developer.
The second, and more challenging as a developer, is the massive variation in mobile handset performance and capabilities. Even when using a consistent feature set, how your game runs will vary massively between devices.
In order to understand just how much of a variance exists, you can run one of the many JavaScript benchmarks to test device performance. As an example, rendering 100 sprites via Canvas will perform at a relatively solid 60 frames per second on devices like the iPhone 4S or 5, Galaxy S3, Nexus 7 or Lumia 820. But if you try the exact same code on other devices like the HTC Desire (19fps), Galaxy Ace (7fps) or iPad 1 (9fps) and you’ll struggle to get anything representative of a playable game.
If your project involves targeting mobile or tablet, and especially if that includes these older or lower powered devices it’s essential to test and benchmark early on. This way, you understand the limitations of your device range and can tune both your technical approach and your game design to work within them.
And if your project isn’t targeting mobile or tablet, it probably should. Nearly a third of UK page views are from mobiles and tablets, with that growth climbing at such a rapid rate it’s expected to overtake desktop views in 2014.
While PCs still dominate during working hours, mobile devices are prevalent in the mornings and tablets in the evenings – both ideal times for browsing the web and playing games.
Choose your battles
At Chunk, we’ve been developing cross-platform HTML5 games for broadcasters and brands for almost two years. We’ve created browser-based mobile games for clients like the BBC and Disney that run on everything from an HTC Desire to an iPad4, from a Nexus 7 to an Xbox360.
As developers, it would be great to determine how deep into this fragmentation we want to dive, but our target audience and the devices they use largely dictate this. Working with children’s brands, we have often found ourselves working within the constraints of older ‘hand-me-down’ phones, or cheaper, underpowered devices.
However, with careful design and a lot of optimisation, it is still possible to produce engaging gaming experiences on the mobile web.
What have we learnt from those experiences? Well, if we had to produce a list of the top ten tips for HTML5 games development, it would be as follows:
1. Consider your audience. What’s your demographic, and what devices are they using? If you have web metrics, look at them to understand the core range of devices your visitors use and target your solution at those devices.
2. Design your game with your technology in mind. Yes, this should always be the case, but the limitations and fragmentation of HTML5 make it even more pertinent. WebGL will let you make a great 3D first person shooter, but its unlikely to (read: not going to) work on tablet if that’s going to be one of your target platforms.
3. Become familiar . It’s a great way to quickly check the support for any HTML5 feature that you would like to use across practically every browser or device.
4. Fill your studio with as many devices as possible, running as many different OS versions as you can. Simulators will help during development, but to get an accurate picture of how your code is performing you must be testing on the devices themselves. There are some great community-led device testing labs
that will give you access to a huge number of models. Scour places like eBay to find old handsets and add them to your test lab.
5. Keep ahead of the curve. The HTML5 specification is constantly changing, as is device support and you need to keep on top of these developments. This is especially relevant to areas like sound, where features like the WebAudio API can radically change the capabilities.
6. Stay agile throughout development. What isn’t available to you today may be tomorrow. What works this week may not work the next. Allow yourself the flexibility to adapt to these changes as they happen throughout your build.
7. Think about ways to scale functionality. A mobile first approach isn’t just for traditional web design. Look at ways that you can create a good experience on mobile and then layer on functionality and effects for other platforms as they permit. Target those devices using user agents or media queries and deliver a tailored experience relative to each.
8. KISS. By all means test limits and try to push capabilities, but remember you’re working with a technology that’s in its infancy, and an overcomplicated or overambitious project will be likely to cause you pain down the line.
9. Consider the lifespan of your content. Capabilities change all the time, and content can become dated quickly as new features are enabled on devices. If your game is going to be live for a reasonable length of time, allow yourself time to go back and both bug fix and update it.
10. One last one? Oh yeah. Test on every device you can, as often as you can.
Gladiator, you will go on my second whistle
HTML5 will be the go-to development technology for cross-platform browser based gaming, of that there’s no doubt. At the moment it can be a painful space, but that’s the case with most technologies in their infancy.
Tools such as the CreateJS framework or WebGL exporters are really going to help smooth out the bumps in your development workflow. And you’re going to want to get that as smooth as possible, as pretty much every connected device will have some form of HTML5 capability in the future, including consoles such as the Xbox One and PlayStation 4.
Become familiar with sites
to check compatibility, test regularly and continually on the biggest range of devices you can. Be pragmatic in your game design and not only will you reduce your pain for now, but you’ll put yourself in a strong position when device support catches up, which is going to do very, very soon.(
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致　　HTML5 是现在 Web 开发领域的热点，随着各大浏览器对 HTML5 技术支持的不断完善，越来越多的开发人员开始使用
来开发交互性强、效果出众的
应用和游戏。今天这篇文章向大家分享35款优秀的基于
开发的网页游戏，相信你看完这些例子后会对未来的 HTML5 发展充满无限期待。
编译来源：
国际来源：
未经允许不得转载： &　　HTML5 是现在 Web 开发领域的热点，随着各大浏览器对 HTML5 技术支持的不断完善，越来越多的开发人员开始使用
来开发交互性强、效果出众的
应用和游戏。今天这篇文章向大家分享35款优秀的基于
开发的网页游戏，相信你看完这些例子后会对未来的 HTML5 发展充满无限期待。
您可能还喜欢
编译来源：
国际来源：
阅读(...) 评论()HTML5游戏如何挣钱？2条经验让你每款赚3万刀
[摘要]当前，开放网络正在从Flash独占桌面环境朝跨平台HTML5技术所转变。与众多的原生应用开发商以及应用程序相比，当前只有几百个游戏工作室和小规模社区独立组织在分享HTML5游戏开发的美味蛋糕。腾讯游戏 9月5日 作者：杨亮 编辑：白豆原文作者：Alexander Krug，是世界上最大的HTML5游戏平台的运营商SOFTGAMES的CEO。现今苹果App Store当中的应用数量可以以海量来形容，最新发布的应用对排行榜的冲击力也越来越小，很明显，其已成为一个饱和市场。一款游戏要想在App Store中冲到美国“免费游戏榜”首位需要日下载超过五万次。不奇怪，有超过99%的应用的日下载都达不到这个要求。如果能达到这个下载量，一般都是病毒传播和运气的产物。不幸的是，这种事情可遇而不可求。开发商可以通过一些方法来增加日常安装量：用市场手段为每个安装量而付费。然而，现实是当你为每个安装增加成本时，其ARPU(每用户平均收入)会下降或者不变，而且收购成本与ARPU之间的差距还会逐月增大。要想管控这种风险，开发商需要有一支非常有经验的营销团队以及大量的资金。但当前的独立开发者在大多数情况下，每个应用程序的月收入连500美元(约3000元人民币)都不到。当前，开放网络正在从Flash独占桌面环境朝着一个开放、处于上升空间的跨平台HTML5技术所转变。与几十万的原生应用开发商以及数以百万计的应用程序相比，当前只有几百个游戏工作室和小规模社区独立组织在分享HTML5游戏开发的美味蛋糕。以下为原文翻译：详细来说，HTML5游戏市场与原生App Store商业模式相比有着若干差异：与App Store发行商正在为满足玩家对高质量HTML5游戏的需求，而积极找寻和接洽开发商不同的是，像Softgames这个世界上最大的HTML5平台，对休闲游戏有强烈的需求。Softgames平均每个工作日都会发布一款新的跨平台游戏，相比于App Store这种拥有几十万应用的平台，Softgames对开发商开展业务而言实在是一块“风水宝地”。(利益相关：原文作者Alexander Krug是Softgames的创始人，Softgames是一家总部位于德国的HTML5游戏平台。)以休闲游戏为主导的平台能够给开发商带来巨大的收益，开发商只需马上行动，提交简单和精心打造的项目，并不断扩充即可。无需投入大量资源，无需长期投入，HTML5技术可以在一两个月内就设计出一款优秀的游戏。游戏可出售给像Softgames这样的发行商，独家/非独家授权皆可。独家授权的话，开发商最高可获得多达三万美元的收益。这份收益比大多数独立发行的应用在整个应用生命周期内所产生的收益都要大。与存在着大量山寨应用，大量原生应用开发商的App Store相比，HTML5游戏市场提供了巨大的市场机遇。Softgames上有超过250款流行大作，并对例如麻将、纸牌或者祖玛类型的游戏有强烈的需求。开发者可快速行动以填补这方面的空白并从中受益，而这些机遇在App Store当中根本不存在。当前HTML5游戏的主要收入来自应用内广告。而由于低支付聚合支出和一个全球性的支付构架的缺失，“免费加增值”的模式是不存在的。然而，其对于能一次快速开发一款游戏的开发者来说，这一点并不是劣势。开发者可以将游戏出售给开发者，并将精力转移到更佳的作品上面去。这种做法可以让开发者在游戏发布之后，无需冒风险再分配大量资源去做优化，维护和升级游戏。在开发者投身于HTML5跨平台游戏开发之前，有几件事情需要注意：1、对初学者而言，要想开发一款能在所有平台都正常运行的HTML5游戏无疑是一项挑战。因此，测试、优化和学习是实现“一套代码，多个设备”的关键。下一步对初学者而言可能更加的困难，那就是要在海量的HTML5支持设备上测试你的游戏。例如，不同操作系统，甚至不同的版本运行情况各不相同，你还得进行新功能的性能调试。聚焦于一点，一个一个项目的推进是避免遇到太大困难的正确方法。2、游戏需要兼容各种不同的控制方式，你的用户可能通过鼠标、键盘、智能电视遥控器或者他们的iPhone来玩游戏。此外，你的游戏在不同屏幕分辨率下可能会有巨大的差异。在一些分辨率下，有些游戏的显示可能会出问题。你需要进行智能的规划，以避免这些潜在的问题，因为其会使你的游戏遭受失败。3、通常情况下，HTML5游戏的音频的滞后是导致浏览器(尤其是移动浏览器)载入时间过长、游戏卡顿，浏览器崩溃的最直接原因。幸运的是，当前已有一些重大的改进，将基本音频支持内置到HTML5游戏内。然而对于原生游戏而言，这个功能还不完善。因此开发者应该使用基本声音库而不是扩展音频，以避开陷阱。开发者如何从HTML5中受益今天对开发者而言有两种商业模式：1、开发者将游戏通过独家或者非独家的方式卖给诸如Softgames这样的发行商；2、从应用内置广告产生的收益中与发行商进行分成。非独家授权方式的话，开发者可以将游戏多次出售给不同发行商，Softgames购买非独家授权游戏的价格通常在500-5000美元(约万元人民币)之间。可以预见的是，开发者通过一款高质量HTML5游戏在几周内可以产生上万美元(六万人民币)的收益。HTML5应该被视为原生开发的一种巨大的替代品。与其把冀期望成功给运气，开发者可以有效安排时间和精力给下一款游戏，并通过发行商网站对高质量HTML5休闲游戏的巨大需求而获得收入。Softgames作为HTML5游戏的先锋，已经有超过十年的移动发行方面的经验，并完全专注HTML5游戏平台已有三年之久。开发者应该早日加入HTML5游戏开发的淘金热行列中来，以免为时已晚。
正文已结束，您可以按alt+4进行评论
相关阅读：
相关搜索：
[责任编辑：aniszhou]
热门搜索：
Copyright & 1998 - 2017 Tencent. All Rights Reserved}