HTML5 游戏之路 <ul><li>Ready to go? HTML5 Games </li></ul>
HTML5 给游戏带来了什么 <ul><li>What does HTML5 bring to Games </li></ul>
HTML5  究竟是什么? <ul><li>新的标记语言, 拥有了很多新的 tag,  比如  <canvas>,  <audio>, <video>, <article>, <nav> </li></ul>What HTML5 IS?
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
<ul><li>Saving time with development and Testing </li></ul>
<ul><li>轻量级  </li></ul><ul><li>Lightweight </li></ul><ul><li>Text, Image, CSS, JS </li></ul>
<ul><li>优化游戏运营 提高效率 </li></ul>Optimize game operation Improve efficiency
有多少支持 HTML5 的浏览器了? How many browsers support HTML5?
还有 ... And...Umm
终于 ...  鼓掌! Finally ...  Applause !
性能一定不行吧 ... 也许你会想 You may think Performance sucks . right?
CANVAS 在桌面端性能相当好 <ul><li>Chrome 、 IE9 支持图形硬件加速。  Safari, firefox  部分支持 </li></ul>CANVAS works pretty well in desktop/laptop
“ 相当好”的定义是  ? <ul><li>如果你要作 Tiny wing, Angry bird,  超级马里奥,  可以跑到  FPS 60  </li></ul>How good is pretty good?
那物理引擎怎么办? <ul><li>canvas 只管画图 </li></ul>How about physics engine?
拥抱开放  第三方的引擎 Embrace open technoogy! 3rd party engines
<ul><ul><li>BOX 2D 已经用在了 Angry bird  的 HTML5 版本上 http://chrome.angrybirds.com/ </li></ul></ul><ul><ul><li>JPE http://color...
还有更多的 JS engine  <ul><li>crafty </li></ul><ul><li>isogenic  建设类  </li></ul><ul><li>Gameclosure  开发中 </li></ul>
3D 的场景怎么办? How about 3D?
<ul><li>- 浏览器里的 3D 效果 </li></ul><ul><li>-2011.3 月 WEBGL 公布 1.0 Spec.  虽然还比较初级, 但是已经得到了多个浏览器支持 .  </li></ul><ul><li>Google ...
多人在线的呢? How about multiplayer game?
WEBSOCKETS <ul><li>用来处理服务器和玩家的双向通讯 </li></ul>
NODE.JS <ul><li>服务器端的 Javasript 解释器 </li></ul><ul><li>高并发  低消耗 </li></ul>
手机上能用么? Does it work in mobile?
没问题!  No problem!  <ul><li>IOS + Android .. + WP7? </li></ul>
 
但  HTML5 手机游戏面临挑战 Still. mobile HTML5 game faces challeange
<ul><li><audio>  在手机上的问题比较大 </li></ul><ul><li><canvas> 的绘制速度偏慢,尤其在 iframe 中效率更低。 硬件加速并非所有硬件支持 </li></ul><ul><li>Android 适配...
问题总会被解决 <ul><li>机器的性能在飞速提升 </li></ul>Problem will be solved anyway,  just take a while
还有 impact js <ul><li>http://m.agame.com/game/Biolab+Disaster/en_US/index.html </li></ul>
作 HTML5 游戏有赚钱么 ? Does HTML5 game make money ?
有!但目前大多在手机游戏领域 <ul><li>在日本已经有不少手机 HTML5 游戏, 收入相当不错 </li></ul>Definitely YES,  but only in mobile right now
巨头们也在布局 http://www.warimals.com/
为什么先在手机游戏? <ul><li>兼容性  智能手机的兴起 </li></ul><ul><li>手机 HTML5 游戏的转换率高于下载游戏,体验简单 </li></ul><ul><li>用户对效果的预期并没有那么高, HTML5 游戏已经能...
HTML5  游戏的机遇 Opportunity
<ul><li>移动设备的生产量  2011 年超过 PC , 智能手机占绝对主流 </li></ul><ul><li>巨头的支持, 微软 Windows8 , Google, Apple, Facebook, Google + </li></...
HTML5 游戏在中国 <ul><li>HTML5 研究小组    游戏比赛  >> </li></ul><ul><li>更多的产品在孕育中 ... </li></ul>HTML5 games in China
Upcoming SlideShare
Loading in...5
×

