Calculating size of images proportional to window's size

Graphics
1

So my game uses rasterized SVG graphics that are scaled for the highest possible resolution (1080p). Scaling backgrounds for each screen (it’s a tycoon-like game or as some people call it “spreadsheet game” so nothing more advanced is needed) were simple enough to scale down, just put them at 0,0 and make them the size of client area of the window. But now I need to scale other objects such as game’s title image, ui elements and so on as well proportionally to the scaled-down background.

How do I do that? I’m terrible at math. Sorry.

2

You need to know the standard screen size the images were designed for. In your case, it looks like they were designed for 1920x1080. Lets call this referenceWidth and referenceHeight. You need to know your target screen size. Let’s call this screenWidth and screenHeight. Usually the height will be used for the scale reference, so the scale will be screenWidth / referenceHeight. Now use this scale on your other images by multiplying both the position and size of the UI item by the scale.

1 Like
3

Thank you very much.