Discover
Learn
Get
Create
Community
Login
Navigation
These archived docs are for Phaser 2.3.0 Phaser 3 docs can be found on newdocs.phaser.io.
Phaser CE docs can be found on the Phaser CE Documentation site.

Constructor

Phaser. ScaleManager

The ScaleManager object handles the the scaling, resizing, and alignment of the Game size and the game Display canvas.

The Game size is the logical size of the game; the Display canvas has size as an HTML element.

The calculations of these are heavily influenced by the bounding Parent size which is the computed dimensions of the Display canvas's Parent container/element - the effective CSS rules of the canvas's Parent element play an important role in the operation of the ScaleManager.

The Display canvas - or Game size, depending scaleMode - is updated to best utilize the Parent size. When in Fullscreen mode or with parentIsWindow the Parent size is that of the visual viewport (see getParentBounds).

Parent and Display canvas containment guidelines:

  • Style the Parent element (of the game canvas) to control the Parent size and thus the Display canvas's size and layout.

  • The Parent element's CSS styles should effectively apply maximum (and minimum) bounding behavior.

  • The Parent element should not apply a padding as this is not accounted for. If a padding is required apply it to the Parent's parent or apply a margin to the Parent. If you need to add a border, margin or any other CSS around your game container, then use a parent element and apply the CSS to this instead, otherwise you'll be constantly resizing the shape of the game container.

  • The Display canvas layout CSS styles (i.e. margins, size) should not be altered/specified as they may be updated by the ScaleManager.

new ScaleManager(game, width, height)

Create a new ScaleManager object - this is done automatically by Phaser.Game

The width and height constructor parameters can either be a number which represents pixels or a string that represents a percentage: e.g. 800 (for 800 pixels) or "80%" for 80%.

Parameters
Name Type Description
game Phaser.Game

A reference to the currently running game.
width number | string

The width of the game. See above.
height number | string

The height of the game. See above.
Source code: core/ScaleManager.js (Line 46)

Public Properties

[static] EXACT_FIT : integer

A scale mode that stretches content to fill all available space - see scaleMode.

Source code: core/ScaleManager.js (Line 644)

[static] NO_SCALE : integer

A scale mode that prevents any scaling - see scaleMode.

Source code: core/ScaleManager.js (Line 652)

[static] RESIZE : integer

A scale mode that causes the Game size to change - see scaleMode.

Source code: core/ScaleManager.js (Line 668)

[static] SHOW_ALL : integer

A scale mode that shows the entire game while maintaining proportions - see scaleMode.

Source code: core/ScaleManager.js (Line 660)

[static] USER_SCALE : integer

A scale mode that allows a custom scale factor - see scaleMode.

Source code: core/ScaleManager.js (Line 676)

[readonly] aspectRatio : number

The aspect ratio of the scaled Display canvas.

Source code: core/ScaleManager.js (Line 396)

[readonly] boundingParent :DOMElement

The DOM element that is considered the Parent bounding element, if any.

This null if parentIsWindow is true or if fullscreen mode is entered and fullScreenTarget is specified. It will also be null if there is no game canvas or if the game canvas has no parent.

Source code: core/ScaleManager.js (Line 2176)

[readonly] bounds : Phaser.Rectangle

The bounds of the scaled game. The x/y will match the offset of the canvas element and the width/height the scaled width and height.

Source code: core/ScaleManager.js (Line 389)

<internal> compatibility

Various compatibility settings. A value of "(auto)" indicates the setting is configured based on device and runtime information.

A refresh may need to be performed after making changes.

Properties:
Name Type Argument Default Description
supportsFullscreen boolean <optional>
 (auto)

True only if fullscreen support will be used. (Changing to fullscreen still might not work.)
orientationFallback boolean <optional>
 (auto)

See Phaser.DOM.getScreenOrientation.
noMargins boolean <optional>
 false

If true then the Display canvas's margins will not be updated anymore: existing margins must be manually cleared. Disabling margins prevents automatic canvas alignment/centering, possibly in fullscreen.
scrollTo Phaser.Point <optional>
<nullable>
 (auto)

