Applying physics to geometric shapes?

[Linzeestomp]

Hi all! I was wondering if anyone could assist me with how to apply physics to a  geometric object? I'm trying to have 4 squares 'rain down' from their currently fixed positions at the top of the canvas (think StepMania). Any and all help is appreciated. My code so far:

 

var config = {
    width: 800,
    height: 600,
    renderer: Phaser.AUTO,
    antialias: true,
    multiTexture: true,
    state: {
        preload: create,
        render: render
    },
    physics:
            {
                default: 'arcade',
                arcade:
                {
                    debug: false,
                    gravity:
                    {
                        y: 500
                    }
                }
            }
}

let game = new Phaser.Game(config);

function create () {
    this.game.scale.pageAlignHorizontally = true;
    this.game.scale.pageAlignVertically = true;
    this.game.scale.refresh();

    this.rect = new Phaser.Rectangle(100, 0, 600, 600);

    this.sqFall = [];
    this.sqFall[0] = new Phaser.Rectangle(150,10, 50, 50);
    this.sqFall[1] = new Phaser.Rectangle(300.5,10, 50, 50);
    this.sqFall[2] = new Phaser.Rectangle(450,10, 50, 50);
    this.sqFall[3] = new Phaser.Rectangle(600,10, 50, 50);
}

function render () {
    game.debug.geom(this.rect,'#ffffff');
    for (a = 0; a <= 4; a++) {
        game.debug.geom(this.sqFall[a],'#00ff00');
    }
}

 

[samme]

You should use 4 different Graphics objects and a draw a rectangle on each one.

https://phaser.io/examples/v2/display/arcade-physics-graphics-shape