How can I finely controll the position of a node?

Questions
1

My screen got a button that I want to keep in the same position regardless of how the screen scales.

00
00640Ă—982 93.4 KB

If I use X Anchor and Y Anchor on it it moves (because it is 10% from the right).

26
26229Ă—1092 30.2 KB
21
211608Ă—828 97.9 KB

I could create a parent node set it at the width of the screen and use X Anchor on that. But that only solved the X (and gives me an extra node which is bad in GUI heavy scenes, because you could hypothetically run out). How can I make it in the correct place in Y?

Here is the project.
AdjustmentMode.zip (1.2 MB)

2

I don’t know how to solve it without one more node.
But if we will add one more node with the next options, it will work:

image
image846Ă—1938 183 KB

Project:
AdjustmentMode.zip (1.4 MB)

What the logic:
inv_panel is Stretch node, that mean that his node has dynamic size depends on resolution.
What is the anchor point in case when size could be changed? Top right corner of this panel (because our button position should be static relative to this corner).
That means that we need to add a point in top right corner that will be pinned there (or respect the same rules, as a panel node)
That why I added this respect_parent node in this corner.
Last thing here: set position of our button inside this new node (we have to turn off anchors for this button)

1 Like
3

Also it possible to use this way:

image
image1017Ă—1848 186 KB

(it works because our respect_parent node uses the same mode as inv_panel, that means this point will be all the time in the same place.)

1 Like
4

Technically, it’s possible to do without parent node, but then you need a bigger texture for the button.

image
image1840Ă—2006 415 KB

or…
Defold needs more flexible pivot point system with vector3 pivot point (that applies negative pivots too) instead of “side of the world” system. But, unfortunately, for now, it’s out of our near future plans, as I know. @britzl knows more

1 Like
5

Got another questions about Adjustment modes and anchoring :slight_smile:

I have a fairly complex scene, which I want to scale in a certain way. But I just can’t figure out a way to do it. Is it possible to do with Adjustment modes and Anchoring? Or do I need to do it manually in code?

question
question1634Ă—601 19.6 KB

My problem is that I can’t get the pink box to stay in a decent relative position to the grey one.

Any ideas?

Here is a test project
layoutTesting.zip (5.0 MB)

1 Like
6

Would really appreciate if you could take a look at this when you have the time @AGulev or @britzl or anyone :slight_smile:

1 Like
7

In this case, you wanna use “fit” for the position and “stretch” for size and I don’t know how to do that ( (maybe @britzl know?)
I have only one idea: to use “fit” for your scroll list for the position and calculate/set the size of the stencil node manually.

8

I’d need to experiment with that. I can try to squeeze that in next week, but I’m pretty pressed for time right now.

1 Like
9

So I figured I should just change the size of the box myself - but I am having some problems with the math. Do anyone know how I should do it?

10

Sure!
Archive.zip (6.5 KB)

	local stencil_node = gui.get_node("stencil")
	local layout_size = vmath.vector3(720, 1280, 0) -- your layout size
	local screen_size = vmath.vector3(570, 1155, 0) -- Hardcoded for simplicity, but it should be: (render.get_window_width(), render.get_window_height(), 0)

	local sx, sy = screen_size.x / layout_size.x, screen_size.y / layout_size.y -- scale coef for  x and y
	local fit = math.min(sx, sy) --a fit scale coefficient 
	local node_size = gui.get_size(stencil_node) -- get current size
	node_size.y = node_size.y/fit * (1/sy) -- when we divide by fit we canceling a fit transformation and then apply a stretch by  multiplying  (1/sy)
	gui.set_size(stencil_node, node_size)
2 Likes
11

Thank you @AGulev works like a charm!

2 Likes