Drawing with the mouse without gaps

Hello,

I am working on a little game at the moment. For the game I want to be able to draw a line with a collider at the runtime. The user has to draw the line with the mouse. I managed to do this and it is allready working, however there´s a little problem. As the title of this Thread says, I get gaps in the line. This happens if I move the mouse fast. Following screenshot does show what I mean.

If I move the mouse slow, then the line hasnt gaps like in the Picture. To achieve the line with a collider I instantiate a Preafab right under the mouse position. My Question is how i could close those gaps. I found a few promising threads in the forum like those for example:

But i still never managed to get a real solution working. I have the feeling that the script just cant keep up if the mouse changes its position really fast, the instantiate (which is called slow in the internet) doesnt seem to be the problem.

My code looks like this:

#pragma strict
var point : Transform;
//var filler : Transform;
var mousey : float;
var mousex : float;
var mouseyold : float;
var mousexold : float;
private var pressed : boolean;

function Start () {
}

function FixedUpdate () {
		drawPoints();
	
}

function drawPoints()
{
	if (Input.GetMouseButtonDown(0))
	{
		pressed = true;
		//mouseyold = Camera.main.ScreenToWorldPoint(Input.mousePosition).y;
		//mousexold = Camera.main.ScreenToWorldPoint(Input.mousePosition).x;
	}
	if (Input.GetMouseButtonUp(0))
	{
		pressed = false;
	}
	if (pressed == true)
	{
		mousey = Camera.main.ScreenToWorldPoint(Input.mousePosition).y;
		mousex = Camera.main.ScreenToWorldPoint(Input.mousePosition).x;
		Instantiate (point, Vector3(mousex, mousey,0), Quaternion.identity);
	}
	
	
}

It would be awesome if someone could give me some hints :slight_smile:
I would also like to know if my approach is good or bad. I dont want to work in the wrong direction.

Sorry for the bad english, its now my native language.

Best regards and a nice evening.

First off, for anyone reading your code, it will only work for an Orthographic camera. Second, you should not be reading input in FixedUpdate() (and I see no reason for the code to be FixedUpdate() to begin with). Update() is fine, though it does not address your underlying problem: the mouse can be moved faster than you get update frames. There are a couple of different ways to address your problem. First, you could calculate the difference in the two mouse positions and plot a series of objects along the vector. You would have to decide how to handle deltas smaller than your plotting frequency. Another solution would be to rotate and scale objects along the line to fill the gaps. Here is a bit of starter code that creates a line by rotating and scaling a quad.

#pragma strict
var quad : GameObject;

private var prevPos : Vector3;
 
function Update()
{
    if (Input.GetMouseButtonDown(0)) {
       prevPos = Input.mousePosition;
       prevPos.z = 10;
       prevPos = Camera.main.ScreenToWorldPoint(prevPos);
    }
 
    if (Input.GetMouseButton(0)) {
       var pos = Input.mousePosition;
       pos.z = 10;
       pos = Camera.main.ScreenToWorldPoint(pos);
       
       if (pos != prevPos) {
       		var dir = pos - prevPos;
       		var go = Instantiate(quad);
       		go.transform.position = prevPos + dir / 2.0;
       		var angle = Mathf.Atan2(dir.y, dir.x) * Mathf.Rad2Deg;
       		go.transform.rotation = Quaternion.AngleAxis(angle, Vector3.forward);
       		go.transform.localScale.x = dir.magnitude;
       		prevPos = pos;
       }
    }
}

You need to create a Quad prefab. The ‘y’ height of the prefab will be the line width. Drag and drop this prefab on the ‘quad’ variable in the Inspector. Note you will still get small gaps due to the square ends of the lines. That when the angle of the two lines does not match, a birds-beak opening in the line is created. The fix for this is to give the quad a rounded-end texture so each individual line appears like:

21639-roundedends.jpg

Then you would oversize the scale a bit so that the rounded ends fit like a socket:

go.transform.localScale.x = dir.magnitude * factor;

‘factor’ will depend on your line width.

Note creating individual planes is not the most efficient method of solving this problem. The best performing alternative would be to use the Vectrosity add-on available in the company store. If I remember correctly, they have sample code for drawing lines as part of the package. Another solution would be to use a LineRenderer to draw the lines, and add points to the LineRenderer as the mouse is moved.