Game Maker Studio Tutorial : Scaling for Devices

So, the first in the series

Before we start, I’m a hobbyist game designer, not a programmer, so what I'm sharing is a collection of my code and other game projects.

Download GMS file here

Each and every of us has once struggled to make the game appearing right on every single mobile in the market.
Why can’t we rely to the “Full Scale” option in Game Maker Studio to do all the jobs for us ?

Because what it did is just stretch the game to fit the screen, which results in the stretching of character, UI…

For short, ugly looking game.

A few words though, I’m still learning how to do proper scaling, so what I’m sharing to you is my best knowledge so far from Yoyo Dev Blog and other game projects

Yoyo Games has a great two-part tech article covering this problem. They explain the logic behind the solution. We will use their approach though. I think you may want to take a look at it before we proceed.

https://www.yoyogames.com/blog/65 ( Resize GUI )
https://www.yoyogames.com/blog/66 (Resize Game Screen)

OK, maybe with most of you (and me), it seems like a lot of words and techy stuff, I don’t understand it yet, but applying the provided code gives me some result.

So let’s jump right to the game.

Basically, what you’re going to do is making a script, run it at the beginning of the game and that’s it.

Script 

First, create a script, name it like : InitScreenSize.

Pass this code ( this one is from a game project I bought from Marketplace )

globalvar window_width, window_height;
switch (os_type) {
  // desktop
  case os_windows:
  case os_linux:
  case os_macosx:
    window_width =  960;  // change this to the desired window width
    window_height = 640;  // change this to the desired window height
    touch = false;
  break;
 
  // mobile
  case os_android:
  case os_ios:
  case os_winphone:
  case os_tizen:
    window_width = round(display_get_width());
    window_height = round(display_get_height());
    touch = true;
  break;
}

// change screen size
var base_w = 1024;
var base_h = 768;
var max_w = window_width;
var max_h = window_height;
var aspect = window_width / window_height;
if (max_w < max_h) {
  var VIEW_WIDTH = min(base_w, max_w);
  var VIEW_HEIGHT = VIEW_WIDTH / aspect;
} else {
  var VIEW_HEIGHT = min(base_h, max_h);
  var VIEW_WIDTH = VIEW_HEIGHT * aspect;
}
view_wview[0] = floor(VIEW_WIDTH);
view_hview[0] = floor(VIEW_HEIGHT);
view_wport[0] = max_w;
view_hport[0] = max_h;

surface_resize(application_surface, view_wview[0], view_hview[0]);
window_width = view_wview[0];
window_height = view_hview[0];

// resize window on desktop
if (!touch) {
  window_set_size(view_wview[0], view_hview[0]);
}

Now, let’s config the room setting a bit.

Room Setting

Go to Rooms, create a blank room

Go to the room’s settings, set the Width and Height to the value in the script.

Go to the room’s Views, check two options

• Enable the Use of Views

• Visible when Room Starts

• Make sure you choose View 0 for this code to take effect.

And it’s done.

Scaling Game Objects

Using thatcode alone can make the gamemuch much better, however, there’s one thing remains.
I experienced this case when found out that the character didn’t get scale up, only the screen. It’s quite noticable if you’re playing the game on phone with high resolution.

So, we might need to scale the character as well.

It’s pretty easy.

Basically, in every object, you add this code to the “Draw” event

var scale = global.window_height / 768;
draw_sprite_ext(sprite_index, image_index, x, y, scale, scale, 0, c_white, 1);
draw_text_transformed(window_width / 2, window_height/2, 'Scaling', scale, scale, 0);

It will draw the character and the text according to the size.

Note

You must use : window_width, window_height instead of the built in room_width, room_height

Pros and Cons

Pros

• Easy to implement

• It’s fast

Cons

• This code utilize the view of room to make the game fit, so if you’re using other effects involving view ( for example, view[0], view[1], view[2]) then you may want to adjust the code a little bit. I’m still working on this though.

• As you can see, the text should stick with draw_text_transform, so we can’t use other fancy text effect in game ( I think we can consider using sprite)

Download GMS file here