Your SlideShare is downloading. ×
0
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Hello Html5 Games
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Hello Html5 Games

969

Published on

Introduction to Html5 Games Development by Tie Jun.

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
969
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×