How to properly scale your game!

RangerX

Member
This tutorial is for Game Maker Studio 1.4 and up.
While made for the Windows target, the logic applies in general for all platforms


GM Version:
1.4, but should apply to all version
Target Platform: Window, but generally applicable to other platforms
Links: see links below for example

How to properly scale your 2D game to any screen size.



Understanding pixels and pixel based displays.

To understand how to manage scaling you need to really understand what it means to display graphics in a pixel display. Heck you need to understand what pixels are for a start. Pixels are logic. The logic that builds that image you see on all your screens. They form the image you see on screen. As an example, a screen of a resolution of 1920x1080 means there's 1920 columns of 1080 pixels each in order to display what image is thrown at the screen.

Pixels are squares. They are lit up or they aren't. Each square is of one color. You clearly understand that when you draw very low res graphic, like pixel art in general. A sprite of 24x24 means its composed of 24 rows of pixels and 24 columns. It's also like my friend Bob. Yellow Bob. Don't be afraid of him he's actually quite nice while being ugly looking. He is composed of 24x24 pixels as you can see:







Why is there graphical deformation when scaling up?


The deformation occurs because you're asking the engine to resize the graphics by a fraction value instead of an integer. If you resize by integer, everything is intact. Take the example of Yellow Bob 24x24. If I upscale him by 2,he becomes 48x48 pixels. That is easy for the engine to do, it simply doubles every row and columns of pixels. A black square was one pixel of size is now 2x2. No graphical deformation occurs, everything is fine:






Now what will the engine do if I ask to resize my graphic by 1.5 instead of 2? How can you grow a pixel of "half a pixel"? Well, you can't! The engine will have a choice to make. An image like Yellow Bob that is 24x24, scaled up by 1.5 ends up 36x36. To achieve that, the engine will simply double 1 row out of two! Same for the columns (24+12=36). Only twelve columns and rows alternatively will get doubled so the image pass from 24x24 to 36x36. The result is obviously a distortion of the original:




See? That's why you want to resize your game only by an integer value (x2, x3, x4, etc). This way, your pixel art is NEVER messed up.





Different approaches to scaling depending your game's style and needs.



1) Games displayed "pixel perfect" at all time. (good for 2D games)

GMS by default is drawing your game on a surface called the application surface. GMS is doing a great deal for you by automatically setting the size of the application surface and the window the same as your view size. It centers it on screen and draws it every step for you too. This is very convenient that's for sure, but there's no options for GMS to always display your game "pixel perfect". Maybe this is odd for an engine primarily dedicated to 2D games production but at least they give you all the necessary functions in order to scale your game manually, all by yourself.

In order to be in complete control of how your game is displayed you will need to turn off GMS drawing/resizing/displaying control over the application surface and then you will resize it, center it and draw it yourself every step. I will walk you through how it's done along with some structure suggestions.

First of all, your game should have a setting room. A room for setting all your stuff when the game start. Not that its mandatory to make this whole thing work but it's convenient. With this first room you can set your view size, port size, initiate all you need to initiate an set the application surface for your game to be "pixel perfect". After that you make the real game start (splash screen, title screen, etc). So here's how we set this game to display 1:1 on any screen of this world:


Step 1:
Disable the automatic drawing of the application surface. For this you use the "application surface drawn enable" function.
https://docs.yoyogames.com/source/d...surfaces/application_surface_draw_enable.html

Step 2:
Set the game to be displayed fullscreen with "window set fullscreen" function.
https://docs.yoyogames.com/source/dadiospice/002_reference/windows and views/the game window/window_set_fullscreen.html

Step 3:
You will need to remember the monitor size in order to determine what size your game will get and to center it on screen. You can simply catch those values in variables:

global.MonitorW=display_get_width();
global.MonitorH=display_get_height();
https://docs.yoyogames.com/source/dadiospice/002_reference/windows and views/index.html

Here's how to calculate the necessary offsets you will need in order to draw the application surface centered on screen. In this example, a game with a native resolution of 800x450 (no scaling):

global.Xoffset=(global.MonitorW-800)/2;
global.Yoffset=(global.MonitorH-450)/2;

