0

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

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

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

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'),
    },
  });

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

画面

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です。

0

1 件の回答 1

1

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。