README

phaser_utility

Project Title - Phaser Utility

Intro - Utility Classes for use with the Phaser.io Framework

Needing some extra functionality in Phaser I made these helper classes to assist me in scaling and placing game objects based on the width or height of a game. This code is beneficial when making games on mobile devices.

List of features

Scale Objects proportionally to a percentage of the game's width or height
Align Objects on a grid that scales to the screen size
Place objects in grid squares by number (0,1,2) or by coordinates (x:10,y:2)
Center Objects on the stage
Adds a few extra helpful functions

Example

https://www.youtube.com/watch?v=JeTY0wfVtXg

Code Demo

 
import { BaseScene } from "phaser-utility/scenes/BaseScene";
 
//extend with BaseScene instead of Phaser.Scene
 
export class SceneMain extends BaseScene
{
    constructor()
    {
        super("SceneMain");
    }
    preload()
    {
        this.load.image("face","./assets/face.png");
    }
    create()
    {
        //initilize the variables in BaseScene
        super.create();
 
        //extra functions
 
        //get the game's width and height
        let width:number=this.getW();
        let height:number=this.getH();
 
        //create a grid system on the stage
   
        let rows:number=11;
        let cols:number=11;
        this.makeGrid(rows,cols);
 
        //show the grid for debugging
        this.grid.show();
 
        //make an image
        let face=this.add.image(0,0,"face");
       
        //scale the object to 50% of the canvas width        
        //Align.scaleToGameW(object, percentage, baseScene);
 
        Align.scaleToGameW(face,0.5,this);
       
         //place the object on the grid
        let x:number=5;
        let y:number=3;
        this.grid.placeAt(x,y,face);
    }
}

Align Class

definitions

obj-Any Phaser Game Object baseScene-The BaseScene instance - usually 'this'

Scale To Game Width

Align.scaleToGameW(object,percent,baseScene);

Scale To Game Height

Align.scaleToGameH(object,percent,baseScene);

center object horizontal

Align.centerH(obj, baseScene);

center object vertically

Align.centerV(obj, baseScene);

center both horizontal and vertical

Align.center(obj, baseScene);

center both horizontally and verticle with an object of orientation of (0,0)

Align.center2(obj,baseScene);

get number of pixels from top of canvas based on percentage

Align.getYPer(percent, baseScene);

get number of pixels from left of canvas based on percentage

Align.getXPer(percent, baseScene);

center 1 object to the center of a second object

Align.centerToObj(obj1, obj2);

AlignGrid

Create Instance in BaseScene

this.makeGrid(number_of_columns,number_of_rows);

Create Instance

this.grid=new AlignGrid(number_of_columns,number_of_rows,baseScene);

show grid lines

this.grid.show();

show positions

this.grid.showPos();

hide grid

this.grid.hide();

show indexes

this.grid.showNumbers();

place item by grid pos in center of cell

this.grid.place(x,y,object);

place item by grid pos in top left of cell

this.grid.place2(x,y,object);

place by index (0,1,2,3)

this.grid.placeAtIndex(index,object);

Download & Installation

npm i phaser-utility

yarn add phaser-utility

Authors

William Clarkson

https://williamclarkson.net https://phasergames.com

Usage no npm install needed!