How to force an aspect ratio regardless of editing resolution

Godot Version

4.2

Question

I’m trying to set up my game so that it mimics how Street Fighter 3 is displayed. That game renders out at 384 x 224, but is then squished to fit inside a 4:3 container. When playing it on an emulator you can see how the pixels appear taller than they are wide. Is there any way to replicate this in Godot? I understand that it’s not exactly a common scenario but I wonder if I’m missing anything that forces an aspect ratio regardless of the set resolution. Thanks!

Maybe you can alter the scale of a Subviewport container?

1 Like

Excellent tip! If I take the finished game as a scene and pipe it through a final SubViewport step, I get a solid looking result. It sounds slightly hacky but it allows me to separate the main development from the 4:3 “squishing”. Here’s how I did it:

The original character sprite is being displayed in a basic scene at 384 x 224. To get the desired 4:3 aspect ratio, I’m intending to stretch this image vertically, while retaining the 384 horizontal pixels.

Therefore to calculate my viewport height, I do ((384 / 4) * 3), giving me a final resolution of 384 x 288. I change this in my project settings, but I now need to scale the game’s image to fit that.

I create a new scene, and I dump the original basic scene in a SubViewport, under a SubViewportContainer. I set this new scene as the “Main Scene” in my project settings.

In the SubViewport node, I set the size to my original scene’s resolution (384 x 224). This is to be scaled by the SubViewportContainer node.

I set the size of the SubViewportContainer node to the desired output resolution, as set in the project settings (384 x 288). Because of the inspector’s tendency to truncate / round decimal numbers, I set the scale (self.scale = Vector2(1, 1.28571428571)) in a script. The Y-scale is calculated by the new resolution divided by the original resolution (288 / 224).

The sprite should now be displayed correctly in a 4:3 aspect ratio window!


Here’s a comparison against an emulator. It’s not exactly equal because the window sizes aren’t the same, but this demonstrates the scaling worked properly. Thanks for your help!

1 Like