Draw a Circle curve similar to the game Steambirds

[anon20000101]

Hello guys,
I am trying to make a turn based game that use similar control mechanic as Steambird survival on iOS. Basically, I want players to be able to draw a line/curve from their character, and at the end of the turn the character would move, following that line.

There are several requirements for the control:

• The line/curve has to have a specified length (which is different between various characters)
• The line/curve has to have a minimum angle (which is different between various characters)
• When player slides their finger outside the maximum length of the curve, the curve stops being drawn, but if players move their finger towards a different position, the angle of the curve will keep changing according to the new position of their finger. Exactly like the Steambird game.

I have been stuck at this problem for more than 2 weeks.

What I have done is the following: (The triangle is the character, facing upwards in this example).

1. Calculate the blue lines (normal and forward direction of the triangle).
2. Calculate the orange line (line between the triangle and the user’s finger).
3. Calculate the mid point of the orange line (green point).
4. Draw a line normal to the orange line that passes through the green point (green line).
5. Find the intersection of the green line and the normal blue line. This is the centre of the circle (black circle).
6. Having the centre, I can now start to draw a circle from the triangle position up to the red dot (user’s finger).

The way I implemented in unity is basically calculate 10 points of the grey line, add them to a LineRenderer and draw a line between them. However, this doesn’t seem like the correct approach because I am having so many problems. To name a few:

• I cannot think of a way to limit the line length, or the angle of the circle.
• Even if I could limit the length, I don’t know how I would still adjust the line when my finger is already outside the maximum length.
• I cannot easily add and remove point from the Line renderer, which is makes the line always lag behind the finger at high finger speeds.
• And I haven’t even consider moving the triangle following the curve.

I have attached 3 screenshots above of the Steambird game, where the red dots are where I placed my finger. As you can see, the line is still drawn in the direction of my finger, but it has a limit length.

I really think there is a better method to accomplish this behaviour, because my approach looks very complex for such a “simple” mechanic.

So the question is/are:

1. Is there a better way to accomplish this behaviour? any built-in functions/components that I missed?
2. If the above is not true, any algorithm or strategies or any help at all to some of the problems mentioned.

here is some of my code:

using UnityEngine;

public class Path_Line_v3 : MonoBehaviour
{
    public UI_Manager ui_manager_script;
    public LineRenderer lineRenderer;
    public Transform start, end;
    public Transform player;
    public int numberOfLineSegments;

    private float thetaScale;
    private float currentTheta;
    private int fullCircle;
    private float radius;

    private Vector2 startPos, endPos;
    private Vector2 playerUp, playerRight;

    private void Start()
    {
        // Add the necessary number of line segments.
        lineRenderer.numPositions = numberOfLineSegments + 1;

        // Increments of theta when we draw our arc. 1/360 = (360 line segments for a full circle) = 0.00277777...
        thetaScale = 0.0027777777777778f;

        // Basically the inverse of the above. Used in the 'for loop' to trace out the curve.
        fullCircle = (int)((1f / thetaScale) + 1f);

        // The direction the aircraf is facing. 
        playerUp = player.transform.up;

        // The normal to the direction the aircraft is facing.
        playerRight = player.transform.right;
    }

    // This method is called from the WAYPOINT script when the mouse drags the orange circle.
    // The argument is the position of the mouse.
    public void MouseDrag(Vector2 mousePos)
    {
        // Convert the position from Screen Space to World Space
        Vector2 objpos = Camera.main.ScreenToWorldPoint(mousePos);

        // Make the "end" waypoint follow the mouse.
        end.transform.position = objpos;
    }

