Gdevelop preview not displaying as intended?

So I have this screen for a phone game

When I click Preview it shows this

As you can see the preview window is bigger than the rectangle. What should I do?

Yet on the phone, I get this display

Last time I checked it was a bit of a hustle to get a proper full screen on phones, but I never had the window issue on Gdevelop preview.

My settings are the default of Gdevelop

Your game resolution appears to be taller than what your monitor can display. Electron doesn’t allow windows taller/wider than the desktop resolution.

It’s adjusting to fit the available space.

1 Like

Thanks for the reply.
Since this was the default setting I thought I shouldn’t mess too much with it. Kinda weird if you ask me. What are the dimensions that you suggest for mobile games?

The dimension are fine, you’re just going to have oddities when previewing on a display that isn’t 1280 pixels tall.

You could always do one of the following:
A. Disable “update resolution during the game to fit the screen or window size”, then fullscreen the game (F11) when previewing on PC. You’ll get black bars on left/right, but it should be accurate to how it’ll appear on mobile.
B. Change the project to a lower resolution (no real need to do this, but it’ll fix it)
C. Set up events to detect if it’s a mobile device or PC and reduce the resolution if not mobile (still shouldn’t need to do this).

If the above wasn’t clear, I’d probably recommend A.

Tried solution A, but unfortunately still the same thing.

I don’t really mind it at the editor. I mostly hate what happens on the phone.

The below screenshot is from the phone. 1/5 of the screen is cut

Not sure what you’re showing in your event screenshot, but that isn’t what I said to do with option A.

Option A was to disable that toggle in your project settings. By using events, your game will have already adapted to the screen size upon launch, and THEN disable it. Which won’t do what you’re looking for.

1 Like

Oops you are right. Just did this. Thank you
Yeah now it’s much better, there are black lines left and right but I don’t mind them for Gdevelop preview.

On phone, it shows like this

Maybe if I change Height instead of Width the black lines will disappear?

Black bars on top/bottom means that the view is too wide for your phone.

Note: there is no “standard” resolution for phones, every manufacturer (including apple) have different resolutions and aspect ratios within their phone lines.

Unfortunately there isn’t a great solution, however you could just leave that toggle off while you’re previewing on PC, then turn it back on when you’re ready to export to mobile?

1 Like

Yeah, this is what I’ll do. I will also leave the toggle off while exporting since when I preview on the phone with the toggle on the screen is cut.

image

Maybe one day I will find a solution for the black lines on Android.