Godot Version
4.2.1.stable.mono
Question
I’m making a 2D game with a screen size of 640x360.
I am using a pixel TTF font. To fit the screen size I can set it a minimum of 5 pixels. But it’s still quite large. And of course, setting it smaller makes it very blurry.
What is the way to handle the font in UI (CanvasLayer?) in this case?
1 Like
try decreasing the scale of the element and increasing the font size visa versa.
Thank you for the response.
And what to do with the Button node? The text is resizing together with the button container. Also, it has an icon. So when I resize it, the icon size will not match the button size. If my icon is 16x16, and it fits nicely when the button is not scaled, it looks very unproportional when scaling the button. Text and icons can only be scaled together
An additional issue is with nodes that are controlled with containers. You can’t set any scaling for them. What to do in this case?
Not familiar with your exact problem but copying from here : How do I make the containers adjust their size according to the window size? - Godot Forums
“If you click on the control in the scene there is a container sizing property on the right hand side.”
" If you define your interface layout using anchor points and containers they should always keep intended layout.
As an example lets assume you want to have rect always hiding left half of the window independent on window size. You can achieve that by:
HBoxContainer (anchor full rect)
- ColorRect (container sizing expand)
- Control (container sizing expand)
In such case HBoxContainer
should be always full window size, ColorRect
and Control
would take up half of the available space, so they both should be half of the window."
Edit: If this doesn’t work, I’d monitor container size in a node somewhere and have thresholds of resolutions for various font/box sizes.
Thank you for your response. but unfortunately, this is not my problem at all.
My problem is with small window-size games.
I make a 2D game. And I set in project settings a window size of 640x360.
So I have only this size, to put all my things that the player will see.
If the Node2D elements look good, because they are intended to be low-resolution elements in 2D pixel game, but the text elements are not at all.
Just scaling the “Label” nodes down is not a good idea, because it is not consistent and also some UI nodes are complex nodes where there is not only text but other elements, which will scale all-together.
How to properly display text in 2D pixel game where the screen size is set to low in project settings?
1 Like
Were you able to find a solution to this? I have the exact same problem with my game.
I have a window size of 400x240 and a 16 bit pixel TTF font.
I have my UI nodes under a canvas layer so it’s using the main viewport scale. My thought was to use a second viewport at a higher resolution and layer it on top of my 400x240 game viewport.
That would effectively give me two viewport resolutions, one for my game pixel art the other for pixel font. However my UI textures are also low resolution pixel art which makes me think I would just run into another pixel scaling problem for my UI textures.
I wanted to close the loop on this, in case anyone has this issue in the future.
You can seperate your UI and 2D Nodes into two different resolutions if using a low res pixel font with pixel art graphics.
I set my base resolution to 1200 x 720 in Project Settings → Windows
Then organized my sceen tree like so:
--main
--SubViewportContainer (400x240)
--SubviewPort
-Level1 <-- Node2Ds here (i.e. TileMap, CharacterBody2D, etc.)
--CanvasLayer
--Control <-- UI here with pixel font
I then would have to scale my UI textures up 3x to match the 16x16 sprites in my 400x240 viewport. Simple enough to do in a photo editor or Aseprite but a pain if you’ve already created a bunch of UI textures at a specific resolution. (You cannot adjust the scale x/y in the Transform here because it will also scale your font, then we’re back to square one )
I ended up going with a 640x360 base resolution for my game, keeping the 16px sprites and 16px TTF font.
With this approach I could scale my art up to 32px to make it larger while retaining my readable pixel font, but this size works for what I’m trying to accomplish with my game.
1 Like