    private void Update()
    {
       
        // Update our start and end positions;
        startPos = transform.TransformPoint(start.position);
        endPos = transform.TransformPoint(end.position);

        // Calculate the normal vector of the vector between the start and end positions.
        Vector2 normal = CalculateNormal(startPos, endPos);

        // Calculate the middle point between the start and the end vectors.
        Vector2 halfEnd = startPos + (endPos - startPos) / 2;

        // Calculate the point where the normal vector from above intersects the normal vector of the aircraft (playerRight).
        // This will be our center point for the circle.
        Vector2 intx = CalculateIntersectionPoint(startPos, startPos + (playerRight * 10), normal + halfEnd, -normal + halfEnd);

        // Calculate the radius of the circle.
        float radius = Vector2.Distance(startPos, intx);

        // Calculate the initial theta angle. It is basically calculating from witch point we start drawing our circle.
        // Theta = 0    --> from the right.
        // Theta = 90   --> from above.
        // Theta = 180  --> from the left.
        // Theta = 270  --> from the bottom.
        currentTheta = CalculateInitialTheta();

        // This calculates the size of each segment, to keep the
        float angleRatio = (Mathf.Clamp(CalculateAngle(playerUp, endPos, false), 0, 90)) / 90;
        thetaScale = (1) / (numberOfLineSegments * 2 / angleRatio);
        fullCircle = (int)((1f / thetaScale) + 1f);

        // DEBUG
        ui_manager_script.SetDebugOne("Full: ", fullCircle);
        ui_manager_script.SetDebugTwo("Angle: ", CalculateAngle(playerUp, endPos, false));
        ui_manager_script.SetDebugThree("Lenght: ", CalculateLenght(radius, CalculateAngle(playerUp, endPos, false)));

        // We cycle only through the first half of the circle, because the aircraft is not allowed to turn more than 180 degrees in one turn.
        for (int i = 0; i <= fullCircle / 4; i++)
        {
            // Calculate the x and y coordinates of the curve, and save them in a vector.
            // x = radius * Mathf.Cos(Theta) + intx.x;
            // y = radius * Mathf.Sin(Theta) + intx.y;
            Vector2 newPos = new Vector2(radius * Mathf.Cos(currentTheta) + intx.x, radius * Mathf.Sin(currentTheta) + intx.y);

            // Calculate the final angle between player and endPos. (The false means absolute value).
            float finalAngle = CalculateAngle(playerUp, endPos, false);
            // Calculate the current angle between player and current curve point.
            float currentAngle = CalculateAngle(playerUp, newPos, false);

            // Calculate the lenght of the arc formed by both final and current positions.
            // Keep drawing the line for as long as the final lenght is greater than the current lenght.
            // But remember that we are only drawing a semi-circle at maximum.
            if (CalculateLenght(radius, finalAngle) > CalculateLenght(radius, currentAngle))
            {
                lineRenderer.SetPosition(i, newPos);
            }

            // Recalculate the final angle, this time with sign indicating either left or right.
            finalAngle = CalculateAngle(playerUp, endPos, true);

            // Check whether the aircraft is turning left or right, and increment/decrement theta correctly.
            if (finalAngle > 0)
            {
                currentTheta += (2.0f * Mathf.PI * thetaScale);
            }
            else
            {
                currentTheta -= (2.0f * Mathf.PI * thetaScale);
            }
        }
    }

// Arguments: 4 Vector2, representing the start and end points of two lines.
// Returns: Vector2, the intersection point between the two lines.
// Taken from: http://www.wyrmtale.com/blog/2013/115/2d-line-intersection-in-c
// ------------------------------------------------------------------------------------------------------
    private Vector2 CalculateIntersectionPoint(Vector2 p1_start, Vector2 p1_end, Vector2 p2_start, Vector2 p2_end)
    {
        // Get A,B,C of first line - points : p1_start to p1_end
        float A1 = p1_end.y - p1_start.y;
        float B1 = p1_start.x - p1_end.x;
        float C1 = A1 * p1_start.x + B1 * p1_start.y;

        // Get A,B,C of second line - points : p2_start to p2_end
        float A2 = p2_end.y - p2_start.y;
        float B2 = p2_start.x - p2_end.x;
        float C2 = A2 * p2_start.x + B2 * p2_start.y;

        // Get delta and check if the lines are parallel
        float delta = A1 * B2 - A2 * B1;
        if (delta == 0)
            throw new System.Exception("Lines are parallel");

        // Now return the Vector2 intersection point
        return new Vector2((B2 * C1 - B1 * C2) / delta, (A1 * C2 - A2 * C1) / delta);
    }

    private Vector2 CalculateNormal(Vector2 p1, Vector2 p2)
    {
        Vector2 v = p2 - p1;

        return (new Vector2(-v.y, v.x));
    }

    private float CalculateAngle(Vector2 a, Vector2 b, bool sign)
    {
        if (sign)
        {
            float angle = Vector2.Angle(a, b);
            Vector3 cross = Vector3.Cross(a, b);
            if (cross.z < 0) angle = -angle;
            return angle;
        }
        else
        {
            return Vector2.Angle(a, b);
        }
    }

    private float CalculateLenght(float r, float a)
    {
        return (2 * Mathf.PI * r * (a / 360));
    }

    // Used to calculate the initial theta value.
    // TODO Consider passing some vectors as arguments instead of accessing them directly.
    private float CalculateInitialTheta()
    {
        // Depending of whether we are moving to the left or right, the initial theta will be different.
        if (CalculateAngle(playerUp, endPos, true) > 0)
        {
            return (CalculateAngle(Vector2.right, playerRight, true)) / Mathf.Rad2Deg;
        }
        else
        {
            return ((CalculateAngle(Vector2.right, playerRight, true) + 180) / Mathf.Rad2Deg);
        }
    }
}

Anyway, Thank you a lot for any help that you guys can give me.

[LeftyRighty]

Well the first thing that comes to mind would be “bezier curve”. If you google that you should find plenty on the subject with lots of unity specific tutorials.

[anon20000101]

