Calculate area of opaque and transparent in a node-connected shape

Phaser 3
1

Hi everyone, I’m new to Phaser.

I want to calculate the area of the shape, both Opaque part and Transparent Part, not Total Area.

Is there anyway I can do that?
Thanks for advance.

Here is my Node drawing code

function HitTest(gameObject, x, y, threshold = 255) {
    const { texture } = gameObject;
    const localPoint = gameObject.getLocalPoint(x, y);

    
    if (localPoint.x < 0 || localPoint.x >= texture.width || localPoint.y < 0 || localPoint.y >= texture.height) {
        return false;
    }

    return (
        texture.manager.getPixelAlpha(
            Math.floor(localPoint.x),
            Math.floor(localPoint.y),
            texture.key
        ) >= threshold
    );
}

function TrueFalseConvert(booL) {
    if (booL) return "True";
    return "False";
}



export class Start extends Phaser.Scene {
    constructor() {
        super('Start');
    }

    preload() {
        this.load.image("world_base", "assets/world_map_blank.png");
    }

    create() {
        
        this.shapes = [];
        this.currentShape = null; 
       


        this.mapbase = this.add.image(0, 0, 'world_base').setOrigin(0, 0);
        this.layer = this.add.layer();
        this.layer.add(this.mapbase);
        
        const camera = this.cameras.main;

      
        
        
        this.input.on('drag', (pointer, gameObject, dragX, dragY) => {
            if (this.isZooming || this.isPlacing) return; 
            gameObject.x = dragX; 
            gameObject.y = dragY; 
            
            this.shapes.forEach(shape => this.drawShape(shape));
        });

        
        this.input.on("pointerdown", pointer => {
            if (this.isPlacing) {
                
                if (!this.currentShape) {
                    this.currentShape = {
                        circles: [],
                        graphics: this.add.graphics()
                    };
                    this.shapes.push(this.currentShape);
                }

                const worldPoint = this.cameras.main.getWorldPoint(pointer.x, pointer.y);

                const dotCircle = this.add.circle(worldPoint.x, worldPoint.y, 5, 0xff0000);
                dotCircle.setInteractive({ draggable: true });

                
                dotCircle.on('dragstart', (pointer) => {
                    if (this.isZooming || this.isPlacing) {
                        return; 
                    }
                });

                dotCircle.on('drag', (pointer, dragX, dragY) => {
                    if (!this.isZooming && !this.isPlacing) {
                        dotCircle.x = dragX;
                        dotCircle.y = dragY;
                        
                        //this.drawShape(this.currentShape); 
                    }
                });

                this.currentShape.circles.push(dotCircle); 
                this.drawShape(this.currentShape);          
            }
        });

        this.placingKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.G);
        this.placingKey.on("down", () => {
            this.isZooming = false;
            this.isPlacing = !this.isPlacing;
            this.isPlacingText.setText(`Is Placing: ${TrueFalseConvert(this.isPlacing)}`);

            if (!this.isPlacing) {
                this.currentShape = null; 
            }
        });
        /// CALCULATE AREA

 
    }

    drawShape(shape) {
        shape.graphics.clear(); 

        if (shape.circles.length > 1) {
            


            


            const stroke = 2/this.cameras.main.zoom
            shape.graphics.lineStyle(stroke, 0x00ff00)

            shape.graphics.beginPath();
            const firstC = shape.circles[0].getCenter();
            shape.graphics.moveTo(firstC.x , firstC.y);

            
            shape.circles.forEach(circle => {
                const position = circle.getCenter();
                shape.graphics.lineTo(position.x, position.y);
            });
            shape.graphics.lineTo(firstC.x, firstC.y);
            shape.graphics.closePath();
            shape.graphics.strokePath();
        }
    }

    update() {
       
        const currentZoom = this.cameras.main.zoom;

        this.shapes.forEach(shape => {
            shape.circles.forEach(circle => {
                circle.setRadius(5 / currentZoom);
            });
            this.drawShape(shape); 
        });
    }
}

image
image1432×784 104 KB

2

See Phaser.Geom.Polygon#area.

3

oopsie, I forgot to include that my map image contains transparent, which is the black one.
Sorry for not include that before

world_map_blank
world_map_blank1200×668 47.4 KB

4

Might not be the most efficient method but you can count pixels, scanning the rgba and tally up the number of pixels in the region that have an alpha value above zero. The actual area would be dependent on the scale of the map if you mean km or mileage, you’d need the pixels-per-square-inch on the map and the scale of the map to determine that.

5

Count erased pixels in CanvasTexture

https://codepen.io/samme/pen/OJyMwyV