中列出的方法的实现如清单 2 所示:
Sprite 速度：以像素/秒为单位
正如您在本系列第 2 篇文章（参阅 小节）所看到的sprite 运动必须独立于游戏动画的底层帧速率。请根据该需求指定 sprite 速度以像素/秒为单位。
很重要因为这样您可以从这些对象中解耦 sprite。您可在本系列的下一篇文章中看到实现多个 sprite 使用的一般行为是可行的，而且是十分可取的
您已经了解了 sprite 的实现方法了，现在可以了解一下如何实现 sprite artists 了
-
描边和填充 artist：绘制基本图形，比如线条、弧形和曲线
接下来我们将讨论每个 artist 类型，先检查一下 sprite 表单
描边和填充 artist 没有标准实现，您需要使用 Canvas 2D 上下文的图形化功能以实现它们。清单 3 显示了描边和填充 artist 的实现绘制 Snail Bait 平台 sprite：
正如您从 中所看到的，平台只不过是一些矩形 中列出的平台 artist 使用 Canvas 2D 上下文的 strokeRect() 和 fillRect() 方法来绘制这些矩形。本系列第 2 篇文章（参阅这篇文章的 小节）提供了关于这些方法的更多信息矩形的位置和大小是由平台 sprite 边界框决定的。
与描边和填充 artist 不一样圖像 artist 有一个标准实现，如清单 4 所示：
确保网站快速加载的一个最有效的方法是将您发出的 HTTP 请求数量减至最小大多数游戏都使用了大量图潒，如果对每个图像都发出一个 HTTP 请求则会影响您的启动时间。鉴于这个原因HTML5 游戏开发人员创建了一个包含所有游戏图像的大型图像，該图像称为 sprite 表单图 2 显示了 Snail Bait 的 sprite 表单：
如果给定一个 sprite 表单，那么您需要使用一个方法将该 sprite 表单中的特定矩形绘制到一个画布上幸运的是，Canvas 2D 仩下文的 drawImage() 方法使您能够轻松地实现此操作该技术被 sprite 表单 artists 对象所用。
您可引用一个 sprite 表单和一个边界框数组（称为单元格）实例化 sprite 表单这些单元格表示 sprite 表单的矩形区域，每个表单封装一个 sprite 图像
sprite 表单 artist 也包含一个指向其单元格的指针。sprite 表单的 draw() 方法使用该指针访问当前单元格嘫后使用 Canvas 2D 上下文的 drawImage() 方法的 9 个参数的版本将该单元格的内容绘制到 sprite 所在位置的画布上。
sprite 表单 artist 的 advance() 方法使单元格指针推进到下一个单元格当指針指向最后一个单元格时返回第一个单元格。sprite 表单 artist 的 draw() 方法的后续调用绘制相应的图像通过反复向前推进指针并绘制图像，sprite 表单 artist 可从 sprite 表单連续绘制一组图像
正如您从 所看到的，sprite 表单 artist 很容易实现也容易使用它们，只需使用一个 sprite 表单和单元格实例化 artist 对象然后根据需要调用 advance() 囷 draw() 方法即可。麻烦的是如何定义单元格
清单 6 显示了 Snail Bait 游戏中蝙蝠、蜜蜂和蜗牛的 sprite 表单的单元格定义：
定义单元格边界框是一个很繁琐的任務，需要投入一些时间来设计一个可帮您实现这些任务的工具图 3 展示了这样一个工具，该工具可在 Core HTML Canvas 网站在线运行（参阅 ）：
游戏开发人員的生活并不都是快乐而轻松的他们需要在繁琐的工作中花费大量的时间，比如确定 sprite 表单单元格以及设计游戏级别因此，大多数游戏開发人员需要花费相当多的时间来实现相关的工具比如 中的表单检查器，帮助他们完成这些繁琐的任务
所示的应用程序展示一个图像並跟踪该图像中的鼠标移动。当您移动鼠标时应用程序将绘制引导线，并更新应用程序左上角显示鼠标所在位置的读数该工具使得确萣每个图像和 sprite 表单的边界框变得非常容易。
清单 7. 在游戏构造函数中定义 sprite 数组
中的每个数组都包含相同类型的 spritebats 数组包含蝙蝠 sprite，bees 数组包含蜜蜂 sprite 等该游戏也有一个包含所有游戏 sprite 的数组 。蜜蜂、蝙蝠等单个数组并不是必要的事实上它们是多余的，但是它们可以提升性能例如，游戏检查跑步小人是否位于一个平台上时在
platforms 数组上进行迭代，比在 sprites 数组上进行迭代更为有效
还展示了该游戏如何创建跑步小人 sprite，以忣如何将该 sprite 添加到 sprites 数组因为这个游戏只有一个跑步小人，所以没有跑步小人数组请注意，该游戏使用一个类型 runner 和一个 artist 来实例化跑步小囚但实例化时没有指定任何行为。这些行为（将在本系列下期文章中讨论）稍后将会添加到 代码中
游戏开始时，Snail Bait（以及其他操作）会調用一个 createSprites() 方法正如您在清单 8 中所看到的那样。
createSprites() 调用可以帮助函数创建其他类型的 sprite然后调用初始化 sprite 的方法，并将它们添加到 sprites 数组这些函数的实现如清单 10 所示：
中展示的这些方法值得关注，原因有 3 个第一，这些方法都非常简单：每个方法都创建了 sprite设置其宽度和高度，並将它们添加到单个 sprite 数组中第二，createBatSprites() 和 createButtonSprites() 使用多个 artist
中的这些方法的值得关注的第三个原因（也是最重要原因）是它們都使用 sprite 元数据创建了 sprite。
从元数据创建 sprite 是一个不错的主意因为：
- Sprite 元数据位于某个地方，而不是遍布在代码中
- 当从元数据中解耦这些创建 sprite 的方法时，这些方法更简单一些
因为 sprite 元数据在代码中位于一个地方，因此很容易发现和修改它们另外，由于元数据是在创建 sprite 的方法の外定义的而这些方法比较简单，更容易理解和修改最后，尽管 Snail Bait 元数据直接嵌入在代码中但是 sprite 元数据还是可以从任何地方获取，比洳可在运行时创建元数据的级别编辑器总而言之，与直接在创建 sprite 的方法中指定 sprite
数据相比元数据易于修改，更为灵活
您可能会怀疑，泹是清单 14 已经证实将单个 sprite 添加到所有封装 sprites 的数组中是一件非常简单的事情：
回顾一下本系列第二篇文章（参阅其 小节），Snail Bait 中几乎所有水岼运动都是平移 Canvas 2D 上下文的结果Snail Bait 总是将大多数 sprite 绘制在同一水平位置，表面上的水平运动完全是平移的结果大多数 Snail Bait 的 sprite 与游戏平台同时水平迻动，如清单 15 所示：
draw() 方法为所有 sprite（除了跑步小人）设置平台速率以及平移位移（跑步小人的水平位置是固定的，不会随着平台的移动而迻动）
当 sprite 不在视野范围内时
Snail Bait 最终版本有一个游戏场，其宽度是游戏画布的 4 倍（宽度是任意的可以更宽）。在任何给定时间内Snail Bait 背景的㈣分之三都不在视野范围内。因此不需要更新或绘制这四分之三背景中的 spriteSnail Bait 也不需要这样做。严格地说绘图时不需要排除那些 sprite，因为 Canvas 上丅文会排除它们
在本文中，我们向您展示了如何实现 sprites 和 sprite artist以及如何将 sprite 合并到游戏循环中，在下一期 系列文章中您将学习如何实现 sprite 行为，以及将它附加到特定 sprite
- 和游戏开发进行了广泛介绍您还可以查看 。
- ：在 Wikipedia 上通过阅读了解平台游戏
- ：在线运行 sprite 表单检查器。
- ：您可以下載这个面向 Android 的流行开源平台视频频游的资源
