Screen

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

Index

Constructors

• constructor

Properties

• events
• graphicsContext

Accessors

• antialiasing
• aspectRatio
• canvas
• canvasHeight
• canvasWidth
• center
• contentArea
• displayMode
• drawHeight
• drawWidth
• halfCanvasHeight
• halfCanvasWidth
• halfDrawHeight
• halfDrawWidth
• height
• isFullScreen
• isFullscreen
• isHiDpi
• parent
• pixelRatio
• pixelRatioOverride
• resolution
• scaledHeight
• scaledWidth
• unsafeArea
• viewport
• width
• worldToPagePixelRatio

Methods

• applyResolutionAndViewport
• dispose
• enterFullscreen
• exitFullScreen
• exitFullscreen
• getScreenBounds
• getWorldBounds
• goFullScreen
• pageToScreenCoordinates
• pageToWorldCoordinates
• peekResolution
• peekViewport
• popResolutionAndViewport
• pushResolutionAndViewport
• screenToPageCoordinates
• screenToWorldCoordinates
• setCurrentCamera
• worldToPageCoordinates
• worldToScreenCoordinates

Constructors

constructor

• new Screen(options: ScreenOptions): Screen

• Parameters

  • options: ScreenOptions

  Returns Screen

Properties

publicevents

events: EventEmitter<ScreenEvents> = ...

Listen to screen events ScreenEvents

publicgraphicsContext

graphicsContext: ExcaliburGraphicsContext

Accessors

publicantialiasing

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

• Get or set screen antialiasing,

  If true smoothing is applied

  ---

  Returns boolean

• Get or set screen antialiasing

  ---

  Parameters

  • isSmooth: boolean

  Returns void

publicaspectRatio

• get aspectRatio(): number

• Returns number

publiccanvas

• get canvas(): HTMLCanvasElement

• Returns HTMLCanvasElement

publiccanvasHeight

• get canvasHeight(): number

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

  ---

  Returns number

publiccanvasWidth

• get canvasWidth(): number

• The width of the game canvas in pixels (physical width component of the resolution of the canvas element)

  ---

  Returns number

publiccenter

• get center(): Vector

• Returns screen center coordinates including zoom and device pixel ratio.

  ---

  Returns Vector

publiccontentArea

• get contentArea(): BoundingBox

• Returns the content area in screen space where it is safe to place content

  ---

  Returns BoundingBox

publicdisplayMode

• get displayMode(): DisplayMode

• Returns DisplayMode

publicdrawHeight

• get drawHeight(): number

• Returns the height of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

  ---

  Returns number

publicdrawWidth

• get drawWidth(): number

• Returns the width of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

  ---

  Returns number

publichalfCanvasHeight

• get halfCanvasHeight(): number

• Returns half height of the game canvas in pixels (half physical height component)

  ---

  Returns number

publichalfCanvasWidth

• get halfCanvasWidth(): number

• Returns half width of the game canvas in pixels (half physical width component)

  ---

  Returns number

publichalfDrawHeight

• get halfDrawHeight(): number

• Returns half the height of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

  ---

  Returns number

publichalfDrawWidth

• get halfDrawWidth(): number

• Returns half the width of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

  ---

  Returns number

publicheight

• get height(): number

• Returns number

publicisFullScreen

• get isFullScreen(): boolean

• Returns true if excalibur is fullscreen using the browser fullscreen api

  @deprecated

  use isFullscreen()

  ---

  Returns boolean

publicisFullscreen

• get isFullscreen(): boolean

• Returns true if excalibur is fullscreen using the browser fullscreen api

  ---

  Returns boolean

publicisHiDpi

• get isHiDpi(): boolean

• Returns boolean

publicparent

• get parent(): HTMLElement | Window

• Returns HTMLElement | Window

publicpixelRatio

• get pixelRatio(): number

• Returns the computed pixel ratio, first using any override, then the device pixel ratio

  ---

  Returns number

publicpixelRatioOverride

• get pixelRatioOverride(): number
• set pixelRatioOverride(value: number): void

• Get or set the pixel ratio override

  You will need to call applyResolutionAndViewport() affect change on the screen

  ---

  Returns number

• Parameters

  • value: number

  Returns void

publicresolution

• get resolution(): Resolution
• set resolution(resolution: Resolution): void

• Returns Resolution

• Parameters

  • resolution: Resolution

  Returns void

publicscaledHeight

• get scaledHeight(): number

• Returns number

publicscaledWidth

• get scaledWidth(): number

• Returns number

publicunsafeArea

• get unsafeArea(): BoundingBox

• Returns the unsafe area in screen space, this is the full screen and some space may not be onscreen.

  ---

  Returns BoundingBox

publicviewport

• get viewport(): ViewportDimension
• set viewport(viewport: ViewportDimension): void

