How do I center the game?

Question

Hello, I am trying to figure out how to center the game when the window is resized. From the windows settings I used "2d" and stretch "expand" settings. Is there any way to make it so that when expanded the game's insides will be centered to the center and not the top-left? Here's some images:

Normal:

Resized:

How can I make it so that the resized window's insides will be in the middle?

Comments

I am also wondering about this as well. I read the entire Resolutions guide, and it would seem like if you're designing for "expand" you would put additional assets on both the left and right of your Working resolution, but that would only make sense if the window expanded both left and right at the same time (and same for vertical dimension). It's a bit harder to plan/design for something that will only "expand" towards the bottom right (aka anchored to the top left) of my working Canvas.

Answer 1

Assuming you're working with Control nodes, this is fairly easy. Make sure your root node is a container node, such as PanelContainer. Set the PanelContainer to expand to the full size of the viewport by setting its right and bottom anchor properties to 1 and setting the EXPAND size flags in both directions.

Then you can center other control nodes in that container by making use of the container's children anchor properties. For simple cases, it should be enough to set anchor values of 0.5 for the children.

You can also use the FILL (disable) and SHRINK_CENTER (enable) size flags for the children, for example to center a label.

OTOH, if you are working with 2D nodes, not control nodes, these won't automatically reposition themselves when you resize their parents. You'll need to write some code to reposition your nodes to your liking when you resize something. Again, it's easy if your root node is a control node, since control nodes provide a "resized" signal which you can connect to in order to be notified when the window geometry changes.

You should also check out the Godot manual, there's a chapter on dealing with different screen resolutions that might be helpful to you in case you're mainly worried about the application window being resized.

Answer 2

You may want to try using the aspect 'keep' window setting, which will keep your game view the same relative width and height as you expand it. This should keep your content centered, as no more of the game gets revealed if you increase the width or height – it just gets scaled instead.

Answer 3

So Your question is how to stop Godot make it's own resolution while the window is resized, To do that go in Project Settings/Display/Window/Stretch and in Aspect
choose Keep, by this way you can prevent Godot making it's own resolution to fit the resizing done by the User. Comment me if any more trouble or questions

Comments

This is a fine solution, but what if someone has a different aspect ratio monitor? Or should I just ignore non-16:9 aspect ratio players? Does anyone even have that kind of aspect ratio anymore?

Answer 4

Actually, it's even easier than my previous answer.

• Make the Root Node in your Scene a "Control" type node
• At the top of the 2D editor, with the Root Node selected, click Layout:
  
  
  • click "Full Rect"
  • also click "Center"

Boom, done!

Answer 5

I believe I've solved this problem by customizing the Root Node of my Scene.

The pre-requisites here are that your project settings are set to:

• Display/Window/Stretch/Mode: 2d
• Display/Window/Stretch/Aspect: Expand
• Take Note of your "Working Resolution", aka Display/Window/Size/

Then you'll need to make the Root Node in your Scene a "Control" type node.

On your Control Node, in the Inspector

• Set all Anchor Values (L,T,R,B) to 0.5
• Set the Margin Values to -Width/2, -Height/2, Width/2, Height/2 for Left, Top, Right, Bottom respectively
  
  
  • So for example, Project Res of 960x540 would use -480, -270, 480, 270

This draws a bounding rectangle that matches your canvas "Working resolution", and anchors it to the exact center of that canvas.

Run your scene and now you will see that your working canvas will remain centered when the renderer "expands" to add extra pixels to match the client viewport.

Answer 6

I used a camera with a simple script to reposition it when the window is resized.

This is a Control node with a child Camera2D node. _on_resized() is connected to its own resized signal.

extends Control

var width = ProjectSettings.get_setting('display/window/size/width')
var height = ProjectSettings.get_setting('display/window/size/height')
onready var camera = $Camera2D

func _on_resized():
    if not camera: return
    var current_width = self.rect_size.x
    var current_height = self.rect_size.y
    var delta_width = max(0, current_width - width)
    var delta_height = max(0, current_height - height)
    camera.offset = Vector2(-delta_width / 2, -delta_height / 2)

I found doing this via top-level Control nodes, as suggested in other answers, to be messy and influence the game's world / physics.

Answer 7

Hi,

I just stumbled upon the same problem.

The solution on the first glimpse seems to add a camera to your scene.
Make it 'Current' and center it (on your character for example), and it should work.