The Sound and VFX Lab

What you’re building

Play the combat prototype from Lesson 10 with the sound off and your eyes half-closed. The mechanics work. The combo chains. The dodge has i-frames. But it feels flat. Thin. Like watching a fight scene with the audio muted and the camera locked to a tripod. Something is missing, and that something is juice.

“Juice” is the game design term for the feedback layer that makes interactions feel impactful. Screen shake when the boss slams the ground. A burst of red particles when a blade connects. A white flash on the enemy sprite at the instant of damage. A subtle camera zoom on a finisher. The whoosh of a dodge roll. The thud of a hit landing. None of these change the mechanics. All of them change how the game feels. And feel is what separates a prototype that people play once from one that people cannot put down.

In this lesson you are building a VFX and sound lab — a Phaser 3 scene that layers particles, screen effects, and sound triggers on top of a combat room. Every effect is configurable with sliders so you can dial in exactly how much juice is right for your BloodRayne remake.

💬This is the lesson where it stops feeling like code

Everything up to now has been systems — health bars, state machines, physics tuning. This lesson is where the game starts to feel like a game. The first time you land a three-hit combo and see blood particles scatter while the screen shakes and a slash sound plays, you will understand why game developers call this the fun part. Because it is.

The showcase

Here is what the finished lab gives you:

Combat room with a player (Rayne) and two enemies (grunt + ranged), fully playable
Particle systems:
- Blood splatter on enemy hit (red particles scatter from impact point)
- Dust puff on landing after a jump (brown-gray particles spread at feet)
- Energy trail on dodge roll (purple-red particles trail behind player)
- Death explosion on enemy kill (large burst of red particles)
Screen effects:
- Screen shake on player damage (short, intense)
- Screen shake on boss attacks (long, heavy)
- Camera flash (red tint overlay) on player hit
- Camera zoom punch on combo finisher (quick zoom in then snap back)
- Hit-stop (50ms game freeze) on heavy attacks and kills
Sprite effects:
- White flash on damaged enemy (tint white for 80ms then restore)
- Red tint pulse on player damage
- Afterimage on dodge (semi-transparent copy at start position, fades out)
- Scale bounce on combo hits (enemy squishes slightly on impact)
Sound triggers (Web Audio API with generated tones, no external files):
- Attack whoosh (filtered noise burst, different pitch per combo hit)
- Hit thud (low frequency impact sound)
- Dodge swoosh (quick high-to-low sweep)
- Enemy death crunch (layered low + high impact)
- Ambient low drone (continuous, very quiet)
Tuning panel with sliders for every effect: particle count, shake intensity, flash duration, zoom amount, sound volume

The prompt

Open your terminal, navigate to your project folder, start your AI CLI tool, and paste this prompt:

Build a Phaser 3 sound and VFX lab that adds game juice to a BloodRayne-inspired
combat prototype. This lab layers particle effects, screen shake, hit flash,
camera punch, and procedural sound effects on top of a playable combat room.

PROJECT STRUCTURE:
sound-vfx-lab/
  index.html       (Phaser 3 game + tuning panel + Web Audio sounds, all inline)

SPECIFICATIONS:

