Game Maker Studio - Changing Resolutions

hey guys and welcome to slasher X game so today I will be showing you how you can change your game resolution to pretty much anything that the user wants now the code I'm going to be showing you is can be very useful if you are developing for mobile devices now even though in this demo I'm going to be telling the application what resolution I want I'll also be showing you two lines of code that you can use to grab the resolution from the actual device so this is the end product of our demo we have resolutions ranging from Full HD all the way down to 800 by 480 which is a very low res screen resolution for mobile devices and I can pretty much click around and it resizes our game window but also keeps the aspect ratio so you'll notice for a 16 by 9 resolution which is the resolution I developed the game for so that is the Full HD or 1280 by 720 here is two examples things are great there is no letterboxing or otherwise black bars but when we click to a resolution that isn't the same aspect so we're looking at our 800 by 480 and our 1 or 2 4 by 768 notice it creates the letterbox to retain our aspect ratio and then we've got a little one over there so let's jump straight into the code and show you exactly what you need to do to implement this into your game so it's start things off I've put some things together just to speed this up we have a font we have the buttons which are just one sparked with various sub images we've got our player which pretty much does nothing except looks at the mouse just so we got some movement our controller which creates a number of buttons for us to click on and one game room which just says up there and the controller okay so currently object button resolution does nothing other than stop it from cycling through those images so I'm going to want to add an event left breast Dragon's code here and when we create two to three variables and to get the values of these variables it's going to be depending on which button the user clicked so each button image here is represented by a sub image so Full HD can be 0 16 by 9 is gonna be 1 and so on 800 by 480 is going to be the last one which is 6 so I can do a switch statement on the image index of this object we have cases ranging from 0 all the way up to 6 so we need to update the value of width and height 0 is 1 9 2 oh by 1080 1 was 16 by 9 next we've got 1400 by 1050 then 1366 by 768 1280 by 720 1 or 2 4 by 7 6 8 and lastly 800 by 480 cool so as you can see we've got some sixteen by nine resolutions we've got a four by three resolution over there and we've got a small phone resolution which is nearly sixteen by nine but not exactly cool so if this is your game wants to play the selects a resolution we want to save this to a file maybe this is in your options room so that when he returns to his game it knows exactly what resolution he was viewing it in last time so we want to retain that value so it's doing any open and let's open something called game settings let's put on the school there game settings dot ini let's do in any right real settings this is going to be our width and the value is going to be with let me just copy that line down here change that to height value is going to be height and obviously any close close that up so now that we've stored those variables let us take them and place them in some Global's so we can access them without having to open up this any file every time so we're global width and our global height fantastic now that we've got these Global's I'm going to create a script called SCR resolution and what the script is going to do is going to take the base width and our base height which is pretty much going to be the resolution that we are developing our game for it's going to be taking the global within the global height and simply using those to determine an aspect ratio and once it's got all those calculations sorted we can be scaling our GUI we're going to be scaling our application surface and making sure everything retains the aspect ratio and looks really cool so let's create this script there it is so firstly set the resolution we want to display or alternatively how's about we get this value from the device so that last part that's to do with mobile devices you don't know what resolution the user has on a smart phone you just want the game to retain the aspect ratio and adjust its resolution to fit so here I've got a number of variables one being display width the other being display height and right now they just said to the Global's if you want to get these variables depending on the resolution the current users smartphone is running I want you to use the following functions display get width and then using display get height all right so there's the lines of code you can be putting here instead of our Global's because for smart phones the user is not going to be able to select what resolution he wants to run on it's going to run the resolution the smartphone is currently running next up let's set the size of our GUI now I haven't actually showed you this but in my controller I have a draw GUI event sets of color sets of font and it's going to be writing a display width so I cannot come in that times the display height so that's our resolution it's also going to be showing us the aspect ratio which is just the width divided by the height okay now one thing that I found out when I was developing element earth is that without resizing the GUI if I had a GUI event this this piece of code that I'm drawing to the screen would remain at the same size irrespective of what the resolution of the device was so unfortunately it meant that on a PC at 1 to 800 by 720 everything would look fine because that was the resolution I was developing for but when it was put on a older model smartphone which it was still compatible with and that resolution was a whopping 800 by 480 we had this humongous line of text being displayed to the screen but all the player instances and all the action in the game was really small so that's exactly what this line of code is going to be doing it's going to be resizing the GUI to fit the surface layer display set GUI and that's why their size okay and let's put in our display wood and I'll display height so I'm going to comment that out later I'm going to see the changes exactly what I mean about that next set the size of the game window windows set size also those two then we're going to set the resolution we've programmed the game for this is gonna be known as your base width and height or your dev width and height doesn't matter as long as you've got this value stored somewhere for let's call it all our base width and our base height in my case it was 1 to 800 by 720 it also happens to be the dimensions of the room or the view we need to determine the aspect ratio so our aspects equals base width divided by the base height then work out the adjusted height and width so the following line the code is going to be taking all this information and it's going to be determining where and how much of a letterbox we need to add to retain that aspect so if the display width is greater than or equal to the display height so that's more of a landscape orientation now we're going to create two temporary variables one thing we called height the other one's going to be called width which we haven't used yet yeah that's fine and the height is going to be the middle of the base height and the display height and the width is simply going to be a height times by our aspect and just like that now we need to resize the application surface to our adjusted values and that's going to use surface resize oops and that's going to take our which serves to want to resize as well my application service it's pretty much where everything's being drawn to and our new values which is a width and a height just like that so it takes quite a bit of a bit of this and that to work things out and that just goes down to a simple little one I know but let me run through this one more time with you we're getting our display width and height in our case it was selected by the user and those values were stored in these Global's global display width and global display height if you're developing for mobile devices use display get width and display it get height so if your phone is currently running at 1280 by 720 that's what these value is going to be if it's running an older if you're running an older smartphone maybe it's maximum resolution is 800 by 480 you can still make your game look pretty cool on that older device and it will grab the 800 by 480 and shove them straight into our display width and I'll display height quite nicely then we are setting up the size of our GUI using those two values we are setting up at the size of the game window we are grabbing our base width or our dev width and dev height that's pretty much the resolution we programmed the game for so if you created your sprites for 720p experience that's what I've got you if you created your sprites for a full HD experience you're going to be putting in your full HD width and height right over here just that things are scaled properly then we're going to determine our aspect ratio using the base width and base height so that's the aspect ratio that we developed for we can work out the adjusted the height and width based on those values and once we have a final height and a final width we are going to be resizing our application surface so that's pretty straightforward stuff now that we've got all that sorted I actually also want to jump into room options you know create code here and I actually want to open up that any file we save to earlier I want to set our global display width and global display height to the values we stored in at any file and then run script resolution on that so the any file see what was it called save all those here we go to put this on the side that's what I was called my goodness I'm losing my code there it is let's grab that you read reel and the default is going to be one to eight over 720 which is going to be my dev height and what if I suggest you make those your default okay before doing that I noticed we have to change this to height okay cool let's see what happens all right so everything started up let's click some of these and see what happens okay so nothing's happening maybe we have some variables that I'll call the same things maybe we're not setting or saving things right let's head back in tail click code in this button I think I see the problem our resolution is grabbing the global display within global display height but these ones are called global that width in global height let's update those save everything make sure options create code display with display height it's all good and it starts up again all right let's start clicking around there we go things are resizing we see the letterbox on aspects that aren't the same as sixteen by nine so they've got a one point seven eight aspect we shouldn't really create letterbox effects and there's the small 800 by 480 and notice this whole time the GOI layer is being updated and scaled correctly so let's go into script resolution comment out line six over there so let's see what happens when that Gy layer isn't touched okay so let's go to sixteen by nine let's at size let's go to 800 by 480 same size see that the space between this information map layer is quite large let me go to a smaller resolution it's very small this is a problem if you are creating buttons and stuff that rely on the corners of that UI instance so I do highly recommend that you use the display sets GUI size function for that so that about wraps up changing your resolution for windowed games as well as a small touch on scaling for mobile devices I hope you found this tutorial both educational and helpful please feel free to comment rate and subscribe if you have any suggestions for future videos place them in the comments or send me a PM if you like this video as well as many of my other videos please check out my patreon campaign I do appreciate your support if you'd like to play a really cool Android game check out element Earth on the amazon app store and google play that game demonstrates scaling code that I've just showed you today so until next time happy coding and I'll see you then

Channel: GravityShift Games

Views: 32,670

Keywords: Game Maker (Video Game Engine), Tutorial, Game Maker Language (Programming Language), Learning, Tutorial Series, YOYOGames, Game Maker Studio, Game Maker 8, Video Game Development, Making Games, Window, resolution, change resolutions, resolutions, scale for devices, scaling, devices, change resolution, resize window, window, hd

Id: LHBJHYlm2B8

Length: 17min 37sec (1057 seconds)

Published: Tue Jul 19 2016