Screen Event System in Cocos Creator


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 Name Description Supported Platforms Supported Version
window-resize Listens for window size changes. Web, Native, MiniGame 3.8.0
orientation-change Listens for screen orientation changes. Web, Native, MiniGame 3.8.3
fullscreen-change Listens for full screen changes. Web 3.8.0

Event Usage Example

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

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'window-resize', this.onWindowResize, this);'orientation-change', this.onOrientationChange, this);'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);

results matching ""

    No results matching ""