Step 4:
Determining the size your game can take in the screen and adjusting the application surface size and centering accordingly. If we follow the example of a 800x450 game, you know can already know what are the desired sizes your game can display at. (x2 - 1600x900, x3 - 2400x1350, x4 - 3200x1800, etc).

By going through some simple conditions, you will determine what size it can can take. Here's an example to know if you can scale your 800x450 game by 2:

if(global.MonitorW>=1600 && global.MonitorH>=900)
then
{
surface_resize(application_surface,1600,900)
global.Xoffset=(global.MonitorW-1600)/2;
global.Yoffset=(global.MonitorH-900)/2;
}
https://docs.yoyogames.com/source/dadiospice/002_reference/surfaces/surface_resize.html

Step 5:
Now that the application surface is the right size and that we are done with all the necessary calculations, there's one more thing to do. You have to make an object draw your application surface on screen every step. Normally I would suggest that all your objects in the game that can draw something would do it in a "pre-draw" or normal "draw" event. This way you are sure everybody is done drawing when you display the application surface in a post-draw event. Here's an example of how the code could look:

draw_surface_ext(application_surface,global.Xoffset,global.Yoffset,1,1,0,c_white,1);
https://docs.yoyogames.com/source/dadiospice/002_reference/drawing/drawing surfaces/draw_surface_ext.html




2) Games displayed scaled but always respecting the screen ratio. (good for 3D games or vector art)

No need to code anything, GMS can do this for you:





3) Games with their displayed playfield changing size. (good for some very specific cases)

With this method you would actually set the view and port size of your room according the monitor's size. It's very easy to pull off and will be useful mostly in games like SimCity or other strategy games where the gameplay is not broken due to the fact a player can see larger of a playfield than another. It's rare you see this method used in professional games though because there are some drawbacks to understand before using it:

- Different players having different view sizes depending their monitor can advantage or disadvantage them in multiplayer.

- It can also make a game harder than planned or easier than planned.

- It can influence a lot of other design aspects of the game like hiding secrets, controlling what the player sees in order to give an impression or a feeling.

- You game will be harder to balance in general and to debug.




4) Games that use the overscan method.

Similarly to the first method (pixel perfect), someone who wouldn't want to ever see their game appearing letteboxed on screen could decide to resize the application surface bigger than the game window (still at an integer size) in order to hide all the letterboxing. This is rarely used in pro games here again because it's hard to control what the player see and does not see on screen depending his/her monitor's resolution. This leads to the same kind of drawbacks as the third method described in this tutorial.




Other very useful tutorials:

http://www.yoyogames.com/blog/65 (Scaling for devices part 1)
http://www.yoyogames.com/blog/66 (Scaling for devices part 2)


Alternate scaling method entirely
(and aspect ratio tutorials + other excellent tutorials by PixelPope)
https://forum.yoyogames.com/index.p...-aspect-ratio-management-for-game-maker.7106/


:)
 
Last edited:

zendraw

Member
thanx, now my game has no graphical deformations atall. just one thing i want to point out thou, in your pixel perfect explanation you dont need to multiply big numbers like 800, all that is neceserry is they to be dividable by 2, so 640x480 is also pixel perfect and 512x512 also.
what i usually do is multiply 32 by a certain number, in this case 32*20=640=pixel perfect and 32*15=480=pixel perfect. 896x768 is also pixel perfect. i think you get my point.
 
T

Travis Baker

Guest
The patience required in creating sprites is almost more than I can handle, haha! Thank you for the insight!
 

RangerX

Member
sliding the surface around to allow the view to move by sub pixel amounts? ;P
This have absolutely nothing to do with scaling though :p


Other methods not mentioned in this thread:

- Game changing the monitor's resolution. There's a ton of games like that on the market. Its just that GMS cannot do that for whatever reason.
- Game actually being a texture on a polygon. Since triangles scaling works different, this could yield different results and is probably doable in GMS.

What else? raycasting?
 

seanm

Member
You could mention scaling the individual assets. Much less math and behind the scenes for the beginner programmer.
 

RangerX

