• Hey Guest! Ever feel like entering a Game Jam, but the time limit is always too much pressure? We get it... You lead a hectic life and dedicating 3 whole days to make a game just doesn't work for you! So, why not enter the GMC SLOW JAM? Take your time! Kick back and make your game over 4 months! Interested? Then just click here!
  • Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

Android Game full screen and resizing

V

Vinzo

Guest
Hello,
I'm creating a game for the first time with Game Maker Studio 2 and I need the game (for mobile device) to be displayed horizontally and in full screen.
For the horizontal view I solved from GM settings by setting landscape as the only possibility; for the full screen, and resizing on different devices, I'm having some problems.
I followed this guide https://www.yoyogames.com/blog/66/the-basics-of-scaling-the-game-view and the resizing seems to work, but on some devices (such as Xiaomi Redmi Note 5 2160x1080 ) the black border remains on the side where the keys are, as if it calculated that space as unusable or not part of the display.
If, from the phone settings, I allow the game to use the full screen, everything works and the game is correctly opened in full screen, resizing correct and without borders.
Has anyone ever found themselves in a similar situation? How can I solve it? Is there a way to automatically enable the function in the phone settings? Other games do it.
Thanks.
 

flyinian

Member
Take a look at this post. It's about views and scaling. This may help you size your game to a phone better.

As far as I know, there are cases where there will always be black bars but, you are able to adjust the camera so they don't show.

There is full-scale and aspect ratio in the game's settings under graphics:

If I recall correctly,

Full scale = no black bars but scaling of game may be off.

Aspect ratio = maintains scale of sprites but, may leave black bars around game.
 

Stephane

Member
Hello,
I'm creating a game for the first time with Game Maker Studio 2 and I need the game (for mobile device) to be displayed horizontally and in full screen.
For the horizontal view I solved from GM settings by setting landscape as the only possibility; for the full screen, and resizing on different devices, I'm having some problems.
I followed this guide https://www.yoyogames.com/blog/66/the-basics-of-scaling-the-game-view and the resizing seems to work, but on some devices (such as Xiaomi Redmi Note 5 2160x1080 ) the black border remains on the side where the keys are, as if it calculated that space as unusable or not part of the display.
If, from the phone settings, I allow the game to use the full screen, everything works and the game is correctly opened in full screen, resizing correct and without borders.
Has anyone ever found themselves in a similar situation? How can I solve it? Is there a way to automatically enable the function in the phone settings? Other games do it.
Thanks.
Hi Vinzo - we have dealt with this problem and created our own system for managing screen and layout types. Although our method works for us, your may game may need more or less work in this regard. Our games are mostly UI based so we need to manage everything like this. Your game may be different and managing viewports may be good enough. I'm just going to show a high-level overview of how we handle things. One thing that we would like to add... We do not recommend creating a mobile game as your first game. Make a steam/PC game first. Mobile games add way too many complexities that will make execution and success much harder.

GRAB SCREEN SIZES
First, we grab the screen sizes with

global.deviceWidth = display_get_width();
global.deviceHeight = display_get_height();

