Drawing Line in UI between UI elements

Hey everyone,

So I am trying to make a skill tree system, everything is working really well with one exception; I can't get my lines to link up correctly.

Skills can have dependencies, you need to know skill X before you can learn skill Y that sort of thing, and the lines are intended to be a graphical visualization of that.

I have an array of skills, each has a level requirement (player must be of level X to learn this skill), and each skill like I said has dependencies (Or none).

The skills are loaded at the start of the game into Horizontal layout groups based on their level requirement, this is to help me make the menu look visually pleasing.

Once the skill buttons have been loaded into the horizontal groups I am calling a coroutine to wait for the end of the frame:

Code (CSharp):

1.     private IEnumerator CoWaitForPosition()
2.     {
3.         yield return new WaitForEndOfFrame();
4.         DisplaySkillTree();
5.     }

At the end of frame I then run my Display Skill Tree function which should generate my lines:

Code (CSharp):

1. public void DisplaySkillTree()
2.     {
3.         if (skillIcons != null)
4.         {
5.             for (int x = 0; x < skillIcons.Count; x++)
6.             {
7.                 for (int cnt = 0; cnt < skillIcons[x].skill.skillDependencies.Length; cnt++)
8.                 {
9.                     for (int y = 0; y < skillIcons.Count; y++)
10.                     {
11.                         if (skillIcons[x].skill.skillDependencies[cnt] == skillIcons[y].skill)
12.                         {
13.                             //Debug.DrawLine(skillIcons[x].go.transform.position, skillIcons[y].go.transform.position, Color.red);
14.                             if (skillIcons[x].linesGenerated == false)
15.                             {
16.                                 GameObject go = CreateMeshLine();
17.  
18.                                 go.transform.parent = skillIcons[x].go.transform;
19.                                 go.transform.position = skillIcons[x].go.transform.position;
20.  
21.                                 UIMeshLine uiMesh = go.GetComponent<UIMeshLine>();
22.  
23.                                 uiMesh.SetPointPosition(0, new Vector2(0, 0));
24.                                 uiMesh.SetPointPosition(1, new Vector2(skillIcons[y].go.transform.position.x, skillIcons[y].go.transform.position.y));
25.                             }
26.                         }
27.                     }
28.                 }
29.             }
30.         }
31.     }

I am running it at end of frame because apparently the elements in a layout group do not go to their correct position until that time.

The first uiMesh point is set to 0, 0 so it is the centre of the button. The second point... I have no idea how to set this, the code you see is my most current attempt and it was kind of a last ditch effort before heading to the forums. I knew it wouldn't work but I had tried everything else I could think of. The points work locally from the anchor of the object so what I am trying to do is figure out how to find the button I am dependent on, get its world position, then convert that into a local position and set the point to that.

The MeshLine scripts can be found here:
github.com/geniikw/drawLine

Any and all help would be AMAZING! If you are needing more information please let me know!

Thanks in advance for the help.

 

Solved it, don't mind me; I am just an idiot XD This is why I shouldn't code at 2am haha

Code (CSharp):

1.                                Vector3 distance = skillIcons[y].go.transform.position - skillIcons[x].go.transform.position;
2.  
3.                                 uiMesh.SetPointPosition(0, new Vector2(0, 0));
4.                                 uiMesh.SetPointPosition(1, new Vector2(distance.x, distance.y));