《HTML5 2D游戏编程核心技术》——第1章,第1.2节HTML5游戏开发最佳实践-阿里云开发者社区

开发者社区> 华章计算机> 正文

《HTML5 2D游戏编程核心技术》——第1章,第1.2节HTML5游戏开发最佳实践

简介: 本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第1章,第1.2节HTML5游戏开发最佳实践,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。 1.2 HTML5游戏开发最佳实践 我们将在本书中持续地讨论一些关于游戏开发的最佳实践,首先介绍7个与HTML5有关的实践。
+关注继续查看

本节书摘来自华章出版社《HTML5 2D游戏编程核心技术》一书中的第1章,第1.2节HTML5游戏开发最佳实践,作者[美] 戴维·吉尔里,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

1.2 HTML5游戏开发最佳实践

我们将在本书中持续地讨论一些关于游戏开发的最佳实践,首先介绍7个与HTML5有关的实践。
1)窗口失去焦点时暂停游戏。
2)窗口重新获得焦点时实现倒计时。
3)使用CSS实现UI特效。
4)对于运行缓慢的游戏做出检测和处理。
5)添加社交功能。
6)把所有的游戏图像放在单独的Sprite表单中。
7)在服务器中存储高分榜和实时游戏数据。
在接下来的章节中,我们将详细地讨论上面提到的最佳实践。本节先通过快速浏览这些实践来介绍Snail Bait游戏的特点。

1.2.1 窗口失去焦点时暂停游戏
在浏览器中运行HTML5游戏时,如果将焦点改变到另一个标签页或浏览器窗口上,那么大部分浏览器都会降低游戏动画运行的帧频,以便节约CPU和电池的开销。因为在窗口或者标签页上浪费不可见的资源是没有必要的。
帧速率锁定破坏了大多数的碰撞检测算法,因为这些算法会在游戏绘制每一个动画帧时检测碰撞。如果在两个动画帧之间花费太长时间,sprite对象会越过彼此而没有碰撞检测。为了避免这种帧速率锁定导致的碰撞检测崩溃,必须在窗口失去焦点时暂停游戏。
如图1.5所示,当Snail Bait游戏暂停时,它会显示一个提示信息,让玩家知道游戏暂停。


b7d3d976e7cf17dd3b1f275a0d7d7c4be9e0b4e8

图1.5 Snail Bait暂停
暂停不仅仅是停止游戏
当一个暂停的游戏恢复运行时,所有状态必须和游戏暂停时的状态相同。例如在图1.5中,当比赛恢复时,跑步小人必须在游戏暂停时所在的位置继续跳跃。
除了暂停和恢复游戏之外,还必须要冻结和解冻游戏,确保在游戏恢复时有一个平滑的转换。我们将在第4章详细地讨论暂停游戏。
提示信息(toast)
toast原意是指举起酒杯为人的健康干杯,这里是指短时间内向玩家显示游戏信息。如图1.5所示,toast可以是简单的文本,也可以显示传统对话框,如图1.8所示。
1.2.2 窗口重获焦点时实现倒计时功能
当窗口重新获取焦点时,应该给玩家几秒钟准备重新开始游戏。Snail Bait游戏在窗口重新获取焦点时,提供了3秒钟的倒计时准备时间,如图1.6所示。


4c10a24ba870f9149f525bff7ef2a3e48ffde1af

图1.6 Snail Bait在窗口重新获取焦点时的倒计时
1.2.3 使用CSS实现UI特效
图1.7显示了游戏加载后短时间内的截图。
重点注意图1.7中的两个物体。第一,显示了包含简单文字的提示信息。这个提示信息在游戏加载时淡入,5秒后淡出。


8f05e5a72bdad9551277e9a22d8d557a9311344d

图1.7 Snail Bait游戏中的提示信息
第二,如图1.7所示,在游戏开始时,canvas下面的复选框(控制声音和音乐)和说明文字(讲述哪些按键有哪些功能)是不透明的,而游戏顶部的生命提示符和分数板是半透明的。当游戏提示信息渐渐消失时,透明度发生反转;生命提示符和分数板变得不透明,而复选框和说明文字变得几乎完全透明,如图1.6所示。
Snail Bait游戏使用CSS3渐变属性来实现元素的淡化显示及提示板的淡入淡出效果。
聚焦当前重要的事件
当Snail Bait游戏开始时,canvas下面的介绍是不透明的,而canvas上面的生命提示符和分数板是半透明的。过一会之后,它们的不透明度会发生变化;canvas上面的元素会变得完全不透明,而canvas下面的元素变得半透明。
Snail Bait游戏之所以会具有如此复杂的操作,与当前关注的重点是什么有密切关系。初始化时,玩家会关注游戏下面的说明文字;而游戏一旦开始后,玩家将更加关注他们的得分情况以及剩余生命的数量。