• Returns screen dimensions in pixels or percentage

  ---

  Returns ViewportDimension

• Parameters

  • viewport: ViewportDimension

  Returns void

publicwidth

• get width(): number

• Returns the width of the engine's visible drawing surface in pixels including zoom and device pixel ratio.

  ---

  Returns number

publicworldToPagePixelRatio

• get worldToPagePixelRatio(): number

• This calculates the ratio between excalibur pixels and the HTML pixels.

  This is useful for scaling HTML UI so that it matches your game.

  ---

  Returns number

Methods

publicapplyResolutionAndViewport

• applyResolutionAndViewport(): void

• Returns void

publicdispose

• dispose(): void

• Returns void

publicenterFullscreen

• enterFullscreen(elementId?: string): Promise<void>

• Requests to enter fullscreen using the browser fullscreen api, requires user interaction to be successful. For example, wire this to a user click handler.

  Optionally specify a target element id to go fullscreen, by default the game canvas is used

  ---

  Parameters

  • optionalelementId: string

  Returns Promise<void>

publicexitFullScreen

• exitFullScreen(): Promise<void>

• Requests to exit fullscreen using the browser fullscreen api

  @deprecated

  use exitFullscreen()

  ---

  Returns Promise<void>

publicexitFullscreen

• exitFullscreen(): Promise<void>

• Returns Promise<void>

publicgetScreenBounds

• getScreenBounds(): BoundingBox

• Returns a BoundingBox of the top left corner of the screen and the bottom right corner of the screen.

  Screen bounds are in screen coordinates, useful for culling objects offscreen that are in screen space

  ---

  Returns BoundingBox

publicgetWorldBounds

• getWorldBounds(): BoundingBox

• Returns a BoundingBox of the top left corner of the screen and the bottom right corner of the screen.

  World bounds are in world coordinates, useful for culling objects offscreen that are in world space

  ---

  Returns BoundingBox

publicgoFullScreen

• goFullScreen(elementId?: string): Promise<void>

• Requests to go fullscreen using the browser fullscreen api, requires user interaction to be successful. For example, wire this to a user click handler.

  Optionally specify a target element id to go fullscreen, by default the game canvas is used

  @deprecated

  use enterFullscreen(...)

  ---

  Parameters

  • optionalelementId: string

  Returns Promise<void>

publicpageToScreenCoordinates

• pageToScreenCoordinates(point: Vector): Vector

• Takes a coordinate in normal html page space, for example from a pointer move event, and translates it to Excalibur screen space.

  Excalibur screen space starts at the top left (0, 0) corner of the viewport, and extends to the bottom right corner (resolutionX, resolutionY). When using *AndFill suffixed display modes screen space (0, 0) is the top left of the safe content area bounding box not the viewport.

  ---

  Parameters

  • point: Vector

  Returns Vector

publicpageToWorldCoordinates

• pageToWorldCoordinates(point: Vector): Vector

• Parameters

  • point: Vector

  Returns Vector

publicpeekResolution

• peekResolution(): Resolution

• Returns Resolution

publicpeekViewport

• peekViewport(): ViewportDimension

• Returns ViewportDimension

publicpopResolutionAndViewport

• popResolutionAndViewport(): void

• Returns void

publicpushResolutionAndViewport

• pushResolutionAndViewport(): void

• Returns void

publicscreenToPageCoordinates

• screenToPageCoordinates(point: Vector): Vector

• Takes a coordinate in Excalibur screen space, and translates it to normal html page space. For example, this is where html elements might live if you want to position them relative to Excalibur.

  Excalibur screen space starts at the top left (0, 0) corner of the viewport, and extends to the bottom right corner (resolutionX, resolutionY)

  ---

  Parameters

  • point: Vector

  Returns Vector

publicscreenToWorldCoordinates

• screenToWorldCoordinates(point: Vector): Vector

• Takes a coordinate in Excalibur screen space, and translates it to Excalibur world space.

  World space is where entities in Excalibur live by default CoordPlane.World and extends infinitely out relative from the Camera.

  ---

  Parameters

  • point: Vector

    Screen coordinate to convert

  Returns Vector

publicsetCurrentCamera

• setCurrentCamera(camera: Camera): void

• Parameters

  • camera: Camera

  Returns void

publicworldToPageCoordinates

• worldToPageCoordinates(point: Vector): Vector

• Parameters

  • point: Vector

  Returns Vector

publicworldToScreenCoordinates

• worldToScreenCoordinates(point: Vector): Vector

• Takes a coordinate in Excalibur world space, and translates it to Excalibur screen space.

  Screen space is where screen elements and entities with CoordPlane.Screen live.

  ---

  Parameters

  • point: Vector

    World coordinate to convert

  Returns Vector