Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html5 games

2,431 views

Published on

html5 game for mobile

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

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

×