I just began learning pixi today so don’t be so critical of the code please
DESCRIPTION
I am developing a game where you’re searching an item on the screen with circle that is following mouse movements. Item that has to be found is just SVG that is imported as Sprite object and set on the specific position on the screen.
My goal is to draw a stroke to this SVG when it collides with circle.
PixiJS collision example provides us good ready function to check collision. Here occurs a problem that SVG is imported with rectangular hitarea that gives me a problem that when circle collides this hitarea but doesn’t collide real svg boundes it registers collision anyway.
target svg import:
const vaseSprite = app.stage.addChild(
Sprite.from(await Assets.load("/games/scavenger-hunt/vase.svg"))
);
The circle logic that is happening when user is moving mouse is happening in repaint function
FULL CODE
const app = new Application({
resizeTo: window,
// background: 0x333333,
antialias: true,
});
mainPageRef.current?.appendChild(app.view as unknown as Node);
// Background texture
const backgroundTexture = await Assets.load(
"/games/scavenger-hunt/background.png"
);
const background = app.stage.addChild(
Sprite.from(backgroundTexture)
);
background.position.set(
window.innerWidth / 2,
window.innerHeight / 2
);
background.anchor.set(0.5);
// Target vase sprite
const vaseSprite = app.stage.addChild(
Sprite.from(await Assets.load("/games/scavenger-hunt/vase.svg"))
);
// Add graphics for stroke
const vaseStroke = new Graphics();
vaseSprite.addChild(vaseStroke);
vaseSprite.anchor.set(0.5);
vaseSprite.position.set(
window.innerWidth / 2 + 307,
window.innerHeight / 2 + 47
);
// Circle texture
const circle = app.stage.addChild(new Graphics());
circle
.beginFill(0xffffcc, 0.3)
.drawCircle(window.innerWidth / 2, window.innerHeight / 2, 145)
.endFill();
// App settings
app.stage.eventMode = "static";
app.stage.hitArea = app.screen;
app.stage.on("pointermove", (e) => {
repaint(e);
});
const repaint = (e: any) => {
const hole = new Graphics();
const filter = new DropShadowFilter({
color: 0xffffff,
alpha: 1,
blur: 100,
distance: 100,
rotation: 45,
});
hole.filters = [filter];
hole.beginFill(0xffffcc, 0.3).arc(
e.clientX,
e.clientY,
145,
0,
Math.PI * 2
);
circle
.clear()
.beginFill(0x000000, 0.3)
.drawRect(0, 0, window.innerWidth, window.innerHeight)
.beginHole()
.drawPolygon(hole.currentPath)
.endHole()
.endFill();
if (checkObjectsCollision(vaseSprite, hole)) {
drawStroke();
} else {
clearStroke();
}
console.log(checkObjectsCollision(vaseSprite, hole));
};
const drawStroke = () => {
vaseStroke.clear().lineStyle(5, 0xff0000).drawCircle(0, 0, 50);
};
const clearStroke = () => {
vaseStroke.clear();
};
