OFFICIAL Tech Blog: The Basics Of Scaling


YoYo Games Staff
YYG Staff
Our latest series of blogs explore the different ways to scale your game to fit screens of different resolutions. Scaling your game can be a headache for many users and hopefully, through these blogs we can help to make it a simpler task and provide you with a framework to get the correct results every time.

To start, the first blog discusses the GUI layer. It is an ideal starting point for discussion as it is not influenced by views nor (directly) by the application surface, so the calculations are easier and it gives a good introduction to the techniques you'll need to later scale the game itself to fit any display dimensions.


So what about scaling the game itself? Making your game fill the whole display is easy, but making it fill the display and look correct (avoiding blurring and stretching) is not, so in part 2 of these tech blogs we will cover various different methods that you can choose to scale the game properly.


Part 3 is all about how to scale games for the HTML5 target platform, as it poses some unique challenges compared to all the other platforms. When scaling your game on HTML5, it is important to realise that there are some fundamental differences between it and the other targets. The game window is now the canvas element of the page, and the display becomes the browser window.

Always glad of these blog posts as they help explain a lot but...

On Part 2 it has this code

var base_w = 1024;
var base_h = 768;
var max_w = display_get_width();
var max_h = display_get_height();
var aspect = display_get_width() / display_get_height();
if (max_w < max_h)
// portait
var VIEW_WIDTH = min(base_w, max_w);
var VIEW_HEIGHT = VIEW_WIDTH / aspect;
// landscape
var VIEW_HEIGHT = min(base_h, max_h);
var VIEW_WIDTH = VIEW_HEIGHT * aspect;
camera_set_view_size(view_camera[0], floor(VIEW_WIDTH), floor(VIEW_HEIGHT))
view_wport[0] = max_w;
view_hport[0] = max_h;
surface_resize(application_surface, view_wview[0], view_hview[0]);

but its not clear where this code should go. Can you explain it a bit more? Also how would you clamp the camera to the room?



Friendly Tyrant
Forum Staff
The given code is intended for the Room Start event or the Create event of a controller object, or it could even go in the room creation event of the room editor. You would need to ensure that views are enabled in the room and that there is a view port active (the code assumes view port 0) and that views are enabled for the view port.


Was this written for GMS2 or copy/pasted from older materials? There are references to view_wview and view_hview, but these no longer exist.


Was this written for GMS2 or copy/pasted from older materials? There are references to view_wview and view_hview, but these no longer exist.
They are the old GMS1 tutorials, just updated with GMS2 function calls.
They must have missed a couple of GMS1 references.


Ah, that's why. As I was reading I was sure I'd read it before, but I couldn't quite put my finger on where. That explains it then.

Still a good tech blog, and it came at a very convenient time for me actually. But you may want to correct those legacy references. :p


HTML 5 scaling is broken. Everything said in these (quite) old threads is still relevant:
I downloaded the linked demo project in the "new" article on HTML5 scaling, added some text to it and ran it. It still ignores display scale ratios which makes everything (especially texts) look terrible on screens with ratio that is not 1:1 (or 100%). Of course, this is particularly obvious on phone browsers. Text is unreadable.

PS: I'd love to be proven wrong so I can finally find some use for Gamemaker. Also, I haven't tested it thoroughly this time as I barely remember how to use Gamemaker - just saw the new article and decided to do a quick check.