GUI Scaling for Web Development

[noeinan]

I'm starting my code from scratch and just cannibalizing old code into a new architecture for a current game project. One of my main goals is to prioritize GUI scaling early so I don't have to redo a bunch of stuff when I want to port to desktop vs mobile (probably gunna export the game to web and just have it scale similar to a website that has a mobile vs desktop version.)

Accessibility is really important to me, and recently I took a look at the improved accessibility features in Windows 11 and it's super nice. Not perfect, since sometimes the accessibility features don't play well with specific websites or programs. But overall, quite good. I want to use that as my goalpost for accessibility for my game.

So, I want the GUI to scale up and down fluidly with resolution. To test out the default, empty or mostly empty RenPy game, I simply went into options.rpy and changed the resolution to match the resolution size I'm making my images: 3360x1890 (175% bigger than 1920x1080 bc I want to be able to zoom in and out)

I figured I'd design the game based on the highest resolution, and just let the GUI move and scale to accommodate smaller.

When I change:

Code: Select all

## Calling gui.init resets the styles to sensible default values, and sets the
## width and height of the game.
init python:
    gui.init(1920, 1080)

It breaks several screens. I sorted the default screens into two types of broken.

1. Button/Text Position doesn't scale AND Button/Text Size doesn't scale

Screens that break this way: Quick Menu, Preferences, Main Menu, About, Help (also in this category is a simple screen I made to use as a template later)

2. Button/Text Position does scale BUT Button/Text Size doesn't scale

Screens that break this way: History, Save, Load (background image doesn't scale either)

I know someone must have developed for mobile using RenPy before, and thus had to figure out all this scaling stuff, so I thought I'd ask for help while I'm still in the early stages and hopefully save myself the hassle of having to redo everything later. If anyone has good advice for me, I'd appreciate it! I found a few threads but none of them were super recent, nor did they really give me what I was looking for.

Threads I looked into:

A discussion on how to scale text separate from the accessibility menu, which I guess doesn't work super well.

viewtopic.php?f=8&t=62968&p=545795&hili ... ng#p545795

Discussion on UI scaling, writing your game at one resolution and letting RenPy scale it on its own. But maybe that doesn't work well, so I think I have to still write it myself.

viewtopic.php?f=8&t=59762&p=532838&hili ... ng#p532838

Issues one may run into scaling GUI (maybe not applicable since I'm not switching from an old version of RenPy)

viewtopic.php?f=8&t=50969&p=491734&hili ... ng#p491734

Issues someone ran into with Windows Accessibility features clashing with RenPy GUI scaling.

viewtopic.php?f=8&t=52342&p=498227&hili ... ng#p498227

[noeinan]

viewtopic.php?t=44132

Still doing research on this issue. So far all I've come up with is... "Use xalign and yalign instead of xpos and ypos" and "use programming to generate as much graphics as possible instead of using images".

Right now I'm envisioning just having the player select whether they're on mobile or desktop, but is there a way for RenPy to automatically read the resolution of the player's device and then apply different rules based on that? I feel like I saw something like this in the forum at some point, but I'm not remembering it.

viewtopic.php?f=8&t=63703&p=548801&hilit=mobile#p548801

Looking at this it seems there's now an extra folder for phone resolution! Hmmm, if I want my game to look different in portrait vs landscape mode then I would need to edit some stuff I think.