Html5 games

2,205

Published on

html5 game for mobile

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,205
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
15
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 分两层意思 版本存在 bug , 一般来说需要重新 build 新的版本, 重新发布, 如果是移动平台,还需要重新审核, 发布。 既有用户如果不升级重新下载就会继续出现问题。那么在线版本就可以即时的来修改。 2 库存管理, 虚拟物品的购买是一个主流的方向,更新虚拟物品库存,增加新的物品, 在线版本能够做得更加灵活
  • 虽然在中国还得假以时日
  • 到这里, 你可能会有这样的想法。 那我的回答是 Yes and No
  • chrome 9 以上, firefox 4, safari 5.1 已经支持,但默认关闭 , IE 还没有,但是有 plugin 可以提供
  • 当然除了 websockets 属性之外,还有 Local storage 之类的新属性
  • 显然,它并不是十全十美的。
  • 问题总归会被逐步的解决, 引擎效率问题,现在有一些第三方的 js 框架,最有名的就 impact js
  • 巨头们也已经在布局。
  • Dextrose ,德国公司, 他们的 的 HTML5 引擎可以方便的构建这种建设类 策略类游戏, 自然,他被最善于这类游戏的巨头 zynga 收购, 目前的产品还没有出来,等待 facebook 的移动版本公布 2010 年下半年的时候, Warimal 这款游戏吸引了很多人的眼球,他是第一款上线 FACEBOOK 的 HTML5 游戏, 他的制作公司是 Rocket pack, 一家位于芬兰 赫尔辛基的公司。
  • Html5 games

    1. 1. HTML5 游戏之路 <ul><li>Ready to go? HTML5 Games </li></ul>
    2. 2. HTML5 给游戏带来了什么 <ul><li>What does HTML5 bring to Games </li></ul>
    3. 3. HTML5 究竟是什么? <ul><li>新的标记语言, 拥有了很多新的 tag, 比如 <canvas>, <audio>, <video>, <article>, <nav> </li></ul>What HTML5 IS?
    4. 4. HTML5 究竟是什么? 现在我们说的广义 HTML5 ,通常还包括 CSS3 和 JavaScript engines What HTML5 IS?
    5. 5. 我们能用它来作什么? 先从 <canvas> 和 <audio> 说起 What we can do with these stuff?
    6. 6. Canvas 实现 2D 绘图、动画效果
    7. 7. <audio> 播放音频 背景声音、 音效、音量控制、 多通道 还是比较基础的 JavaScript API
    8. 8. Canvas + audio + js engine =? 能够干什么? 有例子么 ? 当然有 ... Got an example? Sure...
    9. 9. 经典的坦克大战 http://www.mhtml5.com/games/tank/ Classic Tank game
    10. 10. 射击游戏 http://dougx.net/plunder/plunder.html Shooting game
    11. 11. WHY COOL ?
    12. 12. WRITE ONCE USE ANYWHERE
    13. 13. <ul><li>Saving time with development and Testing </li></ul>
    14. 14. <ul><li>轻量级 </li></ul><ul><li>Lightweight </li></ul><ul><li>Text, Image, CSS, JS </li></ul>
    15. 15. <ul><li>优化游戏运营 提高效率 </li></ul>Optimize game operation Improve efficiency
    16. 16. 有多少支持 HTML5 的浏览器了? How many browsers support HTML5?
    17. 17. 还有 ... And...Umm
    18. 18. 终于 ... 鼓掌! Finally ... Applause !
    19. 19. 性能一定不行吧 ... 也许你会想 You may think Performance sucks . right?
    20. 20. CANVAS 在桌面端性能相当好 <ul><li>Chrome 、 IE9 支持图形硬件加速。 Safari, firefox 部分支持 </li></ul>CANVAS works pretty well in desktop/laptop
    21. 21. “ 相当好”的定义是 ? <ul><li>如果你要作 Tiny wing, Angry bird, 超级马里奥, 可以跑到 FPS 60 </li></ul>How good is pretty good?
    22. 22. 那物理引擎怎么办? <ul><li>canvas 只管画图 </li></ul>How about physics engine?
    23. 23. 拥抱开放 第三方的引擎 Embrace open technoogy! 3rd party engines
    24. 24. <ul><ul><li>BOX 2D 已经用在了 Angry bird 的 HTML5 版本上 http://chrome.angrybirds.com/ </li></ul></ul><ul><ul><li>JPE http://colorhook.com/portfolio/jpe/examples/CarDemo/CarDemo.html http://colorhook.com/portfolio/jpe/examples/RobotDemo/RobotDemo.html </li></ul></ul>
    25. 25. 还有更多的 JS engine <ul><li>crafty </li></ul><ul><li>isogenic 建设类 </li></ul><ul><li>Gameclosure 开发中 </li></ul>
    26. 26. 3D 的场景怎么办? How about 3D?
    27. 27. <ul><li>- 浏览器里的 3D 效果 </li></ul><ul><li>-2011.3 月 WEBGL 公布 1.0 Spec. 虽然还比较初级, 但是已经得到了多个浏览器支持 . </li></ul><ul><li>Google 已经 Port 了 QUAKE II 到 WEBGL. </li></ul>
    28. 28. 多人在线的呢? How about multiplayer game?
    29. 29. WEBSOCKETS <ul><li>用来处理服务器和玩家的双向通讯 </li></ul>
    30. 30. NODE.JS <ul><li>服务器端的 Javasript 解释器 </li></ul><ul><li>高并发 低消耗 </li></ul>
    31. 31. 手机上能用么? Does it work in mobile?
    32. 32. 没问题! No problem! <ul><li>IOS + Android .. + WP7? </li></ul>
    33. 34. 但 HTML5 手机游戏面临挑战 Still. mobile HTML5 game faces challeange
    34. 35. <ul><li><audio> 在手机上的问题比较大 </li></ul><ul><li><canvas> 的绘制速度偏慢,尤其在 iframe 中效率更低。 硬件加速并非所有硬件支持 </li></ul><ul><li>Android 适配问题 </li></ul><ul><li>Javasript 引擎的速度,物理类 </li></ul>
    35. 36. 问题总会被解决 <ul><li>机器的性能在飞速提升 </li></ul>Problem will be solved anyway, just take a while
    36. 37. 还有 impact js <ul><li>http://m.agame.com/game/Biolab+Disaster/en_US/index.html </li></ul>
    37. 38. 作 HTML5 游戏有赚钱么 ? Does HTML5 game make money ?
    38. 39. 有!但目前大多在手机游戏领域 <ul><li>在日本已经有不少手机 HTML5 游戏, 收入相当不错 </li></ul>Definitely YES, but only in mobile right now
    39. 40. 巨头们也在布局 http://www.warimals.com/
    40. 41. 为什么先在手机游戏? <ul><li>兼容性 智能手机的兴起 </li></ul><ul><li>手机 HTML5 游戏的转换率高于下载游戏,体验简单 </li></ul><ul><li>用户对效果的预期并没有那么高, HTML5 游戏已经能实现不错的效果 </li></ul><ul><li>社交游戏, ARPU 高 </li></ul>Why mobile?
    41. 42. HTML5 游戏的机遇 Opportunity
    42. 43. <ul><li>移动设备的生产量 2011 年超过 PC , 智能手机占绝对主流 </li></ul><ul><li>巨头的支持, 微软 Windows8 , Google, Apple, Facebook, Google + </li></ul><ul><li>社交游戏的盛行 </li></ul><ul><li>手机硬件和浏览器开放更多 API </li></ul><ul><li>更灵活的市场渠道 browser based, apk,app... </li></ul>
    43. 44. HTML5 游戏在中国 <ul><li>HTML5 研究小组 游戏比赛 >> </li></ul><ul><li>更多的产品在孕育中 ... </li></ul>HTML5 games in China
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×