ta-phaser-particle-design

name	ta-phaser-particle-design
description	Designs particle systems for visual effects. Use proactively when creating particle effects, emitters, or visual polish.
category	techartist

Phaser Particle Design

"Create memorable visual moments with thoughtfully designed particle effects."

When to Use This Skill

Use when:

• Designing signature visual effects
• Creating atmosphere and mood
• Building feedback systems
• Adding visual polish
• Implementing weather and ambient effects

Design Principles

1. Purposeful - Every particle effect should communicate something
2. Performant - Limit particle count for target platform
3. Readable - Effects shouldn't obscure gameplay
4. Satisfying - Good feel through tuning and iteration

Effect Types

Category	Examples	Key Properties
Impact	Hit, explosion	Speed variance, size decay
Ambient	Dust, fog, rain	Slow, subtle, continuous
Magic	Spells, aura	Additive blend, glow
UI	Confetti, shine	Quick, responsive
Weather	Rain, snow, storm	Direction, density

Progressive Guide

Level 1: Impact Effects

// Hit spark effect
const createHitSpark = (
  scene: Phaser.Scene,
  x: number,
  y: number,
  color = 0xffff00,
) => {
  const particles = scene.add.particles(x, y, "spark", {
    speed: { min: 50, max: 200 },
    angle: { min: 0, max: 360 },
    scale: { start: 0.8, end: 0 },
    alpha: { start: 1, end: 0 },
    lifespan: 300,
    quantity: 8,
    blendMode: "ADD",
    emitting: false,
    onEmit: (particle: any) => {
      particle.tint = color;
    },
  });

  particles.explode(8, x, y);

  // Auto-cleanup
  scene.time.delayedCall(500,  particles.());
};


scene..(,  {
  (scene, enemy., enemy., );
});

Level 2: Ambient Effects

// Atmospheric dust motes
const createDustMotes = (scene: Phaser.Scene) => {
  const dust = scene.add.particles(0, 0, "dust", {
    x: { min: 0, max: scene.scale.width },
    y: { min: 0, max: scene.scale.height },
    speed: { min: 2, max: 10 },
    angle: { min: 200, max: 340 },
    scale: { start: 0.1, end: 0.3 },
    alpha: { start: 0, end: 0.3, ease: "Quad.easeOut" },
    lifespan: { min: 3000, max: 6000 },
    frequency: 200,
    blendMode: "ADD",
  });

  dust.setDepth(-); 
   dust;
};


  = () => {
   glow = scene..(x, y, , {
    : ,
    : { : , : , :  },
    : { : , : , :  },
    : ,
    : ,
    : ,
    : {
      : ,
      :  ..(, , ),
    },
  });

   glow;
};

Level 3: Magic and Ability Effects

// Magic circle cast effect
const createMagicCircle = (
  scene: Phaser.Scene,
  x: number,
  y: number,
  color = 0x8800ff,
) => {
  const circle = scene.add.particles(x, y, "spark", {
    speed: 100,
    angle: { min: 0, max: 360 },
    scale: { start: 0.2, end: 0.8, ease: "Back.easeOut" },
    alpha: { start: 1, end: 0 },
    lifespan: 600,
    quantity: 30,
    blendMode: "ADD",
    emitting: false,
    onEmit: (particle: any) => {
      particle.tint = color;
      // Spiral motion
      const angle = particle.angle;
      particle.velocityX = Math.cos(angle) * ;
      particle. = .(angle) * ;
    },
  });

  circle.(, x, y);

  
   aura = scene..(x, y, , {
    : ,
    : { : , :  },
    : { : , :  },
    : ,
    : ,
    : ,
    : {
      : ,
      :  ..(, , ),
      : ,
    },
    :  {
      particle. = color;
    },
  });

  scene..(,  aura.());

   { circle, aura };
};


  = () => {
   trail = scene..(, , , {
    : ,
    : { : , :  },
    : { : , :  },
    : ,
    : ,
    : ,
  });

  trail.(projectile);

   trail;
};

Level 4: Weather Systems

class WeatherSystem {
  private rain?: Phaser.GameObjects.Particles.ParticleEmitter;
  private lightning?: Phaser.Time.TimerEvent;
  private clouds?: Phaser.GameObjects.TileSprite;

  constructor(private scene: Phaser.Scene) {}

