Triangle Contains Point

Checks if the mouse pointer is inside a geometric triangle and changes the shape's color based on the result.

800 × 600

class Example extends Phaser.Scene
{
    create ()
    {
        const graphics = this.add.graphics();

        const triangle = new Phaser.Geom.Triangle(400, 100, 100, 500, 700, 500);

        graphics.fillStyle(0x00ff00);
        graphics.fillTriangleShape(triangle);

        this.input.on('pointermove', pointer =>
        {

            graphics.clear();

            if (Phaser.Geom.Triangle.ContainsPoint(triangle, pointer))
            {
                graphics.fillStyle(0xff0000);
            }
            else
            {
                graphics.fillStyle(0x00ff00);
            }

            graphics.fillTriangleShape(triangle);

        });
    }
}

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 Triangle32 examples

Triangle Copy FromLearn how to duplicate geometry data between triangles using the CopyFrom method to create a trail of shapes that follow the pointer.

Triangle DecomposeExtract the vertices of a triangle into an array of points to create complex visual patterns or path data.

Triangle EdgesLearn how to retrieve the individual line segments that form the three sides of a Triangle geometry object using getLine methods.

Triangle EqualsDemonstrates how to use the Triangle.Equals method to check if two triangle shapes have identical vertex coordinates.