If specified the window will be scrolled to this position on every refresh.
forceMinimumDocumentHeight boolean <optional>
 false

If enabled the document elements minimum height is explicitly set on updates. The height set varies by device and may either be the height of the window or the viewport.
canExpandParent boolean <optional>
 true

If enabled then SHOW_ALL and USER_SCALE modes can try and expand the parent element. It may be necessary for the parent element to impose CSS width/height restrictions.
clickTrampoline string <optional>
 (auto)

On certain browsers (eg. IE) FullScreen events need to be triggered via 'click' events. A value of 'when-not-mouse' uses a click trampoline when a pointer that is not the primary mouse is used. Any other string value (including the empty string) prevents using click trampolines. For more details on click trampolines see Phaser.Pointer#addClickTrampoline.
Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 457)

<internal, readonly> currentScaleMode : number

Returns the current scale mode - for normal or fullscreen operation.

See scaleMode for the different modes allowed.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 2306)

<internal, readonly> dom : Phaser.DOM

Provides access to some cross-device DOM functions.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 62)

enterFullScreen : Phaser.Signal

This method is deprecated and should not be used. It may be removed in the future.

This signal is dispatched when the browser enters fullscreen mode, if supported.

Deprecated:
Source code: core/ScaleManager.js (Line 329)

enterIncorrectOrientation : Phaser.Signal

This signal is dispatched when the browser enters an incorrect orientation, as defined by forceOrientation.

This is signaled from preUpdate (or pauseUpdate) even when the game is paused.

Source code: core/ScaleManager.js (Line 242)

enterLandscape : Phaser.Signal

This method is deprecated and should not be used. It may be removed in the future.

This signal is dispatched when the browser enters landscape orientation, having been in portrait.

This is signaled from preUpdate (or pauseUpdate) even when the game is paused.

Deprecated:
Source code: core/ScaleManager.js (Line 221)

enterPortrait : Phaser.Signal

This method is deprecated and should not be used. It may be removed in the future.

This signal is dispatched when the browser enters portrait orientation, having been in landscape.

This is signaled from preUpdate (or pauseUpdate) even when the game is paused.

Deprecated:
Source code: core/ScaleManager.js (Line 232)

<internal, readonly> forceLandscape : boolean

If true, the game should only run in a landscape orientation. Change with forceOrientation.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Default Value
  • false
Source code: core/ScaleManager.js (Line 140)

<internal, readonly> forcePortrait : boolean

If true, the game should only run in a portrait Change with forceOrientation.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Default Value
  • false
Source code: core/ScaleManager.js (Line 150)

fullScreenFailed : Phaser.Signal

This method is deprecated and should not be used. It may be removed in the future.

This signal is dispatched when the browser fails to enter fullscreen mode; or if the device does not support fullscreen mode and startFullScreen is invoked.

Deprecated:
Source code: core/ScaleManager.js (Line 348)

fullScreenScaleMode : integer

The scaling method used by the ScaleManager when in fullscreen.

See scaleMode for the different modes allowed.

Source code: core/ScaleManager.js (Line 2265)

fullScreenTarget :DOMElement

If specified, this is the DOM element on which the Fullscreen API enter request will be invoked. The target element must have the correct CSS styling and contain the Display canvas.

The elements style will be modified (ie. the width and height might be set to 100%) but it will not be added to, removed from, or repositioned within the DOM. An attempt is made to restore relevant style changes when fullscreen mode is left.

For pre-2.2.0 behavior set game.scale.fullScreenTarget = game.canvas.

Default Value
  • null
Source code: core/ScaleManager.js (Line 267)

<internal, readonly> game : Phaser.Game

A reference to the currently running game.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 54)

grid : Phaser.FlexGrid

EXPERIMENTAL: A responsive grid on which you can align game objects.

Source code: core/ScaleManager.js (Line 69)

[readonly] height : number

Target height (in pixels) of the Display canvas.

Source code: core/ScaleManager.js (Line 83)

