Question

我使用电子将使用Phaser 2制作的视频游戏转换为.exe。但是围绕我的内容，我有一些边界或空白。

我尝试使用全屏更改此设置，也尝试使用useContentSize，但问题仍未解决。

这是我的JS文件：

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());

});

这是我的HTML文件

<!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>

Answer 1

根据Issue #9419，对我有用的解决方法是避免使用mainWindow.setResizable(false)，而改用它：

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

Answer 2

此问题来自Phaser 2的scaleMangaer。因此，要解决此问题，您需要转到Boot init文件并更改您的scaleMode。

转到https://phaser.io/docs/2.6.2/Phaser.ScaleManager.html了解更多信息

电子中的黑色边框内容

2 个答案: