/** * 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 */ export default 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 = []; } }