Canvas 找到精灵位置的简单方法

在制作HTML5游戏时，我们可以使用一个包含大量图像的文件（我认为这称为精灵图像？）来制作动画，而不是在多个文件中发送多个图像。我们擦除画布中的图像并重新绘制，更改精灵文件的位置，从而更改图像并提供动画效果

---

我的问题是，我们如何快速找到像素位置来重新绘制图像并绘制所需的部分精灵文件？因为我们需要精确定位，精确到一个像素。我们怎样才能在没有大量尝试和错误的情况下做到这一点呢？

每个精灵在精灵表上的确切[左，上]位置总是被它的创建者完全知道的。这确实是精灵表的基本属性

如果您有创建者的代码，您可以检查代码以获得单个精灵的位置

如果没有创建者的贴图坐标，并且精灵似乎以网格模式（行和列）排列，则通常可以正确地猜测以下贴图：

var spriteWidth = spriteSheetWidth / spriteCountPerRow;
var spriteHeight = spriteSheetHeight / spriteCountPerColumn;

许多精灵表不是以网格模式排列的，而是以允许尽可能多的精灵以尽可能小的图像大小存在的方式排列的

如果只有没有代码的精灵表，则可以使用边缘检测找到每个精灵的边界框。以下是如何做到这一点的概述：

使用

context.getImageData

获取画布上所有像素的RGBA信息

从画布的左上角开始，找到第一个不是背景色的像素。这将是单个精灵的一个像素

使用“行进方块”算法查找精灵边界周围所有像素的[x，y]。下面是前一篇Stackoverflow文章，展示了如何实现行进方块：

扫描步骤#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以查找下一个精灵

---

您可以使用Firebug-它可以让您轻松调整背景的位置。或者您可以创建一个.mp4。另一种方法是选择一个设置的宽度并创建一系列图像，这些图像可以相互附加并使用所选的宽度重新定位。创建.mp4是什么意思？然后在浏览器上打开精灵表，并使用firebug查找精灵中每个图像的位置？我懂了。。。不是太自动化，但我想人们通常要么这样做，要么建立一个小工具来确定每个精灵的像素位置，然后使用.mp4来创建视频，而不是尝试使用精灵来模拟动画。不知道我们可以这样做-使用mp4来制作游戏动画mp4文件不会比精灵文件？这取决于你要设置的动画。