[solved] Center my scene into window

How do I...?
#1

Hello!

I’m becoming crazy.
my game has a resolution of 800 (w) x 1200 (h), made for mobile first with an UI layer on top on all my scenes. Each scene has a camera room (like in “not-a-vania” game) to limit my camera which is center on my player.

I wanna just have my gameboy-like in the center of my screen with black margin, like in my preview:
speleoprev

But…but after uploaded my HTML5, here you are:

speleoweb

I’ve tried many many things with the resolution, game window, margin, fitting, no change, etc, read a lot of topics and anything has worked…
Please if somebody has a little idea, tell me!
Thanks a lot! :slight_smile:

#2

It appears that you have the two buttons anchored to the bottom right, so that no matter how wide the screen is that’s where they’ll be. Maybe you have them anchored to the window rather than the screen?

#3

Weeeird. Nothing about that should happen unless you’re modifying the HTML after export.

What does your game properties look like as far rendering and resolution?

This is what I would expect if you want it to keep its size (with a border):

image
image975×383 27.9 KB

(ignore the resolution and scale mode, the other settings are what matters)

#4

Thanks for your replys !
weeeird as you said @Silver-Streak :slight_smile:
@beanmatt, yes my buttons have an anchor but i don’t think that the matter (it was before when i wish make a fullscreen game)

no modification on my file after export…maybe later or maybe the solution
here my snapshot :

Capture d’écran 2022-03-22 à 18.58.06
Capture d’écran 2022-03-22 à 18.58.06952×422 54.2 KB

To have an idea of a scene, another snapshot where the blue rectangle is my camera room. (my UI is an external layout)

Capture d’écran 2022-03-22 à 18.59.44
Capture d’écran 2022-03-22 à 18.59.44742×290 88.2 KB

Thanks again for your help :slight_smile:

#5

Try to change the resize mode to any other mode, uncheck the “Update Resolution” box, then change back. See if that works.

If that doesn’t work, change “No changes to game size” to “Change Height”. In both cases make sure the checkbox for “Update resolution” is unchecked.

#6

already done…i’ve tested so many things (checked, no checked, height, width…)
:slight_smile: i keep smile but why i’m crazy

@Silver-Streak, with your advice ( awful :slight_smile: ) :
Sans titre

#7

Yeah, no clue what’s going on there.

Maybe it’s something with Safari? It has been known to not adhere to webstandards in some cases.

Can you try in Google Chrome or Chromium? (or even Vivaldi)

Here’s the base platformer example exported with the settings I mentioned above. As you can see here, it adheres to the original aspect ratio as expected when I stretch to odd shaped windows.

https://game-previews.gdevelop-app.com/1647976147233-205428/index.html

image
image892×953 98.3 KB

#8

Have you tried it on an actual mobile device? If you change the user agent on the desktop browser you’re using to a mobile OS, does that make a difference? (not sure if this is helpful, just guessing lol)

#9

Hi!

@beanmatt yes, i’m developper of website, I have this habit of checking everything, on all machines and under several versions.
So…I start all over again after tested the platformer basic example with no problems (thanks @Silver-Streak, I hadn’t even thought of that ).
I tried another project with the same settings and it worked…So weird.
I don’t know if I opened a secret door for the developpers of GD.

1 month of work to throw away :confused: And with my new game, some events doesn’t work like the previously, it turns me mad but it will be for another topic :slight_smile:

I will never have my answer as for this f*** window, maybe a bug. In the inspector, i see that the canvas’ width is set to fit with the window’s width.

In short, thanks again for your rapidity and help guys.