This week’s blog will be a bit of a departure. Usually I give my opinions on different matters related to game development, but this week I wanted to fill a need that I found within the GameMaker Studio community. I found a problem for which I could not find a simple answer. For all my Googling, I was still only able to find small pieces of the overall picture, leaving me to put things together on my own. So, without further ado, here is my problem and solution. Strap in for a long one.
You’d be hard pressed to find a PC game these days that doesn’t allow you to change the games resolution. Whether you want to play at full 1080p or half that, there are typically many options for you. There is also the question of whether or not you’d like to play the game in fullscreen mode or not. GameMaker can handle all of that, but the manner in which it does so is a bit convoluted. To that end, here is what I discovered about resolution changes and how to change them.
Before we do anything, we have to make a change to any room that you want the resolution to be changed on. You’ll need to open your room and go to the views tab. From there you’ll need to check the box labeled “Enable the use of Views”, and the box labeled “Visible when room starts.” Now we can get down to business.
Changing the window size.
Part of what makes GameMaker’s resolution change system seem so obtuse is how robust it actually is. Lost in the shuffle is how to change the size of the actual window. Believe it or not, it’s quite easy. It requires only one command and a couple of parameters.
There it is. That’s all you have to do to set the size of the game window. You’ll most likely notice pretty quickly that simply changing the window size typically doesn’t have the effect that you’re looking for. Even if it does have the desired effect in this case, try entering some random numbers for the height and width parameters. See what happens then. For reference, here’s the before and after of what happened in my example.
So what just happened? Well, we changed the window size, so GameMaker resized everything inside the window for us. Our original resolution was 1024 x 768 which is a 4:3 resolution. Our new resolution, 640 x 360 is a 16:9 resolution, but GameMaker kept the original 4:3 aspect ratio. You’ll notice that because the aspect ratio was not altered the ball still remains completely round but we have some unsightly black bars on the left and right sides of our game field.
Resizing the surface.
Clearly we’re missing a step here. We want the game to fill the screen, we just want the screen to be a bit smaller. Behind the scenes GameMaker draws everything in your game to what it calls a surface. When you initially start the game it sets the size of the surface to whatever resolution the game starts with. Regardless of what you do from that point on the surface size (or rather, the surface size ratio) doesn’t change unless you specifically tell it to. So what has happened in our previous example is that when our game starts a surface is created with the size of 1024 x 768. When we change our window size to be something smaller, the surface size is scaled, but it’s aspect ratio remains intact. In fact, if we would have chosen a smaller resolution with the same 4:3 aspect ratio, we never would have noticed anything odd about the surface. So the next step we have to do is to change the size of the surface that all of the game is being drawn to. Here’s the code for that.
Keep in mind that surface_resize works on any surface, including ones that you create yourself inside the game. The variable application_surface refers to a special GameMaker keyword for the game’s main surface though. So when you want to resize the whole game you’ll always want to resize application_surface. Let’s see what happened.
Ugh. One step forward, two steps back. We’ve now filled the entire window but our aspect ratio is off. You can clearly see that the ball looks less like a ball and more like an oval. This is actually worse than the black bars. So what exactly happened this time?
The default size for view 0, the one we’re using, is 1024 x 768. We can change that on the views tab from our room, but if we don’t, the view size remains at the default, a 4:3 resolution. So we’ve altered the window size, and we’ve altered the surface size, but the view size itself is still unaltered. Essentially this means that we’re taking a view of one size and drawing it to a surface of another size. As long as the aspect ratio is the same, this might not be a horrible problem, but once you change the aspect ratio of either the view or the surface (and not the other) you’ll get that stretched look. To fix this we have to alter the size of the view itself as well. Here is the code for that:
view_wview = 640;
view_hview = 360;
That will change the width and height for view 0. Let’s see the results:
Nice! Everything looks pretty good. The window has changed size, the surface has changed size, and the view has changed size. All have maintained the proper aspect ratio and everything looks great. Everywhere in the code where I change the values to 640 and 360 respectively, you could change them to anything you wanted. Obviously you should keep in mind the average screen size of the device you’re targeting so a resolution like 16,000 x 9,000 might be a bad idea, but you get the point.
Rooms, Aspect Ratios, and Mess.
It’s great that we can change the resolution of our game. but now we’ve got other issues that we need to wrap our heads around. Let’s change things up a bit so I can show you.
In the picture above I’ve made an important change to our game. I’ve changed the room size to 1024 x 768, the same resolution that the game starts with. Notice that in the lower right corner we can see part of the ball. Watch what happens when I change the resolution like I did before.
The ball is completely gone. We changed our window, our surface, and our view, but we never changed the actual room size. So what has happened is that because our view is smaller, we’re just seeing less of the room.
The GameMaker manual explains views this way; when you play a platformer like the original Super Mario Bros. you don’t see the entire stage at once. You only see the portion around Mario. That area is what GameMaker calls a view. In the same way, you wouldn’t want to see the entire overworld of the original The Legend of Zelda at one time would you? Link would be so small that you wouldn’t be able to maneuver him at all. So when we resized everything, we made our view smaller showing less of the world. In most cases this isn’t exactly what we want. When we resize the game we typically don’t want to resize the amount of what we’re seeing, but the size of it. As a quick example, imagine that on a big TV you could see more of a Mario stage than you could on a small TV. That wouldn’t make a ton of sense right? Instead, what most of us are used to is simply having the entire game scale up or down based on the size of the screen.
So let’s fix that. Let’s resize the game as well and our window. Here’s how the before and after of that looks. To do that, we’re going to have to make a few changes. Most notably, we have to really start caring about how aspect ratio affects our game. To be more specific, we need to understand that we cannot arbitrarily choose resolutions with zero effect to the way our game is viewed. Let me present two examples:
First, in a Mario style platofrmer game might support many resolutions and the screen can shrink and grow to fit all of them, but no matter how big or small the screen, a 4:3 resolution is always going to be less wide than a 16:9 resolution, and as such, no matter how many different resolutions we support and how we shrink the game to fit them, the 16:9 resolutions are always going to show more of the screen laterally. We can certainly support both aspect ratios, and if the game is designed properly, we won’t miss too much on a 4:3 resolution, but we’ll always miss something.
The second example is even more restrictive. Imagine you’re creating a Pong clone and as such you want to have the entire screen be the game’s playing field. When you design the field (and the room) you’ll choose a resolution. If you’re wise you’ll choose either a 16:9 resolution or a 4:3 resolution. In this case though, whichever ratio you choose is the one you’ll kind of be stuck with. In the platformer example you could have chosen to simply show a little bit less of the game field on 4:3 resolutions, but in our Pong clone, you can’t afford to do that. You need to show the whole room all the time. So this time if you want to resize to an aspect ratio that you haven’t chosen for the board size, you’ll have to choose whether to show the bars or screw up the aspect ratio, you don’t have the choice to simply show less of the field, as you might cut off the left and right edges where the paddles are.
So to fix the problem all we actually have to do is remove the lines of code where we change the view size. Let the view size stay it’s original size, but simply scale it to fit the surface and the window. But keep in mind that we’re back to our earlier problem if we go from a 4:3 to a 16:9 resolution; the aspect ratio distortion. To fix that I recommend holding two variables, one for the maximum 16:9 view size, and one for the maximum 4:3 view size. If you’re going to resize the window and the surface, keep track of what aspect ratio you resized to and then set the view size to the maximums that you set up in your variables. This way, no matter how small the window, you’ll still have a 4:3 view size and 16:9 view size that are as close to the same as possible.
Conclusion, and why this is all kind of moot (now he tells me).
Whew. That was a lot, huh? Hopefully it was helpful in understanding the very complicated world of resolutions in GameMaker. Helpful as it may have been, let’s be honest…there is less and less need to format anything that isn’t 16:9. Sticking to one aspect ratio makes the whole system much easier. In that case all you need to do is resize the window and the surface and you’re set. But again, it’s good to understand what’s happening behind the scenes. Believe it or not, there is actually a lot more to touch on with regards to resolutions and views, but I’ll get to that another day.