Member
You could mention scaling the individual assets. Much less math and behind the scenes for the beginner programmer.
I hope its because I don't understand your idea here because that sounds like a terrible solution. One could have all his game assets at different sizes and switch them depending monitor's size but that's a major pain in the butt. Much longer and complicated than any solution I exposed here. You could even have asset for every one of the let's 20 most popular resolutions and making your graphics could take forever. And imagine tiles... you can't shift tiles just like that easily. The poor soul doing that would need to have multiple rooms for different resolutions.
 
  • Like
Reactions: 607

seanm

Member
I hope its because I don't understand your idea here because that sounds like a terrible solution. One could have all his game assets at different sizes and switch them depending monitor's size but that's a major pain in the butt. Much longer and complicated than any solution I exposed here. You could even have asset for every one of the let's 20 most popular resolutions and making your graphics could take forever. And imagine tiles... you can't shift tiles just like that easily. The poor soul doing that would need to have multiple rooms for different resolutions.
Nah I just meant scaling your assets up by 2x or something in the Sprite editor.
 

Brenden

Member
I tried the first method changed some things for my game but every time i go to full screen I get a black screen.
here is the code.
Code:
Information about object: obj_full
Sprite:
Solid: false
Visible: true
Depth: 0
Persistent: true
Parent:
Children:
Mask:

No Physics Object
Create Event:

execute code:

global.MonitorW=display_get_width();
global.MonitorH=display_get_height();

Step Event:

execute code:

global.gameW=view_wview;
global.gameH=view_hview;
global.Xoffset=(global.MonitorW-global.gameW)/2;
global.Yoffset=(global.MonitorH-global.gameH)/2;
if (global.gameW>global.gameH){
global.maxSize=floor(global.MonitorW/global.gameW);
}else{
global.maxSize=floor(global.MonitorH/global.gameH);
}
global.scaleW=global.gameW*global.maxSize;
global.scaleH=global.gameH*global.maxSize;

Draw Event:

execute code:

if (window_get_fullscreen()){
    draw_surface_ext(application_surface,global.Xoffset,global.Yoffset,1,1,0,c_white,1);
}

Key Press Event for F4 Key:

execute code:

if (!window_get_fullscreen()){
    window_set_fullscreen(true);
    application_surface_draw_enable(false);
    surface_resize(application_surface,global.scaleW,global.scaleH)
    global.Xoffset=(global.MonitorW-global.scaleW)/2;
    global.Yoffset=(global.MonitorH-global.scaleH)/2;
}else{
    window_set_fullscreen(false);
    application_surface_draw_enable(true);
}
 

RangerX

Member
Have you got it to work first?
Then after that you should be trying to make a user option with it.
The setting I suggest in the method up there should happen in the creation code of your first room.
 

Brenden

Member
OK, so I am doing it with out my new vars and it still gives me a black screen.
Code:
global.MonitorW=display_get_width();
global.MonitorH=display_get_height();
global.Xoffset=(global.MonitorW-780)/2;
global.Yoffset=(global.MonitorH-780)/2;
surface_resize(application_surface,780,780)
window_set_fullscreen(true);
application_surface_draw_enable(false);

Draw Event:

execute code:

///DRAW GAME
draw_surface_ext(application_surface,global.Xoffset,global.Yoffset,1,1,0,c_white,1);
 

jazzzar

Member
Have you got it to work first?
Then after that you should be trying to make a user option with it.
The setting I suggest in the method up there should happen in the creation code of your first room.
hey i'm making android game,the game has no views and the room is 800X1024 i tried so many things back in 2015 and gave up because of that problem (scaling),can you help me scale the game for android without getting those stretched sprites and without using views? i really appreciate any help :(
 

RangerX

Member
Without views I am afraid you can't. Its the size of your room that will be your resolution so you would need different room sizes depending the resolution of the android machine the player is using. That sounds like a major pain in the...

Why aren't you using views anyways?
 

jazzzar

Member
Without views I am afraid you can't. Its the size of your room that will be your resolution so you would need different room sizes depending the resolution of the android machine the player is using. That sounds like a major pain in the...

