# Is there an easy way to set and get position of a gui node when the screen have been resized? (SOLVED)

**URL:** <https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575>\
**Category:** Questions\
**Created:** [February 6, 2018, 4:05pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575 "2018-02-06T16:05:37Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mattias\_Hedberg](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mattias_hedberg/32/433_2.png) [@Mattias\_Hedberg](https://forum.defold.com/u/Mattias_Hedberg)\
**Post date:** [February 6, 2018, 4:05pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/1 "2018-02-06T16:05:37Z")

</div>

GUI coordinate spaces makes me confused.

Maybe I am doing something wrong but it feels like I am forced to do a lot of extra stuff to be able to set somethings position.

I have this scene

 ![08](https://forum-defold-uploads.b-cdn.net/original/2X/b/bf0b99ff9ee7803c6caf4c520e3b002d45e02349.png)

The blue dot is a child to the green dot which is a child to the red dot. I set the position to the dot with gui.get\_screen\_position() which works if the Project dimension == Screen dimension.

I have 5 different tests here.  
**White** : Mouse position, this is the raw mouse position that I get with action.x  
**Red** : This is the positions of the white node reported with gui.get\_screen\_position(), that we set to a parent of the actual red node that have `Adjust Mode: Stretch`.  
**Yellow** : This is the position of the white node with `to_real_screen_positions(gui.get_screen_position())`, that we set to a parent of the actual red node that have `Adjust Mode: Stretch`.  
**Green** : This is the positions of the white node reported with gui.get\_screen\_position(), we set this to the node directly without any `Adjust Mode: Stretch`.  
**Yellow** : This is the position of the white node with `to_real_screen_positions(gui.get_screen_position())`, we set this to the node directly without any `Adjust Mode: Stretch`.

If we then change the size of the screen to be different than the project defined to something like

 ![51](https://forum-defold-uploads.b-cdn.net/original/2X/3/3aebf24a44de20f2abf964c8ad198dcb61386655.png)

What happens if we then set the position of our things to different nodes?  
 ![screen_pos_post_1](https://forum-defold-uploads.b-cdn.net/original/2X/5/5a836e0444f02cc786598f91f656ff0070101895.gif)  
That happens, we notice that the only way to get an accurate position is to

1. Set the position on a node that have `Adjust Mode: Stretch`, but you probably have a sprite on it so you can’t have it on the node directly but need to do it on a parent (else the sprite would of course stretch with the window).
2. Get the position of the node with `gui.get_screen_position()`
3. Convert the position to real screen position with `to_real_screen_position()`

This seems quite convoluted as it requires so much more than just setting the position. The position we get from Defold isn’t the screen position, we need a parent for every single thing we want to move, we can only use Adjust Mode: Stretch on the nodes.

Is all this _really_ needed or _Is there an easy way to set and get position of a gui node when the screen have been resized?_

* * *

```
function M.to_real_screen_position(pos)
  local screen = vmath.vector3(pos)
  screen.x = screen.x * (project_width/window_width)
  screen.y = screen.y * (project_height/window_height)
  return screen
end

```

---

<div class="post-metadata">

**Author:** ![ross.grams](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/r/cab0a1/32.png) [@ross.grams](https://forum.defold.com/u/ross.grams)\
**Post date:** [February 6, 2018, 7:47pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/2 "2018-02-06T19:47:29Z")

</div>

You can set the position of nodes with any Adjust Mode if you have the right conversion from screen coordinates for each mode. I recently went through this with Tomires, maybe what I wrote [here](https://forum.defold.com/t/issue-with-implementing-a-slider-in-gui-solved/16098/8) can help you. (the second half of the post). I think I have my formulas backwards compared to yours—dividing and subtracting instead of multiplying and adding—but it should still give you the right idea. With the “Fit” and “Zoom” Adjust Modes, nodes maintain proportion, so you need a uniform scale factor. Then you’ll also have an offset in x or y based on the difference in proportion from your project width/height.

---

<div class="post-metadata">

**Author:** ![Mattias\_Hedberg](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mattias_hedberg/32/433_2.png) [@Mattias\_Hedberg](https://forum.defold.com/u/Mattias_Hedberg)\
**Post date:** [February 7, 2018, 1:13pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/3 "2018-02-07T13:13:33Z")

</div>

Thanks @ross.grams as always Rendercam does it for you! 😃

I have to say though that isn’t this counterintuitive? When you say to the engine “place my node here” as a user I would expect it to be at that location regardless of which Adjust Mode the node I am moving is using. Shouldn’t the engine take care of transforming the translation depending on the Adjust Mode? Surely the most common user case would be to “place my node here” and not “place my node where it should be with the adjust mode applied”? Interested what people think about this.

---

<div class="post-metadata">

**Author:** ![ross.grams](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/r/cab0a1/32.png) [@ross.grams](https://forum.defold.com/u/ross.grams)\
**Post date:** [February 7, 2018, 2:54pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/4 "2018-02-07T14:54:59Z")

</div>

Yeah, it’s definitely not intuitive. I can’t imagine someone _not_ being confused, honestly. The difference between actual screen coordinates and the “stretchy” coordinates of action.x and action.y is pretty weird too, though I guess that makes some sense for mobile devices with really high-res displays?

Actually, now that I think about it, I am sure this is all designed so that nodes don’t change their positions no matter what Adjust Mode they use or how the window is changed. That is, you can call gui.get\_position on a node and always get the same result.

Maybe we just need gui. **set** \_screen\_position?

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [September 27, 2019, 1:14pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/5 "2019-09-27T13:14:22Z")

</div>

I’m trying to wrap my head around this, with the simplest example possible. The aim is to make the “pie” node always appear in the top right corner.

```
local node = gui.get_node("pie")
local window_w,window_h = camera.get_window_size()
local config_w = sys.get_config("display.width")
local config_h = sys.get_config("display.height")
local x = window_w * (config_w/window_w)
local y = window_h * (config_h/window_h)
gui.set_position(node, vmath.vector3(x,y,0))

```

The result (before and after window resize):

 ![46](https://forum-defold-uploads.b-cdn.net/original/3X/c/7/c71b5918a325f7147bbbe2ebab9981ab70f109bd.png)  
 ![52](https://forum-defold-uploads.b-cdn.net/original/3X/9/7/9724ffbf0166b5726ee5ceb12d3f96e6f882fe4a.png)

What changes are needed for it to work?

[GUIPositioning.zip](https://forum-defold-uploads.b-cdn.net/original/3X/c/6/c6e6ce39e3308db402319a2b50fc1a321b8fcf0c.zip) (234.9 KB)

Edit: Found [this post](https://forum.defold.com/t/issue-with-implementing-a-slider-in-gui-solved/16098/8). Is this what I need to do? This is hard!

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [September 27, 2019, 1:54pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/6 "2019-09-27T13:54:55Z")

</div>

I decided not to reinvent the wheel and solved it with Rendercam:

```
local rendercam = require "rendercam.rendercam"

function init(self)
	rendercam.add_window_listener(msg.url())
end

function on_message(self, message_id, message, sender)
	if message_id == hash("window_update") then
		local x,y = rendercam.screen_to_gui( message.window.x, message.window.y, gui.ADJUST_FIT )
		gui.set_position(gui.get_node("pie"), vmath.vector3(x,y,0))
	end
end

```

🤩

---

<div class="post-metadata">

**Author:** ![ross.grams](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/r/cab0a1/32.png) [@ross.grams](https://forum.defold.com/u/ross.grams)\
**Post date:** [September 27, 2019, 2:33pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/7 "2019-09-27T14:33:39Z")

</div>

What happens if you set the X and Y anchors?

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [September 27, 2019, 2:44pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/8 "2019-09-27T14:44:13Z")

</div>

Not sure what you mean?

---

<div class="post-metadata">

**Author:** ![ross.grams](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/r/cab0a1/32.png) [@ross.grams](https://forum.defold.com/u/ross.grams)\
**Post date:** [September 27, 2019, 2:51pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/9 "2019-09-27T14:51:17Z")

</div>

All GUI nodes have “X Anchor” and “Y Anchor” properties. If you set these to “right” and “top” then it will move relative to the top right corner when the window is resized. You can set them in the editor, or set them at runtime with [`gui.set_xanchor` and `gui.set_yanchor`](https://defold.com/ref/gui/#gui.set_xanchor:node-anchor). You shouldn’t have to set its position manually.

---

<div class="post-metadata">

**Author:** ![totebo](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/totebo/32/36087_2.png) [@totebo](https://forum.defold.com/u/totebo)\
**Post date:** [September 27, 2019, 3:05pm UTC](https://forum.defold.com/t/is-there-an-easy-way-to-set-and-get-position-of-a-gui-node-when-the-screen-have-been-resized-solved/16575/10 "2019-09-27T15:05:13Z")

</div>

Ah, I was thinking about that. My use-case, however, is a mini map; a circle of point of interest around the player. These are constantly moving (depending on the player’s position) so the anchors would change all the time. Maybe there is a way to do it, but I can’t figure it out! In any case, Rendercam works now.
