145 lines
3.8 KiB
JavaScript
145 lines
3.8 KiB
JavaScript
/**
|
|
* WaterRipplesSystem.js
|
|
*
|
|
* Creates realistic water ripple effects:
|
|
* - Footstep ripples (when walking in water)
|
|
* - Splash ripples (when falling/jumping into water)
|
|
* - Rain ripples (raindrops hitting water)
|
|
* - Expanding concentric circles
|
|
*
|
|
* Style 32 Dark-Chibi Noir - thick black outlines
|
|
*/
|
|
|
|
class WaterRipplesSystem {
|
|
constructor(scene) {
|
|
this.scene = scene;
|
|
|
|
// Ripple settings
|
|
this.rippleLifespan = 1500; // ms
|
|
this.maxConcurrentRipples = 20; // Performance limit
|
|
|
|
// Active ripples
|
|
this.activeRipples = [];
|
|
|
|
// Create ripple texture (Style 32 - concentric black circles)
|
|
this.createRippleTexture();
|
|
|
|
console.log('💧 WaterRipplesSystem: Initialized');
|
|
}
|
|
|
|
/**
|
|
* Create ripple texture with Style 32 aesthetic
|
|
*/
|
|
createRippleTexture() {
|
|
const graphics = this.scene.add.graphics();
|
|
|
|
// Style 32 - thick black outlines, multiple circles
|
|
graphics.lineStyle(3, 0x000000, 1); // Thick black line
|
|
graphics.strokeCircle(32, 32, 28);
|
|
|
|
graphics.lineStyle(2, 0x000000, 0.7);
|
|
graphics.strokeCircle(32, 32, 22);
|
|
|
|
graphics.lineStyle(1, 0x000000, 0.4);
|
|
graphics.strokeCircle(32, 32, 16);
|
|
|
|
// Generate texture
|
|
graphics.generateTexture('waterRipple', 64, 64);
|
|
graphics.destroy();
|
|
|
|
console.log('💧 Ripple texture created (Style 32)');
|
|
}
|
|
|
|
/**
|
|
* Create single ripple
|
|
* @param {number} x - X position
|
|
* @param {number} y - Y position
|
|
* @param {number} size - Ripple size multiplier
|
|
* @param {number} speed - Expansion speed
|
|
*/
|
|
createRipple(x, y, size = 1.0, speed = 1.0) {
|
|
// Performance check
|
|
if (this.activeRipples.length >= this.maxConcurrentRipples) {
|
|
return;
|
|
}
|
|
|
|
// Create ripple sprite
|
|
const ripple = this.scene.add.sprite(x, y, 'waterRipple');
|
|
ripple.setAlpha(0.8);
|
|
ripple.setScale(0.1 * size);
|
|
ripple.setDepth(-5); // Below most objects, above water
|
|
|
|
// Animate expansion
|
|
this.scene.tweens.add({
|
|
targets: ripple,
|
|
scaleX: 2.0 * size,
|
|
scaleY: 2.0 * size,
|
|
alpha: 0,
|
|
duration: this.rippleLifespan / speed,
|
|
ease: 'Quad.Out',
|
|
onComplete: () => {
|
|
ripple.destroy();
|
|
this.activeRipples = this.activeRipples.filter(r => r !== ripple);
|
|
}
|
|
});
|
|
|
|
this.activeRipples.push(ripple);
|
|
}
|
|
|
|
/**
|
|
* Create footstep ripple (small, subtle)
|
|
* @param {number} x
|
|
* @param {number} y
|
|
*/
|
|
createFootstepRipple(x, y) {
|
|
this.createRipple(x, y, 0.5, 1.2);
|
|
}
|
|
|
|
/**
|
|
* Create splash ripples (multiple waves)
|
|
* @param {number} x
|
|
* @param {number} y
|
|
*/
|
|
createSplashRipples(x, y) {
|
|
// Multiple ripples with delay
|
|
this.createRipple(x, y, 1.5, 0.8);
|
|
|
|
this.scene.time.delayedCall(100, () => {
|
|
this.createRipple(x, y, 1.8, 0.9);
|
|
});
|
|
|
|
this.scene.time.delayedCall(200, () => {
|
|
this.createRipple(x, y, 2.0, 1.0);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* Create rain ripple (tiny, fast)
|
|
* @param {number} x
|
|
* @param {number} y
|
|
*/
|
|
createRainRipple(x, y) {
|
|
this.createRipple(x, y, 0.3, 1.5);
|
|
}
|
|
|
|
/**
|
|
* Create object fall ripple (medium)
|
|
* @param {number} x
|
|
* @param {number} y
|
|
* @param {number} objectSize
|
|
*/
|
|
createObjectRipple(x, y, objectSize = 1.0) {
|
|
this.createRipple(x, y, 1.0 * objectSize, 1.0);
|
|
}
|
|
|
|
/**
|
|
* Cleanup all ripples
|
|
*/
|
|
destroy() {
|
|
this.activeRipples.forEach(ripple => {
|
|
if (ripple) ripple.destroy();
|
|
});
|
|
this.activeRipples = [];
|
|
}
|
|
}
|