Why aren't you using views anyways?
because it's a puzzle game, it all happens in a single place so i don't see the need for views,and using different rooms for different android devices was something i thought of but yeah it's a pain in the ... :(
 

RangerX

Member
because it's a puzzle game, it all happens in a single place so i don't see the need for views,and using different rooms for different android devices was something i thought of but yeah it's a pain in the ... :(
The view is the resolution of your game. Having them is a must. As Nazghul said, with views you easily scale your game and adapt it to any device or screen.
 

jazzzar

Member
The view is the resolution of your game. Having them is a must. As Nazghul said, with views you easily scale your game and adapt it to any device or screen.
Ok can you guide me in the right directions than? Please i really need some serious help
 

RangerX

Member
Well, since you weren't satisfied with your game set in "keep aspect ratio" in that other thread of yours, I would suggest you use the "pixel perfect" method explained in the tutorial up here.
This is if your game can run fine with the application surface on.
 

jazzzar

Member
Well, since you weren't satisfied with your game set in "keep aspect ratio" in that other thread of yours, I would suggest you use the "pixel perfect" method explained in the tutorial up here.
This is if your game can run fine with the application surface on.
Tried to use it, didn't go well, i think i'll just give up on scaling now
 

jazzzar

Member
Why give up without exposing the problem? We could help you, you would learn stuff, feel good about overcoming it, etc. Just positive stuff here.
BECAUSE this scaling thing made me give up in the past, i just don't want the same thing to happen now, people already tried to help, nothing worked
 
M

Meowmere

Guest
This is breaking me... I need this though as my hud shows up in other places on different monitors and devices
 

RangerX

Member
M

MEX_XIII

Guest
Hi! I'm new with Gamemaker development, and your tutorial was really helpful. I managed to mantain my game pixel perfect and letterboxed following your tutorial. Although, I wanted to achieve something like Hyper Light Drifter. As you can see in the two images (I upload them down here), instead of mantaining the resolution and being Letterboxed, the game stretches itself to fullscreen, mantaining the resolution and the PIxel Perfect ratio. I use a 1366x768 resolution on my computer, so I'm pretty sure the game doesn't scale itself more than that. The games native resolution is 480x270, so I'm pretty sure that window is 960x540.

Captura de Tela (623).png Captura de Tela (625).png

Any ideas on how I could achieve a similar effect? I have been searching for fuctions and ways to stretch the screen or change the display resolution for a week, and found nothing for now :/
 

jazzzar

Member
Hi! I'm new with Gamemaker development, and your tutorial was really helpful. I managed to mantain my game pixel perfect and letterboxed following your tutorial. Although, I wanted to achieve something like Hyper Light Drifter. As you can see in the two images (I upload them down here), instead of mantaining the resolution and being Letterboxed, the game stretches itself to fullscreen, mantaining the resolution and the PIxel Perfect ratio. I use a 1366x768 resolution on my computer, so I'm pretty sure the game doesn't scale itself more than that. The games native resolution is 480x270, so I'm pretty sure that window is 960x540.

View attachment 1255 View attachment 1256

Any ideas on how I could achieve a similar effect? I have been searching for fuctions and ways to stretch the screen or change the display resolution for a week, and found nothing for now :/
the difference between me and you is that my game is for android, been stuck with this forever , my game is nearly finished and still didn't sort this thing out , i even bought edgeds engine on the marketplace but nah
 

jazzzar

Member
@MEX_XIII - Have you checked out the scaling tutorial that comes with GMS? It covers what you want... also read my tech blogs on scaling here: http://www.yoyogames.com/blog/66
Hey nocturne , sorry for double commenting , but neither the tutorial nor the blog post helped me, my game is 800 width by 1024 height, do i need to add to the size ? and use views width and height to 800X1024? although my game is a puzzle which uses no views (but i guess i need them to be able to scale) , ANY HELP WOULD BE APPRECIATED my game is nearly finished now :(
 
the difference between me and you is that my game is for android, been stuck with this forever , my game is nearly finished and still didn't sort this thing out , i even bought edgeds engine on the marketplace but nah
If you are not using views, then you will need to change the room sizes, and make your objects' positions adapt dynamically :) You can change room sizes (from another room) by using room_set_width and _height. To adapt things you can do stuff like "x = round(xstart/800*room_width)", and then you will of course need to smartly scale objects that need to scale. Really it isn't much different from designing responsive webpages (which is a thing you can easily learn more about by googling it) - you need to use pretty much the same techniques ;)
 

