Topic was automatically imported from the old Question2Answer platform.
Asked By
leosefcik
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:
How can I make it so that the resized window’s insides will be in the middle?
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.
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
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?
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.
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.
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.
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.
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.
NOTE: After extensive testing with this, I have found that if you put a Node2d inside a control node, this solution will NOT behave as expected. Control nodes and canvas layers display differently, and mixing them seems to have some non-obvious results.
EDIT: Here’s a link to the repot with the test files. I added a canvas layer (an transparent overlay) as well to test how it is affected by the other nodes.
– original post–
I was looking for a solution for this as well. And I found 2 ways to do this.
Control Node (not ideal)
The root node being a control node. (example on this post already) But there was a mention that this could cause physics issues. So I don’t really like this solution.
Camera (no code solution)
Add a 2d camera (only tested this as attached to root scene…)
Camera2d > Transform > Position > set to half the width and half the height of game
Camera2d > Anchor Mode = Drag Center
Project Settings > Window = Stretch
Mode: viewport
Aspect: Expand
Scale Mode: Fractional (smooth scaling across all screen sizes)
OR Integer (forced scaling to multiples of game resolution, ie 640x320 would scale to 1280x640, but nothing in between)
Why do it this way? What is my goal?
I hope I am looking for the same thing the original poster is so I don’t confuse the situation. But I wanted to not have to worry about exact screensizes on devices, but also not see black bars, or have my game offset in a weird unexpected way.
This process automatically adjusts in the way I was hoping for.
