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

Question

我正在用HTML5，Canvas做一个游戏。

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

它们也可以在游戏中旋转..

现在我想知道，有没有办法检测/计算Pixel-Perfect碰撞排斥/响应，以便当两个精灵碰撞时，它们(完全对齐)/(实际上碰撞)彼此？

谢谢。

如果你不明白，请留下评论。

Answer 1

像素完美的碰撞很容易完成，但在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?

所以我们的想法是得到每个非透明像素的位置，然后对其他子画面中的每个非透明像素进行检查。实际上，“检查”只是查看第一个精灵中的像素是否与第二个精灵中的像素具有相同的坐标。

这里有要做的优化，这是一个非常粗糙的像素冲突的例子，首先你应该先检查sprite的矩形是否发生冲突，然后再检测矩形是否发生冲突，这将节省cpu功率。