<internal, readonly> incorrectOrientation : boolean

True if forceLandscape or forcePortrait are set and do not agree with the browser orientation.

This value is not updated immediately.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 161)

[readonly] isFullScreen : boolean

Returns true if the browser is in fullscreen mode, otherwise false.

Source code: core/ScaleManager.js (Line 2397)

[readonly] isGameLandscape : boolean

Returns true if the game dimensions are landscape (width > height). This is especially useful to check when using the RESIZE scale mode but wanting to maintain game orientation on desktop browsers, where typically the screen orientation will always be landscape regardless of the browser viewport.

Source code: core/ScaleManager.js (Line 2477)

[readonly] isGamePortrait : boolean

Returns true if the game dimensions are portrait (height > width). This is especially useful to check when using the RESIZE scale mode but wanting to maintain game orientation on desktop browsers, where typically the screen orientation will always be landscape regardless of the browser viewport.

Source code: core/ScaleManager.js (Line 2459)

[readonly] isLandscape : boolean

Returns true if the screen orientation is in landscape mode.

Source code: core/ScaleManager.js (Line 2429)

[readonly] isPortrait : boolean

Returns true if the screen orientation is in portrait mode.

Source code: core/ScaleManager.js (Line 2414)

leaveFullScreen : Phaser.Signal

This method is deprecated and should not be used. It may be removed in the future.

This signal is dispatched when the browser leaves fullscreen mode.

Deprecated:
Source code: core/ScaleManager.js (Line 338)

leaveIncorrectOrientation : Phaser.Signal

This signal is dispatched when the browser leaves an incorrect orientation, as defined by forceOrientation.

This is signaled from preUpdate (or pauseUpdate) even when the game is paused.

Source code: core/ScaleManager.js (Line 252)

<internal, readonly> margin :Bounds-like

The Display canvas is aligned by adjusting the margins; the last margins are stored here.

Type
  • Bounds-like
Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 382)

<internal, readonly> maxHeight : number

Maximum height the canvas should be scaled to (in pixels). If null it will scale to whatever height the browser can handle. Change with setMinMax.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 121)

<internal> maxIterations : number

This method is deprecated and should not be used. It may be removed in the future.

The maximum number of times a canvas will be resized (in a row) in order to fill the browser.

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - This is not used anymore as reflow iterations are "automatic".
Source code: core/ScaleManager.js (Line 184)
See
  • refresh

<internal, readonly> maxWidth : number

Maximum width the canvas should be scaled to (in pixels). If null it will scale to whatever width the browser can handle. Change with setMinMax.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 102)

<internal, readonly> minHeight : number

Minimum height the canvas should be scaled to (in pixels). Change with setMinMax.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 111)

<internal, readonly> minWidth : number

Minimum width the canvas should be scaled to (in pixels). Change with setMinMax.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 92)

<internal, readonly> offset : Phaser.Point

The offset coordinates of the Display canvas from the top-left of the browser window. The is used internally by Phaser.Pointer (for Input) and possibly other types.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 130)

onFullScreenChange : Phaser.Signal

This signal is dispatched when the browser enters or leaves fullscreen mode, if supported.

The signal is supplied with a single argument: scale (the ScaleManager). Use scale.isFullScreen to determine if currently running in Fullscreen mode.

Source code: core/ScaleManager.js (Line 309)

onFullScreenError : Phaser.Signal

This signal is dispatched when the browser fails to enter fullscreen mode; or if the device does not support fullscreen mode and startFullScreen is invoked.

The signal is supplied with a single argument: scale (the ScaleManager).

Source code: core/ScaleManager.js (Line 320)

onFullScreenInit : Phaser.Signal

This signal is dispatched when fullscreen mode is ready to be initialized but before the fullscreen request.

The signal is passed two arguments: scale (the ScaleManager), and an object in the form {targetElement: DOMElement}.

The targetElement is the fullScreenTarget element, if such is assigned, or a new element created by createFullScreenTarget.

Custom CSS styling or resets can be applied to targetElement as required.