1.2.4 对游戏运行缓慢的状态做出检测和处理
与控制台游戏运行在受控环境中不同,HTML5游戏运行在一个高度变化且不可预测的混乱环境中。玩家的某些操作可以直接影响到系统的性能,例如,在另一个浏览器标签页或窗口中播放YouTube视频。另外,一些其他性能杀手,例如玩家并不了解的在系统后台运行的进程,也可能轻松地使HTML5游戏变得运行缓慢,甚至变得不可玩。还有一种可能是玩家使用了不能保障游戏正常运行的浏览器。
作为HTML5游戏开发人员,必须要监测帧速率,当它降低到某个影响运行的阈值时做出处理。当Snail Bait游戏检测到最后10帧动画速率低于40帧每秒(fps)时,它会显示游戏运行缓慢的通知信息如图1.8所示。


889791a5a1966fb740527d0385017b149417a553

图1.8
1.2.5 添加社交功能
许多现代游戏融合了社交功能,例如,将游戏分数发布到Twitter或者Facebook上。当Snail Bait游戏玩家点击游戏底部(如图1.4所示)的Tweet my score链接时,Snail Bait游戏会在另一个浏览器标签页上创建一个发布分数的推特交互窗口,如图1.9所示。

ed1a06b524825a6019cf87b326d435ddc3d47995

1.2.6 将所有游戏图像放在单独的sprite表单中
开发人员可以通过做很多事情使HTML5游戏(或者任何HTML5应用)加载得更快,但是最有效的办法是减少向服务器发送HTTP请求的次数。一种实现该方法的途径是将所有游戏图像放到一个单独的图像里,这个单独的图像被称为sprite表单(sprite sheet)。图1.10显示了Snail Bait游戏的sprite表单。
图1.10 Snail Bait游戏的sprite表单(灰色背景是透明的)


f9886edc0b68571cec686378e9d6711d3556f133

Snail Bait游戏的sprite表单
当Snail Bait游戏绘制sprite对象时,它会从sprite表单中复制对象到canvas中。
移动设备上的sprite表单
一些移动设备的内存空间限制了图像文件的大小,如果sprite表单太大,则需要将它分成多个文件。这样游戏的加载将会变得缓慢,但是总比没有加载上要好很多。

1.2.7 在服务器中存储高分榜和实时游戏数据
大多数游戏会因为各种原因同服务器进行交互。Snail Bait游戏在服务器中存储高分榜数据,并在游戏进行时发送游戏数据。Snail Bait游戏未使用任何第三方图像架构;但它使用了两个JavaScript架构——Node.js和socket.io,用来实现玩家电脑和服务器的信息交互。第19章介绍了更详细的信息。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Elasticsearch-doc基本操作
document是es中比较重要的一个概念,相当于数据库中的行数据,es可以对document进行操作,主要包括新增doc、删除doc、更新doc、更新doc的某个部分等。
4 0
案例分享——华媒传播|学习笔记
快速学习 案例分享——华媒传播
3 0
阿里云云存储(OSS\TableStore\NAS )+CDN 产品: 更快速,更低成本|学习笔记
快速学习 阿里云云存储(OSS\TableStore\NAS )+CDN 产品:更快速,更低成本
5 0
linux相关文件配置
linux相关文件配置记录
10 0
阿里云视频服务|学习笔记
快速学习 阿里云视频服务
5 0
阿里云数据库:帮用户承担一切数据库风险|学习笔记
快速学习 阿里云数据库:帮用户承担一切数据库风险
4 0
案例分享——趣拍|学习笔记
快速学习 案例分享——趣拍
6 0
声明式事务讲解| 学习笔记
快速学习声明式事务讲解
6 0
阿里云智能制造解决方案:从中国制造到中国智造|学习笔记
快速学习 阿里云智能制造解决方案:从中国制造到中国智造
3 0
案例分享——钉钉|学习笔记
快速学习 案例分享——钉钉
8 0
10059
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载