Moving UI Elements

[Lunam]

I'm kinda struggling with moving around UI elements to better fit my new UI graphics I'm making. I understand the concepts, but I'm not real sure what I'm doing wrong.

In the UI JSON files (playing with the LoginWindow for now, as it's simple yet a little more complex than just a window), I see the 5 things i need to edit to move things around, though for the input boxes for Username and Password, im struggling.

 

"Bounds": "x, y, x2, y2",
"Padding": "x, y, x2, y2",
"AlignmentEdgeDistances": "x, y, x2, y2",
"AlignmentTransform": "x, y",
"Margin": "x, y, x2, y2",

As far as i can tell:

Bounds is the "worldspace" for the component(if the component resides outside of these bounds, it is inoperable and not visible)

Padding is pixel spacing off the walls of the bounds

I dont understand what te others are for, as, imo, all you need is the first two.

 

My problem, is that when I go to move the Username Input Box using the bounds, it stretches. When i *try* to move it using padding, i get literally nothing.

Can someone please elaborate how they are able to move their components so seemingly with ease?

[Tron]

"Bounds": "x, y, x2, y2",

x & y, where this entity starts by the (top left?) corner I believe - x2 and y2 being the size of the image.

 

"Padding": "x, y, x2, y2",

I believe this one is self explanatory but it's the padding around the bounds.

 

 "AlignmentEdgeDistances": "x, y, x2, y2", "AlignmentTransform": "x, y",

Don't worry about these unless your image just isn't going in the right spot (honestly if you're using this it might cause issues - stick to bounds)

 

"Margin": "x, y, x2, y2",

This one is mainly used for inventory/spells where you have an array of slots that need to be evenly spaced.

 

The way I work on my UI is estimate how many pixels my image needs to be and what each image within the whole needs to be. This allows me to use a calculator to precisely put everything where it needs to be.

[Lunam]

10 hours ago, Scaly said:

"Bounds": "x, y, x2, y2",

x & y, where this entity starts by the (top left?) corner I believe - x2 and y2 being the size of the image.

 

"Padding": "x, y, x2, y2",

I believe this one is self explanatory but it's the padding around the bounds.

 

 "AlignmentEdgeDistances": "x, y, x2, y2", "AlignmentTransform": "x, y",

Don't worry about these unless your image just isn't going in the right spot (honestly if you're using this it might cause issues - stick to bounds)

 

"Margin": "x, y, x2, y2",

This one is mainly used for inventory/spells where you have an array of slots that need to be evenly spaced.

 

The way I work on my UI is estimate how many pixels my image needs to be and what each image within the whole needs to be. This allows me to use a calculator to precisely put everything where it needs to be.

Thank you. I'm an idiot. I just freaking noticed that the input field is an image