GameMaker Studio 2: Complete Platformer Tutorial (Part 22: Fullscreen & GUI issues)

hello everybody and welcome to part 22 in this part we're going to be looking at fixing problem a few of you have run into already in the comments and that suggests to me and so on but a problem that some of you will likely run into when you try and make your game run in full-screen mode ok so first of all game maker has a very simple solution to allow you to run your game in full-screen and to toggle between fullscreen and windowed and let me show you what that is if you click on the little conch for game options which brings up all of our global game settings that's why reset on framerate etc and we go to platform settings windows and come down to graphics we get a bunch of options for how our game is going to display and several in here are to do with fullscreen one is star fullscreen another is allow fullscreen switching and the scaling option on the bottom is kind of important as well I'm gonna tick allow fullscreen switching and what this means is it's gonna allow kind of Universal shortcut of alt enter on a Windows program to work with our game and to allow us to swap between windowed mode and full-screen mode make sure once you've done this that scaling in this in this window is a scaling here we've got keep aspect ratio ticked that'll make sure our on Vica saw our game isn't the same kind of resolution ratio as our monitor in my case at least so if I were to stretch if I were to go to full screen mode with my game with this to full scale it would start stretching and everything would appear wide and stretched and said we want Keefe aspect ratio and it's gonna give us some black bars at the side just to make sure why everything still looks correct I'm gonna click apply now when I run this in order to actually demonstrate how this looks on what happens I'm actually gonna have to swap to view from my webcam for a moment because OBS the thing I used to record and quite a lot of tools actually I've tried to record don't really handle like the swapping of a program from window to full-screen super well super easily there's like a delay and unfortunately you need to see what happens fairly quickly so I'm gonna swap over to my webcam now you can still see the screen and everything going on here just theme and I'm gonna run this now I haven't done anything extra since then so our game will stop in windowed mode as per usual I know it is that's our game respecting rules on our menu down here now keep a close eye on this menu because you'll see the problem that we run into when we go to fullscreen obviously the first issue is that our Enter key is actually tied to controlling our menu until that's gonna be a little bit of a pain so you're gonna have to watch quite quickly to see the problem that happens here because they're essentially gonna start a new game very quickly so hopefully you saw that you can rewind and just watch that as many times you want it doesn't look quite right in fact I'll just show it over and over in the editing so you can see the problem the problem here is the menu seemingly teleported into the wrong area of the screen and also you can see our blank bar transitions aren't really working very correctly so obviously this is kind of a big problem right how do we go about fixing this well before we talk about why this happens in the first place what we're gonna do is we're gonna not rely on game makers built in way of swapping to full screen and we're going to setup a full-screen swapping system ourselves firstly so that we can use some different keys before screen rather than old enter gives us some choice there and also so that if later on we need to do anything else fancy whenever we change between fullscreen and windowed that we need to control we have a space where we can do it it just gives us a lot more control if we actually do these things through code rather than relying on game Macca's kind of blackbox methods where we don't know exactly when and where and code this stuff is happening okay so I'm gonna go back to game options and platform sounds windows and graphics I'm gonna uncheck allow full screen switching okay leave keep aspect ratio selected because that's still going to be important but that just means we're not going to use that built-in method of swapping to full screen okay instead what I'm gonna do is I'm going to create a new object and I'm gonna call it Oh game and I'm gonna mark it as persistent and this object we it's a good object to have in it can be something you can use to control things like music or anything that you've got like persistently going on throughout your game on every room of your game and so on and stuff that you might need to track Global's and that kind of thing can be useful I sometimes abused these kind of objects and just stick loads and loads of different functions and subroutines and stuff all going on in a single persistent no game object but it can be a very useful thing to have so I'm gonna have this object called oak game and before I actually add anything to it I'm going to come to our first room of our game that loads and I'm gonna drag it onto the instances layer here I'm just gonna pop it in the corner just so I know where it is it's invisible anyway but just in case I need to remove it or add it to a different room instead and in an instance creation order here as long and a drag Oh game right to the top just to make sure it's always loaded before anything else just to prevent any issues that might cause okay so how I've decided this wants to work for our game just to show you you can really do anything with it is I'm gonna have control F be our shortcut to go to fullscreen so I'm gonna add an event now how do we check for two keys at once well we can we could do it in a staff event and do like a check for both buttons or press brothers a pretty simple way we can do this just by adding the key press event and then at the start of it also checking if keyboard check VK control okay and the nice thing about that as well is it will register on the press of F while UK welcomed the control key is held so if you're holding F and you tap control it won't happen you have to specifically hold control and tap F which is quite a nice way of simply send out now the obvious way to swap between fullscreen we've got two functions that can help us here we've got window get fullscreen and that'll tell us whether or not we're in full screen mode and window set full screen which obviously that's the stuff on screen or windowed mode okay so you might think now what we want to do is if window get full screen is true then window set full screen false and if window get full screen pause that window full screen true and we could do that it was like a little branch if-else statement very easily but there's a we can do it in just one line and the way you can do a lot of like toggles and things like that and a single line and that's just to use a got our good old exclamation mark friend to invert something okay so I'm gonna type window set fullscreen open bracket and then we want to set either true or false so what I'm gonna do is write exclamation mark so not window get fullscreen open right close bracket close bracket for window set fullscreen semicolon line let me maximize that so you can actually see this line of code properly so all that does is we're going to return either true or false from window gap fullscreen swap it to the opposite so if it's true it'll be false if it's false so it'll be true and then apply that result the window sat fullscreen so that all says from fullscreen to window and from window to fullscreen really easy way to set lots of different on any kind of toggle is to be like toggle equals estimation mark toggle and it'll just set it to the inverse of itself if it's a true/false boolean okay so let's check to see if that's working now I'm just going to pop back to a web camera vision here and hit run and we did place the object in room didn't we yes we did so hopefully now when this runs I'm gonna press ctrl F and the exact same thing is gonna happen except now we can her we're not skipping ahead of the menu cuz we're not pressing enter okay as you can see it's doing the exact same thing so now we need to deal with this issue so why is this happening not to mention the issue mu notice with the black transition bars and they screwed up when we went from remembering the problem is you might remember when we set up drawing this menu in the first place we didn't draw it using the regular drawer event we draw using the draw GUI event okay so now most of the things that you draw in game maker are drawn to what's called the application surface and that's kind of like a magic white magic whiteboard orbital onto which all of your games stuff is drawn only a player sprites all your backgrounds all your everything and then that is eventually rendered to the display based on its various things in this case we've stretch it to fullscreen and we've kept the aspect ratio correct so it's going to draw these blank bars so nothing from the application surface will ever get drawn on these black bars but draw a GUI doesn't draw to the application service it draws directly to the display okay by default it's aligned with the application surface so as you can see it still thinks our window is starting up here and it's about like this big and it's trying to draw it in that corner there based on the 102 4 by 7 6 8 even though the display now is 1 920 by 1080 on my monitor okay and by default the GUI is set to be size minus 1 minus 1 which makes it automatically fit itself to whatever the display is ok so when we go to fullscreen it become 1 9 20 by 1080 and when it's windowed it will be the size of the window which is 184 by 768 which is what we want but we want it to be 1 or 2 4 by 7 6 8 all the time now all we have to do is just set that at the start of the game ok so once we set draw GUI to be a certain size it'll be that size until you change it ok as I say by default it's set to minus 1 minus 1 which means it's going to automatically fit to whatever the display is okay so I'm gonna quit this now ok and then in still in our old game object you can come back to the workspace and do it if you want add event and add the create event but as I say I like doing it from in the code now so just right click if you want to and just go to add open event and create so we can get that in here as well you'll see it's appeared in the workspace as well just the same and in here what I'm gonna do is I'm also going to introduce you to the wonderful concept of macros so I'm gonna type a hash symbol macro res underscore W 102 4 so our resolution is an important thing and it can determine a lot of different things in our games and honestly it's something we should have decided if this were you know a proper long term personal or commercial game project you know if this wasn't for the sake of a tutorial and for the sake of teaching you things slowly one bit time what we should do is the turn in what our games got a resolution is gonna be very very early on and think about it and think about why it's gonna be that resolution and try and commit to it because it's a difficult thing to easily change later on for example if I wanted to change our resolution we've got this whole menu screen to take into account how we've positioned everything in here to fit the screen how we've positioned level elements to fit certain things it's a very important thing ok so some of you will be now thinking well why are you only telling us this is part 22 of the series in this because you know we had to start somewhere right and throwing about resolutions and stuff isn't exactly the best introduction to teaching anime games but it is an important thing and it's something you now know that you didn't know before is something that you want to decide early on so because now in our project we're pretty much stuck with our current resolution which is one or two four by seven six eight well we're not stuck but changing it is it gets quite that work so we have to then change all those menus and all that kind of thing okay and so what I'm gonna do is I'm gonna create some macros that track our resolution what this means is that these are basically going to work as the same as variables so I can write R as W anywhere in the code and it's gonna mean the same as writing 102 four okay what's the difference between this and creating a variable okay well creating a variable the clue is in the name a variable can change a variable can be altered and changed from one thing to another it can be local and scope to its object and so on macros are different and they're sometimes thought of as constants and that's true to a point and that they're a variable that can't ever be changed so they can be useful just cool things that we know are always going to be a certain value and that is sort of true well now how macros actually function is the at runtime when you run the game as I said anywhere I have typed res W now after writing this line this will get removed from the code and 102 four will be written there instead when the game when the game is actually compiled and run it's not largely going to change the project it's just going to change it in the code it's compiled okay what that means is you can also write lines of code in here another thing so you could write say like adviced wall as a macro and the macro could be I random 6 and then everywhere in the code that you write dice roll from that point onwards in this object or any other object so you only have to declare them once they're global in scope you're gonna get this there instead okay it's gonna replace that with I random sick so you can do lots of fun and interesting things that way but here we're just gonna use them to store a couple of numbers that if we want to change them when they have to change them in one place just in case we ever do want to change our resolution we make the work as easy for ourselves as possible okay so I'm gonna write macro res W that's the width of our resolution is 184 and res H is gonna be seven six eight okay that's literally all I've done this for is just to make it so we don't have to write these as magic numbers everywhere and then you know making making things harder and harder and harder for ourselves if we ever actually do want to change the internal resolution of the game okay but that's not real its self important to this fix if the fix is still only a simple one line of code it's going to set our GUI to be a fixed size okay so display set GUI size and as I say if this by default is this which means that the size will just be whatever the display happens to be okay but we don't want that we want it to be whatever our resolution is and our resolution is the size of the application surface so the application surface when you're in windowed mode there's obviously one or two four by seven six eight which is the size of the room when it goes to fullscreen the application service doesn't resize it just simply stretched it to fit the display and that's where this whole problem is coming in so we need to make the GUI match where is the application surface will match on its own so I'm the type res W where as H into here okay make sure got the others all right in round one width and height cool and that should fix the issue of our menu being in the wrong place when we change from window to full screen so I'm going to run that now come back to our webcam so here we are in windowed mode and here's the menu down here I'm gonna press ctrl F go to fullscreen and you see the menu is now in the correct place but there is still an issue watch as I start a new game rat Rao so as you can see our menu is drawing over these black boxes and as I said before nothing on the application surface can draw over these blank boxes but draw a GUI the draw a GUI event when it draws stuff isn't drawing to the application surface it's just drawing to our game window ok our full display and so it doesn't really care about these blank boxes the coordinates are aligned to the application surface so 0 0 is still up here but if we were to type a negative x corner it would be off the side here if we were to type something bigger than our application surface we'd be over here ok now there's not really an easy way around this like draw GUI is supposed to be able to draw over these blank boxes an Enka me useful thing to be able to do sometimes like maybe you want to maybe you want to draw independently of the application service maybe you want to draw some sprites to cover up those black bars you know you know there has to be a method of drawing over it like bars and asked for a draw GUI accommodates so there's no way for us to get all gooey to draw under the black bars as such so the only real fix we can have for this very sort specific circumstance where we want to use draw a GUI for the menu because it helps us coordinate the menu properly but we also want to be able to have it kind of float off screen is something you might consider a bit hacky but I think it's a perfectly elegant solution honestly and that's we're gonna just draw a black box we're gonna draw our black box over it because we can and it's really easy so I'm gonna go to ohm nu and then I open up the draw GUI event of draw menu and this is where we were drawing all of our menu stuff before and just at the bottom here I've already made some space in fact we don't need to draw it in the for event because that will draw it multiple times you know we don't need to do that when you're so into it outside of the for statement on that's a draw set color to see black and I'm gonna do draw rectangle and what if we remember what our variables in here were we've got a GUI width in GUI height we've buried in the size of the display or of the GUI when we create this object which is another reason why it's important for us to have made sure that in the instance creation order in our menu room okay goes first so it sets the GUI to be that size in case we wanted to set the game to start in fullscreen okay cuz that's one of our game opportunist otherwise if we started in fullscreen that'll be 1 9 20 and so on and then it might get this before we set it and bad things can happen ok so gooey wet sand going height though we're going to contain those values for a song there type GUI width so right at the edge of the GUI and GUI height - say 200 and gooey wet plus something big just to make sure it covers the black bar properly you go nuts with this at say 900 and GUI and GUI height is our final one so it's right at the bottom of the screen and outline false okay and just as so you can actually see this box in place that's that draw color to actually be see white as I run this now and probably again need to come back to the webcam that's ctrl F and you can see now in full screen we've got this big white box drawing here and that's going to draw over this and all I need to do now is set that to be black and we've got what we came for okay so let me close this now and quickly set this back to you see black [Applause] run the game again come back to webcam roll f you can see there it is and if I hit a continuous hang on that it draws nicely over the menu so we don't have that issue anymore so that's really all there is to it so now I'm just going to go to main options windows graphics I'm gonna take start fullscreen in here as well just to show you that it works from both ways so let me come again back to you the webcam and just run this again just so you can see that we can now start the game in full-screen and get all those values correctly so then we've got this the bomb it's got those black black box drawing over and I can press control at any time to go to windowed mode that might be what you expect to happen also feel free to set your game what to be like that if that's how you want it to be as well and that's it you might have all kinds of different issues depending on your own personal game and personal project between going between full screen and window luckily this game is quite simple so the fix for everything is quite simple and hopefully you've learned a bit from this just about how the draw GUI works in relation to the screen found the application surface works how fullscreen and windowed mode works because it can be more complex than you might initially expect and hopefully this gives you a bit of a grounding so you might start to build understand breakdown where certain issues are coming from in your own game if you're having them okay thank you very much for watching um I hope you enjoyed that I thought it was pretty important to get this this stuff covered and then the way a very important part of finishing off the game making sure we can actually change our window to fullscreen if we need to and yeah that's it so I'll catch you guys next time on plot 23 thanks guys a quick reminder that none of these videos are possible without the help of my amazing patreon supporters these guys support what I do and in exchange they get to see some of my videos early they get to access all the source code for free and various other bits and goodies a special shout-out in particular and in no particular order a to mark cleanse and Dan Mike blankie a run James grimly Cody Hodkinson Adam Rove and Alan Harold Guidry valp matte coat Louis R Pereira Nix lavish Steven Hagen Michael Ward Jason McMillan Thomas van den einde John Bernard Shaw Nathan Robert churches Owen Morgan xenon may turtle time Bowser the dog TJ Marcel gazenga and Patrick Duffy you are all very cool people thank you very much for existing thank you for watching and I'll catch you guys next

Channel: Shaun Spalding

Views: 41,764

Keywords: Game Maker (Video Game Engine), Tutorial, GameMaker Tutorial, GameMaker, Game Development, Indie Games, Tutorial Series, Game Maker Studio, Making Games, How to make games, GameMaker Studio 2, GMS, GMS2

Id: tWKQ5FAYIBQ

Length: 22min 9sec (1329 seconds)

Published: Fri Aug 03 2018