pixi.js
    Preparing search index...

    Class Particle

    Represents a single particle within a particle container. This class implements the IParticle interface, providing properties and methods to manage the particle's position, scale, rotation, color, and texture.

    The reason we use a particle over a sprite is that these are much lighter weight and we can create a lot of them without taking on the overhead of a full sprite.

    const particle = new Particle({
      texture,
      x: 100,
      y: 100,
      scaleX: 0.5,
      scaleY: 0.5,
      rotation: Math.PI / 2,
      color: 0xff0000,
    });

    Implements

    Index

    Constructors

    constructor

    Properties

    anchorX anchorY color rotation scaleX scaleY texture x y defaultOptions

    Accessors

    alpha tint

    Constructors

    Properties

    anchorX: number

    The x-coordinate of the anchor point (0-1). Controls the origin point for rotation and scaling.

    particle.anchorX = 0.5; // Center horizontally

    0
    anchorY: number

    The y-coordinate of the anchor point (0-1). Controls the origin point for rotation and scaling.

    particle.anchorY = 0.5; // Center vertically

    0
    color: number

    The color of the particle as a 32-bit RGBA value. Combines tint and alpha into a single value.

    // Usually set via tint and alpha properties
    particle.tint = 0xff0000; // Red
    particle.alpha = 0.5; // Half transparent
    console.log(particle.color); // Combined RGBA value

    0xffffffff
    rotation: number

    The rotation of the particle in radians. Positive values rotate clockwise.

    particle.rotation = Math.PI; // 180 degrees
    particle.rotation += 0.1; // Rotate slowly clockwise

    0
    scaleX: number

    The horizontal scale factor of the particle. Values greater than 1 increase size, less than 1 decrease size.

    particle.scaleX = 2; // Double width
    particle.scaleX *= 0.9; // Shrink over time

    1
    scaleY: number

    The vertical scale factor of the particle. Values greater than 1 increase size, less than 1 decrease size.

    particle.scaleY = 2; // Double height
    particle.scaleY *= 0.9; // Shrink over time

    1
    texture: Texture

    The texture used to render this particle. All particles in a container should share the same base texture.

    particle.texture = Texture.from('particle.png');
    x: number

    The x-coordinate of the particle in world space.

    particle.x = 100; // Move right
    particle.x += Math.sin(time) * 10; // Oscillate horizontally

    0
    y: number

    The y-coordinate of the particle in world space.

    particle.y = 100; // Move down
    particle.y += Math.cos(time) * 10; // Oscillate vertically

    0
    defaultOptions: Partial<ParticleOptions> = ...

    Default options used when creating new particles. These values are applied when specific options aren't provided in the constructor.

    // Override defaults globally
    Particle.defaultOptions = {
        ...Particle.defaultOptions,
        anchorX: 0.5,
        anchorY: 0.5,
        alpha: 0.8
    };

    // New particles use modified defaults
    const centeredParticle = new Particle(texture);
    console.log(centeredParticle.anchorX); // 0.5
    console.log(centeredParticle.alpha); // 0.8

    Accessors

    • get alpha(): number

      The transparency of the particle. Values range from 0 (fully transparent) to 1 (fully opaque). Values outside this range are clamped.

      Returns number

      // Create a semi-transparent particle
      const particle = new Particle({
          texture: Texture.from('particle.png'),
          alpha: 0.5
      });

      // Fade out
      particle.alpha *= 0.9;

      // Fade in
      particle.alpha = Math.min(particle.alpha + 0.1, 1);

      // Values are clamped to valid range
      particle.alpha = 1.5; // Becomes 1.0
      particle.alpha = -0.5; // Becomes 0.0

      // Animate transparency
      app.ticker.add((delta) => {
          const time = performance.now() / 1000;
          particle.alpha = 0.5 + Math.sin(time) * 0.5; // Pulse between 0-1
      });

      1
    • set alpha(value: number): void

      Parameters

      • value: number

      Returns void

    • get tint(): number

      The tint color of the particle. Can be set using hex numbers or CSS color strings. The tint is multiplied with the texture color to create the final particle color.

      Returns number

      // Create a red particle
      const particle = new Particle({
          texture: Texture.from('particle.png'),
          tint: 0xff0000
      });

      // Use CSS color strings
      particle.tint = '#00ff00';  // Green
      particle.tint = 'blue';     // Blue

      // Animate tint color
      app.ticker.add(() => {
          const time = performance.now() / 1000;

          // Cycle through hues
          const hue = (time * 50) % 360;
          particle.tint = `hsl(${hue}, 100%, 50%)`;
      });

      // Reset to white (no tint)
      particle.tint = 0xffffff;

      0xffffff
    • set tint(value: ColorSource): void

      Parameters

      Returns void

    Settings

    Member Visibility

    On This Page

    Constructors
    Properties
    Accessors