@LeftyRighty

Well the first thing that comes to mind would be “bezier curve”. If you google that you should find plenty on the subject with lots of unity specific tutorials.

Thank you for your response LeftyRighty.

In the first iteration of this problem I actually used a brezier curve to link the character to the finger of the user. I can post the code if someone is interested. However, that does not solve or simplify any of the problems that I mentioned, it simply draws a a different shaped curve.

[MV10]

I had to do something similar in my own game, and it turns out the answer is pretty simple. I also first tried a Bezier curve but it requires you to calculate control points (adding a lot of complexity to the problem) and they have significant limitations to the types of curves they can draw (for example you can’t draw a half-circle).

The first step is to address the user input requirements.

The maximum length is just a radius around the starting point. It’s a simple distance calculation – if the distance from the starting point to the ending point is greater than this distance, you don’t update anything. Unity provides Vector3.Distance for this (or if you’re targeting mobile, SqrDistance will be faster).

I’m not clear about what you mean by the “specified length” – is this different from the maximum length?

You state that the arc must have a minimum angle, but I suspect you really mean a maximum angle – the greatest rate of turn possible, no? So if the character doesn’t change direction at all, the angle is zero degrees, but the character (presumably) has an upper limit of how sharp a turn they can make in one turn, that is +/- n-degrees, a maximum angle. Unity provides Vector3.Angle to calculate the minimum angle between two points, so again, if that offset angle is greater than their maximum possible rate of turn, you don’t update anything.

That leaves drawing the line. You could probably further optimize the code below by keeping the List outside the function; set it up once in Awake or something, which would minimize allocs (you mentioned finger position so I’m guessing you’re on mobile). Note I haven’t tested this, I quickly rewrote my own function (which was loaded with a bunch of constants specific to my game), but it should get you pointed in the right direction… No pun intended.

Edit: In my game I’m plotting points on the XZ plane, so rotation is around the Y axis. Tweak accordingly.

public int PlotPoints = 20; // list will be +1, since [0] is the starting point

public List<Vector3> PlotMovePoints(GameObject startingPoint, float angle, float distance)
{
    List<Vector3> plot = new List<Vector3>(PlotPoints + 1);
    Vector3 pos = startingPoint.transform.position;
    Vector3 fwd = startingPoint.transform.forward;
    plot.Add(pos); // start the curve at the startingPoint
    Quaternion rotation = Quaternion.Euler(0f, angle / PlotPoints, 0f);
    float distancePerStep = distance / PlotPoints;
    for(int i = 0; i < PlotPoints; i++)
    {
        fwd = (rotation * fwd).normalized;
        pos += fwd * distancePerStep;
        plot.Add(pos);
    }
    return plot;
}

[MV10]

One more thing… in my game the user is clicking left/right buttons to change the turning orders. Since you’re using mouse position, you’ll need to know whether that offset angle is to the left or to the right. (The angle input to the function above should be positive for… I think a right turn, if I remember correctly, and negative for left.)

Anyway, you can figure out whether the mouse is to the left or right of the character position as shown here:

http://answers.unity3d.com/answers/13036/view.html

[anon20000101]

Hello MV10,

First of all, I apologise for the delayed reply, I was just implementing the advice you gave me.

I really cannot thank you enough for your help. Everything you told me helped me solve the problems I had, and the code you posted works perfectly, after changing the Z/Y orientation as you said.

(you mentioned finger position so I’m guessing you’re on mobile).

Yes, I am targeting mobile platforms.

I’m not clear about what you mean by the “specified length” – is this different from the maximum length?

As you guessed, I meant maximum length. I used the words “specified length” because different characters would have different maximum lengths.

You state that the arc must have a minimum angle, but I suspect you really mean a maximum angle

And again, yes, I meant maximum angle, instead of minimum angle.

Now I will work on getting the character moving following the curve, but I assume that should be easy: simple move the character from point to point in the curve.

Edit: I’ll probably post here again if this turns out more difficult than I expect, but hopefully it is easy

but it should get you pointed in the right direction… No pun intended.

Oh, and I just thought I should also thank you for the awkward stares at me in the bus when I literally laughed out loud reading your “not intended” pun xD

[MV10]

lol, glad to help. Good luck.

[MV10]

Now I will work on getting the character moving following the curve, but I assume that should be easy: simple move the character from point to point in the curve.

If you need smooth movement, it’s pretty cheap to generate that list of points. You could even make a variation on the method that outputs them on the fly instead of building a list – you won’t need the “old” points after the character moves to them.

So you could build the initial list to draw the line (you could optimize the number of list entries based on the scale of your game and maybe the distance, but still initialize the list capacity once to the maximum size for best performance), then use the other function with much greater “resolution” (more steps) to make movement appear very smooth. And you can apply the rotation from that function to the character so that they also turn to face the correct direction throughout the move cycle.