phaser-flex v0.0.3

Phaser3 flex layout plugin

Use css3 flex to locate your gameObjects in phaser3

Example

Run the example

yarn install
yarn start

Usage

Import the Plugin in your Game config：

import { Plugin as FlexLayout } from 'phaser-flex'
import { Scene1 } from './scene'

let phaserConfig = {
  type: Phaser.AUTO,
  parent: 'phaser-display',
  backgroundColor: '0x9a9a9a',
  width: 800,
  height: 600,
  plugins: {
    global: [ FlexLayout.DefaultCfg ],
  },
  scene: [ Scene1 ],
};

new Phaser.Game(phaserConfig)

Use the plugin:

create() {
    let flex = this.add.flexLayout({
        container:{ x:0, y: 0, width: 300, height: 300},
        margin: [20, 30],
        children: [],
        flexDirection: 'row',
        flexWrap: 'nowrap',
        justifyContent: 'flex-start',
        alignContent: 'flex-start',
    })
}