GUI text nodes - what is size y for?


#1

So trying to figure out some GUI things I figured out that changing size from auto to manual, then clicking the [] line wrap button, the X value of size will determine when the text will start to wrap (mostly - a large word with no space might exceed the X value). I can not figure out what size Y does.

Oh there are more questions, enough for me to request more GUI tutorials; I have found the colorslide tutorial more useful when also reading manual and examples, but it is not fully satisfying.


#2

The y-value doesn’t have any effect on how the text is rendered. You can get the size of a node by calling gui.get_size() which will return the size you have defined in the properties panel. For text nodes it is however recommended to use gui.get_text_metrics() instead.


#3

When you do gui.pick_node() to check input (for instance) against node boundaries, then the y component is used for all nodes.


#4

The colorslide tutorial is more about creating a certain GUI structure than digging into the details of how GUIs work so there is certainly a need for a tutorial that focuses on the latter. That said, the colorslide tutorial can absolutely be improved. I added some details to the text yesterday.


#5

Good news!
Found a typo maybe in:
The level selection screen
3. -> 100,100,0 should be 150, 100,0 I think…

Also, to get the text sized I needed to use scale (x2 y2). I figure there is no font size value, (just a scale) because of how the GUIs adapt to different resolutions.

Another tidbit:
Since I am on a laptop with display scaled to 150% (essentially turning 1920x1080 into 1280x720) sometimes the behaviour seems odd. In this tutorial, if I leave the ‘done’ box just to the right of the render preview rectangle, it shows up when I run the game because for some reason I end up with extra padding to the left and right of the main play area. This extra padding disappears if I change the laptop display to 100% scale. Alternatively I can manually resize the game window in windows and the elements re-align and resize(which is interesting to do).