If targetElement is not the same element as fullScreenTarget:

  • After initialization the Display canvas is moved onto the targetElement for the duration of the fullscreen mode, and restored to it's original DOM location when fullscreen is exited.
  • The targetElement is moved/re-parented within the DOM and may have its CSS styles updated.

The behavior of a pre-assigned target element is covered in fullScreenTarget.

Source code: core/ScaleManager.js (Line 298)

onOrientationChange : Phaser.Signal

This signal is dispatched when the orientation changes or the validity of the current orientation changes.

The signal is supplied with the following arguments:

  • scale - the ScaleManager object
  • prevOrientation, a string - The previous orientation as per screenOrientation.
  • wasIncorrect, a boolean - True if the previous orientation was last determined to be incorrect.

Access the current orientation and validity with scale.screenOrientation and scale.incorrectOrientation. Thus the following tests can be done:

// The orientation itself changed:
scale.screenOrientation !== prevOrientation
// The orientation just became incorrect:
scale.incorrectOrientation && !wasIncorrect

It is possible that this signal is triggered after forceOrientation so the orientation correctness changes even if the orientation itself does not change.

This is signaled from preUpdate (or pauseUpdate) even when the game is paused.

Source code: core/ScaleManager.js (Line 210)

onSizeChange : Phaser.Signal

This signal is dispatched when the size of the Display canvas changes or the size of the Game changes. When invoked this is done after the Canvas size/position have been updated.

This signal is only called when a change occurs and a reflow may be required. For example, if the canvas does not change sizes because of CSS settings (such as min-width) then this signal will not be triggered.

Use this to handle responsive game layout options.

This is signaled from preUpdate (or pauseUpdate) even when the game is paused.

Source code: core/ScaleManager.js (Line 534)
To Do:
  • Formalize the arguments, if any, supplied to this signal.

[readonly] orientation : integer

This method is deprecated and should not be used. It may be removed in the future.

The last known orientation value of the screen. A value of 90 is landscape and 0 is portrait.

Deprecated:
  • 2.2.0 - Use #screenOrientation instead.
Source code: core/ScaleManager.js (Line 2444)

pageAlignHorizontally : boolean

When enabled the Display canvas will be horizontally-aligned in the Parent container (or window).

To align horizontally across the page the Display canvas should be added directly to page; or the parent container should itself be horizontally aligned.

Horizontal alignment is not applicable with the RESIZE scaling mode.

Default Value
  • false
Source code: core/ScaleManager.js (Line 2326)

pageAlignVertically : boolean

When enabled the Display canvas will be vertically-aligned in the Parent container (or window).

To align vertically the Parent element should have a non-collapsible height, such that it will maintain a height larger than the height of the contained Game canvas - the game canvas will then be scaled vertically within the remaining available height dictated by the Parent element.

One way to prevent the parent from collapsing is to add an absolute "min-height" CSS property to the parent element. If specifying a relative "min-height/height" or adjusting margins, the Parent height must still be non-collapsible (see note).

Note: In version 2.2 the minimum document height is not automatically set to the viewport/window height. To automatically update the minimum document height set compatibility.forceMinimumDocumentHeight to true.

Vertical alignment is not applicable with the RESIZE scaling mode.

Default Value
  • false
Source code: core/ScaleManager.js (Line 2358)

parentIsWindow : boolean

If the parent container of the Game canvas is the browser window itself (i.e. document.body), rather than another div, this should set to true.

The parentNode property is generally ignored while this is in effect.

Source code: core/ScaleManager.js (Line 489)

parentNode :DOMElement

The original DOM element for the parent of the Display canvas. This may be different in fullscreen - see createFullScreenTarget.

This should only be changed after moving the Game canvas to a different DOM parent.

Source code: core/ScaleManager.js (Line 499)

[readonly] parentScaleFactor : Phaser.Point

The scale of the game in relation to its parent container.

Source code: core/ScaleManager.js (Line 506)

[readonly] scaleFactor : Phaser.Point

The current scale factor based on the game dimensions vs. the scaled dimensions.

Source code: core/ScaleManager.js (Line 365)

