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 - core/FlexGrid.js, line 21

Members

game :Phaser.Game

A reference to the currently running Game.

Source - core/FlexGrid.js, line 26

manager :Phaser.ScaleManager

A reference to the ScaleManager.

Source - core/FlexGrid.js, line 31

<readonly> positionCustom

Properties:
Name Type Description
position Phaser.Point

-

Source - 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 - core/FlexGrid.js, line 55

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 - 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 - 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 - 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 - core/FlexGrid.js, line 170

debug()

Call in the render function to output the bounds rects.

Source - 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 - 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 - core/FlexGrid.js, line 240

refresh()

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

Source - core/FlexGrid.js, line 256

reset()

Resets the layer children references

Source - 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 - core/FlexGrid.js, line 77