this post was submitted on 30 Sep 2023
10 points (85.7% liked)

Godot

5925 readers
160 users here now

Welcome to the programming.dev Godot community!

This is a place where you can discuss about anything relating to the Godot game engine. Feel free to ask questions, post tutorials, show off your godot game, etc.

Make sure to follow the Godot CoC while chatting

We have a matrix room that can be used for chatting with other members of the community here

Links

Other Communities

Rules

We have a four strike system in this community where you get warned the first time you break a rule, then given a week ban, then given a year ban, then a permanent ban. Certain actions may bypass this and go straight to permanent ban if severe enough and done with malicious intent

Wormhole

[email protected]

Credits

founded 1 year ago
MODERATORS
Ategon
snowe
Feyter
10
pixel art in a theme? [QUESTION] (lemmy.blahaj.zone)
submitted 1 year ago* (last edited 1 year ago) by [email protected] to c/godot
7 comments fedilink hide all child comments
 

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)

top 7 comments
sorted by: hot top controversial new old
[–] [email protected] 2 points 1 year ago (1 children)

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.

[–] [email protected] 1 points 1 year ago

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!

[–] [email protected] 2 points 1 year ago (1 children)

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.

[–] [email protected] 2 points 1 year ago

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.

[–] [email protected] 1 points 1 year ago (1 children)

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.

[–] [email protected] 2 points 1 year ago* (last edited 1 year ago) (1 children)

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.

[–] [email protected] 2 points 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.