Particle and Effect System for Pixi.js
npm install @siri4/revolt-fx!logo
Check out the samples
The system has already been stress tested in games like Battleboats.io and Jumbled.io
Fork the editor on Github
``sh`
npm install @siri4/revolt-fx
`js`
import { FX } from "@siri4/revolt-fx/lib";
const fx = new FX()
or via script tag
`js`
`js`
const fx = new revolt.FX()
Using PIXI Loader (Example)
`js
//Create a RevoltFX instance
const fx = new revolt.FX(); //loaded via the script tag
//Load the assets using PIXI loader...
PIXI.loader
.add('fx_settings', 'assets/default-bundle.json')
.add('fx_spritesheet', 'assets/revoltfx-spritesheet.json')
.add('example_spritesheet', 'assets/rfx-examples.json')
.load(function (loader, resources) {
//Init the bundle
fx.initBundle(resources.fx_settings.data);
app.ticker.add(function () {
//Update the RevoltFX instance
fx.update();
});
});
`
Using FX.loadBundleFiles (Example)
`js
//Create a RevoltFX instance
const fx = new revolt.FX(); //loaded via the script tag
const rfxBundleSettings = 'assets/default-bundle.json';
const rfxSpritesheet = 'assets/revoltfx-spritesheet.json';
const additionalAssets = ['assets/rfx-examples.json'];
//Load bundle files and the additional example spritesheet
fx.loadBundleFiles(rfxBundleSettings, rfxSpritesheet, null, additionalAssets).then(function (data) {
app.ticker.add(function () {
//Update the RevoltFX instance
fx.update();
});
}).catch(function (err) {
console.log('Error', err);
});
`
Using FX.loadBundleZip (Example)
You can pass a JSZip instance to the loadBundleZip method to load the bundle zip file exported by the editor.
`js
//Create a RevoltFX instance
const fx = new revolt.FX(); //loaded via the script tag
//Create a JSZip instance and pass it to the "loadBundleZip" method
const zip = new JSZip();
fx.loadBundleZip('assets/default-bundle.zip', zip, ['assets/rfx-examples.json']).then(function (data) {
app.ticker.add(function () {
//Update the RevoltFX instance
fx.update();
});
}).catch(function (err) {
console.log('Error', err);
});
`
`js
//Get the emitter
const emitter = fx.getParticleEmitter('plasma-corona');
//Inititialize it with the target PIXI container
emitter.init(displayContainer);
`
You can also change the global scale of an emitter instance
`js
//Get the emitter
const emitter = fx.getParticleEmitter('plasma-corona');
//Inititialize it with the target PIXI container and a scale of 2
emitter.init(displayContainer, true, 2);
`
Pause an emitter
`js`
emitter.paused = true;
Stop an emitter to be recycled. Pass true (default) to the method, if the system shall wait until all particles have died, before recycling.
`js`
emitter.stop();
Set the x/y position and rotation
`js`
emitter.x = 100;
emitter.y = 100;
emitter.rotation = Math.PI;
Set a target, so that the emitter will automatically adopt the target's position and rotation
`js`
emitter.target = displayObject;
Set a target offset, so that the emitter will automatically offset its position
`js`
emitter.targetOffet = 50;
`js
//Get the effect sequence
const sequence = fx.getEffectSequence('top-big-explosion');
//Inititialize it with the target PIXI container
sequence.init(displayContainer);
`
Set delay, autostart and scale
`js
//Get the effect sequence
const sequence = fx.getEffectSequence('top-big-explosion');
const delay = 0.5;
const autostart = true;
const scale = 1.5;
sequence.init(displayContainer, delay, autostart, scale);
`
Set the x/y position and rotation
`js`
sequence.init = 100;
sequence.init = 100;
sequence.init = Math.PI;
#### ParticleEmitter
`js`
emitter.on.started.add(emitter => { });
emitter.on.exhausted.add(emitter => { });
emitter.on.completed.add(emitter => { });
emitter.on.particleUpdated.add(particle => { });
emitter.on.particleSpawned.add(particle => { });
emitter.on.particleBounced.add(particle => { });
emitter.on.particleDied.add(particle => { });
Usage (Example)
`js
emitter.on.particleSpawned.add(particle => {
console.log('Particle spawned:', particle);
});
emitter.on.completed.addOnce(function(emitter) {
console.log('Done');
});
`
#### Particle
`js`
particle.on.bounced(particle => { });
particle.on.updated(particle => { });
particle.on.died(particle => { });
Usage
`js
emitter.on.particleSpawned.add(particle => {
//Register for an update signal for that particle
particle.on.updated.add(particle => {
//Do something with the particle
if (particle.x > 200 && particle.time >= 0.5) {
particle.stop();
}
});
//Register for a died signal for that particle
particle.on.died.add(particle => {
console.log('Particle', particle, 'died');
});
});
`
#### EffectSequence
`js`
sequence.on.started(sequence => { });
sequence.on.exhausted(sequence => { });
sequence.on.completed(sequence => { });
sequence.on.effectSpawned((effectType, effect) => { });
sequence.on.triggerActivated(triggerValue => { });
Usage (Example)
`js
sequence.on.effectSpawned.add((type, effect) => {
console.log('Effect spawned:', type, effect);
});
sequence.on.triggerActivated.add(triggerValue => {
console.log('Trigger:', triggerValue);
});
`
#### Update
Call the update method every frame with the ticker's delta value (optional)
`js`
app.ticker.add(function (delta) {
//Update the RevoltFX instance
fx.update(delta);
});
#### "Add" BlendMode artifacts with WebGL renderer####
If you encounter black artifacts on transparent particle areas which are using the "Add" blendmode (e.g. on mobile), try to hack the blendmode settings of the WebGL renderer instance:
`js`
const renderer = app.renderer;
const gl = renderer.gl;
renderer.state.blendModes[PIXI.BLEND_MODES.ADD] = [gl.ONE, gl.ONE];
`sh`
npm install -g grunt-cli
Clone the repository and to compile the Typescript sources and create the distribution version run
`sh``
npm install
npm run dist