Problem with fullscreen (2024)

LinkRPG

Regular

Joined: May 22, 2021

Messages: 37

Reaction score: 7

First Language: Spanish

Primarily Uses: RM2k3

Jan 3, 2022

Hi guys, I'm noob with RPG MAKER MV and I don't understand why I get those black edges on the sides. Does anyone know how to remove them?

This image is my full screen

LinkRPG

Regular

Joined: May 22, 2021

Messages: 37

Reaction score: 7

First Language: Spanish

Primarily Uses: RM2k3

Jan 3, 2022

This not work for me

Nolonar

Regular

Joined: Feb 18, 2018

Messages: 504

Reaction score: 733

First Language: French, German

Primarily Uses: RMMZ

Jan 3, 2022

The aspect ratio of your game doesn't match the aspect ratio of your screen. That's why you get black borders.

You have multiple ways to fix this:

Change the game's resolution to match the screen's aspect ratio. In your case, the aspect ratio is 16:9.
You'll need to optimize your UI to the new aspect ration, and this would only work for screens that have the same aspect ratio. Some people have ultrawide screens with aspect ratio of 32:9, some have cinematic wide screens with aspect ratio 21:9, some may have old 16:10 screens, others even older 4:3 or 5:4 screens, and there are also exotic aspect ratios like 3:2, 2:1, and so on.
Make your game resolution-independent.
Similar to the above solution, but instead of choosing a fixed resolution, you let your game choose its resolution based on the screen's resolution.
Since you don't know what resolution your game will use, you'll need to make your UI resolution-independent too. You'll need to rewrite large parts of the RPG Maker MV code, and it's extremely hard to get right.

Force the game to stretch.

This can easily be done with CSS. Simply add the following line to the index.html file somewhere inside the <head> tag:

HTML:

<style>canvas { width: 100% !important; height: 100% !important; }</style>

The <head> tag of your index.html file would look similar to this:

HTML:

 <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="viewport" content="user-scalable=no"> <link rel="icon" href="icon/icon.png" type="image/png"> <link rel="apple-touch-icon" href="icon/icon.png"> <link rel="stylesheet" type="text/css" href="fonts/gamefont.css"> <style>canvas { width: 100% !important; height: 100% !important; }</style> <title>Game Title</title> </head>

Note that most people dislike stretched graphics, as it does not look good.

For those that would like to use this solution but use RPG Maker MZ instead, you don't need to mess with the index.html file, and can instead use the game.css file inside the css folder. Simply add following lines anywhere in the file:

CSS:

canvas { width: 100% !important; height: 100% !important;}

Last edited: Jan 3, 2022

Shaz

Keeper of the Nuts

Joined: Mar 2, 2012

Messages: 46,153

Reaction score: 16,998

First Language: English

Primarily Uses: RMMV

Jan 3, 2022

@LinkRPG, please avoid double posting, as it is against the forum rules. You can use the "Edit" function on your posts to add additional information you've forgotten or respond to multiple people. You can review our forum rules here. Thank you.

Note that just because you have black borders doesn't mean other people playing your game will have black borders. It will be different for everyone. So if you add a solution to the game itself to make it work for you, you might make it weird for your players.

LinkRPG

Regular

Joined: May 22, 2021

Messages: 37

Reaction score: 7

First Language: Spanish

Primarily Uses: RM2k3

Jan 4, 2022

Nolonar said:
The aspect ratio of your game doesn't match the aspect ratio of your screen. That's why you get black borders.
You have multiple ways to fix this:
Change the game's resolution to match the screen's aspect ratio. In your case, the aspect ratio is 16:9.
You'll need to optimize your UI to the new aspect ration, and this would only work for screens that have the same aspect ratio. Some people have ultrawide screens with aspect ratio of 32:9, some have cinematic wide screens with aspect ratio 21:9, some may have old 16:10 screens, others even older 4:3 or 5:4 screens, and there are also exotic aspect ratios like 3:2, 2:1, and so on.
Make your game resolution-independent.
Similar to the above solution, but instead of choosing a fixed resolution, you let your game choose its resolution based on the screen's resolution.
Since you don't know what resolution your game will use, you'll need to make your UI resolution-independent too. You'll need to rewrite large parts of the RPG Maker MV code, and it's extremely hard to get right.
Force the game to stretch.
This can easily be done with CSS. Simply add the following line to the index.html file somewhere inside the <head> tag:
HTML:
<style>canvas { width: 100% !important; height: 100% !important; }</style>
The <head> tag of your index.html file would look similar to this:
HTML:
 <head> <meta charset="UTF-8"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <meta name="viewport" content="user-scalable=no"> <link rel="icon" href="icon/icon.png" type="image/png"> <link rel="apple-touch-icon" href="icon/icon.png"> <link rel="stylesheet" type="text/css" href="fonts/gamefont.css"> <style>canvas { width: 100% !important; height: 100% !important; }</style> <title>Game Title</title> </head>
Note that most people dislike stretched graphics, as it does not look good.
For those that would like to use this solution but use RPG Maker MZ instead, you don't need to mess with the index.html file, and can instead use the game.css file inside the css folder. Simply add following lines anywhere in the file:
CSS:
canvas { width: 100% !important; height: 100% !important;}
Click to expand...

Thanks a lot!!!! It works!! ALELUYAH

Shaz said:
[dpost]@LinkRPG[/dp ost]
Note that just because you have black borders doesn't mean other people playing your game will have black borders. It will be different for everyone. So if you add a solution to the game itself to make it work for you, you might make it weird for your players.
[/dpost]
Click to expand...

[dpost]
Oh no! Sorry for breaking the rules!!! I'm sorry, i'm really, really sorry. It will not happen again! And a big thank you to both of you for your help.[/dpost]

Kollote

Warper

Joined: Dec 21, 2022

Messages: 4

Reaction score: 0

First Language: Español

Primarily Uses: RMMZ

Mar 31, 2023

Thanks, this worked for me

Nolonar said:
CSS:
Code:
canvas { width: 100% !important; height: 100% !important;}
Click to expand...

but the mobile touch remains with the previous resolution,
there will be something to correct it and also want to be full screen?

Seriously, your method is the only one that has worked for me, thank you very much

Shaz

Keeper of the Nuts

Joined: Mar 2, 2012

Messages: 46,153

Reaction score: 16,998

First Language: English

Primarily Uses: RMMV

Mar 31, 2023

@Kollote, please refrain from necro-posting in a thread. Necro-posting is posting in a thread that has not had posting activity in over 30 days. You can review our forum rules here. Thank you.