Screen Event System in Cocos Creator

Introduction

As discussed earlier, EventTarget provides functionalities for event listening and emitting. Cocos Creator v3.8.0 introduces the screen object, which implements the EventTarget interface. This object allows registering global system screen events.

Supported Events

Here's a table outlining the currently supported global screen events:

Event Usage Example

import { _decorator, Component, screen, macro } from 'cc';
const { ccclass } = _decorator;

@ccclass("Example")
export class Example extends Component {
  onLoad() {
    // Register event listeners with the screen object
    screen.on('window-resize', this.onWindowResize, this);
    screen.on('orientation-change', this.onOrientationChange, this);
    screen.on('fullscreen-change', this.onFullScreenChange, this);
  }

  onDestroy() {
    // Unregister event listeners when the component is destroyed
    screen.off('window-resize', this.onWindowResize, this);
    screen.off('orientation-change', this.onOrientationChange, this);
    screen.off('fullscreen-change', this.onFullScreenChange, this);
  }

  onWindowResize(width: number, height: number) {
    console.log("Window resized:", width, height);
  }

  onOrientationChange(orientation: number) {
    if (orientation === macro.ORIENTATION_LANDSCAPE_LEFT || orientation === macro.ORIENTATION_LANDSCAPE_RIGHT) {
      console.log("Orientation changed to landscape:", orientation);
    } else {
      console.log("Orientation changed to portrait:", orientation);
    }
  }

  onFullScreenChange(width: number, height: number) {
    console.log("Fullscreen change:", width, height);
  }
}