jazzzar

Member
If you are not using views, then you will need to change the room sizes, and make your objects' positions adapt dynamically :) You can change room sizes (from another room) by using room_set_width and _height. To adapt things you can do stuff like "x = round(xstart/800*room_width)", and then you will of course need to smartly scale objects that need to scale. Really it isn't much different from designing responsive webpages (which is a thing you can easily learn more about by googling it) - you need to use pretty much the same techniques ;)
i just can't achieve this :/ so hard for me
 

Nocturne

Friendly Tyrant
Forum Staff
Admin
Okay, what EXACTLY are you trying to achieve? If your game uses a fixed room size, then you CANNOT make it scale adaptively to fit any screen size. Well, okay, you CAN, but you'll need to leave either a black border around the screen or trim some of the visible space. How about you show a screenshot of the game as it is now, and a mock up of how you'd like it to look fullscreen on, for example, a 16:9 monitor? I can think of numerous ways to do this, but it will depend on the end result you wish... I suggest that you post a seperate topic in the Programming forum though, as this is not the place to discuss alternative methods for one person... ;)
 

jazzzar

Member
Okay, what EXACTLY are you trying to achieve? If your game uses a fixed room size, then you CANNOT make it scale adaptively to fit any screen size. Well, okay, you CAN, but you'll need to leave either a black border around the screen or trim some of the visible space. How about you show a screenshot of the game as it is now, and a mock up of how you'd like it to look fullscreen on, for example, a 16:9 monitor? I can think of numerous ways to do this, but it will depend on the end result you wish... I suggest that you post a seperate topic in the Programming forum though, as this is not the place to discuss alternative methods for one person... ;)
yeah i'll just answer the question, it's a puzzle ANDROID GAME so the placement of the blocks in the room is important, i don't care about the extra space so i don't want it to be fix,it's okay for that,the game is somehow inspired by ehmm blue box i think?
here : http://www.kongregate.com/games/chomi3/blue-box but it's dark and has a little story :p
 

RangerX

Member
Hi! I'm new with Gamemaker development, and your tutorial was really helpful. I managed to mantain my game pixel perfect and letterboxed following your tutorial. Although, I wanted to achieve something like Hyper Light Drifter. As you can see in the two images (I upload them down here), instead of mantaining the resolution and being Letterboxed, the game stretches itself to fullscreen, mantaining the resolution and the PIxel Perfect ratio. I use a 1366x768 resolution on my computer, so I'm pretty sure the game doesn't scale itself more than that. The games native resolution is 480x270, so I'm pretty sure that window is 960x540.

View attachment 1255 View attachment 1256

Any ideas on how I could achieve a similar effect? I have been searching for fuctions and ways to stretch the screen or change the display resolution for a week, and found nothing for now :/

This here is a more advanced technique. Something similar to what I said in post #10.
You can also notice there's some interpolation going on in the fullscreen shot. If you display your game as a 3D plane and with some great interpolation shader am sure you can achieve such result. Hyper Light Drifter simply isn't beginner beer.
 
M

MEX_XIII

Guest
This here is a more advanced technique. Something similar to what I said in post #10.
You can also notice there's some interpolation going on in the fullscreen shot. If you display your game as a 3D plane and with some great interpolation shader am sure you can achieve such result. Hyper Light Drifter simply isn't beginner beer.
Hyper Light has some amazing techniques there, and it took years to develop. It's obvious hard for me to achieve something similar with my first game, but I like to pay attention to the small things and details when playing it and see what can be achieved with Gamemaker. As the developers themselves say, the game pushes GM to it's limits. Thanks for the tips, will take a look on Interpolation and 3D planes :)
 
M

MEX_XIII

