More Related Content Similar to Hello Html5 Games (20) Hello Html5 Games2. 大纲
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
7. 2D Web游戏技术选择
Flash - 相对成熟(for us:难控制,部署调试成本高)
DOM - 事件处理,兼容,动画
Canvas -多动画,标准的api
SVG - 矢量,事件
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...
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:初始化引擎,加载资源,管理游戏对象,游戏逻辑
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 外部图片性能(重复加载)