<internal, readonly> scaleFactorInversed : Phaser.Point

The current inversed scale factor. The displayed dimensions divided by the game dimensions.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 373)

scaleMode : integer

The scaling method used by the ScaleManager when not in fullscreen.

Phaser.ScaleManager.NO_SCALE
The Game display area will not be scaled - even if it is too large for the canvas/screen. This mode ignores any applied scaling factor and displays the canvas at the Game size.
Phaser.ScaleManager.EXACT_FIT
The Game display area will be stretched to fill the entire size of the canvas's parent element and/or screen. Proportions are not mainted.
Phaser.ScaleManager.SHOW_ALL
Show the entire game display area while maintaining the original aspect ratio.
Phaser.ScaleManager.RESIZE
The dimensions of the game display area are changed to match the size of the parent container. That is, this mode changes the Game size to match the display size.

Any manually set Game size (see setGameSize) is ignored while in effect.

Phaser.ScaleManager.USER_SCALE
The game Display is scaled according to the user-specified scale set by setUserScale.

This scale can be adjusted in the resize callback for flexible custom-sizing needs.

Source code: core/ScaleManager.js (Line 2201)

[readonly] screenOrientation : string

The last known orientation of the screen, as defined in the Window Screen Web API. See Phaser.DOM.getScreenOrientation for possible values.

Source code: core/ScaleManager.js (Line 358)

[readonly] sourceAspectRatio : number

The aspect ratio of the original game dimensions.

Source code: core/ScaleManager.js (Line 403)

<internal> trackParentInterval : integer

The maximum time (in ms) between dimension update checks for the Canvas's parent element (or window). Update checks normally happen quicker in response to other events.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Default Value
  • 2000
Source code: core/ScaleManager.js (Line 517)
See

[readonly] width : number

Target width (in pixels) of the Display canvas.

Source code: core/ScaleManager.js (Line 76)

windowConstraints

The edges on which to constrain the game Display/canvas in addition to the restrictions of the parent container.

The properties are strings and can be '', 'visual', 'layout', or 'layout-soft'.

  • If 'visual', the edge will be constrained to the Window / displayed screen area
  • If 'layout', the edge will be constrained to the CSS Layout bounds
  • An invalid value is treated as 'visual'
Properties:
Name Type Description
bottom string
right string
Default Value
  • {"right":"layout","bottom":""}
Source code: core/ScaleManager.js (Line 426)

Public Methods

<internal, static> checkOrientation()

This method is deprecated and should not be used. It may be removed in the future.

window.orientationchange event handler.

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - This method is INTERNAL: avoid using it directly.
Source code: core/ScaleManager.js (Line 2115)

<internal, static> checkOrientationState() → {boolean}

This method is deprecated and should not be used. It may be removed in the future.

Checks if the browser is in the correct orientation for the game, dependent upon forceLandscape and forcePortrait, and updates the state.

The appropriate event is dispatched if the orientation became valid or invalid.

Returns
boolean -

True if the orientation state changed (consider a refresh)

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - This is only for backward compatibility of user code.
Source code: core/ScaleManager.js (Line 2151)

<internal, static> checkResize()

This method is deprecated and should not be used. It may be removed in the future.

window.resize event handler.

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - This method is INTERNAL: avoid using it directly.
Source code: core/ScaleManager.js (Line 2106)

<internal, static> setSize()

This method is deprecated and should not be used. It may be removed in the future.

Updates the size/position of the Display canvas based on internal state.

Do not call this directly. To "refresh" the layout use refresh. To precisely control the scaling/size, apply appropriate rules to the bounding Parent container or use the USER_SCALE scale mode.

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - This method is INTERNAL: avoid using it directly.
Source code: core/ScaleManager.js (Line 2137)

<internal> boot()

Start the ScaleManager.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 681)

<internal> createFullScreenTarget()

Creates a fullscreen target. This is called automatically as as needed when entering fullscreen mode and the resulting element is supplied to onFullScreenInit.

Use onFullScreenInit to customize the created object.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 1751)

<internal> destroy()

Destroys the ScaleManager and removes any event listeners. This should probably only be called when the game is destroyed.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 2073)

forceOrientation(forceLandscape, forcePortrait)

Force the game to run in only one orientation.

This enables generation of incorrect orientation signals and affects resizing but does not otherwise rotate or lock the orientation.

Orientation checks are performed via the Screen Orientation API, if available in browser. This means it will check your monitor orientation on desktop, or your device orientation on mobile, rather than comparing actual game dimensions. If you need to check the viewport dimensions instead and bypass the Screen Orientation API then set: ScaleManager.compatibility.orientationFallback = 'viewport'

Parameters
Name Type Argument Default Description
forceLandscape boolean

true if the game should run in landscape mode only.
forcePortrait boolean <optional>
 false

true if the game should run in portrait mode only.
Source code: core/ScaleManager.js (Line 1175)

<internal> getParentBounds(target) → {Phaser.Rectangle}

Returns the computed Parent size/bounds that the Display canvas is allowed/expected to fill.

If in fullscreen mode or without parent (see parentIsWindow), this will be the bounds of the visual viewport itself.

This function takes the windowConstraints into consideration - if the parent is partially outside the viewport then this function may return a smaller than expected size.

Values are rounded to the nearest pixel.

Parameters
Name Type Argument Default Description
target Phaser.Rectangle <optional>
 (new Rectangle)

The rectangle to update; a new one is created as needed.
Returns
Phaser.Rectangle -

The established parent bounds.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 1432)

<internal> parseConfig(config)

Load configuration settings.

Parameters
Name Type Description
config object

The game configuration object.
Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 773)

<internal> preUpdate()

The ScaleManager.preUpdate is called automatically by the core Game loop.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 1040)

refresh()

The "refresh" methods informs the ScaleManager that a layout refresh is required.

The ScaleManager automatically queues a layout refresh (eg. updates the Game size or Display canvas layout) when the browser is resized, the orientation changes, or when there is a detected change of the Parent size. Refreshing is also done automatically when public properties, such as scaleMode, are updated or state-changing methods are invoked.

The "refresh" method may need to be used in a few (rare) situtations when

  • a device change event is not correctly detected; or
  • the Parent size changes (and an immediate reflow is desired); or
  • the ScaleManager state is updated by non-standard means; or
  • certain compatibility properties are manually changed.

The queued layout refresh is not immediate but will run promptly in an upcoming preRender.

Source code: core/ScaleManager.js (Line 1325)

<internal> scaleSprite(sprite, width, height, letterBox) → {Phaser.Sprite | Phaser.Image}

Takes a Sprite or Image object and scales it to fit the given dimensions. Scaling happens proportionally without distortion to the sprites texture. The letterBox parameter controls if scaling will produce a letter-box effect or zoom the sprite until it fills the given values. Note that with letterBox set to false the scaled sprite may spill out over either the horizontal or vertical sides of the target dimensions. If you wish to stop this you can crop the Sprite.

Parameters
Name Type Argument Default Description
sprite Phaser.Sprite | Phaser.Image

The sprite we want to scale.
width integer <optional>

The target width that we want to fit the sprite in to. If not given it defaults to ScaleManager.width.
height integer <optional>

The target height that we want to fit the sprite in to. If not given it defaults to ScaleManager.height.
letterBox boolean <optional>
 false

True if we want the fitted mode. Otherwise, the function uses the zoom mode.
Returns
Phaser.Sprite | Phaser.Image -

The scaled sprite.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 2009)

setGameSize(width, height)

Set the actual Game size. Use this instead of directly changing game.width or game.height.

The actual physical display (Canvas element size) depends on various settings including

  • Scale mode
  • Scaling factor
  • Size of Canvas's parent element or CSS rules such as min-height/max-height;
  • The size of the Window
Parameters
Name Type Description
width integer

Game width, in pixels.
height integer

Game height, in pixels.
Source code: core/ScaleManager.js (Line 896)

setMinMax(minWidth, minHeight, maxWidth, maxHeight)