Guest
@MEX_XIII - Have you checked out the scaling tutorial that comes with GMS? It covers what you want... also read my tech blogs on scaling here: http://www.yoyogames.com/blog/66
Hey, have those blogs in my favorites, I managed to implement them in my game, though the first didn't work pixel perfect and I wasn't wanting to change the view size, since it would break gameplay. So for now, I'm planning to use some math to join both of your solutions to mantain the pixel perfect ratio and don't change the View size very much, designing the overall room with like, some thicker walls to be ready for a certain increase in the View size, for example. Basically, my game runs at 480x270 native resolution, which would scale fine for, let's say, 1920x1080. So, in my case, which computer uses a 1366x768 resolution, I would change the View size to 683x384 and scale it 2 times. This wouldn't be a problem to take in consideration when designing the rooms, since it's not as big a difference in the view than it would be to show 1366x768 pixels of it on the screen.

Heck their game can even be pixel looking vector graphics. There's many possible scenarios.
Once one gets used to GM, it's possible to come up with various possible solutions. I'll probably find a totally different one someday XD

Thanks for all the tips, this is a very friendly place. I will sure stick in and appear more often through the development of a game :)
 

seanm

Member
I can't speak to how the game looks on certain monitors, but I can tell you this about HLD.

The game is designed to scale into a 1920x1080 monitor
The game also uses something which allows the camera to move independently from the scaling. This means the camera is 4x smoother than it would otherwise be.

I imagine just those 2 things alone, and some slight view stretching are enough to have the game look amazing on most monitors.
 

RangerX

Member
Actually it doesn't stretch. I observed the screenshot and it looks near identical, just some blur going on indicating there's a type of interpolation there.
Anyhow, HLD is pro stuff. Pro looking stuff. Whatever the means that makes you achieve a cohesive and clean game like that is good.
 
X

Xynel

Guest
Hello, i have some problems with the "pixel perfect", the screen is scaled, but just the visual, here is a photo to show better what is happening: Sin título.png

Also, i put this code:
draw_surface_ext(application_surface,global.Xoffset,global.Yoffset,1,1,0,c_white,1);
on "Draw GUI", because if i put it on normal "Draw" i just see a black screen.

I hope you can help me, thx in advance.
 
  • Like
Reactions: 607

RangerX

Member
And you're also doing something wrong if your game isn't in the middle of the screen there...
I suspect its you who did cut the screenshot or something.
 
X

Xynel

Guest
I just change this:
if (global.MonitorW>=1600 && global.MonitorH>=900){
surface_resize(application_surface,1600,900)
global.Xoffset=(global.MonitorW-1600)/2;
global.Yoffset=0;
}
And that's not the problem..
 

RangerX

Member
I know its not the problem.
Are your buttons drawn in the GUI layer?
You have a problem with the GUI layer not getting properly resized (not covered in this tutorial) or you code for figuring out mouse position is wrong.
 
X

Xynel

Guest
No, i dont draw the buttons, i put the object button with sprite on the room, maybe that's the problem?
 

RangerX

Member
Problem is in your mouse code or how you coded that button in that object. Where is the object managing your button is shouldn't matter much.
 
A

Alessio

Guest
Hi. I've tried method 1 but it seems i can't get it working.

I've made a persistent object for this purpose. I've put it in an initializer room.
I've put this in the step event:
Code:
application_surface_draw_enable(false);

window_set_fullscreen(true);

global.MonitorW=display_get_width();
global.MonitorH=display_get_height();

global.Xoffset=(global.MonitorW-256)/2;
global.Yoffset=(global.MonitorH-240)/2;

if(global.MonitorW>=1024 && global.MonitorH>=960)
then
{
surface_resize(application_surface,1024,960) 
global.Xoffset=(global.MonitorW-1024)/2;
global.Yoffset=(global.MonitorH-960)/2;
}
And then this in the "Post Draw" event:
Code:
draw_surface_ext(application_surface,global.Xoffset,global.Yoffset,1,1,0,c_white,1);
What's wrong with this? Also, is "fullscreen enable" needed?
 

RangerX

Member
And what happens after? You get a black screen?
Because you have to draw the surface every step. If you have it only in your ini object that won't do.
 
Top