# Anchored GUIs

When you first attempt to anchor GUI elements to an area to the screen you may do it simply by setting each GUI node to have an X and Y anchor and a pivot. But if you scale the screen you may notice some issues with spacing.

![Unscaled Window](https://59336108-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHnmfJK3HDz-s0f74qO%2F-LJLGsonuhEWLq_04RSr%2F-LJLIzU0pkojETuJJEpd%2F2018-08-07%2014_32_54-AnchoredGUIs.png?alt=media\&token=2331e2c4-c346-48e1-8ce3-f52f8609ea01)

![Scaled Window](https://59336108-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHnmfJK3HDz-s0f74qO%2F-LJLGsonuhEWLq_04RSr%2F-LJLJ21ghgghP7XfNkIj%2F2018-08-07%2014_32_46-AnchoredGUIs.png?alt=media\&token=19de6cdb-72c4-4e53-802a-bf3d3946aa74)

As can be seen in the "Scaled Window" image above, the spacing between the nodes is inconsistent with the amount of scaling. 

The fix for this is easy!

For each area of the screen you wish to anchor nodes to, you must create a parent anchor GUI node. 

Create a box node. Set its size mode to manual, and set its size to 0,0,0. This will make it invisible.

![](https://59336108-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHnmfJK3HDz-s0f74qO%2F-LJLGsonuhEWLq_04RSr%2F-LJLJfNUpfqXgj6CnD2R%2F2018-08-07%2014_36_51-Window.png?alt=media\&token=cf6c9d62-ea1d-4429-bbe9-6c6735c332f1)

Then set the anchor box node to have the anchor type you want. In this case X anchor left, Y anchor top.

![](https://59336108-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHnmfJK3HDz-s0f74qO%2F-LJLGsonuhEWLq_04RSr%2F-LJLKdUxvFZ-42Gu3vro%2F2018-08-07%2014_41_26-Window.png?alt=media\&token=2fc5d0c7-6e79-43dd-bfb4-46d0afcef227)

Now you can move the box node to the area of the screen you wish to anchor other GUIs to.

![](https://59336108-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHnmfJK3HDz-s0f74qO%2F-LJLGsonuhEWLq_04RSr%2F-LJLK5RzrW9RrRUtKUg3%2F2018-08-07%2014_39_02-Defold%20Editor%202.0%20-%20AnchoredGUIs.png?alt=media\&token=3d8299fa-4b0f-4854-a991-e12f8ec8d87c)

Then parent the other elements to this anchor GUI. You'll need to update their positions as they will now be relative to the anchor GUI.

![](https://59336108-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHnmfJK3HDz-s0f74qO%2F-LJLLkmcdiDUsx2SBBLA%2F-LJLLpRcfDVEyYDFLWoJ%2F2018-08-07%2014_46_34-Defold%20Editor%202.0%20-%20AnchoredGUIs.png?alt=media\&token=4bf8bb11-71dd-4dd7-bbd4-d916c25ea3d6)

Now when you scale the window the GUI elements will look to be spaced more consistently.

![](https://59336108-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHnmfJK3HDz-s0f74qO%2F-LJLGsonuhEWLq_04RSr%2F-LJLKpYPOBA9mhdQkQeO%2F2018-08-07%2014_41_59-AnchoredGUIs.png?alt=media\&token=06694f97-2961-4998-a9bd-0bc8120dedd8)

You should generally follow this example when anchoring elements to areas of the screen as even in less extreme scaling situations the spacing can look off without this. 

Using anchor GUIs can be useful for general GUI organization as well.