Phaser Utilities

Phaser Utilities

This pack of utilities includes:

  • Align Grid Class
  • Align Class
  • UiBlock

Align Grid

This is a grid for marking out UI or other games elements based on screen size. Learn more here.

Set Up
this.aGrid = new AlignGrid({scene: this,rows: 11,cols: 11});

Show the grid

this.aGrid.showNumbers();

Place An Item On Grid

var face=this.add.image(0,0,’face’);

this.aGrid.placeAtIndex(5,face);

Align Class

The align class is used for centering and scaling.

Scale an item to a percentage of the game’s width

Align.scaleToGameW(face,.1);

Centering

Align.center(face);

Align center horizontal

Align.centerH(face);

Align center vertical

Align.centerV(face);

The UIBlock

Use this as an alernative to Phaser Containers. Read more here.

class myUI extends UIBlock {
constructor(config) {
super();
}
}