Class: Particle

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:139

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.

Example

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

Standard

Implements

• IParticle

Constructors

Constructor

> new Particle(options): Particle

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:259

Parameters

options

Texture<TextureSource<any>> | ParticleOptions

Returns

Particle

Properties

anchorX

> anchorX: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:171

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

Example

particle.anchorX = 0.5; // Center horizontally

Default

0

Implementation of

IParticle.anchorX

anchorY

> anchorY: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:181

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

Example

particle.anchorY = 0.5; // Center vertically

Default

0

Implementation of

IParticle.anchorY

color

> color: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:247

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

Example

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

Default

0xffffffff

Implementation of

IParticle.color

rotation

> rotation: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:234

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

Example

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

Default

0

Implementation of

IParticle.rotation

scaleX

> scaleX: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:212

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

Example

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

Default

1

Implementation of

IParticle.scaleX

scaleY

> scaleY: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:223

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

Example

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

Default

1

Implementation of

IParticle.scaleY

texture

> texture: Texture

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:256

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

Example

particle.texture = Texture.from('particle.png');

Implementation of

IParticle.texture

x

> x: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:191

The x-coordinate of the particle in world space.

Example

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

Default

0

Implementation of

IParticle.x

y

> y: number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:201

The y-coordinate of the particle in world space.

Example

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

Default

0

Implementation of

IParticle.y

defaultOptions

> static defaultOptions: Partial<ParticleOptions>

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:161

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

Example

// 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

See

• ParticleOptions For all available options
• Particle For the particle implementation

Accessors

alpha

Get Signature

> get alpha(): number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:291

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

Example

// 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
});

Default

1

See

• Particle#tint For controlling particle color
• Particle#color For the combined color and alpha value

Returns

number

Set Signature

> set alpha(value): void

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:292

Parameters

value

number

Returns

void

tint

Get Signature

> get tint(): number

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:326

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.

Example

// 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;

Default

0xffffff

See

• Particle#alpha For controlling transparency
• Particle#color For the combined color and alpha value
• Color For supported color formats

Returns

number

Set Signature

> set tint(value): void

Defined in: node_modules/pixi.js/lib/scene/particle-container/shared/Particle.d.ts:327

Parameters

value

ColorSource

Returns

void