How would I go about creating a pixel art theme for a game? I don’t want to lower the resolution of the game, as it is supposed to render the game in the native resolution and I want crisp effects and text. Currently Godot makes a single pixel of the ui a single pixel on the screen. How would one go about fixing that? UI looks like this currently:

Do I really have to scale every control, or can I set it up for controls to automatically display its textures bigger?

EDIT: Here is a zoomed in version of the picture above. This should clarify of what I want to achieve (without having to zoom in)

  • CasualTee@beehaw.org
    1·
    1 year ago

    If you are working with vector font, you can set some global settings that should help.

    In Project Settings, tick Advanced Settings and then look for:

    General -> Rendering -> Textures -> Canvas Textures -> Default Texture Filter: set to Nearest

    General -> GUI -> Theme -> Default Theme Scale: set to the appropriate value, e.g., 4

    Note that in this same panel you can set the default theme to your own. Then, as suggested, reload the project for the changes to apply.

    If you are working with bitmap fonts, then yes, you have to manually scale the root Control node of all your scenes, while still enabling the texture filter to nearest. But there should be few of them hopefully.

    Though, I’m not an expert, so there might be a better way.

    • Smorty [she/her]@lemmy.blahaj.zoneOP
      2·
      1 year ago

      I already have this set, but the default theme scale doesn’t change anything on my case. I changed the default scale, I changed the scale specifically allocated to the theme, but all these kept the “round” pixel art edges of my panel (in the background and on the buttons) the same size unfortunately. Also, my goal is not to scale my font, but to scale the background. Scaling fonts I just do with the font size parameter.

      • CasualTee@beehaw.org
        2·
        1 year ago

        Ah, I see. I think you might need to specify your own pre-scaled texture for those then. By creating a StyleBoxTexture, as many as needed for all the disabled/hover/normal/… effects and use those in your theme. Which is not ideal, but that’s all I have.

        Otherwise, if you want to automatically scale your UI, you can have a look at the viewport suggestion from @magikmw and make an auto-loading node that does the necessary manipulations for you. Though it will scale everything, font and icon included.