Electron fullscreen 전체 화면으로 만들기

 

원인 

게임을 만드는 데 보통 다른 온라인, 콘솔 게임처럼 화면 전체를 이용해서 몰입감 있는 게임을 만들고 싶었습니다. 그래서 윈도우 ,mac에서의 상하단의 task bar 를 지우고 싶었습니다.

 

taskBar

taskBar

 

 

해결

main.js

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

function createWindow() {
  const win = new BrowserWindow({
    show: false,
    fullscreen: true,
    frame: false,
    autoHideMenuBar: true,
    alwaysOnTop: true,
    webPreferences: {
      nodeIntegration: true,
      preload: path.join(__dirname, 'preload.js'),
    },
  });

  win.maximize();
  win.loadFile('index.html');
  win.show();
}

app.whenReady().then(() => {
  createWindow();

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow();
    }
  });
});

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

 

 

BrowserWindow | Electron

 

여기서 중요한 점은 Electron의 옵션 중 하나인 autoHideMenuBar 입니다. 구글링을 하면 maximize()와 show()를 이용한 방법은 많이 알려주는데 autoHideMenuBar 옵션 또한 해야하는 것을 잘 알려주지 않아서 애를 먹었습니다.

 

fullscreen

창이 전체 화면으로 표시되는지 여부를 나타냅니다. 명시적으로 false로 설정하면 macOS에서 전체 화면 버튼이 숨겨지거나 비활성화됩니다. 기본값은 false입니다.

 

autoHideMenuBar (윈도우 메뉴바를 없애줌)

Alt 키를 누르지 않는 한 메뉴 모음을 자동으로 숨깁니다. 기본값은 false입니다.

 

frame

false를 지정하여 프레임 없는 창을 만듭니다. 기본값은 true입니다.

 

show

창을 만들 때 표시할지 여부를 나타냅니다. 기본값은 true입니다.

 

alwaysOnTop

창이 항상 다른 창 위에 있어야 하는지 여부를 나타냅니다. 기본값은 false입니다.

 

 

maximize()

사용자가 창을 수동으로 최대화할 수 있는지 여부를 결정하는 부울 속성입니다.

리눅스에서 세터는 no-op이지만 게터는 true를 반환한다.

 

 

 

전체 화면이 된 모습

 

 

하루를 고민했는데 문제가 풀리게 되어 행복합니다 ㅎㅎ