Working at small resolutions in the editor

[dweipert]

Godot Version

4.2.2

Question

I’m developing a game at Gameboy Advance resolution. So 240x160.

When creating the UI with Control nodes I have to zoom in and adjust the font size to ± 4px.

Everything is blurry at that zoom-factor in the editor.

I was wondering whether there’s a way to not work with blurry texts and elements with some editor resolution setting that I haven’t found yet.

Screenshot:

[peltodev]

I don’t quite understand what you mean by adjusting the font size to ± 4px. However, I haven’t had any problems working with very low res UIs. Have you turned antialiasing off where that’s possible? And are you using a proper pixel font?

I don’t think the editor view can be made to match the final rendering exactly but I have found it to not hinder my work.

[indicainkwell]

One way is to have a tree structure like the following:

- main: Node
  - SubViewportContainer
    - SubViewport
      - GameScenesHere
  - YourUI: Control
    - Button
    - Label

Where your Project Settings > Viewport Width and Viewport Height is at a higher resolution, say, 720x480.

Where SubViewportContainer

• set to Full Rect anchor preset
• set Stretch to true
• set Stretch Shrink to 3. The SubViewport will have the resolution of 240x160.
• set Texture > Filter to Nearest. (test if it works for you) The objects that are in the tree of the SubViewport will inherit this setting.

Where SubViewport

• set Disable3D to true
• set Snap 2D options to true (test if that works for you)

Where your textures are imported with

• set Compression > Mode to Lossless
• set MipMaps > Generate to false

Summary

You render your UI at a higher resolution with a normal font size. Then your pixel art is rendered by the SubViewport at the Gameboy Advance resolution.

• Make sure your textures are imported as lossless so you don’t see compression artifacts.
• You probably don’t want mipmaps in a pixel art game.

Edit: You also should use a font designed for low resolution. Sometimes referred to as pixel fonts. That alone will render fonts more crisp and may obviate SubViewport. Make sure to turn off any smoothing or anti-aliasing.