Rectangle Ceil

Demonstrates how to use the Ceil method to round a rectangle's coordinates and dimensions up to the nearest integer, effectively snapping it to a pixel grid.

800 × 600

GitHub

class Example extends Phaser.Scene
{
    y = 0;
    graphics;
    rect2;
    rect1;

    create ()
    {
        this.graphics = this.add.graphics({ fillStyle: { color: 0x0000aa } });

        this.rect1 = new Phaser.Geom.Rectangle(100, 0, 250, 100);
        this.rect2 = new Phaser.Geom.Rectangle(450, 0, 250, 100);
    }

    update ()
    {
        this.y += 0.05;

        this.rect1.y = this.rect2.y = this.y;

        Phaser.Geom.Rectangle.Ceil(this.rect2);

        this.graphics.clear();
        this.graphics.fillRectShape(this.rect1);
        this.graphics.fillRectShape(this.rect2);
    }
}

const config = {
    scale: { mode: Phaser.Scale.FIT },
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    parent: 'game-container',
    scene: Example
};

const game = new Phaser.Game(config);

More in Rectangle46 examples

Rectangle Ceil AllDemonstrates using the CeilAll method to round up the position and dimensions of a Rectangle to the nearest integer values.

Rectangle Center OnDemonstrates how to use the CenterOn method to position a Phaser.Geom.Rectangle based on its center point coordinates.

Rectangle Contains PointDemonstrates how to check if a specific point, such as the mouse pointer, is located within the bounds of a Rectangle geometry object.

Rectangle Contains PointDemonstrates using Phaser.Geom.Rectangle.ContainsPoint to detect if a specific coordinate is within the boundaries of a rectangle.