# How to create Arrows Between Two objects and Animate them

I want to create arrows as displayed in the image, i want to click one circle and then click another circle to dynamically create the arrows, if one of the circles is moved, the arrows should still connect them.

(The arrows will be in the prefabs)

To create the connection i can either click the first circle and then click the second one for the arrows to appear
or
I can click and hold on one of the circles and then be prompted to click the other circle.

Also i want to make some kind of animation that gives the impression that something is flowing from one end to the other.

I would really appreciate if you guys can guide me on how to do these two tasks.
Thank you

The best approach will depend upon the aesthetic end result you desire.

My instinct is to recommend a line-drawing solution which builds and draws stretched, billboarded quads (lines) on the fly. This is what I use to draw lines and arrows in my project, and it’s very nice to work with once you get the generator written. (My arrow heads are just two lines that describe a small acute shape at the end of the arrow).

Using prefabs and models for your arrows is viable too. (Note that if you need to billboard these arrows, you’ll be in for quite a headache; not true of the custom line drawing method.) If a custom line drawer solution (you could do basic shapes too with the same logic) doesn’t strike your fancy, I recommend the following basic structure:

A quad for the shaft of the arrow. The quad’s origin should be located at the butt-end of the arrow. Scaling the correct axis of this quad should produce a nice line of arbitrary length, and rotating the transform to “look at” the correct point in space will make the line point where you want it.

A mesh for the head of the arrow. This mesh should not scale. Instead, its placement should be informed by the business-end of the stretched-quad shaft. Its rotation will be identical to the line quad’s.

Another alternative involves a rigged mesh of an arrow whose shaft can stretch via bone animation, leaving the arrowhead’s shape unaffected.

Once you can create this dynamic arrow, then you can get clever with animating it however you wish.

I just did this for my game too,
Replace my anchorPos and currrentPos by the position of your 2 game objects.
This works in 2d, not sure about 3d.

``````	Vector3 anchorPos = new Vector3(1,1,0);

Vector3 currentPos = Camera.main.ScreenToWorldPoint(Input.mousePosition);

currentPos.z = 0;

Vector3 midPointVector = (currentPos + anchorPos)/2;

transform.position = midPointVector;

Vector3 relative = currentPos - anchorPos;
float maggy = relative.magnitude;

transform.localScale = new Vector3(maggy/2,1,0);
Quaternion rotationVector = Quaternion.LookRotation(relative);
rotationVector.z = 0;
rotationVector.w = 0;
transform.rotation = rotationVector;
``````