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:

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.

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

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:

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);

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;

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:

or

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;
}

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

var _info = os_get_info();

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

ds_map_destroy(_info);