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

Posted 2023-03-05

【中文标题】像素完美碰撞排斥/旋转响应

【英文标题】：Pixel-Perfect Collision Repulsion/Response with Rotation

【发布时间】：2014-04-02 22:05:16

【问题描述】：

我正在用 html5 Canvas 制作游戏。

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

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

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

谢谢。

不明白的请留下cmets。

【问题讨论】：

一旦发生broad phase碰撞检测（即使用网格/圆），切换到narrow phase。如果您可以访问单个像素值，那么您可以简单地使用“像素掩码” - 沿着移动矢量移动实体，直到出现基于掩码的碰撞（即来自不同实体的任何像素占据相同的空间），然后返回关掉它。

对不起，我好像不太明白..

您要求的只是矩形碰撞还是圆矩形碰撞？

我要求像素完美的碰撞

精灵没有预定义的形状？

【参考方案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力量。

【讨论】：

是的，是的，是的，这就是碰撞，但是我想要碰撞和碰撞的排斥/响应，你看，当两个球碰撞时，它们会相互反弹，这就是我想对精灵做同样的事情。它们确实有用于坐标的 x 和 y 变量，以及用于运动、速度的 vx 和 vy 变量。所以我也想知道如果精灵碰撞，vx 和 vy 会如何变化。

啊，看到像素碰撞即使不是不可能也更难，这就是为什么许多人避开像素检测并使用多边形来代替精灵周围的近似形状。多边形碰撞也很困难，需要了解矢量数学，这就是为什么很多人只是坚持巧妙地使用矩形碰撞。

好吧，我拭目以待，不过我还是用我的圈子碰撞-murplyx.net/projects/zm

您的游戏中有旋转精灵，而像素碰撞不适用于旋转精灵，您使用的圆形碰撞很好，如果是您正在谈论的游戏。圆碰撞是您拥有的游戏中最简单和最好的。

你确定这是不可能的吗，你不能在旋转后计算画布像素而不是计算精灵像素吗？