Hello and welcome to another episode in the Godot basics tutorial series. In this episode we will be taking a look at scaling in your game programming journey. You probably only created simple games. However at one point in time you may want to tackle creating a game that you can sell to other people whether this be the Steam store or the AOS app store there is a common issue when creating games and it is that we do not know the device resolution or player we'll be using. Let's take IOW devices for example. Now as you can see here I have three images the iPhone the iPad Mini and the iPad Pro and already you can see two issues we will face at least in mobile game development. The first is the orientation will the user be playing the game in portrait or landscape. And the second issue is what screen size will they be playing in an iPad. Pro is obviously bigger than an iPhone. However you would like both users whether they are using the iPad Pro or the iPhone to experience your game the way it was intended.

Well first things first in regards to mobile development it is always good practice to design a game for either portrait or landscape orientation. You will save a lot of headache if you program for one specific orientation rather than accommodating your code to work with both. So something to keep in mind when it comes to orientation are always class helps us handle that in the API documentations you'll find a section called orientation in rooms. Eric Manjoo go ahead and take a look at that. But for our use case we only care about landscape and portrait. And so the two global genomes would be screen orientation landscape which has an integer zero and screen orientation portrait which has an integer of 1. Now keep in mind that Godot defaults. The orientation to landscape. So if you want to build a game in portrait you're gonna have to change these settings either in Project settings or through the Oasis class global method and the always class global method that allows you to change the orientation as OS that set screen orientation and add your integer or the global enum name.

The second issue is how we display our images to different users on different devices. And the solution for that is using something called scaling. Now keep in mind that without accommodating for scaling your images will stay the same size you had in code regardless of the user's device resolution. If your game is taking advantage of full screen Gordo offers us a way through Project settings to handle scaling for us automatically and you can go ahead and check out the project setting under the display section. Go Go ahead and click on window and towards the bottom you're gonna see a section called Stretch and these are what we call one size fits all. Many game engines come with a one size fits all scaling solution so in order to use Godot's built in scaling towards the bottom you'll have three options mode aspect and shrink as a beginner. We can ignore shrink for now. However the two settings we want to change are the mode and aspect. This topic can get quite complicated and in my opinion nothing beats the multiple resolution section of the Godot API documentation page and so I'm going to link that down below it will go over in detail specifically between the modes and the aspect.

However I recommend that you start with mode 2 D followed by aspect expand. Lastly if you really want to get into game mobile development. My recommendation is that you do a mix of using one size fits all method along with custom code scaling for individual sprite images that are considered important to your game. So let's go ahead and take a look at the theory behind how we can create our own custom code scaling. As you can see here we have our peek at your image and as you'll notice with Godot it defaults are value in the x and y axis to 1. And what this means is that the image is pixel width multiplied by 1 will give us our scaled image and our pixel height of our original image multiplied by 1 will give us our scale height and because Godot defaults the x and y values to 1. We will in fact have a scaled image set to our original sprite image pixel width and pixel height by changing the values to 2 we multiply it our images original width and height by 2 and then return we've scaled our image to double the size of the original and you can do the same process to make your image smaller by providing the value zero point five on the x and y.

We are essentially reducing our image size in half so as you can see here our image is half as small as our original size one thing to keep in mind is that our scale on the x axis must be equal to the scale on the y axis. Now the reason for this is because we want to keep our image proportion similar to the original proportions that the original gives us. If we choose to change the scale values let's look at an example. I went ahead and changed the scale on the x axis to zero point five so the width of our image was reduced to half in a cent and as you can see here our scale on the y axis is the same. It's still the value of one. As you can see here are image proportion has changed significantly to avoid this. Just make sure that the scale on the x axis is the same as the scale on the y axis. Moving on before we even think about applying scale there are two things we need to do. First is we need to pick a static game window size for our width and height during our game development and we need to try to stay consistent with it. Second

Second if you do happen to change your static game window size and you need new image assets do not change the scale value directly and cold during development. Instead create a brand new image asset with the new pixel size and within height that you would like for your new static game window. You are using in game development. So let's say you decided you're going to create a game in portrait mode for mobile devices and as you can see here we have a really tiny window screen. Now let's say you have a peak a true image asset. Well because the peak at you image as it was meant for a bigger screen perhaps 1920 by 10 80. Now that you're using a new game window for development you're pick a true image is not going to fit or most likely be big enough to reach the edges of your game development window. And so you may be tempted to change the scale x and y axis. However I do not recommend doing that. It's a very simple solution. All you need to do is go to your appropriate image software either gimp or photoshop export a new image value with the new height and weight for the image and then import that into your game to use make sure that the scale on the x and y axis are still 1.

Now that we got the two recommended opinionated rules out of the way let's look at the process of how we can calculate handling scale for our images for different devices. Now you have two things we need to keep in mind. One is the resolution and the other is the image ratio. Now the resolution will be your game window size you are using for your game development purposes and of course image ratio. As I mentioned before should be left that one in 1 during production. However after production we do not know the devices our users are using and so we may need some way of writing code if we choose not to go with the audio. All in one solution or perhaps a mix of all and one solution plus our raw code. Well what we need to do is calculate for conversion so we do know two values one is the resolution for one we know the resolution we use in our game development which was 1920 by ten eighty. The second information is the resolution of the device screen. In this case one hundred by one hundred. We also know the image ratio we used during development and that's 1 in 1. However we do not know what the new image ratio needs to be.

So let's say our user device is 100 by 100. Well what does our scale float value need to be. And again what we need to do is calculate for the conversion. In this case we want to know what the percentage change in fraction form is or rather what percentage did we reduce ourselves to. And so first we need to find our new resolution divided by the original resolution. So one hundred divided by 1920 or one hundred divided by ten eighty. You have to pick one so keep that in mind. And then that value is our conversion number. And then from that conversion number we multiply it on both the left side and right side of our image ratio and that becomes our new ratio. In this case because we know our new resolution is 100 by one hundred we can either calculate for the width or the height and if we choose to calculate for the width we get zero point zero five two. And if we calculate for the height you get zero point zero nine two.

So either of those values can become our image ratio where at least these two values can be considered a good minimum starting point. Now obviously these values are a percentage and fraction because of course if we multiply by one hundred we get nine point two. So our resolution which was at 100 percent reduced itself to nine point two percent. Same thing can be said for the x axis. If we calculate it for the width if you multiply this value by 100 we get 5.2 percent. So if our original 10 eighty was considered one hundred percent our image reduced to 5.2 percent. If that makes a little sense this isn't the only way to calculate for image resolution however it is a great way to start. Obviously we're not going to go from 19 20 by 10 80 to something as ridiculous as 100 by one hundred because if you are going to support for a device as small as 100 by one hundred you may need to reconsider image assets for this special case. Just because one hundred by one hundred is very very small device screen. Now I'm gonna go ahead and upload to get hub a file you can play around with with resolution so feel free to play around with that.

Get a handle on how scaling affects the image based on the game window size. And in this case the formula we're coming up with. We just care about keeping proportions the same and making sure that proportions are consistent no matter what screen device the user is playing their game with. I'm gonna go ahead and put a link to a get hub file in the description section down below. Feel free to go ahead and download that and play around with custom scaling. Well that's all I have for you in this episode. Thank you so much for joining me. If you have any questions or comments please feel free to leave them in the comments section down below. I look forward to seeing you in the next episode. Have an amazing day.