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.- Internal:
- This member is internal (protected) and may be modified or removed in the future.
- Source - core/ScaleManager.js, line 341
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) 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, 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
(orpauseUpdate
) 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
(orpauseUpdate
) 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
(orpauseUpdate
) 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.- Source - core/ScaleManager.js, line 252
Properties:
Name Type Description leaveFullScreen
Phaser.Signal -
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.
- 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
orforcePortrait
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
(orpauseUpdate
) 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.
- 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 benull
.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
-
The scaling method used by the ScaleManager.
See Phaser.ScaleManager.NO_SCALE, Phaser.ScaleManager.EXACT_FIT, Phaser.ScaleManager.SHOW_ALL, Phaser.ScaleManager.RESIZE, Phaser.ScaleManager.USER_SCALE
- 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
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:
The maximum number of times a canvas will be resized (in a row) in order to fill the browser.
Methods
-
<internal, static> checkOrientation()
- This method is deprecated and should not be used. It may be removed in the future.
- 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.
- 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.
- 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.
- 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
andheight
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 whenfullScreenTarget
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.
- Internal:
- This member is internal (protected) and may be modified or removed in the future.
- Source - core/ScaleManager.js, line 216
Properties:
Name Type Description createFullScreenTarget
function -
<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
orfalse
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 thezoom
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
orgame.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 frompreUpdate
, even when the game is pausedSee
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.
- 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
window.orientationchange event handler.
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:
True if the orientation state changed (consider a refresh)
window.resize event handler.
Updates the size/position of the canvas based on internal state.
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
.