我们将在本书中持续地讨论一些关于游戏开发的最佳实践,首先介绍7个与HTML5有关的实践。1)窗口失去焦点时暂停游戏。2)窗口重新获得焦点时实现倒计时。3)使用CSS实现UI特效。4)对于运行缓慢的游戏做出检测和处理。5)添加社交功能。6)把所有的游戏图像放在单独的Sprite表单中。7)在服务器中存储高分榜和实时游戏数据。在接下来的章节中,我们将详细地讨论上面提到的最佳实践。本节先通过快速浏览这些实践来介绍Snail Bait游戏的特点。
1.2.1 窗口失去焦点时暂停游戏在浏览器中运行HTML5游戏时,如果将焦点改变到另一个标签页或浏览器窗口上,那么大部分浏览器都会降低游戏动画运行的帧频,以便节约CPU和电池的开销。因为在窗口或者标签页上浪费不可见的资源是没有必要的。帧速率锁定破坏了大多数的碰撞检测算法,因为这些算法会在游戏绘制每一个动画帧时检测碰撞。如果在两个动画帧之间花费太长时间,sprite对象会越过彼此而没有碰撞检测。为了避免这种帧速率锁定导致的碰撞检测崩溃,必须在窗口失去焦点时暂停游戏。如图1.5所示,当Snail Bait游戏暂停时,它会显示一个提示信息,让玩家知道游戏暂停。
图1.5 Snail Bait暂停 暂停不仅仅是停止游戏 当一个暂停的游戏恢复运行时,所有状态必须和游戏暂停时的状态相同。例如在图1.5中,当比赛恢复时,跑步小人必须在游戏暂停时所在的位置继续跳跃。 除了暂停和恢复游戏之外,还必须要冻结和解冻游戏,确保在游戏恢复时有一个平滑的转换。我们将在第4章详细地讨论暂停游戏。 提示信息(toast) toast原意是指举起酒杯为人的健康干杯,这里是指短时间内向玩家显示游戏信息。如图1.5所示,toast可以是简单的文本,也可以显示传统对话框,如图1.8所示。 1.2.2 窗口重获焦点时实现倒计时功能 当窗口重新获取焦点时,应该给玩家几秒钟准备重新开始游戏。Snail Bait游戏在窗口重新获取焦点时,提供了3秒钟的倒计时准备时间,如图1.6所示。 图1.6 Snail Bait在窗口重新获取焦点时的倒计时 1.2.3 使用CSS实现UI特效 图1.7显示了游戏加载后短时间内的截图。 重点注意图1.7中的两个物体。第一,显示了包含简单文字的提示信息。这个提示信息在游戏加载时淡入,5秒后淡出。 图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所示。
图1.8 1.2.5 添加社交功能 许多现代游戏融合了社交功能,例如,将游戏分数发布到Twitter或者Facebook上。当Snail Bait游戏玩家点击游戏底部(如图1.4所示)的Tweet my score链接时,Snail Bait游戏会在另一个浏览器标签页上创建一个发布分数的推特交互窗口,如图1.9所示。1.2.6 将所有游戏图像放在单独的sprite表单中开发人员可以通过做很多事情使HTML5游戏(或者任何HTML5应用)加载得更快,但是最有效的办法是减少向服务器发送HTTP请求的次数。一种实现该方法的途径是将所有游戏图像放到一个单独的图像里,这个单独的图像被称为sprite表单(sprite sheet)。图1.10显示了Snail Bait游戏的sprite表单。图1.10 Snail Bait游戏的sprite表单(灰色背景是透明的)
Snail Bait游戏的sprite表单 当Snail Bait游戏绘制sprite对象时,它会从sprite表单中复制对象到canvas中。 移动设备上的sprite表单 一些移动设备的内存空间限制了图像文件的大小,如果sprite表单太大,则需要将它分成多个文件。这样游戏的加载将会变得缓慢,但是总比没有加载上要好很多。1.2.7 在服务器中存储高分榜和实时游戏数据大多数游戏会因为各种原因同服务器进行交互。Snail Bait游戏在服务器中存储高分榜数据,并在游戏进行时发送游戏数据。Snail Bait游戏未使用任何第三方图像架构;但它使用了两个JavaScript架构——Node.js和socket.io,用来实现玩家电脑和服务器的信息交互。第19章介绍了更详细的信息。
相关资源:html5游戏编程核心技术与实战_源代码