SET ROOMS AND VIEWS
Then we set the room and viewports using custom scripts to match the device screen (it shouldn't be hard for you to figure this out).

GET SCALING VALUES FOR UIs
Then we create a scaling multipliers based on our default asset sizes. You would need to figure out your default screen size, but let's say it's 1080P
We then divide the current screen width and height by the default screen size to get our multipliers.

Let's say that you're using an iPad4 (width = 2,048 and height = 1536)

global.sizeW = (global.deviceHeight / defaultWidth);
/// Example: 2,048 / 1920 = 1.07

global.sizeH = (global.deviceWidth / defaultHeight);
/// Example: 1536 / 1080 = 1.42

Any asset that is placed in the room uses either the global.sizeW or global.sizeH to scale its size position and padding to ensure that everything is uniform on all aspect ratios. This is primarily used for UI layouts. Some areas of the screen may be dependent on height, so we use the height value to scale, whereas most are dependent on the width value so we use the width value.

I've attached images that show how these values are used.

Image 1: This is our own aspect ratio selector for testing on Windows with really helps with testing layouts. We still have to test on device to make sure everything is scaled and positioned properly before launching.

Image 2: This is a screengrab from windows for iPad which is our default resolution.

Image 3: This is a 16:9 screengrab. As you can see the layout is slightly different because the board needs the maximum height at this aspect ratio. Also, we have completely different sizes at the edge so the assets scale and space themselves properly using the multipliers.

For a system like ours, you need to be mindful of everything that you place on the screen and everything needs to be positioned and scaled using the global multipliers. Once that is set up, it's easy to ensure that our game works on every single device out there without having the manually create layouts for every single one.

I hope this helps...
 

Attachments

Stephane

Member
Here's the most extreme aspect ratio. As you can see it's got the most vertical spacing for everything, and we had to add some offsets for things like the number buttons, to not let them space out too far from each other.
 

Attachments

V

Vinzo

Guest
Hi Vinzo - we have dealt with this problem and created our own system for managing screen and layout types. Although our method works for us, your may game may need more or less work in this regard. Our games are mostly UI based so we need to manage everything like this. Your game may be different and managing viewports may be good enough. I'm just going to show a high-level overview of how we handle things. One thing that we would like to add... We do not recommend creating a mobile game as your first game. Make a steam/PC game first. Mobile games add way too many complexities that will make execution and success much harder.

GRAB SCREEN SIZES
First, we grab the screen sizes with

global.deviceWidth = display_get_width();
global.deviceHeight = display_get_height();

SET ROOMS AND VIEWS
Then we set the room and viewports using custom scripts to match the device screen (it shouldn't be hard for you to figure this out).

GET SCALING VALUES FOR UIs
Then we create a scaling multipliers based on our default asset sizes. You would need to figure out your default screen size, but let's say it's 1080P
We then divide the current screen width and height by the default screen size to get our multipliers.

Let's say that you're using an iPad4 (width = 2,048 and height = 1536)

global.sizeW = (global.deviceHeight / defaultWidth);
/// Example: 2,048 / 1920 = 1.07

global.sizeH = (global.deviceWidth / defaultHeight);
/// Example: 1536 / 1080 = 1.42

Any asset that is placed in the room uses either the global.sizeW or global.sizeH to scale its size position and padding to ensure that everything is uniform on all aspect ratios. This is primarily used for UI layouts. Some areas of the screen may be dependent on height, so we use the height value to scale, whereas most are dependent on the width value so we use the width value.

I've attached images that show how these values are used.

Image 1: This is our own aspect ratio selector for testing on Windows with really helps with testing layouts. We still have to test on device to make sure everything is scaled and positioned properly before launching.

Image 2: This is a screengrab from windows for iPad which is our default resolution.

Image 3: This is a 16:9 screengrab. As you can see the layout is slightly different because the board needs the maximum height at this aspect ratio. Also, we have completely different sizes at the edge so the assets scale and space themselves properly using the multipliers.

For a system like ours, you need to be mindful of everything that you place on the screen and everything needs to be positioned and scaled using the global multipliers. Once that is set up, it's easy to ensure that our game works on every single device out there without having the manually create layouts for every single one.

I hope this helps...

Hi Stephane, thank you for your answer but maybe we didn't understand each other.
The resize works on various devices, the problem occurs when I want the game to open in full screen. I'm attaching the screens before and after enabling the check, from the phone settings, which allows the game to use the full screen.
I wish the game starts directly in full screen, could it be an android security problem since the game is not installed by the Play Store?

Below is the script I am using to resize:
var base_w = 1920;
var base_h = 1080;
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;
}else{
// 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_wport[0], view_hport[0]);


Best regards,
Vinzo
 

Attachments

Stephane

Member
It seems like you're not resizing your room or viewports. If you're using viewports you need to resize them, otherwise, just resize your room. They do not need to be the same resolution, they just need to be the same aspect ratio. As I wrote before, you need to resize your rooms on startup. Let me know if that helps.
 

Stephane

Member
Okay, so it's a bit more complicated than that... I found out what we did to fix this. We had to edit the GMS 2 runtime in order to access the part of the android manifest that deals with this setting. Once you edit the runtime, you will need to keep using your edited version, which means that if you update GMS you will have to also manually update your runtime...

Alternatively, you could make a bug ticket and ask Yoyogames to make the change. They've been known to do this. ;)
 
Top