游戏邦在:
杂志专栏:
gamerboom.com订阅到鲜果订阅到抓虾google reader订阅到有道订阅到QQ邮箱订阅到帮看

创造一款成功HTML5游戏的完整指南

发布时间:2013-06-18 13:58:15 Tags:,,,,

作者:David Rousset

现在,我会花大量时间向学生,业余爱好者,专业开发者以及老师解释如何使用HTML5创造。而最近我也一直纠结着是否应该将这些观点与所有人分享。

为什么现在有这么多人对创造HTML5游戏感兴趣呢?因为今天的我们已经可以基于HTML5使用相同的代码而瞄准多种平台了:台式机(基于IE9/IE10,Firefox,Chrome。Opera&Safari),iOS和Android平板电脑与手机,Windows 8及其未来相关联的无数平板电脑与PC都欢迎HTML5游戏!我们也经常能够看到一些不费吹灰之力便移植到这些平台上的HTML5游戏项目。

除此之外,现代的JavaScripy引擎性能以及GPU硬件加速图像层都让我们能够更有信心地创造HTML5游戏。

Canvas和SVG:在屏幕上绘制的2种方法

canvas vs SVG(from webappers)

canvas vs SVG(from webappers)

你必须在创造第一款HTML5游戏前先理解如何在屏幕上绘制好看的对象。这里主要存在2种方法,而为了找出它们的区别,你可以先阅读Patrick Dengler(SVG W3C Working Group的成员)的文章《Thoughts on when to use Canvas and SVG》。

我也在去年重新利用了Patrick的材料为微软的同事组织了一次45分钟的内部会话。

overview(from webappers)

overview(from webappers)

这是当时的幻灯片。

最后,你还可以下载我在视频Mix11SVGCanvas.zip中所证实过的源代码。

你也可以参考来自MIX11的2次出色的会话:

如何创造现代化的网站:SVG Meets HTML5

深入研究HTML5

当你研究了所有的这些内容后,你便能理解为何大多数HTML5游戏是使用Canvas而非SVG。Canvas为游戏开发者提供了一种清楚明白的开发模式(较低水平的绘图API),并且近来也获得大多数浏览器的硬件加速支持。而SVG及其向量式技术仍坚持着在不损失质量的前提下在不同设备间伸缩着。你只需要使用SVG的ViewBox属性便可,之后你的游戏资产便能够轻松地在3至80规格的屏幕上变化着了。

有时候,我们能够使用这两种技术而创造出同样的游戏。例如这里便有一款先使用SVG后使用Canvas的简单游戏:SVG版本的壁球游戏与Canvas的壁球游戏。它们都是源于MSDN文件编制:使用Canvas或SVG编程简单游戏。

在这个例子中,分析每种技术的性能将帮助你决定使用哪种技术去创造游戏。举个例子来说,这里有2个有趣的实验将分别使用SVG和Canvas在你的屏幕上呈现出1000个小球。在这一特殊的例子中,Canvas的性能更能有效地在屏幕上绘制许多对象。而这也是我们想在电子游戏中实现的目标。为了更加清楚地看到性能比较,我们可以着眼于以下图表:

performance comparison(from webappers)

performance comparison(from webappers)

但是却没有人能够阻止你去混合这两种技术。我们可以想象基于SVG而使用第一层去呈现游戏菜单,并基于canvas而使用第二层去呈现游戏本身的内容。随后你将使用所谓的浏览器合成引擎。不过你也必须关注于最终性能结果,因为在这一领域浏览器和设备是不相等的。并且不要忘记HTML5的主要优势便是瞄准所有平台。

我的同事David Catuhe在几个月前注意到一款小小的摧毁砖块游戏便使用了这种合成原理。第一层使用SVG去打破砖块,然后使用canvas标签让背景呈现出隧道效果。你可以完美地模仿这一理念在背景中呈现游戏(如平台游戏或者射击游戏)而不是隧道中,而你的第一层也可以基于SVG而简单地呈现出菜单和配置选择。

有用的程序库和工具

图像

手动编写SVG的XML节点或使用Canvas较低水平的API总是非常有趣,但却并不高产。以下我将列出一些能够帮助你创造HTML5游戏部分内容的工具和程序库。

