[UI] layout system questions/bugs?

Hi @BitVenom,

I’ve worked a lot with the UI layout system recently and have found some strange behaviors. I’m just putting those here to know if those are “bugs” that should/could be resolved (pleaaase, pretty pleaaase), or if they are intended/too complicated to “repair”.


1 : vAlign not always working correctly (I’ve not tested hAlign but could do if you want me to)

image

Left side code, only vAlign of the Blue frame changing between “Top”/“Middle”/“Bottom” :

{
	type = "Frame",
	Layout = {
		size_WH = {w = 1, wr = "par"},
	},
	autosize = 1,
	arrangetype = "horiz",
	;
	{
		type = "Frame",
		name = "Red_frame",
		Layout = {
			size_WH = { w = 310, h = 122, wr = "px", hr = "px" },
		},
		backgroundColor = {255, 0, 0, 100},
	},
	{
		type = "Frame",
		name = "Blue_frame",
		Layout = {
			size_WH = { w = 200, h = 80, wr = "px", hr = "px" },
		},
		vAlign = "Top",
		backgroundColor = {0, 0, 255, 100},
	},
},

Right side code, only vAlign of the Blue frame changing between “Top”/“Middle”/“Bottom” :

{
	type = "Frame",
	Layout = {
		size_WH = {w = 1, wr = "par"},
	},
	autosize = 1,
	arrangetype = "horiz",
	;
	{
		type = "Frame",
		name = "Blue_frame",
		Layout = {
			size_WH = { w = 200, h = 80, wr = "px", hr = "px" },
		},
		vAlign = "Top",
		backgroundColor = {0, 0, 255, 100},
	},
	{
		type = "Frame",
		name = "Red_frame",
		Layout = {
			size_WH = { w = 310, h = 122, wr = "px", hr = "px" },
		},
		backgroundColor = {255, 0, 0, 100},
	},
},

The only difference is that the frame with the vAlign parameter is the first declared in the parent frame in the second case. Does it create a problem with the autosizing of the parent, which takes a default height of 170px (I don’t know where this height comes from) ?


2 : sizing to parent doesn’t always work correctly (hr = “par”) EDIT : see also n°3 in the next post as it’s certainly the same problem

image

Left side code, where the height of the blue frame is set to 1.0 of parent :

{
	type = "Frame",
	Layout = {
		size_WH = {w = 1, wr = "par"},
	},
	autosize = 1,
	arrangetype = "horiz",
	;
	{
		type = "Frame",
		name = "Red_frame",
		Layout = {
			size_WH = { w = 310, h = 122, wr = "px", hr = "px" },
		},
		backgroundColor = {255, 0, 0, 100},
	},
	{
		type = "Frame",
		name = "Blue_frame",
		Layout = {
			size_WH = { w = 200, h = 1.0, wr = "px", hr = "par" },
		},
		backgroundColor = {0, 0, 255, 100},
	},
},

Right side code, where the height of the blue frame is set to 1.0 of parent :

{
	type = "Frame",
	Layout = {
		size_WH = {w = 1, wr = "par"},
	},
	autosize = 1,
	arrangetype = "horiz",
	;
	{
		type = "Frame",
		name = "Blue_frame",
		Layout = {
			size_WH = { w = 200, h = 1.0, wr = "px", hr = "par" },
		},
		backgroundColor = {0, 0, 255, 100},
	},
	{
		type = "Frame",
		name = "Red_frame",
		Layout = {
			size_WH = { w = 310, h = 122, wr = "px", hr = "px" },
		},
		backgroundColor = {255, 0, 0, 100},
	},
},

The only difference is that the frame with the height parameter set to 1.0 of parent is the first declared in the parent frame in the second case.
If I understand correctly the problem (EDIT : certainly linked to “bug” n°3, so take the following for what it could be… me bullshitting a lot ^^), it seems to me that the code doesn’t parse all the sub-elements first to find the “correct” height of the parent first, and so take the default height of 170px (like in the “bug” n°1) for the blue frame, because nothing has already defined the parent height before it. Is that something that could be changed so that the first frame(s) declared in the lua table would correctly autosize too ?

3 : % of parent doesn’t always work correctly (certainly linked to n°2 in the previous post)

Code below used for all 4 of the screenshots, only “h” changes for the blue frame layout from 0.5/0.7/0.9/1.0 :

{
	type = "Frame",
	Layout = {
		size_WH = {w = 1, wr = "par"},
	},
	autosize = 1,
	arrangetype = "horiz",
	;
	{
		type = "Frame",
		name = "Blue_frame",
		Layout = {
			size_WH = { w = 200, h = 0.5, wr = "px", hr = "par" },
		},
		backgroundColor = {0, 0, 255, 100},
	},
	{
		type = "Frame",
		name = "Red_frame",
		Layout = {
			size_WH = { w = 310, h = 100, wr = "px", hr = "px" },
		},
		backgroundColor = {255, 0, 0, 100},
	},
},

As you can see in the screenshots, all the percentages under 1 work correctly (EDIT : wrooooong, as seen in the edit below), but as soon as 1.0 is used, the problem from the “bug” n°2 comes back. That’s strange, to say the least ! It’s as if putting 1.0 changes the way the UI calculates the sizing of the frames, I really don’t understand this one.

EDIT :
I’ve made more tests. It’s even stranger than I first thought !
Same code as above, but with h = 0.95/0.96/0.97/0.98/0.99/1.0 :

image

As you can see, the blue frame seems to follow the percentage of parent as asked… but the parent is calculating its own height in a way I clearly don’t manage to grasb ! (the parent’s height being sometimes even bigger than the heights of any of its childrens oO !)

And just to confirm the previous tests done for the “bug” n°2, this “bug” occurs ONLY when there is no frame(s) with declared height BEFORE the frame with the %parent parameter in the lua table, as seen below with 0.97%parent for the blue frame BUT in second place in the lua table, which is working as intended because the red frame has its height defined to 100 :

image

bumping for @BitVenom and posterity :stuck_out_tongue: ^^

The following bug is also still currently present in the game : [UI] bug into the OPTIONS / gameplay Tab when used from main menu

1 Like