[Godot Engine] How to set a game to center in multi resolution screens

The Godot engine has many layout options to fit the game to multi-resolution screens.

You can use one of default options, if you don't want to fill the full screen with the game or you allow to change the ratio of the game screen.

However, Using only default options, it's not so easy to set elements in the game to proper position with fill the multi resolution screen and keep the ratio of the width and height of the game.

the requirements are as follows:

1. The background have to fill the multi resolution screens.
2. The elements in the game have to properly positioned with the size of screen.

There might be many way to solve this problem, but I'll show you the simplest way what i think and tried.

1. Separate the background and contents in the game.

Separate the background and contents in the game. Fill the screen using the background and resize and reposition the contents.

Create a new scene and name it "Game".

2. Make the background fill the screen.

You can use any node for the background. If you want to use image then you can use TextureRect, use NinePatchRect for borderd image, or use the instance of a Scene for more complicated visual.

I'll use the ColorRect for I want to show the idea through the simplest example.

Change the type of the root node to the ColorRect and set the up, left, right, down property of the anchor to 0, 0, 1, 1. Set all property of the margin to 0. With this setting, the background color fills the screen even if the screen size changes.

3. Create a scene that includes all the elements of the game and place it in the center of the screen..

Create a scene to use as content and name it "Contents". And set the size of the root node to display the game correctly.

In my case, because the value of the width and height of the display in the settings (Project - Settings -Display) are 600 and 400. I'll set the size to 600x400 to fill the whole screen with the Contents scene. And set the alpha channel value of the color of the root node to 0 to show the background through the scene.

Implement the game to work all the game in this Scene. In this example, I'll add a default button and a TextureButton (which was created in previous post).

The next step is to add an instance of the Contents scene to the children of the game scene. After adding the instance, check it by running the scene. If you change the size of the window, you can see that the background color fills the screen, but the content scene is in the top left corner and not moving.

Let's make the Contents scene to move and resize. I'll calculate the ratio of size of the Contents and the screen in vertical and horizontal. Using the ratio I'll calculate the position and the resize value and apply those to the Contents node. This will be done by the GDscript.

Add below script to the Game scene.

After adding the script and executing it, the content fills the screen as large as possible and is placed in the center of the screen even if the screen is changed to any size as follows.

You can remove the function to handle resize event, if your target device screen doesn't change screen size while running like an Android.