Hello Html5 Games

Hello,HTML5 Gamestiejun@taobao.com2011-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 游戏应用helloracer

Web 游戏应用Nissan: StageJUK3D

2D Web 游戏技术选择 Flash - 相对成熟（ for us ：难控制，部署调试成本高）

DOM - 事件处理，兼容，动画 Canvas - 多动画，标准的 api SVG - 矢量，事件

游戏就是一个世界

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

基于 Canvas 的游戏开发

1. 兼容1. VML —— explorercanvas ： 兼容性不好2. Silverlight —— slcanvas ： Original Silverlight bridge3. Flash —— flashcanvas ： faster ，有一些 bug ，性能问题4. DOM —— domcanvas ： simple api ， png24 low

基于 Canvas 的游戏开发

2. 难点1. event

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

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

基于 Canvas 的游戏开发

2. 难点3. layer

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

4. performance4. 加载性能 5. 执行性能solution:6. 分级加载7. 预渲染8. 区域重绘9. 分层渲染10. requestAnimationFrame11. tips...

基于 Canvas 的游戏开发

3.framework/engine

1. Impact2. GameJs3. CraftyJs4. LimeJs5. Isogenic Engine6. ....

例子：圣诞游戏

方案 & 架构

方案选择：

1. flash —— no flash developer2. dom + flash —— rorate not easly3. canvas

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

JUST TRY ！

Engine 设计

GameObjectImageObjectAnimObject

GameManagerMethods:addGameObjectremoveGameObjectrenderdrawevents

ResourceEvents: onloadProperties ：images

App 层

App Manager

Tree晃动

Gift旋转，物理

Info倒计时、得分

Player控制

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

• Foundation.HTML5.Canvas.For.Games.and.Entertainment.pdf

• HTML5 Games Development by Example.pdf• https://

github.com/bebraw/jswiki/wiki/Game-Engines• http://sourceforge.net/projects/box2d-js/

附 1 ：资料

• https://gaming.mozillalabs.com/games/• http://www.canvasdemos.com/• http://html5games.com/• http://10k.aneventapart.com/

附 2 ：资料

normal ：1. 图片宽度不能超过 2000px2. 渲染文字不能在最后3. 无法 load 简单外部图片

normal & Pro 1.5 ：1. stroke bug2. load 外部图片性能 ( 重复加载 )

附 3 ： flashCanvas 问题

End ,Thx