How to get the physical size and position of a node?

[locka99]

I'm trying to write a simple 2D game. I'm using flex layout and nodes to control where the UI goes. One node is tagged GameAreaTag to represent the game area. I have this laying out quite nicely but now I want the game viewport to exactly overlay the game area node.

I have an update callback where I can query for the node and also the camera for the game. I have code which can set the camera viewport anywhere in the window. What I can't figure out is how I get the physical position and size of the node as it appears in the window.

There used to be a physical_size() function on a Node but it was taken out in pull #15163 (about a year ago) and I don't know what replaced it or what I should call instead. There is a border rectangle expressed in logical pixels but not physical. Would I have to convert this through scaling or something?

So basically given a Node, which has been laid out on the window I want to know where a corner & dimension in physical pixels. Is there a demo for this or something I can look at?

[ArmandBurger]

The Node has a required component named ComputedNode. There are 3 properties that define a nodes size. This being size, content_size, and inverse_scale_factor for this Node. Here is an official Example showing how to use these properties to determine all information you want. Note on hdpi displays that physical size and logical size are not always the same so inverse_scale_factor is very important to get the actual position and size on screen.

Lastly, I don't know why you want the position, but I'd advise to rather use offsets for UI that is positioned absolutely. I have a mobile game with fairly complex UI's and have never required the use of knowing the UI's position. Meaning: use top, left, right, bottom, on the node to position your ui node relative to something else if it has to be positioned absolutely. Example would be if you have a player profile card with an attribute marker such as Warrior, Assasin, then you can place the attribute marker absolutely as a child of the card and position it right: Val::Px(XX), top: Val::Px(XX). Trying to manually position your UI will absolutely drive you insane. Don't try to fight the layout system.

Laslty, if you want to use UI in world space use this Render UI to Texture Example

[locka99]

Thanks very much for the examples, I will see if I can get them to work.

To be clear I'm not manually placing the UI or the game. I'm using flex boxes to position the scoreboard and elements and exactly scale the game area (which has a fixed ratio) optimally for the window. So Bevy resizes the nodes based on weights, orientation etc. I am letting flex do the work of giving me a place to put my game on top. But once computed I need to set the camera viewport to match the node, and that's the missing step.

[ArmandBurger]

Cool beans. Sorry for the overreaction. I just saw "position" and had ptsd flashbacks to my own attempts at fighting the layout system. 🙈