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

new FlexGrid(manager, width, height)

WARNING: This is an EXPERIMENTAL class. The API will change significantly in the coming versions and is incomplete. Please try to avoid using in production games with a long time to build. This is also why the documentation is incomplete.

FlexGrid is a a responsive grid manager that works in conjunction with the ScaleManager RESIZE scaling mode and FlexLayers to provide for game object positioning in a responsive manner.

Parameters
Name Type Description
manager Phaser.ScaleManager

The ScaleManager.

width number

The width of the game.

height number

The height of the game.

Source code: core/FlexGrid.js (Line 21)

Public Properties

game : Phaser.Game

A reference to the currently running Game.

Source code: core/FlexGrid.js (Line 26)

manager : Phaser.ScaleManager

A reference to the ScaleManager.

Source code: core/FlexGrid.js (Line 31)

[readonly] positionCustom

Properties:
Name Type Description
position Phaser.Point

-

Source code: core/FlexGrid.js (Line 46)

[readonly] scaleCustom

Properties:
Name Type Description
scaleFactor Phaser.Point

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

Source code: core/FlexGrid.js (Line 55)

Public Methods

createCustomLayer(width, height, children) → {Phaser.FlexLayer}

A custom layer is centered on the game and maintains its aspect ratio as it scales up and down.

Parameters
Name Type Argument Description
width number

Width of this layer in pixels.

height number

Height of this layer in pixels.

children Array.<PIXI.DisplayObject> <optional>

An array of children that are used to populate the FlexLayer.

Returns

The Layer object.

Source code: core/FlexGrid.js (Line 104)

createFixedLayer(children) → {Phaser.FlexLayer}

A fixed layer is centered on the game and is the size of the required dimensions and is never scaled.

Parameters
Name Type Argument Description
children Array.<PIXI.DisplayObject> <optional>

An array of children that are used to populate the FlexLayer.

Returns

The Layer object.

Source code: core/FlexGrid.js (Line 194)

createFluidLayer(children) → {Phaser.FlexLayer}

A fluid layer is centered on the game and maintains its aspect ratio as it scales up and down.

Parameters
Name Type Argument Description
children array <optional>

An array of children that are used to populate the FlexLayer.

Returns

The Layer object.

Source code: core/FlexGrid.js (Line 141)

createFullLayer(children) → {Phaser.FlexLayer}

A full layer is placed at 0,0 and extends to the full size of the game. Children are scaled according to the fluid ratios.

Parameters
Name Type Argument Description
children array <optional>

An array of children that are used to populate the FlexLayer.

Returns

The Layer object.

Source code: core/FlexGrid.js (Line 170)

debug()

Call in the render function to output the bounds rects.

Source code: core/FlexGrid.js (Line 299)

fitSprite(sprite)

Fits a sprites width to the bounds.

Parameters
Name Type Description
sprite Phaser.Sprite

The Sprite to fit.

Source code: core/FlexGrid.js (Line 284)

onResize(width, height)

Called when the game container changes dimensions.

Parameters
Name Type Description
width number

The new width of the game container.

height number

The new height of the game container.

Source code: core/FlexGrid.js (Line 240)

refresh()

Updates all internal vars such as the bounds and scale values.

Source code: core/FlexGrid.js (Line 256)

reset()

Resets the layer children references

Source code: core/FlexGrid.js (Line 218)

setSize(width, height)

Sets the core game size. This resets the w/h parameters and bounds.

Parameters
Name Type Description
width number

The new dimensions.

height number

The new dimensions.

Source code: core/FlexGrid.js (Line 77)