  setRain(intensity: "light" | "medium" | "heavy" = "medium") {
    this.clearWeather();

    const config = {
      light: { frequency: 100, speedY: 300 },
      medium: { frequency: 50, speedY: 400 },
      heavy: { frequency: 20, speedY: 500 },
    };

    const cfg = config[intensity];

    this.rain = this.scene..(, , , {
      : { : , : ... },
      : -,
      : cfg.,
      : -,
      : { : , :  },
      : { : , :  },
      : ,
      : cfg.,
      : {
        : ,
        :  ..(, , ..., ),
      },
    });

    
    ....();
  }

  () {
    .();

    
    . = ...({
      : ..(, ),
      : .,
      : ,
      : ,
    });

    
    . = ...(
      ... / ,
      ... / ,
      ...,
      ...,
      ,
    );
    ..();
    ..();
  }

   () {
    
    ....(, , , );

    
     delay = ..(, );
    ...(delay,  {
      
    });
  }

  () {
    .();

     config = {
      : { : , :  },
      : { : , :  },
      : { : , :  },
    };

     cfg = config[intensity];

    . = ...(, , , {
      : { : , : ... },
      : -,
      : cfg.,
      : { : -, :  },
      : { : , :  },
      : { : , :  },
      : ,
      : cfg.,
      : {
        : ,
        :  ..(, , ..., ),
      },
    });

    
    ....();
  }

  () {
     (.) {
      ..();
      . = ;
    }
     (.) {
      ..();
      . = ;
    }
     (.) {
      ..();
      . = ;
    }
    ....();
  }
}

Level 5: Particle Effect Library

class ParticleLibrary {
  private effects: Map<
    string,
    (
      scene: Phaser.Scene,
      x: number,
      y: number,
      options?: any,
    ) => Phaser.GameObjects.Particles.ParticleEmitter
  >;

  constructor() {
    this.registerDefaults();
  }

  private registerDefaults() {
    // Explosion
    this.register("explosion", (scene, x, y, options = {}) => {
      const emitter = scene.add.particles(x, y, "explosion", {
        speed: { min: 100, max: 300 * (options.intensity || 1) },
        angle: { min: 0, max: 360 },
        scale: { start: 0.2, end:  },
        : { : , :  },
        : ,
        :  * (options. || ),
        : ,
        : ,
      });

      emitter.(emitter.., x, y);
       emitter;
    });

    
    .(,  {
       scene..(x, y, , {
        : { : , :  },
        : { : , :  },
        : { : , :  },
        : { : , :  },
        : ,
        : ,
        : ,
      });
    });

    
    .(,  {
       scene..(x, y, , {
        : ,
        : { : , : , :  },
        : { : , :  },
        : ,
        : ,
        : ,
        : {
          : ,
          :  ..(, , ),
          : ,
        },
        :  {
          particle. = ;
        },
      });
    });

    
    .(,  {
       burst = scene..(x, y, , {
        : { : , :  },
        : { : , :  },
        : { : , :  },
        : { : , :  },
        : ,
        : ,
        : ,
        : ,
        :  {
           colors = [, , , ];
          particle. = ...(colors);
        },
      });

      burst.(, x, y);

      
       light = scene..(x, y, , , );
      light.();
      light.(..);

      scene..({
        : light,
        : ,
        : ,
        : ,
        : ,
        :  light.(),
      });

       burst;
    });
  }

  () {
    ..(name, effect);
  }

  () {
     effect = ..(name);
     (effect) {
       (scene, x, y, options);
    }
     ;
  }
}


 particles =  ();
particles.(, , .., .., {
  : ,
  : ,
});

Tuning Guidelines

Performance Targets

Platform	Max Particles	Blend Modes
Desktop	500-1000	Full support
Mobile (high)	200-400	Careful with ADD
Mobile (low)	50-150	Avoid ADD

Feel Tuning

Effect Property	Quick Effect	Slow Effect
Lifespan	200-400ms	800-1500ms
Speed	200-400	20-80
Scale Decay	Fast	Slow
Frequency	20-50ms	100-300ms

Anti-Patterns

❌ DON'T:

• Overuse additive blending on mobile
• Create too many simultaneous emitters
• Use large textures for small particles
• Forget to destroy temporary emitters
• Make particles too bright (washes out)
• Use effects that obscure gameplay

✅ DO:

• Profile on target device
• Pool emitters when possible
• Use small particle textures
• Clean up emitters properly
• Balance brightness and readability | Keep gameplay visible

Checklist

• Effect purpose is clear
• Particle count appropriate for platform
• Lifespan tuned for feel
• Blend mode chosen correctly
• Emitters cleaned up
• Effects don't obscure gameplay
• Performance tested on target device

Reference

• Particle Emitter — Emitter API
• Particle Manager — Manager API