Skip to content

Full screen

Introduction

Enable or disable full screen mode, built-in method of phaser.

  • Author: Richard Davey

Usage

Enable/disable

Under any input event (touch or keyboard)

gameObject.setInteractive().on('pointerdown', function() {
    if (scene.scale.isFullscreen) {
        scene.scale.stopFullscreen();
        // Will leave full screen
    } else {
        scene.scale.startFullscreen();
        // Will enter full screen
    }
});

Fire one of these events

  • 'fullscreenunsupported' : Tried to enter fullscreen mode, but it is unsupported by the browser.
  • 'enterfullscreen' : Entered fullscreen mode successfully.
  • 'fullscreenfailed' : Tried to enter fullscreen mode but failed.

Toggle

Under any input event (touch or keyboard)

gameObject.setInteractive().on('pointerdown', function() {
    if (scene.scale.isFullscreen) {
        // Will leave full screen
    } else {
        // Will enter full screen
    }
    scene.scale.toggleFullscreen();
});
  • Fire 'fullscreenunsupported' or 'enterfullscreen' event.

State

  • Is in full screen mode
    var isFullScreen = scene.scale.isFullscreen;
    
  • Support full screen
    var supported = Phaser.Device.Fullscreen.available;
    

Events

  • Enter full screen
    scene.scale.on('enterfullscreen', function() {}, scope);
    
  • Enter full screen failed
    scene.scale.on('fullscreenfailed', function(error) {}, scope);
    
  • Leave full screen
    scene.scale.on('leavefullscreen', function() {}, scope);
    
  • Full screen unsupport
    scene.scale.on('fullscreenunsupported', function() {}, scope);
    
  • Leave full screen
    scene.scale.on('leavefullscreen', function() {}, scope);
    

With DOM game object

Set gameConfig.fullscreenTarget to parent id.

var config = {
    parent: parentDivID,
    fullscreenTarget: parentDivID
};

var game = new Phaser.Game(config);