search

P1X-in / tanks-of-freedom-ii

Indie Turn Based Strategy in Isometric Voxel Art http://tof.p1x.in
Other
194 stars 19 forks source link

Enabled UI scaling for high resolution screens. #20

Closed GaidamakUA closed 2 months ago

czlowiekimadlo commented 2 months ago

This change is certainly interesting. I've been thinking about ways to make the UI bigger for higher resolutions, and this solution works very well. The issue I see is that UI is a bit oversized by default to make it readable on Steam Deck. On a big screen this can be jarring. Best solution would be to allow scaling, but I don't know yet how this could be achieved.

I think this PR is good, but it requires a toggle in the game settings to accompany it, so that players can decide if they want their UI to be too big or too small when they start the game on a 4k screen xD

Please let me know if you want to try to add that. If not, I can accept this PR as is, and add it myself.

dfgworm commented 2 months ago

A lot of of your UI seems to be made of Node2D nodes such as Sprite2D and Area2D. This makes it difficult to work with, as UI is supposed to be made of Control nodes, which have a lot of features specifically for UI. I am pretty sure they will make scaling issues simpler as well.

Also it's really easier to make UI using Controls, once you get used to it. The trick is to use a lot of containers almost everywhere. It should be the first thing you try when you want to do anything. Basically you just nest a bunch of BoxContainers inside each other and then change some layout properties for it's children, like minimum size and alignment. This can quickly produce almost any result you might need. This can create a lot of nested nodes, which is fine. You might want to look into 'unique node name' functionality in Godot. It's really a life changing feature that allows you to find objects inside scenes without relying on exact paths.

GaidamakUA commented 2 months ago

@czlowiekimadlo Unfortunately, my vacation is over and I won't have time to figure out how to create setting.

czlowiekimadlo commented 2 months ago

@czlowiekimadlo Unfortunately, my vacation is over and I won't have time to figure out how to create setting.

No worries, I'll handle that then.

A lot of of your UI seems to be made of Node2D nodes such as Sprite2D and Area2D. This makes it difficult to work with, as UI is supposed to be made of Control nodes, which have a lot of features specifically for UI. I am pretty sure they will make scaling issues simpler as well.

Also it's really easier to make UI using Controls, once you get used to it. The trick is to use a lot of containers almost everywhere. It should be the first thing you try when you want to do anything. Basically you just nest a bunch of BoxContainers inside each other and then change some layout properties for it's children, like minimum size and alignment. This can quickly produce almost any result you might need. This can create a lot of nested nodes, which is fine. You might want to look into 'unique node name' functionality in Godot. It's really a life changing feature that allows you to find objects inside scenes without relying on exact paths.

Yes, well... a lot of UI is made of Node2D specifically because Control nodes don't behave as I would expect, or are (seemingly) straight up broken. Not being able to size them, editor constantly resetting size or position of nodes despite them being "editable". It's a mess, both because of me and Godot. I have also tried some scaling on these nodes, but the pixelated textures on elements don't play nice. And neither does positioning of the nodes. I might have to try and refactor the whole thing in the future.

dfgworm commented 2 months ago

Control nodes don't behave as I would expect, or are (seemingly) straight up broken.

Yeah, it might seem that way at first. Especially if you use just plain Controls (they have their uses as well, but it's limited). It becomes much easier once you use containers. As i said, a lot of things can be achieved just by using BoxContainers and nothing else. It's just that you need to configure children of the container with some bizarre properties, like minimum size, 'expand' flags and alignment. I think the only way to understand all of this is to try, or at least see an example. But once you figure it out, UI just becomes a breeze. I can remake a few things from Node2ds into Controls if you want.

I have also tried some scaling on these nodes, but the pixelated textures on elements don't play nice

Well, obviously they can't magically scale textures to some weird ratio. I have never dealt with that problem, so i don't know much about it. The easiest solution is probably to scale images up? As for positioning, it does require some mingling, but i am pretty sure it is much easier to do with Controls than with Node2ds. There are a lot of other UI features that Control nodes provide, like generic hover tooltips, focus management and input filtering. Also Control Buttons are pretty neat.