koobas.hobune.stream
Smooth out a line renderer
Greetings,
I really love the arrow system in this game, Gettysburg Ultimate General
Particularly the way the blue arrow is curving, its really smooth and it adapts to the path you draw.
I am trying to create a similar system using A* and the Line Renderer. I create a path, and then put those points into the Line Renderer. As you can imagine, the turns come out jagged, and no where near smooth:
(My Attempt)
My question is: Can I make my line smooth with the line renderer or is there another technique should be using? I'd love to recreate the arrows as seen above.
Look into Bezier curves, It's mostly (relatively) simple maths, I bet there are tons of examples for calculating coordinates for additional points on a line that should curve in a certain way. Then, it's just a way of deciding how many segments you want to have. If you don't want to go all-in with Bezier curves, you can always use simple terms like y = x² and derivatives to find out which y height a certain point should have along a line from source to target. Ther are online calculators for this, as well, with plooting features that show how your graph will look like with any given function.
Here's a script way back when I was still using UnityScript, I used it do draw indicator lines for grenade throwing arcs and explosion radii with a LineRenderer. The script is supposed to go onto a Game $$anonymous$$anager, Utility type of gameObject that just sits at 0,0,0 and never moves (which would maybe hold other scripts that manage your game, like time and so on). The "coverValue" float in the throwing arc function is just a value from 0 to 100, I uses it to change the color of the arc line from green to yellow to red depending on how much soft and hard cover there was intersecting the arc. You can ignore it / set it too 0 if you want.
function DrawCircle(pos1 : Vector3, radius : float)
{
var vertexCount : int;
if(radius < 6)
{
vertexCount = 2 * $$anonymous$$athf.PI * radius * 2;
}
else
{
vertexCount = 2 * $$anonymous$$athf.PI * radius / 2;
}
var lineRenderer : LineRenderer = GetComponent(LineRenderer);
var c1 : Color = Color(1.0, 1.0, 1.0, 0.5);
//lineRenderer.material = new $$anonymous$$aterial(Shader.Find("Particles/Additive"));
lineRenderer.SetColors(c1, c1);
lineRenderer.SetWidth(0.05, 0.05);
lineRenderer.SetVertexCount(vertexCount + 1);//+1 so the last point gets connected to the first one
var deltaTheta : float = (2.0 * $$anonymous$$athf.PI) / vertexCount;
var theta : float = 0;
for (var i : int = 0; i < vertexCount + 1; i++)
{
var x : float = radius * $$anonymous$$athf.Cos(theta) + (pos1.x - transform.position.x);//works only if the the pos1 x and z values are positive (GameController has to stay at (0,0,0))
var y : float = transform.position.y - pos1.y + 0.1;
var z : float = radius * $$anonymous$$athf.Sin(theta) + (pos1.z - transform.position.z);
var pos : Vector3 = new Vector3(x, y, z);
lineRenderer.SetPosition(i, pos);
theta += deltaTheta;
}
}
function DrawThrowingArc(pos1 : Vector3, pos2 : Vector3, coverValue : float)
{
var hitlineColor : Color;
hitlineColor.r = coverValue / 100;
hitlineColor.g = 1.0 - (coverValue / 100);
hitlineColor.b = 0.0;
hitlineColor.a = 0.5;
var lineRenderer : LineRenderer = GetComponent(LineRenderer);
var sections : float = 5.0 + $$anonymous$$athf.Round(Vector3.Distance(pos1, pos2)); // should be float for division purposes
lineRenderer.SetVertexCount(sections);
var t : float ;
for (var i : int = 0 ; i < sections ; i++ )
{
t = i/(sections - 1) ;
lineRenderer.SetPosition (i, GetQuadraticCoordinates(t, pos1 + Vector3.up * 1.4, Vector3.Lerp(pos1, pos2, 0.5) + Vector3.up * (Vector3.Distance(pos1, pos2) / 2.0), pos2 + Vector3.up * 0.1));
}
lineRenderer.SetWidth(0.05,0.05);
lineRenderer.SetColors(hitlineColor, hitlineColor);
lineRenderer.enabled = true;
}
function GetQuadraticCoordinates(t : float , p0 : Vector3 , c0 : Vector3 , p1 : Vector3 ) : Vector3
{
return $$anonymous$$athf.Pow(1 - t, 2) * p0 + 2 * t * (1 - t) * c0 + $$anonymous$$athf.Pow(t, 2) * p1;
}
