Class: ScaleManager

Phaser. ScaleManager

Phaser.ScaleManager

new ScaleManager(game, width, height)

The ScaleManager object is responsible managing the scaling, resizing and alignment of the game and display canvas.

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%.

Some parts of ScaleManager were inspired by the research of Ryan Van Etten, released under MIT License 2013.

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 - core/ScaleManager.js, line 20

Members

<static, constant> EXACT_FIT :integer

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.

Source - core/ScaleManager.js, line 510

<static, constant> NO_SCALE :integer

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.

Source - core/ScaleManager.js, line 520

<static, constant> RESIZE :integer

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.

Source - core/ScaleManager.js, line 539

<static, constant> SHOW_ALL :integer

Show the entire game display area while maintaining the original aspect ratio.

Source - core/ScaleManager.js, line 528

<internal, static, constant> USER_SCALE :integer

Experimental: The Game display area is scaled according to a user-speficied scale. Use setUserScale to change the scale factor.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 549

<readonly> aspectRatio :number

The aspect ratio of the scaled game canvas.

Source - core/ScaleManager.js, line 298

<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 - core/ScaleManager.js, line 291

<internal> compatibility

Various compatibility settings. The (auto) settings are automatically configured on boot based on device and other runtime information.

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 Game 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 | null <optional>
(auto)

If specified the window will be scrolled to this position on every refresh.

forceMinimumDocumentHeight boolean <optional>
true

If enabled the document element's minimum height is explicity set on updates.

showAllCanExpand boolean <optional>
true

If enabled then SHOW_ALL is allowed to try and expand it's non-window parent. It may be necessary for the parent element to impose CSS width/height restrictions.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 341

<internal, readonly> currentScaleMode :number

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

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 2030

enterFullScreen :Phaser.Signal

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

Source - core/ScaleManager.js, line 237

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 - core/ScaleManager.js, line 173

enterLandscape :Phaser.Signal

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.

Source - core/ScaleManager.js, line 153

enterPortrait :Phaser.Signal

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.

Source - core/ScaleManager.js, line 163

<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 - core/ScaleManager.js, line 102

<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 - core/ScaleManager.js, line 112

fullScreenFailed

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.

Properties:
Name Type Description
leaveFullScreen Phaser.Signal
Source - core/ScaleManager.js, line 252

fullScreenScaleMode :number

The scaling method used by the ScaleManager when in fullscreen.

Source - core/ScaleManager.js, line 1991

fullScreenTarget :DOMElement|null

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

This is the DOM element on which the Full Screen API will be invoked. It can be any valid DOM element - the target element must have the correct CSS styling and should contain the game canvas.

This element's 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.

Type:
  • DOMElement | null
Deprecated:
  • 2.2.0 - See `createFullScreenTarget` as an alternative.
Default Value:
  • null
Source - core/ScaleManager.js, line 199

<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 - core/ScaleManager.js, line 28

grid :Phaser.FlexGrid

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

Source - core/ScaleManager.js, line 35

<readonly> height :number

Target height (in pixels) of the Game canvas.

Source - core/ScaleManager.js, line 49

<internal, readonly> incorrectOrientation :boolean

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

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 120

<readonly> isFullScreen :boolean

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

Source - core/ScaleManager.js, line 2112

<readonly> isLandscape :boolean

Returns true if the browser dimensions match a landscape display.

Source - core/ScaleManager.js, line 2143

<readonly> isPortrait :boolean

Returns true if the browser dimensions match a portrait display.

Source - core/ScaleManager.js, line 2129

leaveFullScreen :Phaser.Signal

This signal is dispatched when the browser leaves fullscreen mode.

Source - core/ScaleManager.js, line 244

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 - core/ScaleManager.js, line 183

<readonly> margin :Bounds-like

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

Type:
  • Bounds-like
Source - core/ScaleManager.js, line 284

<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.

Source - core/ScaleManager.js, line 83

<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".
Default Value:
  • 5
Source - core/ScaleManager.js, line 143

<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.

Source - core/ScaleManager.js, line 66

<readonly> minHeight :number

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

Source - core/ScaleManager.js, line 74

<readonly> minWidth :number

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

Source - core/ScaleManager.js, line 57

<internal, readonly> offset :Phaser.Point

The offset coordinates of the Game 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 - core/ScaleManager.js, line 92

pageAlignHorizontally :boolean

If true then the game canvas will be horizontally-aligned in the parent container.

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

This is not applicable for the RESIZE scaling mode.

Default Value:
  • false
Source - core/ScaleManager.js, line 2048

pageAlignVertically :boolean

If true then the game canvas will be vertically-aligned in the parent container.

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

This is not applicable for the RESIZE scaling mode.

Default Value:
  • false
Source - core/ScaleManager.js, line 2080

<readonly> parentIsWindow :boolean

If the parent container of the game is the browser window (ie. document.body), rather than a div, this should set to true.

Source - core/ScaleManager.js, line 369

<readonly> parentNode :DOMElement|null

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

If the parentIsWindow is true then this should likely be null.

Type:
  • DOMElement | null
Source - core/ScaleManager.js, line 380

<readonly> parentScaleFactor :Phaser.Point

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

Source - core/ScaleManager.js, line 387

<readonly> scaleFactor :Phaser.Point

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

Source - core/ScaleManager.js, line 269

<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 - core/ScaleManager.js, line 277

scaleMode :number

Source - core/ScaleManager.js, line 1956

