70657


Phaser 3でゲームを作っています。  
ページの中心にcanvasを作成し、その中にゲーム画面を表示しています。

Electronのウィンドウにcanvasを表示します。  
その際、canvasが拡大も縮小もされないように表示したいです。

canvasのサイズは `width: 800px, height: 600px` です。  
  
そこで、以下のようなコードを書きました。

[code]

    function createWindow() {
      // Create the browser window.
      win = new BrowserWindow({
        width: 800,
        height: 600,
        resizable: false,
        webPreferences: {
          // Use pluginOptions.nodeIntegration, leave this alone
          // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
          nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION as unknown) as boolean,
          preload: path.join(__dirname, 'preload.js'),
        },
      });
    
[/code]

以下のウィンドウが表示されました。オレンジ色の部分がcanvasです。

[![画面](https://i.stack.imgur.com/oYMHd.png)](https://i.stack.imgur.com/oYMHd.png)

Developer Toolsで確認したところ、`width: 800px, height: 600px` になっており正しいです。

しかし、`<body>` のサイズが `width: 777px, height: 604px` になっていました。

この値は、Electronのウィンドウ作成時に指定した `width: 800px, height: 600px` と異なります。

そのせいで、スクロールバーが表示されてしまいました。  
なぜこのような動作になるか、分かる人はいますか？

`<body>` のサイズを `width: 800px, height: 600px` にするには、どのように修正すれば良いですか？

Electronのバージョンは9.2.1です。


CC BY-SA 4.0
2020-09-17T10:01:17.127
70492
2020-09-24T04:19:24.537
2020-09-17T11:43:07.030
3060
41938
question
typescript electron game-development
canvasぴったりのサイズで、Electronのウィンドウを作る方法を教えてください


英語で質問したら解決しました。  
`useContentSize: true,` ですね。

<https://stackoverflow.com/questions/63937529/how-do-i-create-an-electron-
window-the-same-size-as-a-canvas>


CC BY-SA 4.0
2020-09-24T04:19:24.537
70657
2020-09-24T04:19:24.537
41938
70492
answer