### Example Behavior Implementation Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example demonstrating how to implement the IEmitterBehavior interface to create a custom particle emitter behavior. ```APIDOC ## Example Behavior ### Description Example implementation of a custom behavior. ### Class Definition ```typescript class MyBehavior implements IEmitterBehavior { public static type = 'myBehavior'; public order = BehaviorOrder.Normal; constructor(config: any) { } initParticles(first: Particle): void { } updateParticle(particle: Particle, deltaSec: number): void { } } ``` ``` -------------------------------- ### ValueStep Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md An example demonstrating the creation of a ValueStep array for numeric values. ```typescript const steps: ValueStep[] = [ { value: 0, time: 0 }, { value: 1, time: 1 } ]; ``` -------------------------------- ### Configure Controlled Emission Start Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Set whether the emitter starts enabled. This example starts the emitter disabled, allowing it to be enabled later via `emitter.emit = true`. ```typescript const emitter = new Emitter(container, { emit: false, // Start disabled ...config }); // Later, when needed: emitter.emit = true; ``` -------------------------------- ### Particle Emitter Configuration Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md This is a complete example of an EmitterConfigV3 object, demonstrating various settings for particle lifetime, spawning, emission control, spawn location, global easing, and visual/movement behaviors. ```typescript const config: EmitterConfigV3 = { // Particle lifetime lifetime: { min: 0.5, max: 1.5 }, // Spawning frequency: 0.008, // ~125 particles/sec particlesPerWave: 1, // One at a time spawnChance: 1, // Always spawn maxParticles: 1000, emitterLifetime: -1, // Forever // Emission control emit: true, autoUpdate: true, addAtBack: false, // Spawn location pos: { x: 0, y: 0 }, // Global easing ease: (t) => t * t, // Visual and movement behaviors behaviors: [ // Initial spawn position { type: 'spawnShape', config: { type: 'torus', data: { x: 0, y: 0, radius: 10, innerRadius: 0 } } }, // Movement { type: 'moveSpeed', config: { speed: { list: [ { value: 200, time: 0 }, { value: 100, time: 1 } ] }, minMult: 0.8 } }, // Rotation { type: 'rotationStatic', config: { min: 0, max: 360 } }, // Transparency fade { type: 'alpha', config: { alpha: { list: [ { value: 1, time: 0 }, { value: 0, time: 1 } ] } } }, // Size reduction { type: 'scale', config: { scale: { list: [ { value: 1, time: 0 }, { value: 0.3, time: 1 } ] }, minMult: 0.5 } }, // Color shift { type: 'color', config: { color: { list: [ { value: 'ff0000', time: 0 }, { value: 'ffff00', time: 1 } ] } } }, // Texture { type: 'textureSingle', config: { texture: PIXI.Texture.from('particle.png') } }, // Blend mode { type: 'blendMode', config: { blendMode: 'add' } } ] }; const emitter = new Emitter(container, config); ``` -------------------------------- ### BehaviorEntry Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example of a BehaviorEntry configuration for an 'alpha' behavior, defining how particle transparency changes over its lifetime. ```typescript { type: 'alpha', config: { alpha: { list: [ { value: 1, time: 0 }, { value: 0, time: 1 } ] } } } ``` -------------------------------- ### EmitterConfigV3 Example Configuration Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example demonstrating how to define an EmitterConfigV3 object. This configuration sets particle lifetime, spawn frequency, maximum particles, spawn position, and includes a basic alpha behavior. ```typescript const config: EmitterConfigV3 = { lifetime: { min: 0.5, max: 1.5 }, frequency: 0.008, maxParticles: 1000, pos: { x: 0, y: 0 }, behaviors: [ { type: 'alpha', config: { /* ... */ } } ] }; ``` -------------------------------- ### ValueList Example - With Easing Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Example of a ValueList using a custom quadratic easing function to modify the interpolation curve. ```typescript const scaleEased: ValueList = { list: [ { value: 0.5, time: 0 }, { value: 1.5, time: 1 } ], ease: (t) => t * t }; ``` -------------------------------- ### Behavior Execution Order Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/behaviors.md Demonstrates configuring behaviors with specific order properties to control their execution sequence. ```typescript const config = { behaviors: [ // Spawn first - set initial position and direction { type: 'spawnShape', config: { /* ... */ } }, // Then initialize movement { type: 'moveSpeed', config: { /* ... */ } }, // Then apply visual effects { type: 'alpha', config: { /* ... */ } }, { type: 'scale', config: { /* ... */ } } ] }; ``` -------------------------------- ### Install PixiJS Particle Emitter Source: https://github.com/pixijs-userland/particle-emitter/blob/master/README.md Install the PixiJS Particle Emitter package using NPM. This command is used to add the library to your project dependencies. ```bash npm install @pixi/particle-emitter ``` -------------------------------- ### ValueList Example - Smooth Interpolation Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Example of a ValueList configured for smooth alpha fading from 1 to 0 over time. ```typescript const alphaFade: ValueList = { list: [ { value: 1, time: 0 }, { value: 0, time: 1 } ], isStepped: false }; ``` -------------------------------- ### Pixi V6 IIFE Setup Source: https://github.com/pixijs-userland/particle-emitter/blob/master/test/pixi-v6-iife/index.html This snippet shows the basic structure for initializing PixiJS V6 using an IIFE. It ensures the code runs immediately upon script loading. ```javascript (function () { // PixiJS V6 code goes here console.log('PixiJS V6 IIFE loaded'); })(); ``` -------------------------------- ### ValueList Color Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example of a ValueList configuration for a color property, showing interpolation from red to blue over its lifetime. ```typescript { list: [ { value: 'ff0000', time: 0 }, { value: '0000ff', time: 1 } ] } ``` -------------------------------- ### ValueList Example - Stepped Values Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Example of a ValueList with stepped values for color, causing abrupt changes rather than smooth fades. ```typescript const colorFlash: ValueList = { list: [ { value: 'ffffff', time: 0 }, { value: 'ff0000', time: 0.5 }, { value: 'ffffff', time: 1 } ], isStepped: true }; ``` -------------------------------- ### ValueList Numeric Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example of a ValueList configuration for a numeric property, showing interpolation from 100 to 0 over its lifetime. ```typescript { list: [ { value: 100, time: 0 }, { value: 0, time: 1 } ] } ``` -------------------------------- ### Manage Emitter State and Properties Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/emitter.md Examples demonstrating how to check the current particle count, stop spawning new particles while allowing existing ones to finish, enable automatic updates via the PIXI ticker, and change the parent container to which particles are added. ```typescript // Check particle count console.log(`Active particles: ${emitter.particleCount}`); // Stop spawning but let existing particles finish emitter.emit = false; // Enable automatic updates emitter.autoUpdate = true; // Change container emitter.parent = newContainer; ``` -------------------------------- ### Behavior Data Flow Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/particle.md Demonstrates the typical interaction pattern between behaviors and particles during the init, update, and recycle phases of the particle lifecycle. ```typescript // Behaviors interact with particles like this: const behavior = emitter.getBehavior('alpha'); if (behavior) { // Init phase behavior.initParticles(firstParticle); // Update phase (per frame) behavior.updateParticle(particle, deltaTime); // Recycle phase behavior.recycleParticle(particle, true); } ``` -------------------------------- ### Custom Behavior Implementation Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md Example of a custom behavior class 'MyBehavior' implementing the IEmitterBehavior interface. It includes static type definition and order. ```typescript class MyBehavior implements IEmitterBehavior { public static type = 'myBehavior'; public order = BehaviorOrder.Normal; constructor(config: any) { } initParticles(first: Particle): void { } updateParticle(particle: Particle, deltaSec: number): void { } } ``` -------------------------------- ### Configure Maximum Particles Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Set a hard cap on simultaneous active particles. This example limits to 500 particles and shows the resulting equilibrium. ```typescript { maxParticles: 500, frequency: 0.01, lifetime: { min: 1, max: 2 } } // Max 500 particles, spawning 100/sec, living 1-2 seconds // Reaches equilibrium at ~100-200 particles ``` -------------------------------- ### Convert Degrees to Radians Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/particle-utils.md Demonstrates how to use the DEG_TO_RADS constant to convert degrees to radians and apply it to a point rotation. ```typescript const degrees = 45; const radians = degrees * ParticleUtils.DEG_TO_RADS; ParticleUtils.rotatePoint(radians, point); ``` -------------------------------- ### Quadratic Ease-In Function Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md An example of a simple easing function that creates a quadratic acceleration curve. ```typescript const easeIn = (t: number) => t * t; ``` -------------------------------- ### BasicTweenable Interface Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md A legacy interface for defining start and end values, maintained for compatibility with older configuration formats. ```typescript interface BasicTweenable { start: T; end: T; } ``` -------------------------------- ### Create PropertyNode List from Legacy Format Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Utilize the createList factory method with the legacy 'start' and 'end' properties to create a simple two-node linked list for interpolation. ```typescript const nodes = PropertyNode.createList({ start: 100, end: 50 }); ``` -------------------------------- ### Initial Spawn Position Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Specifies the starting position for particle spawns relative to the emitter's container origin. ```typescript pos: { x: number, y: number } = { x: 0, y: 0 } ``` -------------------------------- ### Create PropertyNode List from ValueList Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Use the createList factory method to generate a linked list of PropertyNodes from a 'list' configuration. This example uses numeric values and specifies non-stepped interpolation. ```typescript const nodes = PropertyNode.createList({ list: [ { value: 100, time: 0 }, { value: 200, time: 0.5 }, { value: 50, time: 1 } ], isStepped: false }); ``` -------------------------------- ### Configure Spawn Chance Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Set the probability of spawning a particle on each opportunity. This example creates a sputtering flame effect with a 70% spawn chance. ```typescript { frequency: 0.01, spawnChance: 0.7 // 70% spawn chance } ``` -------------------------------- ### Initialize Emitter with Configuration Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/emitter.md Demonstrates how to create and configure a new particle emitter instance. Requires a PIXI Container for particle display and an EmitterConfigV3 object. ```typescript import { Emitter } from '@pixi/particle-emitter'; const container = new PIXI.Container(); const emitter = new Emitter(container, { lifetime: { min: 0.5, max: 1.0 }, frequency: 0.008, maxParticles: 1000, pos: { x: 0, y: 0 }, behaviors: [ { type: 'alpha', config: { alpha: { list: [ { value: 1, time: 0 }, { value: 0, time: 1 } ] } } } ] }); ``` -------------------------------- ### Interpolate Value with Simple List Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Get an interpolated value from a PropertyList. This example uses a simple two-node list for linear interpolation. The 'interpolate' method is automatically selected based on the list's structure. ```typescript const list = new PropertyList(false); list.reset(PropertyNode.createList({ list: [ { value: 0, time: 0 }, { value: 1, time: 1 } ] })); // Get interpolated value at 50% through particle life const value = list.interpolate(0.5); // Returns ~0.5 ``` -------------------------------- ### Emitter.init Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/emitter.md Sets up or reconfigures the emitter with a new configuration. Cleans up any existing active particles before reinitializing. ```APIDOC ## Method init ### Description Sets up or reconfigures the emitter with a new configuration. Cleans up any existing active particles before reinitializing. ### Parameters #### Path Parameters - **config** (EmitterConfigV3) - Yes - Complete emitter configuration. ### Request Example ```typescript emitter.init({ lifetime: { min: 1, max: 2 }, frequency: 0.01, maxParticles: 500, pos: { x: 100, y: 100 }, behaviors: [] }); ``` ``` -------------------------------- ### RandNumber Usage Example Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example of using RandNumber to define a variable particle lifetime between 0.5 and 2.0 seconds. ```typescript lifetime: { min: 0.5, // 0.5 second minimum max: 2.0 // 2.0 second maximum } ``` -------------------------------- ### Initialize Particle Emitter with Animated Bubbles Source: https://github.com/pixijs-userland/particle-emitter/blob/master/docs/examples/animatedBubbles.html Sets up a particle emitter with specific configurations for animated bubbles. This includes defining particle lifetime, emitter properties, and behaviors such as static speed, scaling, rotation, and animated textures. Use this for creating dynamic visual effects. ```javascript new ParticleExample( // The image to use { spritesheet: "images/pop_anim.json", }, // Emitter configuration, edit this to change the look // of the emitter { "lifetime": { "min": 2, "max": 3 }, "frequency": 0.016, "emitterLifetime": 0, "maxParticles": 500, "addAtBack": false, "pos": { "x": 0, "y": 0 }, "behaviors": [ { "type": "moveSpeedStatic", "config": { "min": 150, "max": 150 } }, { "type": "scale", "config": { "scale": { "list": [ { "time": 0, "value": 0.25 }, { "time": 1, "value": 0.5 } ] }, "minMult": 0.5 } }, { "type": "rotation", "config": { "accel": 0, "minSpeed": 0, "maxSpeed": 50, "minStart": 260, "maxStart": 280 } }, { "type": "animatedSingle", "config": { "anim": { "framerate": -1, "textures": [ { "texture": "Bubbles99.png", "count": 40 }, { "texture": "Pop1.png", "count": 1 }, { "texture": "Pop2.png", "count": 1 }, { "texture": "Pop3.png", "count": 1 } ] } } }, { "type": "spawnShape", "config": { "type": "rect", "data": { "x": -450, "y": 200, "w": 900, "h": 0 } } } ] } ); ``` -------------------------------- ### Emitter Class Reference Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/GENERATION_REPORT.txt Documentation for the Emitter class, covering its constructor, instance methods, static methods, properties, and lifecycle. ```APIDOC ## Emitter Class ### Description Provides the core functionality for creating and managing particle systems. ### Constructor - **new Emitter(particleClass, behaviors, options)**: Initializes a new Emitter instance. - `particleClass` (Particle): The class to use for creating particles. - `behaviors` (Array): An array of particle behaviors to apply. - `options` (EmitterOptions): Configuration options for the emitter. ### Instance Methods - **init()**: Initializes the emitter and its particles. - **getBehavior(constructor)**: Retrieves a specific behavior instance. - **fillPool()**: Fills the particle pool. - **recycle(particle)**: Recycles a particle. - **rotate(emitter)**: Rotates the emitter. - ... (12 methods total) ### Static Methods - **registerBehavior(constructor)**: Registers a new custom behavior. ### Instance Properties - **particleConstructor**: The constructor used for particles. - **behaviors**: The array of behaviors applied to particles. - **emit**: Boolean indicating if the emitter is active. - ... (12 properties total) ### Lifecycle Documentation Details on the particle lifecycle management within the emitter. ``` -------------------------------- ### Constructor Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/linked-list-container.md Creates a new linked-list-based container. Inherits all Container properties. ```APIDOC ## Constructor ### Description Creates a new linked-list-based container. Inherits all Container properties. ### Example ```typescript import { LinkedListContainer } from '@pixi/particle-emitter'; const container = new LinkedListContainer(); stage.addChild(container); ``` ``` -------------------------------- ### Initialize and Configure Particle Emitter Source: https://github.com/pixijs-userland/particle-emitter/blob/master/README.md This snippet shows how to create a new particle emitter instance, attach it to a PixiJS container, and define its visual and behavioral properties. Ensure the PIXI namespace is correctly referenced, especially when using module imports. ```javascript var emitter = new PIXI.particles.Emitter( // The PIXI.Container to put the emitter in // if using blend modes, it's important to put this // on top of a bitmap, and not use the root stage Container container, // Emitter configuration, edit this to change the look // of the emitter { lifetime: { min: 0.5, max: 0.5 }, frequency: 0.008, spawnChance: 1, particlesPerWave: 1, emitterLifetime: 0.31, maxParticles: 1000, pos: { x: 0, y: 0 }, addAtBack: false, behaviors: [ { type: 'alpha', config: { alpha: { list: [ { value: 0.8, time: 0 }, { value: 0.1, time: 1 } ], }, } }, { type: 'scale', config: { scale: { list: [ { value: 1, time: 0 }, { value: 0.3, time: 1 } ], }, } }, { type: 'color', config: { color: { list: [ { value: "fb1010", time: 0 }, { value: "f5b830", time: 1 } ], }, } }, { type: 'moveSpeed', config: { speed: { list: [ { value: 200, time: 0 }, { value: 100, time: 1 } ], isStepped: false }, } }, { type: 'rotationStatic', config: { min: 0, max: 360 } }, { type: 'spawnShape', config: { type: 'torus', data: { x: 0, y: 0, radius: 10 } } }, { type: 'textureSingle', config: { texture: PIXI.Texture.from('image.jpg') } } ], } ); ``` -------------------------------- ### Basic Particle Emitter Configuration Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/README.md This snippet shows how to initialize and configure a particle emitter with basic behaviors like alpha, scale, and movement speed. Ensure the Emitter class is imported from '@pixi/particle-emitter'. ```typescript import { Emitter } from '@pixi/particle-emitter'; const emitter = new Emitter(container, { lifetime: { min: 0.5, max: 1.5 }, frequency: 0.01, maxParticles: 1000, pos: { x: 0, y: 0 }, behaviors: [ { type: 'alpha', config: { alpha: { list: [ { value: 1, time: 0 }, { value: 0, time: 1 } ] } } }, { type: 'scale', config: { scale: { list: [{ value: 1, time: 0 }, { value: 0.3, time: 1 }] } } }, { type: 'moveSpeed', config: { speed: { list: [{ value: 200, time: 0 }, { value: 100, time: 1 }] } } } ] }); emitter.autoUpdate = true; emitter.emit = true; ``` -------------------------------- ### getChildAt Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/linked-list-container.md Gets child at index. ```APIDOC ## getChildAt ### Description Gets child at index. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Method `getChildAt` ### Endpoint N/A (Method) ### Parameters #### Parameters - **index** (`number`) - Description: Position. ### Throws Error if index out of bounds. ### Example ```typescript const child = container.getChildAt(0); ``` ``` -------------------------------- ### getChildIndex Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/linked-list-container.md Gets the index position of a child. ```APIDOC ## getChildIndex ### Description Gets the index position of a child. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Method `getChildIndex` ### Endpoint N/A (Method) ### Parameters #### Parameters - **child** (`DisplayObject`) - Description: The child to find. ### Returns Index position. ### Throws Error if child not in container. ### Example ```typescript const idx = container.getChildIndex(sprite); ``` ``` -------------------------------- ### Quadratic Ease-Out Function Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md An example of a simple easing function that creates a quadratic deceleration curve. ```typescript const easeOut = (t: number) => 1 - ((1 - t) * (1 - t)); ``` -------------------------------- ### Registering Behaviors Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/behaviors.md Demonstrates how to register custom behaviors with the Emitter, either on module load or dynamically. ```APIDOC ## Behavior Registration ### Description Behaviors can be registered with the `Emitter` class. This typically happens on module load, but custom behaviors can also be registered dynamically using the `Emitter.registerBehavior()` method. ### Example ```typescript import { Emitter } from '@pixi/particle-emitter'; import { AlphaBehavior } from '@pixi/particle-emitter'; // AlphaBehavior is already registered in the library. // To register a custom behavior, you would use: // Emitter.registerBehavior(YourCustomBehavior); // Example of already registered behavior (for context): Emitter.registerBehavior(AlphaBehavior); ``` ``` -------------------------------- ### Create PropertyNode Instances Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Demonstrates how to create individual PropertyNode instances for particle property interpolation. Nodes are linked using the 'next' property. ```typescript const node1 = new PropertyNode(0.8, 0); // Start at 80% alpha const node2 = new PropertyNode(0, 1); // End transparent node1.next = node2; ``` -------------------------------- ### Custom Easing Function Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Apply a custom easing function to all interpolations. This example uses an exponential ease-in. ```typescript { ease: (time) => { // Exponential ease-in return Math.pow(2, 10 * (time - 1)); } } ``` -------------------------------- ### Main Exports Import Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/index.md Import the main Emitter and Particle classes, or all behaviors and utilities as namespaces. ```typescript // Main exports import { Emitter, Particle } from '@pixi/particle-emitter'; import * as behaviors from '@pixi/particle-emitter'; import * as ParticleUtils from '@pixi/particle-emitter'; ``` -------------------------------- ### Get Child at Index from LinkedListContainer Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/linked-list-container.md Retrieves the child object located at a specific index within the container. ```typescript const child = container.getChildAt(0); ``` -------------------------------- ### Create Particle Instance Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/particle.md Demonstrates the creation of a Particle instance. This is typically handled internally by the emitter's pooling system. ```typescript const particle = new Particle(emitter); ``` -------------------------------- ### Emitter Constructor Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/emitter.md Initializes a new particle emitter. It requires a PIXI Container to parent the particles and an optional configuration object to define particle behaviors and spawn patterns. ```APIDOC ## Constructor Emitter ### Description Initializes a new particle emitter. It requires a PIXI Container to parent the particles and an optional configuration object to define particle behaviors and spawn patterns. ### Parameters #### Path Parameters - **particleParent** (Container) - Yes - The PIXI Container to add particles to. Critical for display hierarchy. - **config** (EmitterConfigV3) - No - Configuration object defining particle behavior, spawn patterns, and lifetimes. If omitted, emitter can be configured later via `init()`. ### Request Example ```typescript import { Emitter } from '@pixi/particle-emitter'; const container = new PIXI.Container(); const emitter = new Emitter(container, { lifetime: { min: 0.5, max: 1.0 }, frequency: 0.008, maxParticles: 1000, pos: { x: 0, y: 0 }, behaviors: [ { type: 'alpha', config: { alpha: { list: [ { value: 1, time: 0 }, { value: 0, time: 1 } ] } } } ] }); ``` ``` -------------------------------- ### Ease-in-out Cubic Function Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example of a SimpleEase function implementing an ease-in-out cubic curve. Used for time-based interpolation. ```typescript const easeInOutCubic: SimpleEase = (t) => { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }; ``` -------------------------------- ### Ease-out Quadratic Function Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example of a SimpleEase function implementing an ease-out quadratic curve. Used for time-based interpolation. ```typescript const easeOutQuad: SimpleEase = (t) => 1 - (1 - t) * (1 - t); ``` -------------------------------- ### Creating and Registering a Custom Behavior Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/behaviors.md Shows how to define a custom particle emitter behavior, including initialization and update logic, and how to register it for use in configurations. ```typescript import { IEmitterBehavior, BehaviorOrder } from '@pixi/particle-emitter'; import { Particle } from '@pixi/particle-emitter'; class MyCustomBehavior implements IEmitterBehavior { public static type = 'myCustom'; public order = BehaviorOrder.Normal; constructor(config: { someValue: number }) { this.someValue = config.someValue; } initParticles(first: Particle): void { let particle = first; while (particle) { particle.config.customData = this.someValue; particle = particle.next; } } updateParticle(particle: Particle, deltaSec: number): void { // Update each particle particle.config.customData -= deltaSec; } } // Register behavior import { Emitter } from '@pixi/particle-emitter'; Emitter.registerBehavior(MyCustomBehavior); // Use in config { type: 'myCustom', config: { someValue: 10 } } ``` -------------------------------- ### Registering a Behavior Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/behaviors.md Demonstrates how to register a behavior with the Emitter. Ensure necessary imports are included. ```typescript import { Emitter } from '@pixi/particle-emitter'; import { AlphaBehavior } from '@pixi/particle-emitter'; // Already registered in @pixi/particle-emitter/index.ts Emitter.registerBehavior(AlphaBehavior); ``` -------------------------------- ### Ease-in Quadratic Function Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/types.md An example of a SimpleEase function implementing an ease-in quadratic curve. Used for time-based interpolation. ```typescript const easeInQuad: SimpleEase = (t) => t * t; ``` -------------------------------- ### Particle Emitter Configuration and Update Hook Source: https://github.com/pixijs-userland/particle-emitter/blob/master/docs/examples/particleContainerPerformance.html Sets up a particle emitter with various behaviors and includes an update hook to dynamically adjust the emission rate based on performance. This is useful for maintaining a target frame rate. ```javascript const STARTING_FREQUENCY = 0.0001; // See js/ParticleExample.js for actual setup const example = new ParticleExample( // The image to use ["images/CartoonSmoke.png"], // Emitter configuration, edit this to change the look // of the emitter { "lifetime": { "min": 0.5, "max": 0.7 }, "frequency": 0.0001, "emitterLifetime": -1, "maxParticles": 100000, "addAtBack": false, "pos": { "x": 0, "y": 0 }, "behaviors": [ { "type": "alpha", "config": { "alpha": { "list": [ { "time": 0, "value": 1 }, { "time": 1, "value": 0 } ] } } }, { "type": "moveSpeed", "config": { "speed": { "list": [ { "time": 0, "value": 600 }, { "time": 1, "value": 200 } ] } } }, { "type": "scale", "config": { "scale": { "list": [ { "time": 0, "value": 0.1 }, { "time": 1, "value": 1.5 } ], "minMult": 1 } } }, { "type": "color", "config": { "color": { "list": [ { "time": 0, "value": "ffffff" }, { "time": 1, "value": "ff9999" } ] } } }, { "type": "rotation", "config": { "accel": 0, "minSpeed": 0, "maxSpeed": 20, "minStart": 0, "maxStart": 360 } }, { "type": "textureRandom", "config": { "textures": [ "images/CartoonSmoke.png" ] } }, { "type": "spawnPoint", "config": {} } ] }, true ); const emitRate = document.getElementById('emitRate'); let totalElapsed = 0; let frameTimes = []; example.updateHook = (elapsed) => { if (!example.emitter) return; frameTimes.push(elapsed); totalElapsed += elapsed; if (totalElapsed > 1000) { const avg = frameTimes.reduce((s, v) => s + v / frameTimes.length, 0); totalElapsed = 0; frameTimes.length = 0; // if framerate is still high, increase frequency if (1000 / avg >= 30) { example.emitter.frequency *= 0.75; emitRate.innerHTML = `Emitting ${Math.round(1 / example.emitter.frequency)} particles per second (lifetime ${example.emitter.minLifetime} - ${example.emitter.maxLifetime} seconds)`; } } }; // reset settings on container change example.containerHook = () => { if (!example.emitter) return; totalElapsed = 0; frameTimes.length = 0; example.emitter.frequency = STARTING_FREQUENCY; emitRate.innerHTML = `Emitting ${Math.round(1 / example.emitter.frequency)} particles per second (lifetime ${example.emitter.minLifetime} - ${example.emitter.maxLifetime} seconds)`; }; ``` -------------------------------- ### Get Child Index in LinkedListContainer Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/linked-list-container.md Finds and returns the index position of a given child object within the container. ```typescript const idx = container.getChildIndex(sprite); ``` -------------------------------- ### Create PropertyNode List with Color Values Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Demonstrates using the createList factory method to generate a linked list of PropertyNodes for color interpolation. Values are provided as hex strings. ```typescript const colorNodes = PropertyNode.createList({ list: [ { value: 'ff0000', time: 0 }, // Red { value: '0000ff', time: 1 } // Blue ] }); ``` -------------------------------- ### Import Patterns for Particle Emitter Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/MANIFEST.md Demonstrates various ways to import the Emitter class and its associated modules. Use these imports to access the particle emitter functionality in your project. ```typescript import { Emitter } from '@pixi/particle-emitter'; import * as behaviors from '@pixi/particle-emitter'; import * as ParticleUtils from '@pixi/particle-emitter'; ``` -------------------------------- ### Get Behavior Instance Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/emitter.md Retrieves an active behavior instance from the emitter by its type string. Returns null if the behavior is not found. ```typescript const alphaBehavior = emitter.getBehavior('alpha'); if (alphaBehavior) { // Behavior is present } ``` -------------------------------- ### Burst Spawn Behavior Configuration Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/behaviors.md Spawns particles in a circular burst pattern. Configure start angle, spacing, and distance for the burst. ```typescript { type: 'spawnBurst', config: { start: 0, // Starting angle (degrees) spacing: 30, // Angle between particles (degrees) distance: 0 // Spawn radius } } ``` -------------------------------- ### Shapes and Utilities Import Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/index.md Import functions for spawn shapes and utility functions like hexToRGB and rotatePoint. ```typescript // Shapes and utilities import { spawnShapes } from '@pixi/particle-emitter/behaviors'; import { hexToRGB, rotatePoint } from '@pixi/particle-emitter'; ``` -------------------------------- ### Initialize and Use LinkedListContainer with Emitter Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/linked-list-container.md Demonstrates how to create a LinkedListContainer, add it to the stage, and pass it to a PixiJS Emitter for optimized particle management. ```typescript import { Emitter, LinkedListContainer } from '@pixi/particle-emitter'; // Create linked-list container const particleContainer = new LinkedListContainer(); stage.addChild(particleContainer); // Pass to emitter const emitter = new Emitter(particleContainer, config); // Now particles use linked-list structure for efficient rendering ``` -------------------------------- ### Basic Emitter Configuration Structure Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/MANIFEST.md Illustrates the fundamental structure of an emitter configuration object. This includes lifetime, frequency, particle count, position, and behaviors. ```typescript { lifetime: { min, max }, frequency: number, maxParticles: number, pos: { x, y }, behaviors: [{ type, config }] } ``` -------------------------------- ### Particle Lifetime Configuration Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Sets the random range for particle lifespan in seconds. Each particle gets a random lifetime within this min/max range. ```typescript lifetime: RandNumber = { min: 0.5, max: 2.0 } ``` -------------------------------- ### Configure Emitter Lifetime for One-Time Emission Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Set the duration for emitting particles in seconds. This example configures the emitter to emit for 2 seconds and then stop automatically. ```typescript { emitterLifetime: 2.0, emit: true } // Emits for 2 seconds, then stops automatically ``` -------------------------------- ### Require Other Files for Module Source: https://github.com/pixijs-userland/particle-emitter/blob/master/test/pixi-v6-module/index.html Illustrates how to import additional JavaScript files required for the module's execution, such as a renderer script. ```javascript require('./renderer.js') ``` -------------------------------- ### Configure Manual Updates Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Disable automatic updates, requiring manual calls to `emitter.update(delta)` each frame. This example shows how to implement manual updates using `requestAnimationFrame`. ```typescript const emitter = new Emitter(container, { autoUpdate: false // Manual control }); let lastTime = Date.now(); function animate() { const now = Date.now(); emitter.update((now - lastTime) * 0.001); // Convert to seconds lastTime = now; requestAnimationFrame(animate); } animate(); ``` -------------------------------- ### PropertyList.interpolate Method Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/property-list.md Gets the interpolated value at a given point in time (lerp). The interpolation method is automatically selected based on the list's structure (simple, complex, or stepped). ```APIDOC ## Method: PropertyList.interpolate ### Description Returns the interpolated value at a given point in time (lerp). The interpolation method is automatically selected based on the list's structure. ### Method Signature ```typescript interpolate(lerp: number): number ``` ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters - **lerp** (number) - Required - A value between 0 and 1 representing the point in time through the particle's life. ### Returns - `number` - The interpolated value. ### Example - Simple Interpolation ```typescript const list = new PropertyList(false); list.reset(PropertyNode.createList({ list: [ { value: 0, time: 0 }, { value: 1, time: 1 } ] })); // Get interpolated value at 50% through particle life const value = list.interpolate(0.5); // Returns ~0.5 ``` ### Example - With Easing ```typescript const list = new PropertyList(false); list.reset(PropertyNode.createList({ list: [ { value: 0, time: 0 }, { value: 1, time: 1 } ], ease: (t) => t * t // Quadratic in })); const eased = list.interpolate(0.5); // Returns 0.25 (quadratic eased) ``` ### Example - Colors ```typescript const colorList = new PropertyList(true); colorList.reset(PropertyNode.createList({ list: [ { value: 'ff0000', time: 0 }, // Red { value: '0000ff', time: 1 } // Blue ] })); const mixedColor = colorList.interpolate(0.5); // Returns a purple color string ``` ``` -------------------------------- ### Upgrade Particle Emitter Configuration from v1/v2 to v3 Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md This snippet demonstrates how to use the `upgradeConfig` utility to convert older particle emitter configurations (v1 or v2) to the current v3 format. Ensure you have the necessary textures available. ```typescript import { upgradeConfig } from '@pixi/particle-emitter'; const oldConfig = { /* v1 or v2 format */ }; const newConfig = upgradeConfig(oldConfig, textures); const emitter = new Emitter(container, newConfig); ``` -------------------------------- ### Basic Particle Emitter Configuration Source: https://github.com/pixijs-userland/particle-emitter/blob/master/docs/examples/flame.html This snippet shows a basic configuration for a particle emitter using PixiJS. It defines particle lifetime, emission frequency, maximum particles, and visual behaviors like alpha, speed, scale, color, rotation, texture, and spawn shape. ```javascript new ParticleExample( // The image to use ["images/particle.png", "images/Fire.png"], // Emitter configuration, edit this to change the look // of the emitter { "lifetime": { "min": 0.1, "max": 0.75 }, "frequency": 0.001, "emitterLifetime": 0, "maxParticles": 1000, "addAtBack": false, "pos": { "x": 0, "y": 0 }, "behaviors": [ { "type": "alpha", "config": { "alpha": { "list": [ { "time": 0, "value": 0.62 }, { "time": 1, "value": 0 } ] } } }, { "type": "moveSpeedStatic", "config": { "min": 500, "max": 500 } }, { "type": "scale", "config": { "scale": { "list": [ { "time": 0, "value": 0.25 }, { "time": 1, "value": 0.75 } ], "minMult": 1 } } }, { "type": "color", "config": { "color": { "list": [ { "time": 0, "value": "fff191" }, { "time": 1, "value": "ff622c" } ] } } }, { "type": "rotation", "config": { "accel": 0, "minSpeed": 50, "maxSpeed": 50, "minStart": 265, "maxStart": 275 } }, { "type": "textureRandom", "config": { "textures": [ "images/particle.png", "images/Fire.png" ] } }, { "type": "spawnShape", "config": { "type": "torus", "data": { "x": 0, "y": 0, "radius": 10, "innerRadius": 0, "affectRotation": false } } } ] } ); ``` -------------------------------- ### Get Local Bounds of PixiJS Container Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/linked-list-container.md Use getLocalBounds to retrieve the bounding box of the container and its children. Optionally, provide a rectangle to store the bounds or skip updating child transforms. ```typescript const bounds = container.getLocalBounds(); console.log(`Width: ${bounds.width}, Height: ${bounds.height}`); ``` -------------------------------- ### Emitter Constructor Signature Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/MANIFEST.md Shows the signature for creating a new Emitter instance. It requires a container and an emitter configuration object. ```typescript new Emitter(container: Container, config: EmitterConfigV3) ``` -------------------------------- ### One-Time Burst Particle Emitter Configuration Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/configuration.md Configure a single, intense burst of particles. This setup uses a short emitter lifetime, a high particles per wave count, and a moderate frequency. ```typescript { emitterLifetime: 0.2, frequency: 0.002, particlesPerWave: 50, maxParticles: 1000 } ``` -------------------------------- ### Reconfigure Emitter with init() Source: https://github.com/pixijs-userland/particle-emitter/blob/master/_autodocs/api-reference/emitter.md Updates an existing emitter's configuration. This method cleans up active particles before reinitializing with the new settings. Ensure a complete EmitterConfigV3 object is provided. ```typescript emitter.init({ lifetime: { min: 1, max: 2 }, frequency: 0.01, maxParticles: 500, pos: { x: 100, y: 100 }, behaviors: [] }); ```