<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 - core/ScaleManager.js, line 262

<readonly> sourceAspectRatio :number

The aspect ratio of the original game dimensions.

Source - core/ScaleManager.js, line 305

<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 - core/ScaleManager.js, line 396

<readonly> width :number

Target width (in pixels) of the Game canvas.

Source - core/ScaleManager.js, line 42

windowConstraints :boolean

The edges on which to constrain the Canvas to the Window viewport in addition to any restrictions of the parent container.

Default Value:
  • {bottom: true, right: true}
Source - core/ScaleManager.js, line 320

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 - Internal. _Do not use_
Source - core/ScaleManager.js, line 1916

<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 - core/ScaleManager.js, line 1934

<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 - Internal. _Do not use_
Source - core/ScaleManager.js, line 1907

<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 canvas based on internal state.

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - Internal. Use `refresh` if needed.
Source - core/ScaleManager.js, line 1925

<internal> aspect(object) → {number}

Get the viewport aspect ratio (or the aspect ratio of an object or element)

Parameters:
Name Type Argument Default Description
object DOMElement | Object <optional>
(viewport)

Optional object. Must have public width and height properties or methods.

Returns:
number -

The aspect ratio.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 1794
See:

<internal> boot()

Start the ScaleManager.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 554

<internal> createFullScreenTarget()

The createFullScreenTarget function creates a fullscreen target when fullScreenTarget is not set.

The Game canvas is moved onto the created element for the duration of the fullscreen mode and restored to it's original DOM location when fullscreen is exited.

The returned element (which should probably be newly created) is moved/reparanted within the DOM and may have its CSS styles updated. Assign an element to fullScreenTarget to avoid this DOM manipulation and revert to earlier behavior.

The default implementation is to create a new element with a black background.

Properties:
Name Type Description
createFullScreenTarget function
Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 216

<internal> elementBounds(element, cushion) → {Object|boolean}

A cross-browser element.getBoundingClientRect method with optional cushion.

Returns a plain object containing the properties top/bottom/left/right/width/height with respect to the top-left corner of the current viewport. Its properties match the native rectangle. The cushion parameter is an amount of pixels (+/-) to cushion the element. It adjusts the measurements such that it is possible to detect when an element is near the viewport.

Parameters:
Name Type Argument Default Description
element DOMElement | Object <optional>
(game canvas)

The element or stack (uses first item) to get the bounds for. If none given it defaults to the Phaser game canvas.

cushion number <optional>

A +/- pixel adjustment amount.

Returns:
Object | boolean -

A plain object containing the properties top/bottom/left/right/width/height or false if a non-valid element is given.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 1772
See:

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.

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 - core/ScaleManager.js, line 1019

<internal> fullScreenChange(event)

Called automatically when the browser enters of leaves fullscreen mode.

Parameters:
Name Type Argument Default Description
event Event <optional>
undefined

The fullscreenchange event

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 1718

<internal> fullScreenError(event)

Called automatically when the browser fullscreen request fails; or called when a fullscreen request is made on a device for which it is not supported.

Parameters:
Name Type Argument Default Description
event Event <optional>
undefined

The fullscreenerror event; undefined if invoked on a device that does not support the Fullscreen API.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 1752

<internal> getParentBounds(target)

Returns the bounds of the parent.

If fullscreen or without parent, this is the bounds of the screen itself.

The 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.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 1250

<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 - core/ScaleManager.js, line 642

<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 - core/ScaleManager.js, line 893

refresh()

Request a refresh, which is not normally needed, based on the current mode settings. The refresh does not run immediately but rather is queued for subsequent game updates.

Source - core/ScaleManager.js, line 1164

<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:

The scaled sprite.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 1810

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 - core/ScaleManager.js, line 767

<internal> setGameSize(width, height)

Experimental: Set a User scaling factor. This is only used in the USER_SCALE scaling mode.

Parameters:
Name Type Description
width number

Width scaling factor.

height numer

Height scaling factor.

Internal:
  • This member is internal (protected) and may be modified or removed in the future.
Source - core/ScaleManager.js, line 795

setMinMax(minWidth, minHeight, maxWidth, maxHeight)

Set the min and max dimensions for the game object.

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 - core/ScaleManager.js, line 865
To Do:
  • These values are only sometimes honored.

setResizeCallback(callback, context)

Sets the callback that will be called when the bounds of the Canvas's parent container may have changed.

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 - core/ScaleManager.js, line 810

<internal> setScreenSize()

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

Set game and/or screen (game canvas) size automatically based on the scaleMode. This is used internally.

Do not call this to "refresh" the display, but rather use refresh.

Deprecated / Internal:
  • This member is internal (protected) and may be modified or removed in the future.
  • Deprecated: 2.2.0 - This method is _internal_ and may be made _private_ in the future.
Source - core/ScaleManager.js, line 1178

<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 - core/ScaleManager.js, line 668

startFullScreen(antialias, allowTrampoline) → {boolean}

Start the browser's 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 appears 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 - core/ScaleManager.js, line 1553

stopFullScreen() → {boolean}

Stops fullscreen mode, if active.

Returns:
boolean -

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

Source - core/ScaleManager.js, line 1629
Phaser Copyright © 2012-2014 Photon Storm Ltd.
Documentation generated by JSDoc 3.3.0-dev on Sat Nov 15 2014 19:54:57 GMT-0000 (GMT) using the DocStrap template.