So I’m starting a new project which is pixel art based and has a base resolution of 592x400, and I want to make it so that when the resolution is increased beyond that point, instead of having black bars around the screen, the main viewport of the game is centered to the new resolution and has a colored border filling in the gaps. If possible, I also want to make it so that when the resolution scales at intervals of 592x400, it becomes possible for the main viewport to increase in size to match that new scale. I’ve done a bit of fiddling with the project settings (setting stretch mode to viewport and stretch aspect to expand), but that alone doesn’t seem to be enough to give me the results I want. Can anyone help me with this?
It’s not possible to draw anything outside the main viewport (the black bars). You’ll need to use a SubViewport where your game will render to and use a SubViewportContainer to render it to the screen.
If you need more control about how it will render, like only scaling to integer multiples of its resolution, then you’ll need to use a TextureRect or Sprite2D and use a ViewportTexture pointing to the SubViewport. You’ll need to forward all input events to that SubViewport manually.
Maybe you can just add a control node, similar to a UI element, that will act as the border you want. And you would only need to change how that control node works when the resolution or aspect ratio is changed.
It can be a Panel or PanelContainer that you can edit the Style on the go each time the resolution is changed.
You may also need to make sure your mouse inputs are not blocked by the PanelContainer (center area where border is not drawn) and your mouse input should not work if the mouse is at the border.
