A few questions regarding Fullscreen and window size change

Hi guys,

Here’s another strange problem i’m encountering.

My stages are made at resolution of 720 X 1280

Am trying to full screen it but that causes stretching.

Changing the window size under action to 1920 X 1280 (with extended window) causes the stage be pushed to the left side. Any way to centre the stage?

Edit:

Please ignore this. It was caused by my own stupidity XD
Any help will be much appreciated. Thanks :slight_smile:


I have the same problem

Maybe I misunderstand the problem but let me show you this.
screenshot.PNG

What you see on the image is a game made with a certain screen size in mind then I decided to changed to a higher size which gives me the extra space you can see around the background. GDevelop can handle this two ways. When you change the size you can either choose to stretch the game to fit the size which is going to obviously stretch the game or you can choose to set the camera size to be the same as the window size in which case you get this extra space on the right which might look like “shifted” your game to the left but really the camera size is bigger so you have more of the scene visible. Because the origin point of the camera is at the top left corner, when you increase the size, it is increasing from the top left corner so this is why it might look like the game is “shifted” to the left but really, it is not. Only the camera size is bigger.

The best way to handle this is to design your game scene with the possible highest screens size you plan to support so it need to scale down to smaller size instead of stretch to higher, this way your game can look good on most screen sizes, but yes in case someone run it at higher resolution than you ever anticipated it will stretch. There is nothing you can do about that. To draw a 100x100 sprite at 120x150 it need to stretch or more of the space around the sprite need to be visible.

What you can also try to play with is to change the camera zoom and camera offset on different resolutions to minimize how much of the scene is visible to the player if you don’t want to stretch your game, but then you need to count with that when you designing your level and move the camera.

The problem that i have and i think AnimatedG has is that when we try the game at a different resolution the images stretch.
For example, in the GDevelop editor I have this square with the scene at 960x640px


and when the scene is tested the square looks like this

That is because the browser window is probably greater than 960x640 so the game need to stretch. If you don’t want it to stretch, you can select the option to keep aspect ratio when you select full screen. Then you going to get a black margin around the game screen but it won’t stretch.

What resolution would be the best for mobile devices?

I found up that the best resolution for mobile devices games is 1025x576px. It works for landscape mode in almost any device. I hope it helps someone

Depends on what device you actually targeting. Each device has different resolution.
First you need to decide what devices you want to target, then do you research what is the resolution of each device is and select a resolution for your game and sprites that works best for each target device. You need to optimize your game for selected resolutions there is no other way around.

If 1025x576px is look ok on all devices you want to target in both orientation then this is it but eventually you do need to test your game on the actual resolution of the target device.

There is a very useful developer tool built in to Chrome that allow you to simulate mobile devices. It might help.

That should be 1024. Screen resolutions are always multiples of 2 and these days the x and y dimensions are usually in a 16:9 ratio (which is the same ratio as 1024:576). A common laptop resolution is 1366x768, which is also 16:9. Setting your game’s window to a 16:9 ratio should mean it will always display properly on a device with a 16:9 screen without having to stretch. Your 960x640 isn’t in this ratio. It would need to be 1138x640, or 960x540.

On the other hand, monitors for desktop computers may be 16:10 e.g. 1440x900.

If your game is HTML5-based then perhaps just switch off the GDevelop action to set it to fullscreen and let the user’s browser do the scaling, allowing them to go fullscreen or not according to their preference.

Hi guys,

Thanks for the advices. I’m unfortunately still not able to fix the problem. Have attached some images so it should be easier to understand my issue.

https://postimg.org/image/qg3ns2u5n/

So the game size is 720X1280

Trying to do 1920 X 1280 and shifting the gaming area to the centre as well as fixing the camera to this 720X1280 size and position.

Also, i’m very confused as to using the change window margin.

https://postimg.org/image/7nrsoham3/

i gather that the top will be - top left hand corner of the screen
right - top right hand corner
Then what do i key in for bottom and left?

Also, do these numbers move the screen to the coordinates or move them by this many pixels?

Thanks

Easy, first set fullscreen, this will make the graphics to stretch. Then you have two options:

  1. Change the camera size to the screen size, this way the graphics won’t be stretched, but the camera will be able to see enemies before enter the game zone (second image). Then just add two black sprites with a higher z-order to cover outside zones.
  2. Modify the camera render zone, the game is stretched because the camera renders a scene zone into a different ratio area (window ratio ≠ camera ratio), if the camera renders into a surface with the same aspect ratio then it will look ok. Using your image values (camera size = 720x1280, fullscreen size = 1920x1280), try to change the camera render zone to (0.3125 ; 0) (0.6875 ; 1), those are the top-left and bottom-right points respectively.

With the second option, the black borders color is determined with the scene background color :wink:

1 Like

Lizard-13:

OMG!!! THAT WORKED!!! You’re incredible!!!

Didn’t even have to add the 2 black strips at the side.

Thank you so much :slight_smile: