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%.
| 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. |
A scale mode that stretches content to fill all available space - see scaleMode.
A scale mode that prevents any scaling - see scaleMode.
A scale mode that causes the Game size to change - see scaleMode.
A scale mode that shows the entire game while maintaining proportions - see scaleMode.
A scale mode that allows a custom scale factor - see scaleMode.
The aspect ratio of the scaled Display canvas.
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.
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.
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.
| 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 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. |
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. |
Returns the current scale mode - for normal or fullscreen operation.
See scaleMode for the different modes allowed.
Provides access to some cross-device DOM functions.
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.
If true, the game should only run in a landscape orientation.
Change with forceOrientation.
If true, the game should only run in a portrait
Change with forceOrientation.
The scaling method used by the ScaleManager when in fullscreen.
See scaleMode for the different modes allowed.
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.
A reference to the currently running game.
EXPERIMENTAL: A responsive grid on which you can align game objects.
This boolean provides you with a way to determine if the browser is in Full Screen
mode (via the Full Screen API), and Phaser was the one responsible for activating it.
It's possible that ScaleManager.isFullScreen returns true even if Phaser wasn't the
one that made the browser go full-screen, so this flag lets you determine that.
Target height (in pixels) of the Display canvas.
True if forceLandscape or forcePortrait are set and do not agree with the browser orientation.
This value is not updated immediately.
Returns true if the browser is in fullscreen mode, otherwise false.
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.
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.
Returns true if the screen orientation is in landscape mode.
Returns true if the screen orientation is in portrait mode.
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.
The Display canvas is aligned by adjusting the margins; the last margins are stored here.
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.
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.
Minimum height the canvas should be scaled to (in pixels).
Change with setMinMax.
Minimum width the canvas should be scaled to (in pixels).
Change with setMinMax.
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.
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.
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).
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:
targetElement fortargetElement 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.
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 objectprevOrientation, 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.
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.
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.
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.
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.
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.
The scale of the game in relation to its parent container.
The current scale factor based on the game dimensions vs. the scaled dimensions.
The current inversed scale factor. The displayed dimensions divided by the game dimensions.
The scaling method used by the ScaleManager when not in fullscreen.
Any manually set Game size (see setGameSize) is ignored while in effect.
This scale can be adjusted in the resize callback
for flexible custom-sizing needs.
The last known orientation of the screen, as defined in the Window Screen Web API.
See Phaser.DOM.getScreenOrientation for possible values.
The aspect ratio of the original game dimensions.
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.
Target width (in pixels) of the Display canvas.
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'.
| Name | Type | Description |
|---|---|---|
bottom | string | |
right | string |
Start the ScaleManager.
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.
Destroys the ScaleManager and removes any event listeners.
This should probably only be called when the game is destroyed.
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'
| 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. |
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.
| Name | Type | Argument | Default | Description |
|---|---|---|---|---|
target | Phaser.Rectangle | <optional> | (new Rectangle) | The rectangle to update; a new one is created as needed. |
The established parent bounds.
Load configuration settings.
| Name | Type | Description |
|---|---|---|
config | object | The game configuration object. |
The ScaleManager.preUpdate is called automatically by the core Game loop.
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
The queued layout refresh is not immediate but will run promptly in an upcoming preRender.
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.
| 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 |
The scaled sprite.
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
| Name | Type | Description |
|---|---|---|
width | integer | Game width, in pixels. |
height | integer | Game height, in pixels. |
Set the min and max dimensions for the Display canvas.
Note: The min/max dimensions are only applied in some cases
| 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. |
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
preUpdate, even when the game is paused See onSizeChange for a better way of reacting to layout updates.
| 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. |
Calculates and sets the game dimensions based on the given width and height.
This should not be called when in fullscreen mode.
| Name | Type | Description |
|---|---|---|
width | number | string | The width of the game. |
height | number | string | The height of the game. |
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.
| 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. |
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.
| Name | Type | Argument | 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> | Internal argument. If |
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.)
Stops / exits fullscreen mode, if active.
Returns true if the browser supports fullscreen mode and fullscreen mode will be exited.
© 2016 Richard Davey, Photon Storm Ltd.
Licensed under the MIT License.
http://phaser.io/docs/2.6.2/Phaser.ScaleManager.html