为了生成一些SVG,以下是一些很棒的工具:

InkScape:免费的开放源桌面软件

SVG编辑器:这是能够直接在你的浏览器上运行的在线软件

Adobe Illustrator也支持将SVG当成一个输出目标,但这较为昂贵。

如果你正在寻找游戏资产(面向菜单或控制),你便可以考虑这种免费的图标库:The Noun Project。如果你不幸未能得到设计师的帮助,这一工具便能拯救你。还有另一种带有一些免费SVG内容的程序库:Open Clip Art Library。

最后你需要掌握的一种程序库便是RaphaelJS。这是一种JavaScript程序库,将帮助你通过几行代码而生成动态SVG。你将在网站上发现许多使用基于SVG元素的非线性动画功能以及动画图标的出色演示版本。但是如果你的目标是绘制图表的话,那么你最后需要掌握的便是HighCharts。这2种程序库都非常出色,它们甚至能够面向IE8或者更早的版本执行VML反馈。但是如果你正在创造HTML5游戏的话,这便不是你需要担心的问题。因为你需要瞄准的是IE9以上的版本。

charts(from webappers)

charts(from webappers)

如果你想要使用Canvas去呈现图表的话,我便会推荐JavaScript InfoVis Toolkit程序库。

charts(from webappers)

charts(from webappers)

让我们继续关于图像的内容。还有一种能够在JavaScript中简化3D使用的著名程序库—-ThreeJS。大多数情况下,它是用于渲染硬件—-通过WebGL去加速3D。我们曾使用这一程序库在IE Test Drive上创造过游戏的演示版本。使用“CanvasRenderer”后,你便可以在所有HTML5浏览器中创造3D场景。

注:我们也可以使用CSS3 2D和3D的转换以及游戏的转场效果或动画去结合所有的这些图像效果。但是我已经决定在本篇文章中专注于阐述Canvas和SVG。

物理引擎

当然了,呈现图像并不是你在创造游戏中的唯一任务。你还需要通过编写AI代码而赋予角色生命。不幸的是你需要独自进行编写并发挥创造性。但也有开心的事,即你不需要担心游戏的物理和碰撞部分。你只需要学习如何使用Box2D JS便可。在接触了各种例子后你将会非常惊讶:

amazed(from webappers)

amazed(from webappers)

如果你对这个话题感兴趣的话,你便可以阅读Seth Ladd出色的教程系列:《面向JavaScript开发者的Box2D介绍》。Seth甚至使用了Web Workers去估算CPU的物理元素。如果你不知道Web Workers是什么的话,我写了一篇有关这些新API的介绍:《Introduction to the HTML5 Web Workers: the JavaScript multithreading approach》。希望这对你的游戏脚本设定有帮助。

处理多点碰触事件

如果你想要创造一款跨越多种设备的游戏,你就必须支持触屏。现在的碰触事件共有2种规格。所以并不存在官方的标准。如果你想要进一步了解具体原因,你可以阅读《Getting Touchy About Patents》这篇文章。

你需要编写适用于IE10以及Windows 8的代码,并能够在苹果设备上有效执行。对此你可以着眼于这一样本,即列举一个能够同时支持两种碰触事件(手指绘画以及所有浏览器中的鼠标输入)的模式。但是如果你现在想要检查是否可以在IE10中处理多点碰触,你便可以测试这一演示版本:Browser Surface。你需要找到一个最新的IE10版本以及多点碰触硬件去运行它。

Boris Smus开始致力于名为Pointer.js的程序库。该理念是关于整合所有碰触类型(IE10,iOS,纸和笔等等)去简化开发者的生活。你可以阅读他所写的相关文章《Generalized input on the cross-device web》。现在,该程序库仍只是个草稿,还不能支持IE10的MSPointer*。

创造连贯的游戏

如果你希望能够支持更广泛的用户,你便需要考虑创造一个能让那些不支持WebSockets或只支持早前版本的浏览器或设备可以依靠的东西。我们甚至幻想着解决方法能够自动放下早前的汇聚方法并为Web Sockets提供更多最新的浏览器,如IE10。是否存在一个独特的代码能够处理这种情况?

