2

Description

"This discussion and code originally appeared on [my site](https:\/\/inputrandomness.com\/figuring-out-godot-2d-screen-edge-pointers-and-bonus-picture-in-picture\/) with more discussion, but here is a less wordy version. The code is easily modified to GDScript if desired; it does not rely on anything unique to C#.\r\n\r\nIn the following, assume `Target` and `Source` are two Node2Ds which are stored as member properties of some `Pointer` object, itself a Node2D. The pointer will be placed along the edge of the game's window pointing from `Source` (on-screen) to `Target` (off-screen). We are using `Position` under the assumption that they are in the same local space (siblings in the SceneTree). If not, the code may be adjusted to use `GlobalPosition`.\r\n \r\n\r\n\r\nOur approach to get the accurate placement of the Pointer is to simply take the vector `delta` pointing from `Source` to `Target`, which is given by `delta = Target.Position \u2013 Source.Position`, and scale that to the right length, so that when we start the rescaled vector at the Source\u2019s position, it ends right at the window\u2019s edge. The elegant geometric solution to the problem is to simply say \u201csimilar triangles\u201d and walk away: take the right triangle with Delta as hypotenuse and having legs that are vertical and horizontal, and just squish that down. The actual calculation, however, is a bit more tedious, because we don\u2019t know whether we\u2019re going off the one of the vertical sides or one of the horizontal sides, and `delta` doesn\u2019t directly tell us how `Target` is positioned with regard to the vertical or horizontal boundaries of the screen. But it turns out, we can just look at the two potential similar triangle ratios and take whichever one is worse (smaller):\r\n\r\n (vertical distance from Source to intervening screen edge) \/ |delta.Y|\r\n (horizontal distance from Source to intervening screen edge) \/ |delta.X|\r\n\r\nIf `Target` is in-bounds either vertically or horizontally, then we are not going to need to squish in that direction, and we just set it to 1. All that squishing is done in defining `xScale` and `yScale` below, which are each done in nested ternary operators in order to get the subtractions correct. Then `minScale` simply chooses the bigger squish. Then set the position of the Pointer node to the Source position + the rescaled Delta. \r\n\r\nThe code below is in the `_Process` function for a custom Pointer class inheriting from Node2D. \r\n\r\nI made my Pointer have a sprite as a child, but it could just be a Sprite2D itself. Making the Sprite2D a child enabled me to set the relative positions so that the \u201cpoint\u201d of the Pointer is exactly on the screen\u2019s edge, and I can adjust how far the Pointer is from the edge within the editor instead of in code. The desired rotation is simply the angle of the vector `delta`, for which Godot gives us a convenient helper function, `delta.Angle()`. "

Main code

    // Get upper-left and lower-right positions of the viewport in world coords
    Transform2D InvCanvasTransform = GetTree().Root.CanvasTransform.AffineInverse();
    Rect2 viewportRect = GetViewport().GetVisibleRect();
    Vector2 upperLeft = InvCanvasTransform * Vector2.Zero;
    Vector2 lowerRight = InvCanvasTransform * viewportRect.Size;

    // The clamped position is an easy way to check if the target is off-screen.
    Vector2 ClampedTargetPosition = Target.Position.Clamp(upperLeft,lowerRight);
      
    if (ClampedTargetPosition != Target.Position)
    {
        // The vector from the source to the target
        Vector2 delta = Target.Position - Source.Position;

        float xScale = (Target.Position.X < upperLeft.X) ? 
                       (Source.Position.X - upperLeft.X) / Mathf.Abs(delta.X) : 
                       (Target.Position.X > lowerRight.X ? 
                       (lowerRight.X - Source.Position.X) / Mathf.Abs(delta.X) : 1);
        float yScale = (Target.Position.Y < upperLeft.Y) ? 
                       (Source.Position.Y - upperLeft.Y) / Mathf.Abs(delta.Y) : 
                       (Target.Position.Y > lowerRight.Y ? 
                       (lowerRight.Y - Source.Position.Y) / Mathf.Abs(delta.Y) : 1);
        float minScale = Mathf.Min(xScale,yScale);
         
        Position = Source.Position + delta * minScale;            
        Rotation = delta.Angle();
        Visible = true;
     }
     else
         Visible = false;

Comments