How to Change Your Game's Resolution & Use a Mobile Aspect Ratio


How to Change Your Game's Resolution & Use a Mobile Aspect Ratio

With GX.games, publishing mobile games is free and easier than ever.

It’s crucial for your mobile game to have a mobile-compatible resolution, or automatically adapt to whichever display it runs on. This tutorial covers both.

Even if you’re not developing for mobile, this is an essential guide to follow for managing resolution.

Fixed Aspect Ratio, without Camera

Your room size controls your game’s resolution when you’re not using views/cameras.

In the Fire Jump template, each room’s size is set to 1080x1920:

undefined

This ensures the game appears in a 9:16 aspect ratio on all displays.

Ensure that your first room has your desired resolution as its size, as it'll set the aspect ratio for the rest of your game. Ideally, all your rooms should have the same resolution.

Fixed Aspect Ratio, with Camera

A camera lets you display your game in any resolution, regardless of your room’s size.

Open your first room, and under the Room Properties, enable Viewports. Make your first viewport visible.

undefined

Change the “Camera” Width/Height and “Viewport” Width/Height to your desired resolution:

undefined

Under “Object Following”, tell the camera which object it should follow.

Your game’s aspect ratio will now be determined by the camera, instead of your room’s size:

undefined

As with the room size, the camera configuration in your first room will determine the aspect ratio throughout the game.

Camera at Runtime

Managing resolution becomes trivial when you do it through code, since you don’t have to maintain camera settings in each individual room.

Create a new script, remove the default function that appears, and add this:

global.res_width = 1080;
global.res_height = 1920;

window_set_size(global.res_width, global.res_height);
surface_resize(application_surface, global.res_width, global.res_height);

undefined

This initialises variables for your game’s width and height, changes the window size and sets the application surface size, which is your game’s resolution.

Now in the Room Start event of your game manager object, add this:

view_enabled = true;
view_visible[0] = true;

var _w = global.res_width;
var _h = global.res_height;
var _cam = camera_create_view(0, 0, _w, _h);

camera_set_view_target(_cam, obj_player);
camera_set_view_border(_cam, _w / 2, _h / 2);

view_camera[0] = _cam;

undefined

The Room Start event runs when a room starts, which is the ideal place for setting up a camera for each room.

It’s recommended to create a persistent object to hold this Room Start event, and place that object in your first room so it exists throughout your whole game.

This code enables views and makes the first view visible.

It then creates a camera using our set width and height.

After that, it tells the camera to follow obj_player, and sets the borders to half the resolution, so the player stays in the centre.

Finally, it applies our new camera to the view.

Now, you don’t need to set camera settings in any room: this code will handle resolution automatically.

Automatically Adapt to Different Aspect Ratios

You'll need adaptive aspect ratios if you want your game to work on both desktop and mobile.

With some code added to your camera logic, your game will adapt to whatever display it’s being played on.

Open the script where you set your global.res_width and global.res_height variables:

undefined

or

undefined

Remove these variables, as highlighted above, and add this instead:

global.res_width = 1920;
global.res_height = 1080;

var _ratio = global.res_width / global.res_height;
var _display_ratio = display_get_width() / display_get_height();

if (_display_ratio < _ratio){
    global.res_height = 1920; // Optional

    global.res_width = global.res_height * _display_ratio;
}

undefined

This first sets the game’s default resolution to 1920x1080, which is a desktop resolution.

It then calculates the aspect ratio of your default resolution, and the aspect ratio of the display where the game is being played.

If the display ratio is lower than the game’s ratio, it likely means the game is being played on a mobile display, as the width is lower compared to the height.

In that case, it first increases the resolution height from 1080 to 1920. This is optional, and may be removed or modified depending on your game.

Then, it changes the resolution width depending on the display ratio.

Your game will now adapt to both desktop and mobile resolutions:

Game running with a desktop aspect ratio      Game running with a mobile aspect ratio

If your game doesn’t use cameras, remove all camera-specific code in your Room Start event, and just set your room size to your width and height variables:

room_width = global.res_width;
room_height = global.res_height;

undefined

Opera GX “Mobile” Condition

Making a <Link>mobile game for GX.games? You can use os_get_info() to tell if the Opera GX runner is running on desktop or mobile.

It returns a DS Map, which contains the key “mobile” when running on Opera GX. That key is true when the game is running on mobile.

So, you can do something like this:

var _info = os_get_info();

if (_info[? “mobile”]) {    // Running on Opera GX mobile!
    // Set mobile resolution    // Enable touch controls    // etc.
}

ds_map_destroy(_info);

undefined

Also see:

How to Add Touch Controls.

Publish your mobile game to GX.games for free.

Happy GameMaking!