View/Component Customization

1 Get Host View

Get the host game window (Electron BrowserWindow)

Interface Prototype

gameHandle.getGameView()

Return value

ReturnsBrowserWindow - Electron browser window object

Code Example

const gameWindow = gameHandle.getGameView();

if (gameWindow) {
  // Access Electron BrowserWindow methods
  gameWindow.setTitle('My Game');
  gameWindow.setSize(1280, 720);
  gameWindow.center();
}

2 Set click listener for menu button

Provides a callback for the host menu button click

Interface Prototype

gameHandle.setOnTJMenuListener(callback)

Parameter Description

parameter	Data Type	Required	Attribute Description
callback	Function	Yes	Callback for clicking the menu button

Code Example

gameHandle.setOnTJMenuListener(() => {
  console.log('Menu button clicked');
  // Implement your custom menu logic
});

3 Set click listener for the close button

Provides a callback for the host close button click

Interface Prototype

gameHandle.setOnTJCloseListener(callback)

Parameter Description

parameter	Data Type	Required	Attribute Description
callback	Function	Yes	Callback for clicking the close button

Code Example

gameHandle.setOnTJCloseListener(() => {
  console.log('Close button clicked');
  
  // Show confirmation dialog
  const { dialog } = require('electron');
  const gameWindow = gameHandle.getGameView();
  
  dialog.showMessageBox(gameWindow, {
    type: 'question',
    buttons: ['Yes', 'No'],
    title: 'Confirm',
    message: 'Are you sure you want to close the game?'
  }).then(result => {
    if (result.response === 0) {
      gameHandle.destroy();
    }
  });
});

4 Window Management Instructions

The window of the PC version is automatically managed by the SDK:

• Create: Automatically create a window when calling gameHandle.start()

• Show: Automatically show the window after the first frame of the game is rendered

• Destroy: Automatically close and clean up the window when gameHandle.destroy() is called

5 Common Window Operations

Various window operations can be implemented through the BrowserWindow API:

const gameWindow = gameHandle.getGameView();

// Window size and position
gameWindow.setSize(1280, 720);
gameWindow.setMinimumSize(800, 600);
gameWindow.center();

// Window state
gameWindow.maximize();
gameWindow.minimize();
gameWindow.setFullScreen(true);

// Window properties
gameWindow.setTitle('My Game');
gameWindow.setResizable(true);
gameWindow.setAlwaysOnTop(false);

6 Window Event Listening

const gameWindow = gameHandle.getGameView();

// Focus events
gameWindow.on('focus', () => {
  gameHandle.play(); // Resume game
});

gameWindow.on('blur', () => {
  gameHandle.pause(); // Pause game
});

// Window state events
gameWindow.on('resize', () => {
  const [width, height] = gameWindow.getSize();
  console.log(`Window resized: ${width}x${height}`);
});

gameWindow.on('close', () => {
  console.log('Window closing');
});