Resolution and Aspect Ratio Management for Game Maker - Part 1

hey game makers pixelated Pope here and welcome to part 1 of my hopefully comprehensive tutorial on dealing with black bars resolution and scaling and game maker so if you're curious about why black bars and pixel scaling are an issue in the first place and want to understand why we need to fix them then keep watching there's two questions I see very often on the game maker forum subreddit and chatroom first how do I get rid of the black bars when my game is in full screen and the second usually asked by people who have figured out their own answer to the first now the black bars are gone why do my graphics look weird there are slight variations a second question typically related to distorted sprites or text when in full-screen mode and as some figure out we need to answer those questions in order in this first part we are going to focus on the details of why these issues occur in the first place so you understand more generally how they need to be fixed in a future part will discuss how to correct these issues in game maker specifically so let's tackle those fullscreen bars so you just built the first room for your retro style game and you start it up in full-screen mode only to see something like this big ugly black bars on the left and right side of your screen you wanted your game to fill the full screen right why is this happening to understand why we need to talk about something called aspect ratios you've no doubt heard the term before probably when buying a new TV or monitor discussing the new Tarantino film an aspect ratio is a description of the relationship between somethings width and height for monitors we usually describe the aspect ratios by saying X by Y and writing it with a colon between the numbers so you might see sixteen by nine sixteen by ten or twenty one by nine what this number colon number annotation is describing is the number of horizontal pixels for the number of vertical pixels across the whole display so in a sixteen by nine display there are sixteen pixels horizontally for every nine pixels vertically this pattern is repeated across the entire monitor take 1920 by 1080 for example this 16 by 9 pattern is repeated across the entire monitor a hundred and twenty times 16 times 120 equals 1920 and nine times 120 equals 1080 so let's get back to your game you decide to make your game of the same resolution as the originals nest 256 by 224 the difference in shape should be immediately obvious but let's do the math real fast to figure out the aspect ratio this nests to do that we're going to need to go back to school and remember out to simplify a fraction in this case the fraction 256 over to 24 the width of the screen over the height to simplify this we're just going to divide the top and bottom values by two until we get an odd number because I'm lazy so we get 128 by 112 64 by 56 32 by 28 16 by 14 and finally 8 by 7 so the snes's aspect ratio is 8 by 7 an 8 by 7 game on a 16 by 9 monitor will always result in black bars black bars are the result of a game whose aspect ratio doesn't perfectly match the current monitors aspect ratio so what can we do about this sure we could design our game specifically for 16 by 9 displays and just deal with the black bars on 16 by 10 our forbid a 4 by 3 but I assume you're watching this video to avoid those cheap acts and as I mentioned before we'll get into the GM specifics later but generally speaking you have two options you can maintain the width of your game and restrict the height you'll notice that we can still see the same amount water on the right and and the half of the tree on the left just like the original image at the top however we can no longer see the stairs as we've had to crop the image alternatively and this is usually preferable we maintain the height and expand the width this looks much better and in most cases is preferred there are some instances especially in competitive or first-person games we're giving an expanded field of view offers a small advantage to those with wider monitors so pick the one that works best for your game but nine times out of ten I recommend trying to make the second option work for your project regardless of which one you pick you can say goodbye to the black bars so you've decided to deviate from your original SNES resolution that you had before and select the aspect ratio you're going to design your game for primarily keeping in mind that small changes up or down in the aspect ratio won't be a problem now you need to select an actual resolution you decide on 512 by 288 a perfectly 16 by 9 aspect ratio so you start building your game getting art in and you run it in full-screen and bam ugliness pixels aren't square anymore everything looks distorted and text is hard to even look at why does this happen let's look at an example this is Tara from fawn fantasy 6 you can see the outlines around each pixel and each pixel is just that a single pixel so let's scale her up by 2 times you can see from the faint grid that each pixel is now actually 4 pixels she looks perfect and is visually no different from 1x just uses more pixels if I hadn't scaled the image for the presentation she would also be twice as tall and twice as wide but otherwise visually identical but what happens if we want to scale to an on whole number say 1.5 times what would that look like yes what happened everything is a complete mess her outlines her eyes were closed everything looks horrible but why because there is no such thing as half a pixel in computer graphics when we say I want her to be twice as big each pixels width and height gets multiplied by 2 resulting in each pixel consisting of 4 pixels but when I say 1.5 times bigger or 2.7 or any non whole number the graphics engine just has to sort of guess where each pixel goes it rounds values fills in gaps to try and do what you asked it to do turn every one pixel into 2.25 pixels by increasing their width and height by 50% which is impossible when there's no such thing as a fraction of a pixel ideally when scaling pixel art you should always work in whole numbers but this is a problem practical application when you tell your game to go into full screen you don't tell the game to scale it by two or three times you give it the resolution you want to scale it to the current monitors resolution and it uses whatever multiple it needs to become exactly that size and that multiplier is rarely going to be a whole number so let's take a look at what our selected resolution 512 by 288 might look like on a 1920 by 1080 monitor initially the window of the game would be about that big just a small fraction of the size of the screen so we go full screen and the game stretches to 1080p oh look at the bottom right of that image see how one of the blocks of 512 by 288 is going off the screen that means that 512 does not divide evenly into 1920 nor does 288 divide evenly into 1080 so game maker will squish and stale your game to force it to fit to the full screen perfectly using non whole numbers and causing the distortion we saw on port error in the previous slide so how do we fix this well the only solution and don't let anyone tell you otherwise is that we have to change the resolution of our game to scale perfectly to the current monitor again you might think you can just go change a resolution to one that scales perfectly to 1080p right out of the box and that will work for 1080p but not for 1920 by 1200 or 1440p remember we need to do everything dynamically because we have no idea what monitor this is going to be played on so let's do some math since we're working with consistent aspect ratio we only need to try manipulating either the width or the height and a multiplier we come up with can apply down to the other so let's look at the width 1920 / 512 the resolution of our game is 3.75 meaning we can fit 3.75 copies of our game horizontally in a 1920 by 1080 monitor so that explains the 75% of a box we see in the bottom right corner so at this point we have two options we can increase size of our games so that we fit three perfectly or decrease the size so that we can fit four 19 20 divided by 4 is 480 so if we want to fit 4 boxes we would need our games horizontal resolution to be 480 nineteen twenty divided by three is six forty so if we wanted our game to be bigger so it only scales three times we would need a width of 640 in most cases I think you'll want to take the resolution that is the smallest deviation from your original desired size so decreasing the size so we can fit four is a much shorter distance than increasing the size to get three and will result in the smallest possible change from our desired size so if we use the width 480 that means our height is going to be 270 because we were maintaining the 16 by 9 aspect ratio and when fullscreen Daan 1920 by 1080 monitor we get a game that has been perfectly scaled to 4 X each pixel is now represented by 16 pixel blocks on the monitor there'll be no distortion everything will look exactly as it does at 1x and windowed mode just bigger okay so I've talked a lot about the general principles the govern aspect ratio and pixel scaling but we haven't really talked about game maker specifically what things do you need to change your game to dynamically modify the resolution based on the current monitor what are the different parts of a game make your game to control how the game is displayed we'll cover these questions in part 2 if you'd like to see more tutorials like this try editing those like or subscribe buttons if you have any questions post them in the comment section below and I'll do what I can to answer them thanks for watching now go make something awesome

Channel: PixelatedPope

Views: 85,559

Keywords: Game Maker Studio, YoYo Games, GML, GM:S, Resolution, Pixel Art, Scaling, Zooming, Camera, View, Application Surface, Fix Distortion

Id: jCl6zT0eQLU

Length: 10min 23sec (623 seconds)

Published: Fri Sep 02 2016