像素完美碰撞排斥/旋转响应

Question

我正在用HTML5，Canvas制作游戏。

好吧，我使用16x16精灵，我在精灵对象之间使用圆形来定义碰撞

他们也可能在游戏中旋转..

现在我想知道，有没有什么方法可以检测/计算Pixel-Perfect Collision排斥/响应，这样当两个精灵碰撞时，它们（完全对齐）/（实际碰撞）彼此？

感谢。

如果您不理解，请发表评论。

Answer 1

Pixel-Perfect Collision很容易完成，但在cpu功率方面非常昂贵。

这就是你要做的事情：

每个精灵都有可以访问的像素数据，现在说上面的精灵是你的精灵，你要做一个for循环来列出精灵中不透明的每一个像素，并检查每个像素中的每一个像素。其他精灵，这里有一些伪代码：

for(i = 0; i < totalPixelsInSprite; i++){

if( pixelIsNotTransparent ){

 for(z = 0; z < totalPixelsInOtherSprite; z++){
    if( (pixelco_ordinate == otherSpritePixelCo_Ordinate) && (otherSpritePixelIsOpaque)){
      // add some code to handle the collision
    }
 }

}
}

可以在此网站上找到有关如何访问像素的详细信息：getPixel from HTML Canvas?

所以这个想法几乎是为了获得每个非透明像素的位置，然后检查是否与另一个精灵中的每个非透明像素相对。实际上“检查”只是看第一个精灵中的像素是否与第二个精灵中的像素具有相同的坐标。

这里有优化，这是像素碰撞的一个非常粗略的例子，首先你应该检查精灵的矩形是否先碰撞然后如果矩形碰撞就做这个检测，这将节省cpu功率。