CODEWITHSUNDEEP
javascriptnode.jsnpmelectron
PtspluS
PtspluS

Reputation: 21

Black border arround content in Electron

I use electron to convert a video game made with Phaser 2 to a .exe. But arround my content, I have some border or margin.

I tried to use full screen to change that, I also tried with useContentSize but the problem was not solve.

So this is my JS file : 

const { app, BrowserWindow } = require('electron')

let win;

function createWindow () {
  // Cree la fenetre du navigateur.
 win = new BrowserWindow({
    //width: 886,
    //height: 473,
    useContentSize : true,
    autoHideMenuBar : true,
    icon: "favicon.ico",
    //met la fenetre sans bordure 
    //frame : false,
    //fullscreen : true,
  })

  //load the index.html.
  win.loadFile('src/junkbuster.html');
  win.setMenuBarVisibility(false);
  win.setMenu(null);
  //win.setContentSize(1700,1200);
}

app.on('ready', function(){
  createWindow();

  console.log(win.getContentBounds());

  //800,600 => 786, 563
  console.log(win.getSize()+"=>"+win.getContentSize());

});

And this is my HTML file

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <script src="./phaser.js"></script>
    <script src="./index.js"></script>
    <style type="text/css">
    body {
        background-color: black;
        width:100vw;
        height:100vh;
        margin:0px;
    }
    body * {
        margin-left: auto;
        margin-right: auto;
    }
    </style>
</head>
<body>
</body>
</html>

Upvotes: 2

Views: 1670

Answers (2)

Reza Hajianpour
Reza Hajianpour

Reputation: 851

According to Issue #9419, the workaround that worked for me was to avoid mainWindow.setResizable(false) and use this instead:

mainWindow.on('will-resize', (e) => {
//prevent resizing even if resizable property is true.
    e.preventDefault();
});

Upvotes: 5

PtspluS
PtspluS

Reputation: 21

This problem come from the scaleMangaer of Phaser 2. So to fix this you need to go to Boot init file and to change the your scaleMode.

Go to https://phaser.io/docs/2.6.2/Phaser.ScaleManager.html for more informations

Upvotes: 0

Related Questions