HTML5 游戏之路Ready to go? HTML5 Games

HTML5 给游戏带来了什么

• What does HTML5 bring to Games

HTML5 究竟是什么？What HTML5 IS?

• 新的标记语言， 拥有了很多新的 tag, 比如 <canvas>, <audio>, <video>, <article>, <nav>

HTML5 究竟是什么？

现在我们说的广义 HTML5 ，通常还包括 CSS3 和 JavaScript engines

What HTML5 IS?

我们能用它来作什么？

先从 <canvas> 和 <audio> 说起

What we can do with these stuff?

Canvas 实现 2D 绘图、动画效果

<audio> 播放音频

背景声音、 音效、音量控制、 多通道 还是比较基础的 JavaScript API

Canvas + audio + js engine =?能够干什么？

有例子么 ? 当然有 ...

Got an example? Sure...

经典的坦克大战

http://www.mhtml5.com/games/tank/

Classic Tank game

射击游戏

http://dougx.net/plunder/plunder.html

Shooting game

WHY COOL ？

WRITE ONCE

USE ANYWHERE

• Saving time with development and Testing

• 轻量级 • Lightweight• Text, Image, CSS, JS

• 优化游戏运营 提高效率

Optimize game operation

Improve efficiency

有多少支持 HTML5 的浏览器了？

How many browsers support HTML5?

还有 ...

And...Umm

终于 ... 鼓掌！

Finally ... Applause ！

性能一定不行吧 ...也许你会想

You may thinkPerformance sucks . right?

CANVAS 在桌面端性能相当好

Chrome 、 IE9 支持图形硬件加速。 Safari, firefox 部分支持

CANVAS works pretty well in desktop/laptop

“ 相当好” 的定义是 ?

如果你要作 Tiny wing, Angry bird, 超级马里奥， 可以跑到 FPS 60

How good is pretty good?

那物理引擎怎么办？

• canvas 只管画图

How about physics engine?

拥抱开放 第三方的引擎Embrace open technoogy! 3rd party engines

BOX 2D已经用在了 Angry bird 的 HTML5 版本上http://chrome.angrybirds.com/

JPEhttp://colorhook.com/portfolio/jpe/examples/CarDemo/CarDemo.html

http://colorhook.com/portfolio/jpe/examples/RobotDemo/RobotDemo.html

还有更多的 JS engine

crafty

isogenic 建设类

Gameclosure 开发中

3D 的场景怎么办？How about 3D?

• - 浏览器里的 3D 效果• -2011.3 月 WEBGL 公布 1.0 Spec. 虽

然还比较初级， 但是已经得到了多个浏览器支持 .

• Google 已经 Port 了 QUAKE II 到WEBGL.

多人在线的呢？How about multiplayer game?

WEBSOCKETS

• 用来处理服务器和玩家的双向通讯

NODE.JS

• 服务器端的 Javasript 解释器• 高并发 低消耗

手机上能用么？Does it work in mobile?

没问题！ No problem!

• IOS + Android .. + WP7?

但 HTML5 手机游戏面临挑战

Still. mobile HTML5 game faces challeange

<audio> 在手机上的问题比较大<canvas> 的绘制速度偏慢，尤其在iframe 中效率更低。 硬件加速并非所有硬件支持Android 适配问题Javasript 引擎的速度，物理类

问题总会被解决

机器的性能在飞速提升

Problem will be solved anyway, just take a while

还有 impact js

http://m.agame.com/game/Biolab+Disaster/en_US/index.html

作 HTML5 游戏有赚钱么 ?

Does HTML5 game make money ?

有！但目前大多在手机游戏领域

• 在日本已经有不少手机 HTML5 游戏， 收入相当不错

Definitely YES, but only in mobile right now

巨头们也在布局

http://www.warimals.com/

为什么先在手机游戏？

兼容性 智能手机的兴起手机 HTML5 游戏的转换率高于下载游戏，体验简单用户对效果的预期并没有那么高， HTML5 游戏已经能实现不错的效果社交游戏， ARPU 高

Why mobile?

HTML5 游戏的机遇Opportunity

移动设备的生产量 2011 年超过 PC ， 智能手机占绝对主流巨头的支持， 微软Windows8 ， Google, Apple, Facebook, Google +

社交游戏的盛行手机硬件和浏览器开放更多 API

更灵活的市场渠道 browser based, apk,app...

HTML5 游戏在中国

HTML5 研究小组 游戏比赛 >>

更多的产品在孕育中 ...

HTML5 games in China