How do I make sure that my fullscreen godot4 game would fit all screen sizes without blackbars?

Question

I am new to godot4 and I don't how to make my fullscreen game fit all screen sizes with different aspect ratios. Is there a setting to fix it? Or do I need to write some code? I don't know how games in other games engines like unreal automatically fits the game on different screens without ruining the game by like making everything wide. How do I do this? Please help. Which aspect ratio should i set my project to be in order to get stretched properly without weird stuff or black bars?

Answer 1

Are you getting black bars in Godot? the default settings do not cause black bars.

If you get black bars on not depends on the project settings, in particular if the Stretch Mode is not "disabled", and only according to the Stretch Aspect setting... If the Stretch Aspect is set to "expand" or "ignore" you will not get black bars.

---

Read the article Multiple resolutions from Godot's official documentation, in particular the part about Stretch Aspect settings (the part about Stretch Mode is outdated at the time of writing).

You will see that as long as you have Stretch Aspect = Expand, it does not add black bars. Instead it allows to see more or less of the game world.

In particular (this is not an exhaustive list):

• Stretch Aspect = Ignore distorts the image:

  

• Stretch Aspect = Keep adds black bars:

  

• But Stretch Aspect = Expand does not:

  

  These are not black bars. This is revealing more or less of the game world, the gray here is the default background you get because there is nothing more to display there... But there could be.

Since you don't want distortion nor black bars, I'd say you use Stretch Aspect = Expand. And please notice this is not any specific aspect ratio, instead it is changing the aspect ratio to fit the viewport/window.

---

Presumably you don't want the game world to be positioned from the corner. There are two sides of that...

The first issue is that the demo above was created without a Camera (as you found out in another question, Godot does not need a Camera2D to display a 2D world). When you add a Camera, it controls what you see on the available space of the viewport/window.

The other issue is positioning the UI (i.e. Controls). Sadly I haven't seen a full guide of positioning Controls for Godot 4. The article size and anchors shows the old Godot 3 UI. I also have an outdated answer on the topic. So here is the gist: You have two main ways to position a Controls in Godot 4:

• If the Control is inside a Container, the Container decides the position and size of the Control.
• Otherwise you position the Control by "margins" and "anchors". They specify a the coordinates by a displacement (margin) from a position (anchor) that is defined in proportion of the viewport/window. So you can choose to anchor to any side of the viewport/window, to a corner, or to any place defined proportionally... For example for the center the anchors are set at 0.5. And from that anchor you can define the position of the Control with margins.

You find these settings under "Layout" on the inspector when you have your Control selected.

Either way the Control will have a position and a size, which you could also manipulate directly. But you usually don't need to, unless you want to animate the UI or something like that.

Thus you can create UI that adapts to the size of the viewport/window.