custom-pixi-particles
v8.1.2
Published
custom pixi particles
Downloads
4,525
Maintainers
Readme
CustomPIXIParticles by @lukasz-okuniewicz
CustomPIXIParticles is a lightweight, high-performance library designed for creating and managing customizable particle effects in PIXI.js applications. It offers an intuitive API, flexible configuration options, and seamless compatibility with modern PIXI.js versions, making it an essential tool for developers looking to create stunning visual effects.
Support My Work
If you find CustomPIXIParticles useful and would like to support my work, you can buy me a coffee. Your contributions help me dedicate more time to improving this library and creating new features for the community. Thank you for your support! ☕💖
✨ Features
- Simple API: Effortlessly create particle emitters with minimal code.
- Highly Configurable: Adjust particle behavior, appearance, animation, and more.
- Performance Optimized: Handle thousands of particles with minimal performance overhead.
- PIXI.js Compatibility: Fully compatible with PIXI.js v8, PIXI.js v7, with legacy support for v5.x and v6.x.
- Real-Time Customization: Dynamically update textures, positions, configurations, and emitters on the fly.
🎮 Demo
Try it out here: CustomPIXIParticles Live Editor
🛠️ Installation
Install via npm:
npm install custom-pixi-particles
🚀 Quick Start
Import or Require
// ES6 Modules
import customPixiParticles from 'custom-pixi-particles'
// CommonJS
const customPixiParticles = require('custom-pixi-particles')
Create Particle Effects
// Define textures and emitter configuration
const textures = ['texture1.png', 'texture2.png']
const emitterConfig = {
// Your configuration object
}
// Initialize particle emitter
const particles = customPixiParticles.create({ textures, emitterConfig })
// Add emitter to the PIXI container
container.addChild(particles)
// Start the emitter
particles.play()
📖 API Reference
Initializes a particle emitter.
const particles = customPixiParticles.create({
textures: [String], // Array of particle textures
emitterConfig: Object, // Configuration object for the emitter
animatedSpriteZeroPad: Number, // Zero-padding for animated sprite names
animatedSpriteIndexToStart: Number, // Initial frame index for animated sprites
finishingTextures: [String], // Textures used for particle finishing
vertices: Boolean, // Use vertex mode for rendering
position: Boolean, // Allow position-based behavior
rotation: Boolean, // Allow rotation-based behavior
uvs: Boolean, // Apply UV mapping
tint: Boolean, // Apply tint to particles
maxParticles: Number, // Maximum particles allowed
maxFPS: Number, // Cap emitter update frequency
tickerSpeed: Number, // Speed of the PIXI ticker
})
Event Callbacks
Triggered when the particle animation completes.
particles.onComplete = () => {
console.log("Particle animation finished!")
}
Texture Management
Updates the particle emitter's textures.
particles.setTextures(['texture3.png', 'texture4.png'])
Configuration Updates
Dynamically update emitter configurations.
particles.updateConfig({ /* New configuration properties */ })
State Control
Starts or resumes the emitter.
particles.play()
Toggles the paused state.
particles.pause(isPaused)
Terminates the emitter and stops emission.
particles.stop()
Halts all emissions immediately.
particles.stopImmediately()
Resets the emitter to its initial state.
particles.resetEmitter()
Position Updates
Dynamically adjust the emitter's position.
particles.updatePosition({ x: 100, y: 200 })
Pool Management
Clears internal object pools to free memory.
particles.clearPool()
🖥️ Versions Compatibility
| PixiJS | CustomPIXIParticles | |-------------|---------------------| | v5.x - v6.x | v4.x | | v7.x | v7.x | | v8.x | v8.x |
🛠️ Advanced Editor
Easily design and fine-tune your particle effects with the CustomPIXIParticles Editor. 🔗 CustomPIXIParticles Live Editor
🤝 Contributing
Contributions, feature suggestions, and bug reports are welcome! Open an issue or submit a pull request on the GitHub repository.
With CustomPIXIParticles, you're not just building animations; you're crafting immersive experiences! 🌟