让我们停止幻想,社区将去处理这一情况。而我则知道2种解决方法:

面向Node.js的Socket.IO程序库

基于IIS和ASP.NET的SignalR

这两种程序库都将使用各种支持水平去处理所有浏览器和设备。

有些游戏框架

为了创造一款2D HTML5游戏,你需要牢记一些内容:

1.处理你的精灵:将其分割成一个系列,让它生动化,并创造效果等等。2.处理你的声音和音乐(这在HTML5中并不简单!)3.分不同时间通过专用载入程序/资产管理器从网页服务器上加载资产。4.创造一个碰撞引擎,为游戏对象创造一个高水平的逻辑等等。

你可以从头开始创造或者测试并回顾其他开发者所创造的内容。我会建议你使用第二种方法,因为JS游戏框架开始变得更加成熟,并且能够在游戏制作过程中进行测试。

网上有许多JS游戏框架,以下是创造HTML5 2D游戏最为出名的一些框架:

MelonJS:一个带有许多有用服务的免费框架。它的最大优势便是能够与Tiled Map Editor工具同时使用。

CraftyJS:很不幸,我并不是很了解这一框架。

ImpactJS:这是一个具有很高质量和知名度的框架。虽然它不是免费的,但是价格也不贵。

EaselJS:我最喜欢的一个!是由早前一名flash开发者所编写的。如果你曾经在Flash上编写过一些游戏,你便会对它一见如故。这是源自CreateJS组合。它非常完整,配备齐全,更关键的是它是免费的。

显然EaselJS是我最熟悉的一个框架,所以我的看法并不是绝对客观。做出怎样的选择最终还是取决于你自己。

一些初学者教程

首先我想分享自己的教程。1年前,多亏了EaselJS,我将一款XNA C#游戏移植到HTML5/JavaScript。后来我决定编写3个教程去分享自己的那次经验:

HTML5游戏:在Canvas中使用EaselJS去创造精灵动画

HTML5游戏:使用EaselJS创造核心对象并处理碰撞

HTML5平台游戏:使用EaselJS将XNA游戏完全移植到canvas

几个月后我又写了3篇有关加强/扩展同一款游戏的文章:

教程:多亏了PhoneGap我们能够在Windows Phone上创造HTML5应用,而多亏了PhoneGap/Cordova我们能够移植Windows Phone上的这款游戏。你也可以遵循同样的方式去执行Android或iOS设备上的开发和移植。

盈利你的HTML5 Canvas游戏之第一部分:硬件比例和CSS3(你将在哪里使用CSS3 3D)

通过转换,转场以及网格格局去加强游戏体验

盈利你的HTML5 Canvas游戏之第二部分:脱机API,拖放和文件API(游戏邦注:你将能够在脱机模式下玩游戏)。你将能够创造自己的关卡并直接将它们拖放到游戏中。

在遵循这些教程后,你将创造出这样的游戏:

game(from webappers)

game(from webappers)

多亏这6个教程,你将能够基于任何浏览器或设备而编写自己的HTML5游戏。

