Show direction to CGPoint SpriteKit

Question

I need an arrow (white circle) that shows the direction to CGPoint while user move his icon and camera.

I mean that arrow (white circle) needs to take position on the edge of visible screen and shows the way that helps user to return to followed CGPoint.

Demo gif

Answer 1

You are expecting for two things:

• place the arrow on the correct screen side given the target CGPoint position
• Orient the arrow towards the target CGPoint

In your touchesMoved(_:) method, you can update the arrow rotation and position, not tested but the principle should work :

private func placeArrow(at sourceNode: SKNode, for targetNode: SKNode) {

    //do not display arrow if already on screen
    guard targetNode.position.x > cameraNode.position.x - screenSizeX/2 
    && targetNode.position.x < cameraNode.position.x + screenSizeX/2
    && targetNode.position.y > cameraNode.position.y - screenSizeY/2
    && targetNode.position.y < cameraNode.position.y + screenSizeY/2
    {
        arrowNode.isHidden = true
        return
    }

    //find arrow position, if on the left place to the left side, else on the right
    //place at the medium y between the 2 points
    let screenSizeX = UIScreen.main.bounds.width
    let screenSizeY = UIScreen.main.bounds.height

    let ymin = cameraNode.position.y - screenSizeY/2 + 10
    let ymax = cameraNode.position.y + screenSizeY/2 - 10
    let midY = (sourceNode.position.y + targetNode.position.y)/2

    var clampedMidY = midY
    if midY > ymax {
      clampedMidY = ymax
    } else if midY < ymin {
      clampedMidY = ymin
    }


    arrowNode.position = CGPoint(x: (targetNode.position.x < sourceNode.position.x) ? cameraNode.position.x - screenSizeX/2  : cameraNode.position.x + screenSizeX/2, y: clampedMidY)

    //find arrow orientation
    //see https://stackoverflow.com/questions/38411494/rotating-a-sprite-towards-a-point-and-move-it-towards-it-with-a-duration
    let v1 = CGVector(dx:0, dy:1)
    let v2 = CGVector(dx: targetNode.position.x - sourceNode.position.x, dy: targetNode.position.y - sourceNode.position.y)
    arrowNode.zRotation = atan2(v2.dy, v2.dx) - atan2(v1.dy, v1.dx)
}