为迷你地图夹住一个圆形的箭头

Question

我目前正在为一款游戏制作迷你地图，在该游戏中可以跟踪屏幕内外不同的重要项目。当我第一次通过渲染到纹理上的辅助相机创建迷你地图并以微型显示器显示在屏幕上时，它是矩形的。我能够确保当重要项目离开地图视图时，指向目标的箭头出现并保留在地图边缘。它基本上是将箭头的 x 和 y 位置固定到相机视图宽度和长度的一半（有一些合适的边距 space）。

总之。现在我正在尝试将迷你地图制作成圆形，虽然我有适当的渲染蒙版来保证迷你地图的形状，但我很难将箭头固定到新迷你地图的形状。在矩形小地图中，箭头在夹紧时留在角落里，但很明显，圆圈没有角落。

我认为夹紧箭头的 x 和 y 位置与圆的半径有关（screen/minimap 高度的一半），但因为我在数学方面有点弱，我恳请一些帮助。我如何将箭头夹在新圆形的边缘？

我现在的代码如下：

let {width: canvasWidth, height: canvasHeight} = cc.Canvas.instance.node,  // 960, 640
targetScreenPoint = cc.Camera.main.getWorldToScreenPoint(this.targetNode.position)

// other code for rotation of arrow, etc...

// FIXME: clamp the the edge of the minimap mask which is circular
// This is the old clamping code for a rectangle shape.

let arrowPoint = targetScreenPoint;
arrowPoint.x = utils.clamp(arrowPoint.x, (-canvasWidth / 2) + this.arrowMargin,
                                          (canvasWidth / 2) - this.arrowMargin);
arrowPoint.y = utils.clamp(arrowPoint.y, (-canvasHeight / 2) + this.arrowMargin,
                                         (canvasHeight /2) - this.arrowMargin);
            
this.node.position = cc.v2(arrowPoint.x, arrowPoint.y);

我可能还应该注意到，所有迷你地图符号和箭头在技术上都在屏幕上，但仅通过剔除遮罩显示在辅助相机上......你知道，以防万一它有帮助。

Answer 1

对于其他想要做同样事情的人，我基本上标准化了箭头指向的目标节点的方向，并将其乘以图像蒙版的半径（具有适当的边距 space）。

由于玩家节点和遮罩的中心在原点，所以我只是从玩家那里得到了不同之处。 (640/2) 是直径，当然，它不应该被硬编码，但暂时是这样。感谢那些发表评论并让我朝着正确方向思考的人。

let direction = this.targetNode.position.sub(this.playerNode.position).normalize();
let arrowPos = direction.mul((640/2) - this.arrowMargin);
this.node.position = arrowPos;

为迷你地图夹住一个圆形的箭头

Clamping an arrow with a circle shape for mini map

javascript

game-development

cocoscreator