1. PAGE LAYOUT
   - Split layout: game canvas on left (680px), tuning panel on right (300px)
   - Panel has four collapsible sections: "Particles", "Screen Effects",
     "Sprite Effects", "Sound"
   - Dark panel (#1a1a2e), light text, styled range inputs

2. GAME SCENE (680x450 canvas)
   - Same combat setup as previous prototypes: ground floor, two platforms
   - Player (Rayne): 32x48 dark red, arrow keys + Z attack + X dodge
   - Two enemies: one melee grunt (green, 28x44) and one ranged soldier
     (purple, 24x40) with basic AI (chase/attack for grunt, retreat/shoot
     for ranged)
   - Player has 150 HP, grunt has 80 HP, ranged has 60 HP
   - Full combo system: Z for 3-hit chain, X for dodge roll with i-frames
   - Enemies respawn 4 seconds after death

3. PARTICLE SYSTEMS (using Phaser 3 particle emitter)
   Create these particle effects:

   a. BLOOD_SPLATTER -- triggered on enemy hit
      - 5-10 small red rectangles (4x4 px) emitted from the hit point
      - Emit in a cone facing away from the attack direction
      - Velocity: 100-300px/s random spread
      - Lifetime: 200-400ms
      - Gravity: 400 (particles arc downward)
      - Fade out over lifetime
      - More particles for heavier hits (hit 3 of combo = 2x particles)

   b. DUST_PUFF -- triggered on player landing
      - 3-5 small gray-brown rectangles (3x3 px) from player feet
      - Emit horizontally left and right
      - Velocity: 40-80px/s
      - Lifetime: 150-250ms
      - No gravity (spread horizontally then fade)

   c. ENERGY_TRAIL -- triggered during dodge roll
      - Continuous emit from player center during dodge duration
      - Small red-purple rectangles (3x3 px)
      - Stay in place (zero velocity) and fade over 200ms
      - Creates a trail effect of fading copies along dodge path

   d. DEATH_BURST -- triggered on enemy death
      - 15-25 red rectangles (sizes 3-8px random) from enemy center
      - Emit in all directions (full 360 degrees)
      - Velocity: 150-400px/s random
      - Lifetime: 400-700ms
      - Gravity: 300
      - Some particles should bounce once on the ground

4. SCREEN EFFECTS
   a. SCREEN_SHAKE -- Phaser camera shake
      - On player hit: intensity 0.008, duration 150ms
      - On heavy attacks (combo hit 3, boss slam): intensity 0.015, duration 250ms
      - Values read from config so sliders can adjust

   b. CAMERA_FLASH -- red-tinted overlay
      - On player damage: flash a red semi-transparent rectangle over the
        entire canvas, 30% opacity, fade out over 150ms
      - Creates a "blood flash" effect

   c. CAMERA_ZOOM_PUNCH -- temporary zoom
      - On combo hit 3 or kill: zoom camera to 1.1x over 50ms, then ease
        back to 1.0x over 200ms
      - Creates a punchy impact feel on big moments

   d. HIT_STOP -- frame freeze
      - On enemy death: pause the physics and all tweens for 60ms, then
        resume. This makes kills feel weighty.
      - On combo hit 3: 30ms hit stop (shorter than death)

5. SPRITE EFFECTS
   a. DAMAGE_FLASH -- white tint on hit
      - When enemy takes damage: set sprite tint to 0xFFFFFF for 80ms,
        then restore original color
      - When player takes damage: set sprite tint to 0xFF4444 for 100ms

   b. DODGE_AFTERIMAGE
      - At dodge start position, create a copy of the player sprite at
        50% opacity. Fade it to 0% over 250ms, then destroy.

   c. IMPACT_SQUASH
      - On hit, briefly scale the enemy sprite to 1.2x wide and 0.8x tall
        for 60ms, then tween back to normal over 100ms. This "squash and
        stretch" makes hits feel physical.

6. SOUND SYSTEM (Web Audio API -- no external audio files)
   Create procedural sound effects using the Web Audio API and
   OscillatorNode/noise buffers:

   a. ATTACK_WHOOSH -- filtered white noise burst
      - Duration: 80ms (hit 1), 100ms (hit 2), 150ms (hit 3)
      - Bandpass filter at 2000Hz (hit 1), 1500Hz (hit 2), 800Hz (hit 3)
      - Lower frequency for heavier hits = sounds deeper and more powerful
      - Envelope: sharp attack (5ms), quick decay

   b. HIT_THUD -- low frequency impact
      - Sine oscillator at 60Hz, duration 100ms
      - Sharp attack, quick decay envelope
      - Played simultaneously with the attack whoosh on confirmed hit
      - Louder for heavier hits

   c. DODGE_SWOOSH -- frequency sweep
      - Sine oscillator sweeping from 800Hz to 200Hz over 150ms
      - Very short, creates a "whooshing" movement feel
      - Low volume -- should be subtle

   d. DEATH_CRUNCH -- layered impact
      - White noise burst at 150ms (long) + sine at 40Hz for 200ms
      - Louder than normal hit, deeper, more satisfying
      - Played on enemy death alongside DEATH_BURST particles

   e. AMBIENT_DRONE -- continuous background
      - Very quiet sine wave at 55Hz with slow LFO (0.5Hz) modulating
        volume between 0.02 and 0.05
      - Creates subtle tension without being noticeable
      - Toggle on/off in panel

   Create an AudioContext lazily on first user interaction (click or keypress)
   to comply with browser autoplay policy.

7. TUNING PANEL
   Particles section:
   - Blood Splatter Count: range 2-20, default 8
   - Blood Splatter Speed: range 50-500, default 200
   - Dust Puff Count: range 1-10, default 4
   - Death Burst Count: range 5-40, default 20

   Screen Effects section:
   - Shake Intensity: range 0.001-0.03, step 0.001, default 0.01
   - Shake Duration: range 50-500, step 25, default 150
   - Flash Opacity: range 0.1-0.8, step 0.05, default 0.3
   - Zoom Punch Amount: range 1.0-1.3, step 0.02, default 1.1
   - Hit Stop Duration: range 0-150, step 10, default 60

   Sprite Effects section:
   - Damage Flash Duration: range 30-200, step 10, default 80
   - Squash Amount: range 1.0-1.5, step 0.05, default 1.2
   - Afterimage Opacity: range 0.2-0.8, step 0.05, default 0.5

   Sound section:
   - Master Volume: range 0-100, step 5, default 60
   - Whoosh Volume: range 0-100, step 5, default 50
   - Thud Volume: range 0-100, step 5, default 70
   - Ambient toggle checkbox

   "Kill All Juice" button: sets all effects to 0 / off. Lets you
   see how flat the game feels without juice, then turn it back on.
   "Max Juice" button: sets everything to maximum values.
   "Balanced" button: restores defaults.

TECHNICAL: Phaser 3 from CDN, Arcade physics, colored rectangles. All sound
uses Web Audio API directly (no Phaser sound manager, no external files).
Runs by opening index.html. Tuning panel communicates via window.vfxConfig.

💡Copy-paste ready

The sound system uses Web Audio API to generate procedural sounds from oscillators and noise buffers — no audio files to download or manage. This means the entire game, including sound, runs from a single HTML file. The sounds will be simple (synthesized bleeps and whooshes, not orchestral scores), but they communicate impact, which is all you need at the prototype stage. Real sound design comes later; right now you are proving that audio feedback matters.

What you get

After the AI finishes:

sound-vfx-lab/
  index.html

Play it

cd sound-vfx-lab
open index.html

Click anywhere on the game canvas first (this initializes the audio context — browser policy requires a user interaction before sound can play). Then start fighting. Hit the grunt with a three-hit combo. Watch the blood particles scatter, feel the screen shake on the heavy cleave, hear the whoosh deepen with each successive hit. Dodge through the ranged soldier’s projectile and hear the swoosh. Kill an enemy and feel the hit-stop freeze followed by the death burst.

Now click “Kill All Juice.” Fight the same enemies. Notice how hollow it feels. Every hit is silent, every death is quiet, every dodge is invisible. That flatness is what your combat prototype sounded like 30 minutes ago. Click “Balanced” to restore effects and feel the difference wash back in.

That difference is juice.

If something is off

Problem	Follow-up prompt
No sound plays at all	`The Web Audio API requires user interaction before creating an AudioContext. Add a click/keydown event listener on the document that creates the AudioContext on first interaction. Store it in window.audioCtx. All sound functions should check that audioCtx exists before playing. Also make sure the oscillator nodes are started with .start(0) and stopped with .stop(audioCtx.currentTime + duration).`
Particles don’t appear	`The particle emitters are not firing. Make sure you create a Phaser particle emitter manager with this.add.particles() and configure emitters with emitZone, speed, lifespan, quantity, and gravityY. Call emitter.explode(count, x, y) for burst effects (blood, death) and emitter.start() / emitter.stop() for continuous effects (energy trail).`
Screen shake is too violent	`The screen shake intensity values are too high. For Phaser camera shake, intensity should be between 0.002 and 0.02. Use this.cameras.main.shake(duration, intensity). Also make sure the tuning slider value is being read correctly -- if the slider goes to 0.03, check that the JavaScript is parsing it as a float, not a string.`
Hit-stop freezes the game permanently	`The hit-stop is not resuming. Use this.scene.physics.pause() to freeze physics and this.time.delayedCall(stopDuration, () => this.scene.physics.resume()) to resume after the stop duration. Make sure the delayed call is NOT affected by the physics pause -- Phaser's time events run independently of physics.`

Deep dive

Particles are communication, not decoration

Every particle effect in this lab serves a purpose. Blood splatter confirms your attack connected — without it, the player has to look at the health bar to know they dealt damage. Dust on landing grounds the character in the world — without it, jumping feels like the character is disconnected from the floor. The death burst is a reward — killing an enemy should feel good, and a shower of particles is your brain’s receipt that something meaningful happened.

Hit-stop is the most powerful tool in the box

Hit-stop (also called hit-freeze or hit-stun) is a 30-60 millisecond pause on impact. It is nearly imperceptible consciously, but it makes every hit feel like it has weight. Without hit-stop, a sword slash passes through an enemy at 60fps — one frame the blade is here, the next it has passed through. With hit-stop, the game freezes at the moment of impact. Your brain registers the collision. The attack feels like it HIT something rather than phased through it. This technique has been used in every major action game since Street Fighter II.

Sound validates what your eyes see

The attack whoosh tells your brain the slash happened even before the particles appear. The hit thud confirms contact. The dodge swoosh tells you the i-frames are active. Players in noise-canceling headphones will feel the sound effects physically. Sound arrives at the brain faster than visual processing — a 100ms sound cue makes your eyes “see” the particle effect as more impactful. This is not theory; it is psychoacoustics, and game audio designers have been exploiting it for decades.

🔍Why procedural audio for a prototype

Professional games use recorded and mastered audio files. You are using oscillators and noise buffers. That is fine. At the prototype stage, the question is not “does this sound good?” but “does having sound here make the game feel better?” The answer is always yes. Even a synthesized thud at 60Hz makes a hit feel more impactful than silence. When you move to production, you will replace these procedural sounds with real recordings. But you will know exactly where every sound trigger goes, what frequency range it needs, and how loud it should be — because you already tuned all of that in this lab.

Customize it

Add a combo hit counter with escalating juice

Add a visual combo counter that appears near the player and escalates its
effects with each successive hit. Hit 1: small "x1" text, minimal shake.
Hit 2: medium "x2" text, normal shake, normal particles. Hit 3: large "x3"
text in red with glow effect, heavy shake, double particles, zoom punch,
and hit stop. The combo counter text uses Phaser text with a style that
grows bolder with each hit. The text fades after 1 second if no new hit
lands. If the combo counter was already showing, the new hit resets the
fade timer. Add a "Combo Escalation" slider (1.0-3.0, default 1.5) that
multiplies all juice values by the combo count times the escalation factor.

Add a slow-motion kill cam

When the killing blow lands on the last enemy alive, trigger a 1.5-second
slow-motion sequence: game speed drops to 0.3x, camera smoothly zooms to
1.4x centered on the kill point, particles play at normal speed (so they
look dramatic in slow-mo), and then game speed ramps back to 1.0x over
0.5 seconds. Add a "Kill Cam" toggle checkbox in the panel and a "Slow-Mo
Speed" slider (0.1-0.5, default 0.3).

Add environmental particles

Add ambient environmental particles: slow-drifting red motes floating
upward across the scene (like embers or blood mist), subtle dust
particles near the ground that scatter when the player runs past. These
create atmosphere without affecting gameplay. Add sliders for ember count
(0-50, default 15) and ground dust density (0-30, default 10).

Try it yourself

Paste the prompt and open the lab in your browser.
Fight both enemies with juice at default settings. Pay attention to the three-hit combo — does each hit feel progressively more powerful?
Click “Kill All Juice” and fight again. Feel the difference. Write down three specific moments that felt worse without juice.
Click “Max Juice” and fight. This is the opposite extreme — too much feedback can be disorienting. Find the line between “impactful” and “chaotic” by adjusting individual sliders.
Mute your computer speakers and fight. Then unmute. Notice how much the synthesized sounds add. Sound is typically 30-50% of game feel.
Find your personal “balanced” settings — the amount of juice that makes your BloodRayne prototype feel right. Export the tuning values (they are in the shared config object).

The mechanics were built in Lessons 10-12. This lesson makes them sing. Rayne did not just fight — she fought with style. Now your game does too.

💡Your game has juice

Blood spatters when Rayne’s blade connects. The screen shakes when she takes damage. A whoosh accompanies every dodge. The enemy explodes in particles when it dies. These are not cosmetic upgrades — they are the layer that makes players lean forward in their chair. Next lesson: creating the visual identity that ties everything together.

What you'll learn