Let us continue creating our Catch The Egg game in Godot engine. In the first post, we created the project. In this post, we will try to setup our game scene to look correctly on different resolutions. Before starting, I’d like to declare that this is more like an experiment instead of a tutorial. I had a bad experience with the scaling the game and previewing, then trying on a real device. But I was able to fix that quickly. We will look into that at the end of this post. So let’s start.
We already added the bg in our scene. But take a closer look at that, it is not displayed correctly. Only the bottom right quarter is visible. There are several reasons to this. First, we didn’t alight the bg correctly in the scene. Second, we are not using any viewport scaling and we are using the test width and test height. We need to add a camera to make the test width and test height to work.
Click on the bg sprite or the bg node on the heirarchy. In the properties, you can set the position of the bg to half of our game width and height, i.e., 320,480.
Setting up the Camera
Then click on the main node, add new Node and add a Camera2D Node to the scene. Make sure the heirarchy looks like this.
Then in the Camera2D properties, set the Current to On so that the game is rendered through this camera. You also need to move the camera to the center of the game world which is also 320,480.
Setup game scaling
Go to Project Settings and select the display category. You can see two options stretch_aspect and stretch_mode. Set the stretch_mode to viewport and stretch_aspect to keep_height. What this will do is stretch our game to the device screen. The stretch_aspect value keep_height will keep the height of the game to fit inside the screen. So if an increase in width will reveal extra items on the scene. I don’t know if you get it, but let me show you an example. Take a look at two images below. The first one is of resolution 320×480 and the second one is 480×640. You can see the differences for yourself.
In the second image, the empty world around the bg is revealed. We don’t want this. What we can do is make the bg image bigger when drawing the art for the game. But, we are going to avoid that now by quickly scaling up the bg to 1.2. After scaling the bg on both x and y axes to 1.2, the game looks like this for the 480×640 resolution. Great!
Take note that if the screen size goes wider or narrower, Godot will scale it and it may not look like what we want. I choose two popular aspect ratio resolutions for this game. You can play with those and if you didn’t get what you are looking for, there is another way in which you can disable all the scaling, calculate the ratio of screen and the game and adjust the camera zoom to fit it as we like. There are tutorials available using this camera zoom method. We may look into it later.
…And the worst thing happened
I have been experimenting with the viewport scaling. What I was looking for is to find a native solution other than using camera zooming. Because if we use camera zooming, we may need to scale other things like ui canvas layers too. After trying the above things, if we test the resulting game on a device, there will be a scaling mismatch between the preview window and the device screen. I am not much experienced in the internals, so a quick fix I found is to test the game on keep_height stretch_aspect and before you deploy it on a device, change it to keep_width. This will make both the preview and the device look the same. I encourage you to test this setup on your devices with different aspect ratio like iPad 4:3 or iPhone6 etc and share your experience.
In the next part we will look into creating the egg and the ground. Thanks for reading.