HTML5游戏之路。 2011CGDC演讲稿

1. HTML5游戏之路
Ready to go? HTML5 Games
11年8月4日星期四

2. HTML5给游戏带来了什么
What does HTML5 bring to Games
11年8月4日星期四

3. HTML5 究竟是什么？
What HTML5 IS?
新的标记语言， 拥有了很多新的tag, 比
如 <canvas>, <audio>, <video>,
<article>, <nav>
11年8月4日星期四

4. HTML5 究竟是什么？
What HTML5 IS?
现在我们说的广义HTML5，通常还
包括 CSS3 和 JavaScript engines
11年8月4日星期四

5. 我们能用它来作什么？
What we can do with these stuff?
先从 <canvas> 和 <audio> 说起
11年8月4日星期四

6. Canvas
实现2D绘图、动画效果
11年8月4日星期四

7. <audio> 播放音频
背景声音、 音效、音量控制、 多通道
还是比较基础的JavaScript API
11年8月4日星期四

8. Canvas + audio + js engine =?
能够干什么？
有例子么? 当然有...
Got an example? Sure...
11年8月4日星期四

9. 经典的坦克大战
Classic Tank game
http://www.mhtml5.com/games/tank/
11年8月4日星期四

10. 射击游戏
Shooting game
http://dougx.net/plunder/plunder.html
11年8月4日星期四

11. WHY COOL？
11年8月4日星期四

12. WRITE ONCE
USE ANYWHERE
11年8月4日星期四

13. Saving time with development and Testing
11年8月4日星期四

14. 轻量级
Lightweight
Text, Image, CSS, JS
11年8月4日星期四

15. 优化游戏运营 提高效率
Optimize game operation
Improve efficiency
11年8月4日星期四

16. 有多少支持HTML5的浏览器了？
How many browsers support HTML5?
11年8月4日星期四

17. 还有...
And...Umm
11年8月4日星期四

18. 终于... 鼓掌！
Finally ... Applause！
11年8月4日星期四

19. 也许你会想
性能⼀一定不行吧...
You may think
Performance sucks . right?
11年8月4日星期四

20. CANVAS在桌面端性能相当好
CANVAS works pretty well in desktop/laptop
Chrome、IE9支持图形硬件加速。
Safari, firefox 部分支持
11年8月4日星期四

21. “相当好”的定义是 ?
How good is pretty good?
如果你要作Tiny wing, Angry bird, 超级
马里奥， 可以跑到 FPS 60
11年8月4日星期四

22. 那物理引擎怎么办？
How about physics engine?
canvas只管画图
11年8月4日星期四

23. 拥抱开放 第三方的引擎
Embrace open technoogy! 3rd party engines
11年8月4日星期四

24. BOX 2D
已经用在了Angry bird 的HTML5版本上
http://chrome.angrybirds.com/
JPE
http://colorhook.com/portfolio/jpe/
examples/CarDemo/CarDemo.html
http://colorhook.com/portfolio/jpe/
examples/RobotDemo/
RobotDemo.html
11年8月4日星期四

25. 还有更多的JS engine
crafty
isogenic 建设类
Gameclosure 开发中
11年8月4日星期四

26. 3D的场景怎么办？
How about 3D?
11年8月4日星期四

27. -浏览器里的3D效果
-2011.3月WEBGL公布1.0 Spec. 虽然还比
较初级， 但是已经得到了多个浏览器支
持.
Google已经 Port了 QUAKE II 到
WEBGL.
11年8月4日星期四

28. Multiplayer Quake II remake with Google GWT
(Google Web Toolkit)
11年8月4日星期四

29. Multiplayer Quake II remake with Google GWT
(Google Web Toolkit)
11年8月4日星期四

30. 多人在线的呢？
How about multiplayer game?
11年8月4日星期四

31. WEBSOCKETS
用来处理服务器和玩家的双向通讯
11年8月4日星期四

32. NODE.JS
服务器端的Javasript解释器
高并发 低消耗
11年8月4日星期四

33. 手机上能用么？
Does it work in mobile?
11年8月4日星期四

34. 没问题！ No problem!
IOS + Android .. + WP7?
11年8月4日星期四

35. 11年8月4日星期四

36. 但 HTML5手机游戏面临挑战
Still. mobile HTML5 game faces challeange
11年8月4日星期四

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

38. 问题总会被解决
Problem will be solved anyway,
just take a while
机器的性能在飞速提升
11年8月4日星期四

39. 还有impact js
http://m.agame.com/game/Biolab
+Disaster/en_US/index.html
11年8月4日星期四

40. 作HTML5游戏有赚钱么?
Does HTML5 game make money ?
11年8月4日星期四

41. 有！但目前大多在手机游戏领域
Definitely YES, but only in mobile
right now
在日本已经有不少手机HTML5游戏， 收
入相当不错
11年8月4日星期四

42. 巨头们也在布局
http://www.warimals.com/
11年8月4日星期四

43. 为什么先在手机游戏？
Why mobile?
兼容性 智能手机的兴起
手机HTML5游戏的转换率高于下载游
戏，体验简单
用户对效果的预期并没有那么高，
HTML5游戏已经能实现不错的效果
社交游戏， ARPU高
11年8月4日星期四

44. HTML5 游戏的机遇
Opportunity
11年8月4日星期四

45. 移动设备的生产量 2011年超过PC， 智能
手机占绝对主流
巨头的支持， 微软Windows8，Google,
Apple, Facebook
社交游戏的盛行
手机硬件和浏览器开放更多API
更灵活的市场渠道 browser based,
apk,app...
11年8月4日星期四

46. HTML5游戏在中国
HTML5 games in China
HTML5研究小组 游戏比赛
更多的产品在孕育中...
11年8月4日星期四

47. 有问题？
Any Question?
11年8月4日星期四

48. Thank You
CQ_陈琦
Chen Qi
11年8月4日星期四