Sprite Kit - 用多色边框绘制圆圈

Question

我想画一个类似这样的圆圈：

我将让不同的对象与圆圈交互（碰撞），但对象的交互方式会因触摸的颜色而不同。

这可以使用贝塞尔路径完成吗？我希望将圆圈的每种颜色设置为不同的变量。

我最初的想法是在 Photoshop 中绘制圆圈并将其导入 Sprite Kit，但我不知道如何通过这种方式将颜色分成不同的变量。

Answer 1

将对象作为 png（来自 photoshop 或其他）导入游戏，当节点与它发生碰撞时，检测它接触的点并计算 x 和 y 与圆心的差异。即使圆圈正在旋转，只要您已经将颜色映射到“区域”，它也应该始终告诉您碰撞对象撞击的颜色。有意义吗？

或者，您可以创建一个透明圆 (SKShapeNode)，并有八个 SKShapeNode 弧作为该透明圆的子级。故意定位它们。这增加了每个对象将是一个单独的对象，可以有自己的 strokeColor 和自己的触摸方法的好处。它们需要能够碰撞，而父透明圆需要忽略碰撞才能工作。

至于如何检测圆圈的哪个部分被击中，我会这样做：

给定一个被分成 8 个大小相等的饼块的圆，您应该能够根据与圆心相比的碰撞点的 x 和 y 值来确定哪个部分受到了碰撞。例如，假设 Y 轴是两半之间的分割，每半是四个部分（见图），您可以首先按象限缩小碰撞范围，如下所示：

cx, cy = 碰撞 x 和 y 值 ox, oy = 圆最中心（原点）的 x 和 y 值

伪代码：

if cx > ox && cy > oy, then the collision occurred in quadrant 1
if cx > ox && cy < oy, then the collision occurred in quadrant 2
if cx < ox && cy < oy, then the collision occurred in quadrant 3
if cx < ox && cy > oy, then the collision occurred in quadrant 4

由于每个象限中有两个部分，您可以进一步细化此逻辑，通过比较差异确定碰撞发生在两者的哪个部分

伪代码：

if the difference between cx and ox > the difference between cy and oy, then the collision occurred in Section 2
else the collision occurred in section 1

将这些逻辑组合成一个嵌套的 if-else 语句，您将拥有如下内容：

伪代码：

if cx > ox && cy > oy, then the collision occurred in quadrant 1
......if the difference between cx and ox > the difference between cy and oy, then the collision occurred in Section 2
......else the collision occurred in section 1
if cx > ox && cy < oy, then the collision occurred in quadrant 2
......if the difference between cx and ox > the difference between cy and oy, then the collision occurred in Section 3
......else the collision occurred in section 4
if cx < ox && cy < oy, then the collision occurred in quadrant 3
......if the difference between cx and ox > the difference between cy and oy, then the collision occurred in Section 6
......else the collision occurred in section 5
if cx < ox && cy > oy, then the collision occurred in quadrant 4
......if the difference between cx and ox > the difference between cy and oy, then the collision occurred in Section 7
......else the collision occurred in section 8

HTH！