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)
You can likely use viewports for this. Render the layers you want to a viewport with different resolution and place the viewport in front of the main camera.
At that point it makes more sense for me to just scale the root Controll I think. I want to use some fancy smoothie g animations when interacting with the menu, so that’s the way I’ll do it. Thank you tho!
You can try going to project settings > display and setting the stretch mode to canvas_items. This will keep the aspect ratio but scale the resolution of the game. Unless you’re going full retro it should be fine to have a higher resolution with pixel art.
I already have it set to this setting. So unfortunately this doesn’t fix my issue. I’m trying to display the pixel art background with “chunkier” pixels, not the font. The font shall stay the same, but the other textured elements should grow.
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.
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.
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.
