找到精灵位置的简单方法
Easy way to find sprite position
在制作 HTML5 游戏时，我们可以使用包含大量图像的单个文件（我认为这称为精灵图像？）来制作动画，而不是在多个文件中发送多个图像。我们将canvas中的图片擦除并重新绘制，改变sprite文件的位置，从而改变图片并赋予动画效果。
我的问题是，如何才能快速找到重绘图片的像素位置，绘制出精灵文件中我们想要的部分呢？因为我们需要精确定位到单个像素的精度。如果不经过大量试验和错误，我们如何才能做到这一点？
每个单独的精灵在精灵表上的确切 [左，上] 位置总是被它的创建者完全知道。这确实是 spritesheet 的基本要素 属性。
如果您有创建者的代码，您可以检查代码以获取各个精灵的位置。
如果您没有创建者的映射坐标并且精灵看起来排列成网格模式（行和列），您通常可以正确地猜出这样的映射：
var spriteWidth = spriteSheetWidth / spriteCountPerRow;
var spriteHeight = spriteSheetHeight / spriteCountPerColumn;
许多 spritesheet 没有以网格模式排列，而是排列成允许尽可能多的 sprite 存在于尽可能小的图像尺寸中。
如果你只有没有代码的精灵表，那么你可以通过边缘检测找到每个精灵的边界框。以下是如何操作的概述：
- 使用
context.getImageData获取canvas上所有像素点的RGBA信息。
- 从 canvas 的左上角开始，找到第一个不是背景颜色的像素。这将是单个精灵的一个像素。
- 使用 "Marching Squares" 算法找到该精灵边框周围所有像素的 [x,y]。这是之前的 Whosebug post 展示了如何实施 Marching Squares：
在步骤#3 中扫描 [x,y] 以找到精灵的边界框。
The minimum x will be the leftmost coordinate of the bounding box.
The minimum y will be the topmost coordinate of the bounding box.
The maximuinimum x will be the leftmost coordinate of the bounding box.
The minimum y will be the topmost coordinate of the bounding box.
- 我们已经完成了已发现的精灵，因此请擦除已发现精灵的边界框。
- 返回步骤#1 找到下一个精灵。
在制作 HTML5 游戏时，我们可以使用包含大量图像的单个文件（我认为这称为精灵图像？）来制作动画，而不是在多个文件中发送多个图像。我们将canvas中的图片擦除并重新绘制，改变sprite文件的位置，从而改变图片并赋予动画效果。
我的问题是，如何才能快速找到重绘图片的像素位置，绘制出精灵文件中我们想要的部分呢？因为我们需要精确定位到单个像素的精度。如果不经过大量试验和错误，我们如何才能做到这一点？
每个单独的精灵在精灵表上的确切 [左，上] 位置总是被它的创建者完全知道。这确实是 spritesheet 的基本要素 属性。
如果您有创建者的代码，您可以检查代码以获取各个精灵的位置。
如果您没有创建者的映射坐标并且精灵看起来排列成网格模式（行和列），您通常可以正确地猜出这样的映射：
var spriteWidth = spriteSheetWidth / spriteCountPerRow;
var spriteHeight = spriteSheetHeight / spriteCountPerColumn;
许多 spritesheet 没有以网格模式排列，而是排列成允许尽可能多的 sprite 存在于尽可能小的图像尺寸中。
如果你只有没有代码的精灵表，那么你可以通过边缘检测找到每个精灵的边界框。以下是如何操作的概述：
- 使用
context.getImageData获取canvas上所有像素点的RGBA信息。 - 从 canvas 的左上角开始，找到第一个不是背景颜色的像素。这将是单个精灵的一个像素。
- 使用 "Marching Squares" 算法找到该精灵边框周围所有像素的 [x,y]。这是之前的 Whosebug post 展示了如何实施 Marching Squares：
在步骤#3 中扫描 [x,y] 以找到精灵的边界框。
The minimum x will be the leftmost coordinate of the bounding box. The minimum y will be the topmost coordinate of the bounding box. The maximuinimum x will be the leftmost coordinate of the bounding box. The minimum y will be the topmost coordinate of the bounding box.- 我们已经完成了已发现的精灵，因此请擦除已发现精灵的边界框。
- 返回步骤#1 找到下一个精灵。