How to Scale UI Dynamically?

[pyxledev]

Hey everybody. Recently been wanting to implement a way to scale up the UI on my game, because it stays the same size no matter the screen dimensions.

Here is a clip from ThinMatrix, which is exactly what I want:


And here is a photo from my game:


Thanks!

[ivan]

From the animated .gif I see that the UI is using units that are independent of the camera. The camera viewport appears to be locked based on the height of the frustum while the UI sizing is in pixels. So you want to lock your scene size to the height of the window (for example, make sure the window height always equals 20 tiles and adjust the width as necessary). In reality there all sorts of other issues to consider, like for example the layout in the .gif will not work in portrait mode.

[dusoft]

https://love2d.org/wiki/love.graphics.scale

Also you can check older libraries such as
https://github.com/tomlum/simpleScale

[GVovkiv]

https://love2d.org/wiki/love.graphics.scale

Also you can check older libraries such as
https://github.com/tomlum/simpleScale

First, even if you gonna recommend such libraries, then better off this https://github.com/Vovkiv/resolution_solution (*wink-wink*) or something else from here https://github.com/love2d-community/awe ... 2d#drawing
Second, it's not gonna work here, probably.
If you scale UI sprite in non-integer way, they gonna look bad. And if you gonna scale up fonts... don't.
It's better off to draw UI element's with some primitives or some kind of SVG implementation (which practically same thing here) and update then once user changed size or window size changed. And redraw fonts also according to this. If you scale up Tahoma 14 with x2, it doesn't become Tahoma 14, it become stretched as f Tahoma 14, so redraw it in 28.
As ivan mentioned, here might be some issues, including layout (if you scale UI, some elements might overlap and you don't want it to happens), making sure that UI is always crisp.

I think most biggest problem here is math and how you want to handle UI.
For example:

Code: Select all

love.graphics.rectangle("fill", 10, 10, (love.graphics.getWidth() * 0.10) * ui_global_scale, (love.graphics.getHeight() * 0.05) * ui_global_scale)

In this case, we got rectangle that will take 10% of screen by width, 5% by height and it's draw on 10, 10, and also multiplied by global UI scale value. Re-draw it once you need to. Make some overlap logic (for example, if this rectangle overlaps another one, you might want to place it in different place), design it against different resolutions/layouts, add scaling for fonts (if any) based on screen size and global scaling value and I think you should be good.

PS: Even if you use some scaling library, like mine, I think it's still gonna be good idea to render UI independent of game scaling. I can tolerate game not being rendered crispy due to scaling, but not UI.

[dusoft]

https://love2d.org/wiki/love.graphics.scale

Also you can check older libraries such as
https://github.com/tomlum/simpleScale

First, even if you gonna recommend such libraries, then better off this https://github.com/Vovkiv/resolution_solution (*wink-wink*) or something else from here https://github.com/love2d-community/awe ... 2d#drawing

I could, but it's read-only and that usually means unmaintained (not accepting issues or pull requests), so I won't.

[GVovkiv]

First, even if you gonna recommend such libraries, then better off this https://github.com/Vovkiv/resolution_solution (*wink-wink*) or something else from here https://github.com/love2d-community/awe ... 2d#drawing

I could, but it's read-only and that usually means unmaintained (not accepting issues or pull requests), so I won't.

It's kinda funny, considering that I'm author and read-only in my case doesn't mean that I never-ever would return to it (In fact, I have some willingness to return working on it, most notable make proper/better manual/docs for it), and also weird to not recommend my library considering that one that you linked was last time updated 4 years ago and written in worst way possible!

[dusoft]

First, even if you gonna recommend such libraries, then better off this https://github.com/Vovkiv/resolution_solution (*wink-wink*) or something else from here https://github.com/love2d-community/awe ... 2d#drawing

I could, but it's read-only and that usually means unmaintained (not accepting issues or pull requests), so I won't.

It's kinda funny, considering that I'm author and read-only in my case doesn't mean that I never-ever would return to it (In fact, I have some willingness to return working on it, most notable make proper/better manual/docs for it), and also weird to not recommend my library considering that one that you linked was last time updated 4 years ago and written in worst way possible!

Please don't get offended. I know you are the author, but you also state that it's unmaintained. The other might be as well, it's up to the op to check. I link to the awesome list plenty in other threads.

[GVovkiv]

Please don't get offended. I know you are the author, but you also state that it's unmaintained. The other might be as well, it's up to the op to check. I link to the awesome list plenty in other threads.

I'm not offended, I just found this to be weird choice that based on maintaining, when library that you mentioned wasn't updated in 4 years, author
is not active on this forums (in fact, I can't found forum page for this simpleScale library), while I active and actually answers on forum page for library (viewtopic.php?t=92494). And, sadly, same for other libraries. Push dev doesn't respond for pulls and issues, same for Maid64, simpleScale. All things considering, my thing more maintained then anything here, lol.

Anyway, I think this scaling libraries is not exactly what needed here. I think author need way to scale UI up and down independently from everything else. As some UI libraries do