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