Set the min and max dimensions for the Display canvas.

Note: The min/max dimensions are only applied in some cases

  • When the device is not in an incorrect orientation; or
  • The scale mode is EXACT_FIT when not in fullscreen
Parameters
Name Type Argument Description
minWidth number

The minimum width the game is allowed to scale down to.
minHeight number

The minimum height the game is allowed to scale down to.
maxWidth number <optional>

The maximum width the game is allowed to scale up to; only changed if specified.
maxHeight number <optional>

The maximum height the game is allowed to scale up to; only changed if specified.
Source code: core/ScaleManager.js (Line 1008)
To Do:
  • These values are only sometimes honored.

setResizeCallback(callback, context)

Sets the callback that will be invoked before sizing calculations.

This is the appropriate place to call setUserScale if needing custom dynamic scaling.

The callback is supplied with two arguments scale and parentBounds where scale is the ScaleManager and parentBounds, a Phaser.Rectangle, is the size of the Parent element.

This callback

  • May be invoked even though the parent container or canvas sizes have not changed
  • Unlike onSizeChange, it runs before the canvas is guaranteed to be updated
  • Will be invoked from preUpdate, even when the game is paused

See onSizeChange for a better way of reacting to layout updates.

Parameters
Name Type Description
callback function

The callback that will be called each time a window.resize event happens or if set, the parent container resizes.
context object

The context in which the callback will be called.
Source code: core/ScaleManager.js (Line 948)

<internal> setScreenSize()

This method is deprecated and should not be used. It may be removed in the future.

Updates the size of the Game or the size/position of the Display canvas based on internal state.

Do not call this directly. To "refresh" the layout use refresh. To precisely control the scaling/size, apply appropriate rules to the bounding Parent container or use the USER_SCALE scale mode.

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - This method is INTERNAL: avoid using it directly.
Source code: core/ScaleManager.js (Line 2124)

<internal> setupScale(width, height)

Calculates and sets the game dimensions based on the given width and height.

This should not be called when in fullscreen mode.

Parameters
Name Type Description
width number | string

The width of the game.
height number | string

The height of the game.
Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source code: core/ScaleManager.js (Line 799)

setUserScale(hScale, vScale, hTrim, vTrim)

Set a User scaling factor used in the USER_SCALE scaling mode.

The target canvas size is computed by:

canvas.width = (game.width * hScale) - hTrim
canvas.height = (game.height * vScale) - vTrim

This method can be used in the resize callback.

Parameters
Name Type Argument Default Description
hScale number

Horizontal scaling factor.
vScale numer

Vertical scaling factor.
hTrim integer <optional>
 0

Horizontal trim, applied after scaling.
vTrim integer <optional>
 0

Vertical trim, applied after scaling.
Source code: core/ScaleManager.js (Line 924)

startFullScreen(antialias, allowTrampoline) → {boolean}

Start the browsers fullscreen mode - this must be called from a user input Pointer or Mouse event.

The Fullscreen API must be supported by the browser for this to work - it is not the same as setting the game size to fill the browser window. See compatibility.supportsFullScreen to check if the current device is reported to support fullscreen mode.

The fullScreenFailed signal will be dispatched if the fullscreen change request failed or the game does not support the Fullscreen API.

Parameters
Name Type Argument Default Description
antialias boolean <optional>

Changes the anti-alias feature of the canvas before jumping in to fullscreen (false = retain pixel art, true = smooth art). If not specified then no change is made. Only works in CANVAS mode.
allowTrampoline boolean <optional>
 undefined

Internal argument. If false click trampolining is suppressed.
Returns
boolean -

Returns true if the device supports fullscreen mode and fullscreen mode was attempted to be started. (It might not actually start, wait for the signals.)

Source code: core/ScaleManager.js (Line 1772)

stopFullScreen() → {boolean}

Stops / exits fullscreen mode, if active.

Returns
boolean -

Returns true if the browser supports fullscreen mode and fullscreen mode will be exited.

Source code: core/ScaleManager.js (Line 1861)