狠狠撸

Hello,HTML5 Games
tiejun@taobao.com
2011-12-25

大纲

? web游戏开发技术、方案、思路
? 基于canvas的游戏开发
? 举例圣诞游戏
? 附录

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

Web游戏应用
3 Dreams of Black

Web游戏应用
Nissan: StageJUK3D

2D Web游戏技术选择
? Flash - 相对成熟（for us：难控制，部署调试成本高）
? DOM - 事件处理，兼容，动画
? Canvas -多动画，标准的api
? SVG - 矢量，事件

游戏就是一个世界

? 世界中恒定不变的增量 — 时间
? 世界中的物体 — 对象
? 世界中恒定的规律 — 自然科学

基于Canvas的游戏开发
1.兼容
1. VML —— explorercanvas ：兼容性不好
2. Silverlight —— slcanvas ： Original Silverlight bridge
3. Flash —— flashcanvas ： faster，有一些bug，性能问题
4. DOM —— domcanvas ： simple api，png24 low

2.难点
1. event
1. 原生不支持多按键按下
2. 事件触发频率~130 > 30 fps
3. 鼠标事件判断
solution:
1. 记录事件
2. 缓存事件，重绘时触发
3. 逻辑交叉判断

2. time
1. 频率间隔不准
2. 浏览器的单线程
solution：
1. 基于时间而非帧频
2. requestFrame

2.难点
3. layer
1. 不支持图层概念，canvas无法嵌套
solution:
1. 逻辑上实现
2. 多canvas

4. performance
1. 加载性能
2. 执行性能
solution:
1. 分级加载
2. 预渲染
3. 区域重绘
4. 分层渲染
5. requestAnimationFrame
6. tips...

3.framework/engine
1. Impact
2. GameJs
3. CraftyJs
4. LimeJs
5. Isogenic Engine
6. ....

方案&架构

方案选择：

1. flash —— no flash developer
2. dom + flash —— rorate not easly
3. canvas

1. 非大型活动
2. 方案上能实现

JUST TRY！

Engine 设计

GameObject
ImageObject
AnimObject

GameManager Resource
Methods: Events: onload
addGameObject Properties：
removeGameObject images
render
draw
events

App 层

App Manager

Tree Player
晃动控制

Gift Info
旋转，物理倒计时、得分

App Manager：初始化引擎，加载资源，管理游戏对象，游戏逻辑

附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/

附2：资料
? https://gaming.mozillalabs.com/games/
? http://www.canvasdemos.com/
? http://html5games.com/
? http://10k.aneventapart.com/

附3：flashCanvas 问题
?normal：
1. 图片宽度不能超过2000px
2. 渲染文字不能在最后
3. 无法load简单外部图片
?normal & Pro 1.5：
1. stroke bug
2. load 外部图片性能(重复加载)

狠狠撸

Hello Html5 Games

More Related Content

Hello Html5 Games