Hello Html5 Games

1,262 views

Published on

Introduction to Html5 Games Development by Tie Jun.

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,262
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hello Html5 Games

  1. 1. Hello,HTML5 Games tiejun@taobao.com 2011-12-25
  2. 2. 大纲 web游戏开发技术、方案、思路 基于canvas的游戏开发 举例圣诞游戏 附录
  3. 3. Web 游戏开发技术 2D:  Flash  DOM based Games  Canvas based Games (ie9)  SVG based Games (ie9) 3D:  WebGL based Games (ff4,ch9)  Flash 11(stage3D) Games  Unity Games
  4. 4. Web游戏应用3 Dreams of Black
  5. 5. Web游戏应用helloracer
  6. 6. Web游戏应用Nissan: StageJUK3D
  7. 7. 2D Web游戏技术选择 Flash - 相对成熟(for us:难控制,部署调试成本高) DOM - 事件处理,兼容,动画 Canvas -多动画,标准的api SVG - 矢量,事件
  8. 8. 游戏就是一个世界 世界中恒定不变的增量 — 时间 世界中的物体 — 对象 世界中恒定的规律 — 自然科学
  9. 9. 基于Canvas的游戏开发1.兼容1. VML —— explorercanvas : 兼容性不好2. Silverlight —— slcanvas : Original Silverlight bridge3. Flash —— flashcanvas : faster,有一些bug,性能问题4. DOM —— domcanvas : simple api,png24 low
  10. 10. 基于Canvas的游戏开发2.难点 1. event 1. 原生不支持多按键按下 2. 事件触发频率~130 > 30 fps 3. 鼠标事件判断 solution: 1. 记录事件 2. 缓存事件,重绘时触发 3. 逻辑交叉判断 2. time 1. 频率间隔不准 2. 浏览器的单线程 solution: 1. 基于时间而非帧频 2. requestFrame
  11. 11. 基于Canvas的游戏开发2.难点 3. layer 1. 不支持图层概念,canvas无法嵌套 solution: 1. 逻辑上实现 2. 多canvas 4. performance 1. 加载性能 2. 执行性能 solution: 1. 分级加载 2. 预渲染 3. 区域重绘 4. 分层渲染 5. requestAnimationFrame 6. tips...
  12. 12. 基于Canvas的游戏开发3.framework/engine 1. Impact 2. GameJs 3. CraftyJs 4. LimeJs 5. Isogenic Engine 6. ....
  13. 13. 例子:圣诞游戏
  14. 14. 方案&架构方案选择: 1. flash —— no flash developer 2. dom + flash —— rorate not easly 3. canvas 1. 非大型活动 2. 方案上能实现 JUST TRY!
  15. 15. Engine 设计 GameObject ImageObject AnimObject GameManager Resource Methods: Events: onload addGameObject Properties: removeGameObject images render draw events
  16. 16. App 层 App Manager Tree Player 晃动 控制 Gift Info 旋转,物理 倒计时、得分App Manager:初始化引擎,加载资源,管理游戏对象,游戏逻辑
  17. 17. 附1:资料• Foundation.HTML5.Canvas.For.Games.and.Ent ertainment.pdf• HTML5 Games Development by Example.pdf• https://github.com/bebraw/jswiki/wiki/Game- Engines• http://sourceforge.net/projects/box2d-js/
  18. 18. 附2:资料• https://gaming.mozillalabs.com/games/• http://www.canvasdemos.com/• http://html5games.com/• http://10k.aneventapart.com/
  19. 19. 附3:flashCanvas 问题normal: 1. 图片宽度不能超过2000px 2. 渲染文字不能在最后 3. 无法load简单外部图片normal & Pro 1.5: 1. stroke bug 2. load 外部图片性能(重复加载)
  20. 20. End ,Thx

×