hello html5 games
DESCRIPTION
Introduction to Html5 Games Development by Tie Jun.TRANSCRIPT
Hello,HTML5 [email protected]
大纲
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
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