HTML5游戏开发实例分享-百度PPT学习课件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
uorui@ 12/16/2010
我是IE9
图像版权归CAPCOM公司所有。
我是Chrome8
2020/2/26
1
目录
• HTML5简介 • 使用HTML5技术开发游戏
图像版权归CAPCOM公司所有。
• 总结与展望
• Q&A
2020/2/26
5
HTML5能做些什么？
• 有如此多的新功能，应该做点什么了。 • 取代JS验证的表单？
用更语义化的标签构建页面？ 还是实现一个即时聊天工具？ • 嗯……似乎还不够激动人心。
那么，使用canvas和audio做游戏吧！
2020/2/26
6
使用HTML5技术开发游戏
• 可行性研究。 • 工欲善其事必先利其器。 • 游戏系统结构。 • 游戏细节的把握。 • Canvas的效率和兼容性。 • Audio的效率和兼容性。 • 游戏优化。 • 存在的问题。
14
工欲善其事必先利其器
• 动作游戏的核心在于各种精灵的动作。 • 需要一种工具，能够方便的创建，编辑，
精灵所需要的帧与动作。 • 在写游戏之前，必须完成基础设施建设。
为此开发了SpriteEditor工具，纯JS开发，利 用data URI scheme 和图片另存为功能保存 jsonp格式的精灵配置文件。
2020/2/26
Intel Core i7 1.6 GHz to 3.33 GHz
13
60FPS VS 30FPS
• 显而易见，60FPS 比 30FPS更有表现力，视 觉感受更流畅。
• CPS1的帧频是60FPS，要提高仿真度，帧频 必须达到60。
• 带来的问题是对性能的苛刻要求。
2020/2/26
9
Knights of the Round 圆桌骑士
• 圆桌骑士（knights of the round）是由 CAPCOM公司于1991年推出的一款动作游戏， 对应游戏平台为街机，游戏基板为CPS1。
• 游戏操控性上，圆桌骑士也更为注重一招 一式地砍杀感觉，那种刀碰铠甲的感觉相 当曼妙。
2020/2/26
Resource Loader
入口
Base
18
游戏细节的把握
• 每一个像素，每一帧，每个动作都力求与 原作一致。
• 使用Winkawaks模拟器的截图工厂，配合 Fireworks图形处理，以及SpriteEditor工具， 打造出完美的游戏角色。
• 同样使用Winkawaks的音频录制功能，配合 Goldwave音频处理软件，保持原汁原味。
• Chrome开发版开启硬件加速反而变慢了。
2020/2/26
20
Canvas的效率与兼容性
• 比较杯具的是canvas同样存在兼容问题。 • 例如：
IE9 beta还不支持globalCompositeOperation 其他浏览器的globalCompositeOperation 效 果也不是完全一致。 Opera的save和restore与其他浏览器不一致。 • IE9不支持canvas的toDataURL方法，如果调 用会导致浏览器崩溃。
并将资源转向HTML。 • 现在，标准专家们正把所有令人兴奋的、新
的Web技术都塞进HTML5中。
2020/2/26
4
HTML5有哪些优点和新特性？
• 减少了对外部插件的需求 (Flash / SilverLight) • 更优秀的错误处理。 • 更多取代脚本的标记，新元素和表单控件。 • 用于绘画的canvas元素。 • 用于媒体回放的video和audio元素。 • 对本地离线存储更好的支持。 • Web Messaging，Web Workers，Web Socket • ……
Command Manager
Info Manager
Managers
Scroll Manager
Characters
Effects
Render Manager
Stage Manger
Character
2020/2/26
Sprite
Game Driver
Resource Data
Game Controller
2020/2/26
21
Canvas的效率与兼容性
10
Knights of the Round 圆桌骑士
2020/2/26
11
模拟器 VS 手工复刻
• 用JS制作CPS1模拟器？
– ROM解码 – 68000汇编 – ……还是算了吧，弄不来。
• 纯手工复刻？
– 这个比较可行……
2020/2/26
12
10MHz VS 3GHz
CPS1's Motorola 68000 (@ 10 MHz) CPU and graphics IC
2020/2/26
19
Canvas的效率与兼容性
• Canvas渲染的效率很不错，在Chrome里分 辨率384*224轻松跑到200帧以上。不过拉 伸后效率下降较严重。
• 值得一提的是IE9，得益于强大的硬件加速， 即使放大10倍以上，帧率也不低于60。相 比之下其他浏览器惨不忍睹，帧数不到两 位数。
2020/2/26
15
SpriteEditor
2020/2/26
16
游戏系统结构
游戏状态 信息
更新 信息
信息
渲染器
仿真器 行动
控制器
典型游戏软件系统结构图
2020/2/26
17
圆桌骑士DEMO系统结构
…… Soldier Lancelot
…… Info Effect
Sound Manager
Sprite Manager
2020/2/26
2
HTML5简介
• 什么是HTML5？ • HTML5有哪些优点和新特性？ • HTML5能做些什么？
2020/2/26
3
什么是HTML5？
• HTML5是XHTML宣告失败后的新宠儿。 • 2006年，W3C承认他们在期待HTML迁移到
XML方面过于乐观。 • 2009年，W3C停止了关于XHTML2.0的工作，
2020/2/26
7
可行性研究
• 俄罗斯方块，吃豆子还是别的什么? • Knights of the Round 圆桌骑士。 • 模拟器 VS 手工复刻。 • 10MHz VS 3GHz • 60FPS VS 30FPS
2020/2/26
8
俄罗斯方块，吃豆子还是别的什么?
WOW! 真酷！
2020/2/26
我是IE9
图像版权归CAPCOM公司所有。
我是Chrome8
2020/2/26
1
目录
• HTML5简介 • 使用HTML5技术开发游戏
图像版权归CAPCOM公司所有。
• 总结与展望
• Q&A
2020/2/26
5
HTML5能做些什么？
• 有如此多的新功能，应该做点什么了。 • 取代JS验证的表单？
用更语义化的标签构建页面？ 还是实现一个即时聊天工具？ • 嗯……似乎还不够激动人心。
那么，使用canvas和audio做游戏吧！
2020/2/26
6
使用HTML5技术开发游戏
• 可行性研究。 • 工欲善其事必先利其器。 • 游戏系统结构。 • 游戏细节的把握。 • Canvas的效率和兼容性。 • Audio的效率和兼容性。 • 游戏优化。 • 存在的问题。
14
工欲善其事必先利其器
• 动作游戏的核心在于各种精灵的动作。 • 需要一种工具，能够方便的创建，编辑，
精灵所需要的帧与动作。 • 在写游戏之前，必须完成基础设施建设。
为此开发了SpriteEditor工具，纯JS开发，利 用data URI scheme 和图片另存为功能保存 jsonp格式的精灵配置文件。
2020/2/26
Intel Core i7 1.6 GHz to 3.33 GHz
13
60FPS VS 30FPS
• 显而易见，60FPS 比 30FPS更有表现力，视 觉感受更流畅。
• CPS1的帧频是60FPS，要提高仿真度，帧频 必须达到60。
• 带来的问题是对性能的苛刻要求。
2020/2/26
9
Knights of the Round 圆桌骑士
• 圆桌骑士（knights of the round）是由 CAPCOM公司于1991年推出的一款动作游戏， 对应游戏平台为街机，游戏基板为CPS1。
• 游戏操控性上，圆桌骑士也更为注重一招 一式地砍杀感觉，那种刀碰铠甲的感觉相 当曼妙。
2020/2/26
Resource Loader
入口
Base
18
游戏细节的把握
• 每一个像素，每一帧，每个动作都力求与 原作一致。
• 使用Winkawaks模拟器的截图工厂，配合 Fireworks图形处理，以及SpriteEditor工具， 打造出完美的游戏角色。
• 同样使用Winkawaks的音频录制功能，配合 Goldwave音频处理软件，保持原汁原味。
• Chrome开发版开启硬件加速反而变慢了。
2020/2/26
20
Canvas的效率与兼容性
• 比较杯具的是canvas同样存在兼容问题。 • 例如：
IE9 beta还不支持globalCompositeOperation 其他浏览器的globalCompositeOperation 效 果也不是完全一致。 Opera的save和restore与其他浏览器不一致。 • IE9不支持canvas的toDataURL方法，如果调 用会导致浏览器崩溃。
并将资源转向HTML。 • 现在，标准专家们正把所有令人兴奋的、新
的Web技术都塞进HTML5中。
2020/2/26
4
HTML5有哪些优点和新特性？
• 减少了对外部插件的需求 (Flash / SilverLight) • 更优秀的错误处理。 • 更多取代脚本的标记，新元素和表单控件。 • 用于绘画的canvas元素。 • 用于媒体回放的video和audio元素。 • 对本地离线存储更好的支持。 • Web Messaging，Web Workers，Web Socket • ……
Command Manager
Info Manager
Managers
Scroll Manager
Characters
Effects
Render Manager
Stage Manger
Character
2020/2/26
Sprite
Game Driver
Resource Data
Game Controller
2020/2/26
21
Canvas的效率与兼容性
10
Knights of the Round 圆桌骑士
2020/2/26
11
模拟器 VS 手工复刻
• 用JS制作CPS1模拟器？
– ROM解码 – 68000汇编 – ……还是算了吧，弄不来。
• 纯手工复刻？
– 这个比较可行……
2020/2/26
12
10MHz VS 3GHz
CPS1's Motorola 68000 (@ 10 MHz) CPU and graphics IC
2020/2/26
19
Canvas的效率与兼容性
• Canvas渲染的效率很不错，在Chrome里分 辨率384*224轻松跑到200帧以上。不过拉 伸后效率下降较严重。
• 值得一提的是IE9，得益于强大的硬件加速， 即使放大10倍以上，帧率也不低于60。相 比之下其他浏览器惨不忍睹，帧数不到两 位数。
2020/2/26
15
SpriteEditor
2020/2/26
16
游戏系统结构
游戏状态 信息
更新 信息
信息
渲染器
仿真器 行动
控制器
典型游戏软件系统结构图
2020/2/26
17
圆桌骑士DEMO系统结构
…… Soldier Lancelot
…… Info Effect
Sound Manager
Sprite Manager
2020/2/26
2
HTML5简介
• 什么是HTML5？ • HTML5有哪些优点和新特性？ • HTML5能做些什么？
2020/2/26
3
什么是HTML5？
• HTML5是XHTML宣告失败后的新宠儿。 • 2006年，W3C承认他们在期待HTML迁移到
XML方面过于乐观。 • 2009年，W3C停止了关于XHTML2.0的工作，
2020/2/26
7
可行性研究
• 俄罗斯方块，吃豆子还是别的什么? • Knights of the Round 圆桌骑士。 • 模拟器 VS 手工复刻。 • 10MHz VS 3GHz • 60FPS VS 30FPS
2020/2/26
8
俄罗斯方块，吃豆子还是别的什么?
WOW! 真酷！
2020/2/26