GUI Positioning of anchored elements

Questions
1

Hey folks, i’m roughly following the guide written by insality on how to position gui nodes using anchors and the sort. i have this top panel here, and it looks correct in the view, but when i run the build it seems to show up in a completely different location. for reference It also might be worth noting that I’m using the fixed fit projection mode. what am i missing?

Here’s an example of what I see (on the left) and what I designed in the editor. For reference, the aspect ratio here is same as my game, but it’s scaled down.

image
image1703×987 263 KB

And here’s the properties of the rest of the nodes in GUI.

root

image
image346×864 35.8 KB

N_Anchor

image
image349×974 38 KB

2

What does it look like when running?
From what I see, your N_Anchor pivot is incorrect, it should be North.

3

Here’s what it looks like in game:

image
image499×869 133 KB

Changing the y anchor on the N_Anchor to top and also changing the pivot to north seem to have no effect.

Note that the size of this window is the correct aspect ratio of the game, however smaller in size. If i change it to the size in the display file, it lines up. and if it continues to grow, it appears off screen.

image
image958×999 237 KB

4

I’m not quite understand your seriano.
Here is something you can reference:
For example your display size is 600 x 800

  • root: pivot = Center, position = (300, 400), adjust mode = Stretch
  • N_Anchor: pivot = North, position = (0, 400), adjust mode = Stretch
  • top_panel: pivot = whatever, position = whatever, adjust mode = Fit
5

I believe I am following this:

Display size: 640x1136
root: pivot = center, position = (320, 568), adjust mode = Stretch
N_Anchor: pivot = North, position = (0, 568), adjust mode = Stretch
top_panel: pivot = North, position = (0, 0), adjust mode = Fit

I tried moving the adjust mode to Stretch as well (which is what I had originally). It makes no difference.

For reference, I have also included the main collection.

image
image1658×824 194 KB

function init(self)
	print("running")
	msg.post(".", "acquire_input_focus")
	msg.post("@render:", "use_fixed_fit_projection", { near = -1, far = 1 })
end
6

It seems the issue was caused by me using a material on my box nodes, since I was getting a similar warning by having a multi paged atlas with regular sprites. Just by chance I decided to remove that and try it out… Mytsterious

2 Likes