2

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

反正。现在我正在尝试使迷你地图成为圆形，虽然我有适当的渲染蒙版来保证迷你地图的形状，但我很难将箭头夹在新迷你地图的形状上。在矩形小地图中，箭头被夹在角落里，但很明显，圆形没有角落。

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

我现在的代码如下：

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);

我可能还应该注意到，从技术上讲，所有小地图符号和箭头都在屏幕上，但仅通过剔除蒙版显示在辅助摄像机中……您知道，以防万一。

4

1 回答 1

1

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

由于播放器节点和蒙版的中心位于原点，因此我只是从播放器中得到了差异。(640/2) 是直径，当然，它不应该是硬编码的，但现在就不行了。感谢那些评论并让我朝着正确方向思考的人。

let direction = this.targetNode.position.sub(this.playerNode.position).normalize();
let arrowPos = direction.mul((640/2) - this.arrowMargin);
this.node.position = arrowPos;
于 2021-02-08T15:35:51.720 回答