AEJoy —— 表达式之碰撞检测JS

Posted 2021-12-11 panda1234lee

效果图

碰撞检测表达式允许每一层检测它的可见区域是否与任何其他层的可见区域相接触

设计

现在，我们的过程开始成形。如果有一个内置的方法来获得一个图层的包围框，那就太好了，但是没有，所以我们必须自己做。一旦开始计算我们层的包围框, 然后就是为合成中的每个其他层(直到我们检测到碰撞或者所有层都检查过了)计算它的包围框, 计算相交（重叠）的包围框, 然后在两层的相交处寻找 alpha 值非零的像素。

总而言之, 我们需要创建一个代码块, 其将计算一层的包围框, 另一个代码块用于计算两个重叠的包围框的相交矩形, 以及一个代码块用于检查在交叉区域的每个像素, 直到 alpha 非零的像素在两层被找到。做这些事情所需的表达式有点长，但它相当直接。为了适应图层缩放、旋转和设置父级，我们只需要确保我们在世界空间坐标系中进行计算。所以你会注意到使用 toWorld() 和 fromWorld() 来进行层空间的转换，以使我们包围框的角点转入和转出世界空间坐标系。

除非你在碰撞发生时采取行动否则检测碰撞是没有意义的，对吧? 为了这个演示的目的，如果它碰到了其他图层，我们将设置图层的不透明度为 100% ，如果没有，则为 30% 。好了，是时候看看这个代码了。

需要注意的是，边界框可以通过建立两个对角点来完全定义。在本例中，我们将使用左上角(我们将缩写为 “UL” )和右下角( “LR