Need newbie help with windows/scaling/stretching

Godot Version

v4.2.1.stable.official

Question

This might be a dumb question so just be patient with a newbie please. :slight_smile:

I have created a “title screen” with a clickable menu. I wanted to start working on resolutions/graphics options but I am struggling to get the scaling options to work for me in a specific way.

(Only allowed one embedded photo so sorry I’m going to have to type what I have setup rather than show it with a screenshot)

I read this documentation but I didn’t get any different results: Multiple resolutions — Godot Engine (stable) documentation in English

My game window size is 1280x720 but I could remake everything smaller and scale up if necessary.

Stretch mode = viewport
Aspect = expand
Scale = 1
Scale Mode = integer

Basically, I want to make my title screen stretch to fill the window size and keep the aspect ratio, no matter how small or big the window size ends up being.

My Scene looks like this:
GameNode (Node2D) > TitleCanvas (CanvasLayer) > TitleScreen (Node2D)

The GameNode just acts as a global parent to everything else right now.
The TitleCanvas just lets me act independently of any cameras I was working with.
The TitleScreen uses gdscript to custom draw all the strings and rectangles.

Here’s what happens when I go fullscreen:

There are black bars vertically and horizontally and the CanvasLayer doesn’t seem to stretch. I tried setting the CanvasLayer to follow the viewport and I get similar results but everything is offset further into the bottom-right corner.

Thank you in advance for any help or suggestions. :slight_smile:

I think I may have solved it, but I’m open to feedback! :slight_smile: Let me know if there’s some easier/more appropriate method but I think I got it?

I misinterpreted “Scale Mode = integer” as something that scaled far more frequently than multiples of the original window size. I set it to float and got better results.

I also had to update some of my custom drawing that relied on getting the window width/height to center things. Instead of “get_viewport().size” I now am using “get_viewport().content_scale_size”.

I didn’t have to adjust anything else to make my custom drawing/gui interaction work as expected.

Hi, the easiest way to scale your game is to go to project setting and set window/streach /mode and set to canvas item

For pixel art games, the integer scaling mode is strongly recommended as it’ll prevent uneven pixel scaling from occurring: Pixel-perfect integer-ratio scaling with no blur (integer scaling)

fractional should be reserved for non-pixel-art games, or situations where you’re handling scaling yourself by adjusting content_scale_size and are ensuring yourself that the final scale factor is integer. This is generally not needed in most situations: instead, you should ensure your sprites/texts are designed for the project’s base window size.

1280×720 is a pretty high base window size for pixel art games, so you may want to use 640×360 instead (and use the window width/height override project options to use a default window size of 1280×720).