69 lines
2.2 KiB
HTML
69 lines
2.2 KiB
HTML
<!-- Probe: do live particles stay in WORLD space when the emitter moves?
|
|
Served via dev server; driven by particle-probe.mjs. Results in window.__result -->
|
|
<!doctype html>
|
|
<html>
|
|
<head><meta charset="utf-8"><title>particle probe</title></head>
|
|
<body style="margin:0;background:#222">
|
|
<script src="/lib/phaser.min.js"></script>
|
|
<script>
|
|
const make = () => {
|
|
const g = document.createElement('canvas');
|
|
g.width = 32; g.height = 32;
|
|
const c = g.getContext('2d');
|
|
const gr = c.createRadialGradient(16, 16, 0, 16, 16, 16);
|
|
gr.addColorStop(0, 'rgba(255,255,255,1)');
|
|
gr.addColorStop(1, 'rgba(255,255,255,0)');
|
|
c.fillStyle = gr; c.fillRect(0, 0, 32, 32);
|
|
return g;
|
|
};
|
|
|
|
class Probe extends Phaser.Scene {
|
|
create() {
|
|
this.textures.addCanvas('dot', make());
|
|
this.ship = this.add.rectangle(100, 180, 24, 24, 0xffcc00);
|
|
this.em = this.add.particles(100, 180, 'dot', {
|
|
speedX: 100, // magnitude
|
|
angle: 0, // +x direction (radial true)
|
|
lifespan: 2000,
|
|
alpha: { start: 1, end: 0.3 },
|
|
scale: 0.8,
|
|
frequency: 50,
|
|
emitting: true,
|
|
});
|
|
this.em.setDepth(1);
|
|
this.ship.setDepth(2);
|
|
this.frames = 0;
|
|
}
|
|
update() {
|
|
this.frames++;
|
|
if (this.frames === 120) {
|
|
// snapshot BEFORE the move
|
|
const snap = (list) => list.map((p) => ({ x: p.x, y: p.y, wx: p.worldPosition ? p.worldPosition.x : null }));
|
|
const before = snap(this.em.alive);
|
|
// "ship moves": move the emitter (and ship) +300px in +x
|
|
this.em.setPosition(400, 180);
|
|
this.ship.setPosition(400, 180);
|
|
this.__before = before;
|
|
}
|
|
if (this.frames === 130) {
|
|
const snap = (list) => list.map((p) => ({ x: p.x, y: p.y, wx: p.worldPosition ? p.worldPosition.x : null }));
|
|
const after = snap(this.em.alive);
|
|
window.__result = { before: this.__before, after, emitter: { x: this.em.x, y: this.em.y } };
|
|
}
|
|
if (this.frames === 140) {
|
|
window.__shot = this.game.renderer.snapshot ? this.game.renderer.snapshot() : null;
|
|
window.__done = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
new Phaser.Game({
|
|
type: Phaser.CANVAS,
|
|
width: 640, height: 360,
|
|
backgroundColor: '#101418',
|
|
scene: Probe,
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|