Options
All
  • Public
  • Public/Protected
  • All
Menu

Class Screen

The Screen handles all aspects of interacting with the screen for Excalibur.

Handling Screens

Excalibur has a screen abstraction for dealing with Screen.viewport size, and Screen.resolution. It also handles HiDPI scaling, the browser fullscreen API, and translation of screen coordinates into game world coordinates.

The Screen.viewport represents the size of the window into the game work in CSS pixels on the screen.

The Screen.resolution represents the number of logical pixels stretched across that viewport.

The screen abstraction can be accessed most easily off of a constructed engine.

const game = new ex.Engine({
  // sets the viewport as it did before
  // width and height are provided for backwards compatibilty
  width: 800,
  height: 600,
  // or optionally use the viewport option
  viewport: { width: 800, height: 600 },

  // sets the resolution
  resolution: ex.Resolution.GameBoy
});

const screen = game.screen

Viewport and Resolution

The best way to change the viewport and resolution is in the Engine constructor arguments. If the viewport or resolution is changed after constructor time, Screen.applyResolutionAndViewport must be called to have the changes take effect.


// get or set the viewport
const viewport = game.screen.viewport;
game.screen.viewport = { width: 400, height: 300 };

// get or set the resolution
const resolution = game.screen.resolution;
game.screen.resolution = { width: 100, height: 100 };

// Apply changes to viewport and resolution to the canvas and graphics context
game.screen.applyResolutionAndViewport();

Sometimes you might want to switch between 2 different resolutions and viewports, perhaps for different scenes, or for some in game animation. This can be done with Screen.pushResolutionAndViewport and Screen.popResolutionAndViewport.

// Save the current resolution and viewport
game.screen.pushResolutionAndViewport();
// Change and apply
game.screen.resolution = ex.Resolution.NES;
game.screen.applyResolutionAndViewport();

// Show some animation or do something at NES resolution

// Restore the old resolution and viewport, then apply
game.screen.popResolutionAndViewport();
game.screen.applyResolutionAndViewport();

Fullscreen API

The screen abstraction now supports the browser fullscreen api. This will cause the game to be displayed fullscreen until the user exits (usually with the escape key or by gesturing to the exit button at the top of the browser window).


await game.screen.goFullScreen();

await game.screen.exitFullScreen();

Hierarchy

  • Screen

Index

Constructors

constructor

Accessors

antialiasing

  • get antialiasing(): boolean
  • set antialiasing(isSmooth: boolean): void

canvas

  • get canvas(): HTMLCanvasElement

canvasHeight

  • get canvasHeight(): number
  • The height of the game canvas in pixels, (physical height component of the resolution of the canvas element)

    Returns number

canvasWidth

  • get canvasWidth(): number
  • The width of the game canvas in pixels (physical width component of the resolution of the canvas element)

    Returns number

displayMode

drawHeight

  • get drawHeight(): number
  • Returns the height of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

    Returns number

drawWidth

  • get drawWidth(): number
  • Returns the width of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

    Returns number

halfCanvasHeight

  • get halfCanvasHeight(): number
  • Returns half height of the game canvas in pixels (half physical height component)

    Returns number

halfCanvasWidth

  • get halfCanvasWidth(): number
  • Returns half width of the game canvas in pixels (half physical width component)

    Returns number

halfDrawHeight

  • get halfDrawHeight(): number
  • Returns half the height of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

    Returns number

halfDrawWidth

  • get halfDrawWidth(): number
  • Returns half the width of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

    Returns number

isFullScreen

  • get isFullScreen(): boolean
  • Returns true if excalibur is fullscreened using the browser fullscreen api

    Returns boolean

isHiDpi

  • get isHiDpi(): boolean

pixelRatio

  • get pixelRatio(): number

resolution

scaledHeight

  • get scaledHeight(): number

scaledWidth

  • get scaledWidth(): number

viewport

Methods

applyResolutionAndViewport

  • applyResolutionAndViewport(): void

dispose

  • dispose(): void

exitFullScreen

  • exitFullScreen(): Promise<void>
  • Requests to exit fullscreen using the browser fullscreen api

    Returns Promise<void>

getWorldBounds

goFullScreen

  • goFullScreen(): Promise<void>

popResolutionAndViewport

  • popResolutionAndViewport(): void

pushResolutionAndViewport

  • pushResolutionAndViewport(): void

screenToWorldCoordinates

setCurrentCamera

  • setCurrentCamera(camera: Camera): void

worldToScreenCoordinates