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);
});
}
}