Introduction to Html5 Games Development by Tie Jun.

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 bridge
3. 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