你能在EaselJS网页(http://www.createjs.com/#!/EaselJS )以及上述所提到的框架网站上找到许多简单的样本和优秀的教程。

你还能在如下网站上发现更多相关教程:

HTML5游戏开发教程

10款出色的HTML5游戏以及你该如何创造属于自己的出色HTML5游戏

最后,我还想推荐两篇具有启发性的文章。第一篇便是来自微软的David Catuhe所写的《Unleash the power of HTML 5 Canvas for gaming》。他分享了自己在创造演示版本时所发现的一些优化内容。他所提出的一些窍门能够帮助你更好地创造自己的HTML5游戏。第二篇则是谷歌的Boris Smus所写的《Improving HTML5 Canvas Performance》,其中也包含了许多有益的建议。

一些有趣的在线游戏和体验的反馈

不管你喜欢怎样的游戏,如果能够分析开发者是如何创造这样的游戏将会对你自身非常有帮助。多亏了网络,现在我们只需要右击便能够“查看源代码”了。即使你所获得的代码已经被压缩了,你仍能够通过了解游戏的整体结构而获益。

让我们分析使用EaselJS框架所创造的一些内容。首先便是Grant Skinner所编写的《Pirates Love Daisies》:

pirates love daisies(from webappers)

pirates love daisies(from webappers)

Grant是在创造HTML5游戏时开始使用EaselJS框架。

Windows 8注释:你会在Windows Store中找到面向Windwos 8的《Pirates Love Daisies》。的确,如果你拥有一款有效运行于IE9或IE10的HTML5游戏,那么创造它的Windows 8版本便像复制粘帖那般简单!但是如果你想要创造一款真正优秀的Windows 8游戏,你需要更加重视我们正在创造的独特Windwos 8体验。

另外一款使用EaselJS的游戏便是《BKOM ROBOT GAME》,它还使用了我所喜欢的3D精灵:

bkom robot game(from webappers)

bkom robot game(from webappers)

而现在最受欢迎的两款HTML5游戏无疑便是《愤怒的小鸟》和《割绳子》。

angry birds(from webappers)

angry birds(from webappers)

你也能在Windows Store中找到《割绳子》的Windows 8版本。

cut the rope(from webappers)

cut the rope(from webappers)

你可以很轻松地将HTML5游戏移植到Windows 8。以下便是移植过程:

1.复制/粘帖网页版本到HTML5 Metro Style App面向Windows 8的项目。2.添加支持触屏。3.添加支持贴边视图和暂停游戏功能。4.创造一些高分辨率的资产(1366×768和1920×1080)为之后的Windows 8平板电脑和PC穿增高更棒的体验。

我也很喜欢有关《割绳子》的故事。这是一款面向苹果iOS设备且基于Objective-C而编写的成功游戏。它已经成功移植到HTML5/Canvas,开发商也在《Cut The Rope – Behind the scenes》这篇文章中做出了详细描写。我从《Wooga’s HTML5 Adventure》中也受益匪浅。

我希望本篇文章所列出的所有资源都能够帮助你更好地创造自己的HTML5游戏。

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

A Complete Guide for Building HTML5 Games

By David Rousset

I’m currently spending most of my time explaining to students, hobbyists, professional developers and teachers how to build games using HTML5. I then recently thought: rather than keeping all these details for small audiences, wouldn’t it be smarter to share it with you?

This article is then based on my own experience. I will probably omit some crucial things some of you may know. But it will try to update this blog post along with my own new discovers and of course based on the feedbacks you will kindly provide in the comments or via Twitter.

But why are so many people currently interested in HTML5 Gaming?
Well, simply because today, we can really use HTML5 to target multi-platforms using the same code: for desktop machines of course (with IE9/IE10, Firefox, Chrome, Opera & Safari), for iOS & Android tablets & phones and Windows 8, and its future associated millions of tablets & PC, is also warmly welcoming HTML5 Games! I then frequently see some HTML5 gaming projects ported to each of these platforms with almost no effort.

What’s more, the modern JavaScript engines performance coupled with the GPU hardware-accelerated graphics layers enable us to build great games in HTML5 with confidence.

Note: we will only talk about the <canvas> tag of HTML5 and about SVG in this article.

Canvas & SVG: 2 ways to draw on the screen

The first thing you need to understand before building your first HTML5 game is how to draw nice objects on the screen. There are 2 ways to do that and to better understand their differences, you should start by reading this article from Patrick Dengler (member of the SVG W3C Working Group): Thoughts on when to use Canvas and SVG

On my side, I’ve re-used parts of Patrick’s materials to build a 45min internal session for my Microsoft’s colleagues last year. You can watch it via this video I’ve made (using HTML5 <video> of course!):

And here are the slides:

At last, you can download the source code I’m demonstrating in this video here: Mix11SVGCanvas.zip

You may have a look also to these 2 great sessions from MIX11:

Modernizing Your Website: SVG Meets HTML5

Deep Dive Into HTML5

Once you will have reviewed all this content, you will probably better understand why almost all HTML5 games are using Canvas rather than SVG. Canvas offers a well-known development model for games developers (low level drawing APIs) and is now very well hardware-accelerated by most of the recent browsers. Still SVG, and its vectors-based technology, is naturally better armed to scale across devices without loosing quality. You just need to use the magic ViewBox property of SVG which will handle that for you. Your games assets will then scale from 3 to 80’’ screens in a very easy way!

Sometimes, it is even possible to achieve the exact same game using both technologies. For instance, here is the same simple game first using SVG then Canvas: SVG Racketball & Canvas Racquetball They are both issued from this MSDN documentation: Programming Simple Games Using Canvas or SVG

In this case, analyzing the performance of each technology could help you to decide which one to use for your game. For instance, here is an 2 interesting experiments that will display 1000 small balls on your screen using SVG: 1000 balls in SVG and using Canvas: 1000 balls in Canvas. Test both experiments in your favorite browser. In general, the Canvas performance is better for drawing a lot of objects on the screen in this special case. But this is generally also what we’d like to achieve in our video games. To have a better overview of the performance comparison, here is an interesting diagram to look at:

But nothing prevents you from mixing both technologies. Indeed, we could perfectly imagine using a first layer based on SVG to display the game menus with a second layer in background using a canvas for the game itself. You will then use what we call the browser compositing engine. However, you must pay some real attentions to final performance results because the browsers & devices are far from being equals in this domain. Don’t forget that the main interest of HTML5 is to target all platforms.

My colleague David Catuhe has realized a couple of months ago a little brick breaker game using this composition principle: How to write a small game using HTML5 and JavaScript–BrikBrok . The first layer is using SVG for the bricks to break and the background can display a tunnel effect using the canvas tag. You can perfectly mimic this concept to display the main game in background (hosting a plateformer or shoot’em up game, etc.) instead of the tunnel and your first layer will simply display the menus & configuration options in SVG.

Useful libraries & tools

Graphics

Writing the XML nodes of SVG manually or even playing with the low level APIs of Canvas could be fun for a moment but not very productive. Here is then a useful set of tools & libraries I like that could help you building parts of your HTML5 game.

To generate some SVG, here are some cool tools:

InkScape: a free & open source desktop software

SVG Editor: an online software running directly inside your browser

Adobe Illustrator also supports SVG as an export target but it’s a bit more expensive.

If you’re looking for your game assets (for menus or controls), you should have a look to this free icons library: The Noun Project. So if you’re not lucky enough to work with a designer, it could save you. There is another library with some free SVG content also here: Open Clip Art Library

To conclude on SVG, THE ultimate library you have to know is named RaphaelJS. It’s a JavaScript library that will help you generating dynamic SVG with few lines of code. You’ll find a lot of cool demos on the website using for instance nonlinear animation functions on SVG elements, animated charts, etc. But if you’re looking specifically for charting (let’s say to display some players’ stats), THE ultimate charting library is named HighCharts. Those 2 libraries are so awesome that they even implement VML fallbacks for IE8 or older versions. But this shouldn’t be something to worry about if you’re building HTML5 games. You’ll probably target at least IE9 and above.

If you’d like to display charts using Canvas, I’m a huge fan of the JavaScript InfoVis Toolkit library. Just have a look to their demos on their website, it’s just awesome and simple to use.

Let’s continue on the graphics side. There is a very well-known library built to simplify the usage of 3D in JavaScript named ThreeJS. Most of the time, it is used to render some hardware-accelerated 3D via WebGL. But you can ask for a rendering inside the 2D canvas element of HTML5. For that, simply check the “CanvasRenderer examples” section of the site. This is the library we’ve used for instance to build our Galactic demo on the IE Test Drive. Using the “CanvasRenderer”, you can then build 3D scenes working in all HTML5 browsers. Something that could be good to know.

Note: we can also combine all of these graphics effects with the usage of CSS3 2D & 3D Transforms coupled with transitions or animations in your game. But I’ve decided to stay focused on Canvas & SVG in this article.

Physics Engine

Of course, displaying graphics is far from being the only task you need to do in a game. There is also the AI (Artificial Intelligence) you need to code to bring life to your characters. Unfortunately, you will need to code that alone and be creative. But you will be glad to know you don’t need to worry about the physics & collisions part of your game. Simply learn to how to use Box2D JS. Go play with the various samples and you’ll be amazed:

If you’re interested in this topic, you should then read the excellent tutorials series of Seth Ladd here: Box2D orientation for the JavaScript developer . Seth even used the Web Workers to compute the physics on the several available cores of your CPU. If you don’t know what the Web Workers are, I’ve written an introduction on these new APIs here: Introduction to the HTML5 Web Workers: the JavaScript multithreading approach . It could be useful in certain scenarios for your games.

Handling the multi touch events

If you’d like to build a cross-devices game, you will have to support touch. Currently, there are 2 existing specifications around Touch Events. So there is no official standard one yet. If you’d like to know a bit more why, here is an interesting article: Getting Touchy About Patents

You will need to write code working fine inside IE10 & Windows 8 as well as with the implementation coming from the Apple devices. For that, you should definitely have a look to this sample demonstrating a possible pattern to support both kind of touch events: Finger Painting and its associated article: Handling Multi-touch and Mouse Input in All Browsers. But if you’re interesting in checking how far you can now go by handling multi-touch inside IE10, test this cool demo: Browser Surface . You’ll need a recent IE10 version and a multitouch hardware running it.

Boris Smus has started working on his side on a library named Pointer.js. The idea is to consolidate all types of touch (IE10, iOS like, mouse and pen) to simplify your developer life. You can read his article about that here: Generalized input on the cross-device web . Currently, the library is just a draft and doesn’t support yet the MSPointer* of IE10. So feel free to contribute to the project to help him! (I’ve planned to try to help him when I will have some spare time).

Building connected games

If you’d like to build multiplayers games or simply a connected game to a server for any reason, you’ll be naturally interested by using WebSockets. This W3C specification (and the underlying protocol handled by the IETF) is indeed stable enough to start to be used in production.

But if you’d like to support the widest possible number of users, you need to consider a fallback for browsers or devices which weren’t supporting WebSockets yet or were supporting an older deprecated version. Well, we could even dream of solutions automatically falling back to older method of pooling or long pooling for browsers like IE9 and offering Web Sockets to more recent browsers like IE10. And yes, could it be possible also to have a unique code handling that?

Well, stop dreaming, the community made it. There are 2 solutions I know doing that on my side:

the Socket.IO library for Node.js

SignalR working on top of IIS and ASP.NET

Both libraries will help you to handle all the browsers & devices with their variety of support levels.

Some gaming frameworks

To build a 2D HTML5 game, there are several things you need to carry about:

1 – Handling your sprites: splitting them into a sequence, animating them, effects, etc. 2 – Handling your sounds & music (and this is not something easy in HTML5!) 3 – Loading asynchronously your assets from the web server via a dedicated loader/assets manager 4 – Building a collision engine, a high level logic for your game objects, etc.

Well, you can either do that starting from scratch or you can test & review what other brilliant developers have already done on the web. I’ll definitely advice you the second option as the JS gaming frameworks start to be really mature and tested inside games in production.

As there is a ton of JS gaming frameworks on the web (well, there is a ton of anything.JS actually), here are the most well-known frameworks I know to build HTML5 2D games working inside all browsers:

MelonJS : a free framework that exposes a lot of useful services. His big advantage is that it works fine with the Tiled Map Editor tool.

CraftyJS that I unfortunately don’t know very well

ImpactJS : a high quality well-known framework. It’s not free but not too much expensive.

EaselJS : my favorite one ! Written by an old flash developer. So if you have written some games in Flash, you should feel at home with this framework. It’s part of the CreateJS suite. It’s very complete, well documented and… free.

So, you should now be warn. As EaselJS is the framework I know the most, I won’t be impartial. It’s up to you to test the other one and make your own opinion.

Some beginners’ tutorials

Well, as a pure megalomaniac I am, let me start by sharing you my own tutorials. 1 year ago, I had fun porting an XNA C# game into HTML5/JavaScript thanks to EaselJS. I’ve then decided to write 3 first tutorials to share this experience:

HTML5 Gaming: animating sprites in Canvas with EaselJS

HTML5 Gaming: building the core objects & handling collisions with EaselJS

HTML5 Platformer: the complete port of the XNA game to <canvas> with EaselJS

Several months later, I’ve done 3 others articles enhancing/extending the same game:

Tutorial: how to create HTML5 applications on Windows Phone thanks to PhoneGap where I’ll show you how to port the same game on Windows Phone thanks to PhoneGap/Cordova. But you will be able to follow the same instructions for your Android or iOS device.

Modernizing your HTML5 Canvas games Part 1: hardware scaling & CSS3 where we’ll use CSS3 3D

Transform, Transitions & Grid Layout to enhance the gaming experience

Modernizing your HTML5 Canvas games Part 2: Offline API, Drag’n’drop & File API where we will enable playing to the game in offline mode. You will be even able to create your own levels and drag’n’drop them directly into the game.

After following them, you’ll build this game:

Well, logically, thanks to these 6 tutorials, you should be able to write your own HTML5 game whatever the browser or device you’re targeting.

You’ll find also a lot of simple demo to understand and great tutorials on the EaselJS website: http://www.createjs.com/#!/EaselJS as well as on each frameworks’ website mentioned above.

You’ll find more generic tutorials on those sites also:

HTML5 Game Dev Tutorials

10 cool HTML5 games and how to create your own

To conclude, I’d like to recommend you 2 more “advanced” articles but very instructive to read. The first one is written by David Catuhe from Microsoft: Unleash the power of HTML 5 Canvas for gaming . He will share with you some optimization he has found while working on a “demo” like the one we were writing in the “demo scene”. The tips found could bring you some ideas for your own HTML5 games. The second one is written again by Boris Smus from Google: Improving HTML5 Canvas Performance and it contains ton of good advices.

Some interesting online working games & experience feedbacks

Again, this is my personal favorites. You will probably find other cool examples on the web to share. Whatever the game you’ll like, it is interesting to analyze how the developers made them. Thanks to the magic of the web, you just have to right-click & “view source”. Even if the code will be probably minified, you can still learn a couple of interesting things by looking at the global architecture of the game.

Let’s start by some productions using the EaselJS framework. The first one was Pirates Love Daisies written by Grant Skinner:

Grant has started his EaselJS framework while building this HTML5 game.

Windows 8 note: you’ll notice you’ll find the very same game working inside Windows 8 in the Windows Store here: Pirates Love Daisies for Windows 8 . Indeed, if you have a HTML5 game working fine inside IE9 or IE10, building the Windows 8 version is almost only doing a simple copy… and paste! The game will then directly works inside the Metro experience. But to make a real good Windows 8 game, you will have also to pay attention to the unique Windows 8 experience we’re building. This is described here: Designing great games for Windows

Another game using EaselJS is BKOM ROBOT GAME which uses 3D sprites I love:

The 2 most currently famous HTML5 games are of course Angry Bird (which uses the Box2D library I was mentioning above):

And Cut The Rope:

You’ll find also a Windows 8 version of it in the Windows Store here: Cut The Rope for Windows 8

It was very simple to port into Windows 8. Here is the process:

1 – Copy/Paste the Web version into a HTML5 Metro Style App project for Windows 8 2 – Add support for touch 3 – Add support for the snapped view and pause the game 4 – Build some High Resolution assets (1366×768 & 1920×1080) to propose the best experience for all the incoming Windows 8 tablets & PC.

I also love the story around “Cut The Rope”. It’s very interesting to read. This was a successful game written in Objective-C for the Apple iOS devices. It was ported into HTML5/Canvas and the developers who made this detail their feedback in this article: Cut The Rope – Behind the scenes . Have a look, you’ll probably learn some interesting points. I’ve also add pleasure reading this experience feedback: Wooga’s HTML5 Adventure

At last, here is a list of 40 more or less good HTML5 games: 40 Addictive Web Games Powered by HTML5 with some other available also here: HTML5games.com

I now hope that all these resources will help you to build your own HTML5 game. If you’re doing so and/or if you have any suggestions to provide on good frameworks/tutorials/concepts you’d like to share, please share your thoughts with me!(source:webappers


上一篇:

下一篇: