Browser Full Screen Fix (MV)?

[CleanWater]

So, when I play test the game, the full screen resizes and occupies almost the whole screen (besides the letter-boxed black bars at each side), but when I try to enable full screen in my browser hosted game, it's what happens.



As many of you already knows, I'm hosting the game at Itch.io.

Learn RPG Maker MV by CleanWater

Do you want to become an indie RPG developer?

cleanwaterdev.itch.io

Is there any way to fix that? Is this something related to the engine or it's a problem from their side?

Thanks in advance!

 

[JohnDoeNews]

Press F3 when full screen

 

[Nolonar]

Edit:

Press F3

This is actually the superior answer.

If you don't want the players to be forced to press F3 when they launch the game, you can create a simple plugin that calls the following code:

Graphics._switchStretchMode();

which is what pressing F3 does.

I'll leave my original (inferior) answer in the spoiler below. Feel free to ignore it.

Spoiler

This is a CSS-related issue. On the web, the game canvas is set to have the same size as your game's resolution. Instead, you want the canvas to fill the entire screen. This can easily be fixed by adding the following code to your game's main CSS file:

#gameCanvas, #GameCanvas, #gameVideo, #GameVideo {
    width: 100% !important;
    height: 100% !important;
}

The #gameCanvas and #gameVideo are for MZ, and #GameCanvas and #GameVideo are for MV. The !important part is required because the canvas has dimensions specified in the inline style element (inline style has the highest priority in CSS, and !important has an even higher priority).

In MZ, you can add the above code into the /css/game.css file.
For MV, it's a bit more complex, since MV doesn't have a main CSS file. You can either hijack the /fonts/gamefont.css file (easiest), or if you want a cleaner solution, you can create your own /css/game.css file, but then you'll also need to add the following HTML tag to the /index.html file:

<link rel="stylesheet" type="text/css" href="css/game.css">

Alternatively, you can inject the CSS using a plugin. You'll need a plugin anyway, if you want the best-possible solution. The reason is because your game will be stretched (no letterboxing) once you change the canvas' (and video player's) dimensions. To fix this, you'll need a plugin.

Using a plugin, the easiest way to solve this problem would be to do the following:

1. Retrieve window.innerWidth and window.innerHeight
2. Retrieve the game canvas' dimensions and compute its aspect ratio.
3. Using the aspect ratio, determine the factor by which to multiply the canvas' width and height, such that both width and height are equal to or smaller than the window's innerWidth or innerHeight.
4. Modify the canvas' (and video's) style accordingly (the video's dimensions are equal to the canvas', so there's no need to perform the calculations for both).
5. (optional) Add an event listener to the window's resize event, so that when the player resizes their browser window, the canvas (and video) adapt to it:

   window.addEventListener('resize', function(event) { /* do stuff here */ });

 

[CleanWater]

Many thanks @JohnDoeNews and @Nolonar !

It was easier than I though. I think I'll leave it as that and add some of the game engine controls to a lesson (I was going to do it anyway for the Debug commands).