### Install Dependencies and Build Project Source: https://github.com/bma73/revolt-fx/blob/master/README.md Provides the command-line instructions to install project dependencies using npm and to build the Typescript sources to create the distribution version of the project. ```bash npm install npm run build ``` -------------------------------- ### Install RevoltFX with NPM Source: https://github.com/bma73/revolt-fx/blob/master/README.md Installs the RevoltFX library using NPM. It's recommended to use `--legacy-peer-deps` if encountering peer dependency issues. ```sh npm install revolt-fx --legacy-peer-deps ``` -------------------------------- ### Initialize RevoltFX with NPM Source: https://github.com/bma73/revolt-fx/blob/master/README.md Initializes a new RevoltFX instance after installing via NPM. This creates the main FX object used for managing effects and emitters. ```js import {FX} from 'revolt-fx' const fx = new FX() ``` -------------------------------- ### Handle EffectSequence Events in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Shows how to attach event listeners to an EffectSequence for events such as 'started', 'exhausted', 'completed', 'effectSpawned', and 'triggerActivated'. Includes examples of logging event data. ```javascript sequence.on.started(sequence => { }); sequence.on.exhausted(sequence => { }); sequence.on.completed(sequence => { }); sequence.on.effectSpawned((effectType, effect) => { }); sequence.on.triggerActivated(triggerValue => { }); ``` ```javascript sequence.on.effectSpawned.add((type, effect) => { console.log('Effect spawned:', type, effect); }); sequence.on.triggerActivated.add(triggerValue => { console.log('Trigger:', triggerValue); }); ``` -------------------------------- ### Get and Initialize a Particle Emitter Source: https://github.com/bma73/revolt-fx/blob/master/README.md Retrieves a particle emitter by its name from the initialized RevoltFX system and initializes it with a target PIXI container. ```js //Get the emitter const emitter = fx.getParticleEmitter('plasma-corona'); //Inititialize it with the target PIXI container emitter.init(displayContainer); ``` -------------------------------- ### Handle ParticleEmitter Events in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Illustrates how to add event listeners to a ParticleEmitter for various events like 'started', 'exhausted', 'completed', and particle-specific events. It shows basic event handling and using `addOnce` for a one-time trigger. ```javascript 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 => { }); ``` ```javascript emitter.on.particleSpawned.add(particle => { console.log('Particle spawned:', particle); }); emitter.on.completed.addOnce(function(emitter) { console.log('Done'); }); ``` -------------------------------- ### Handle Particle Events in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Demonstrates how to register event listeners for individual particles, including 'bounced', 'updated', and 'died' events. The example shows how to interact with particle properties and control their behavior. ```javascript particle.on.bounced(particle => { }); particle.on.updated(particle => { }); particle.on.died(particle => { }); ``` ```javascript 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'); }); }); ``` -------------------------------- ### Initialize Effect Sequence in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Demonstrates how to retrieve an effect sequence by its name and initialize it with a PIXI container. It also shows how to set optional parameters like delay, autostart, and scale. ```javascript const sequence = fx.getEffectSequence('top-big-explosion'); sequence.init(displayContainer); ``` ```javascript const sequence = fx.getEffectSequence('top-big-explosion'); const delay = 0.5; const autostart = true; const scale = 1.5; sequence.init(displayContainer, delay, autostart, scale); ``` -------------------------------- ### Initialize RevoltFX with Script Tag Source: https://github.com/bma73/revolt-fx/blob/master/README.md Initializes a new RevoltFX instance when RevoltFX is loaded via a script tag. Assumes the `revolt` global namespace is available. ```js const fx = new revolt.FX() ``` -------------------------------- ### Load Assets and Initialize Bundle with PIXI Loader Source: https://github.com/bma73/revolt-fx/blob/master/README.md Loads necessary assets for RevoltFX using PIXI Assets loader and initializes the bundle. It then adds an update function to the PixiJS ticker. ```js //Create a RevoltFX instance const fx = new revolt.FX(); //loaded via the script tag //Load the assets using PIXI Assets loader PIXI.Assets.add({ alias: 'fx_settings', src: 'assets/default-bundle.json' }); PIXI.Assets.add({ alias: 'fx_spritesheet', src: 'assets/revoltfx-spritesheet.json' }); PIXI.Assets.add({ alias: 'example_spritesheet', src: 'assets/rfx-examples.json' }); PIXI.Assets.load(['fx_settings', 'fx_spritesheet', 'example_spritesheet']).then(function (data) { //Init the bundle fx.initBundle(data.fx_settings); app.ticker.add(function () { //Update the RevoltFX instance fx.update(); }); }); ``` -------------------------------- ### Load Bundle Files and Assets with FX.loadBundleFiles Source: https://github.com/bma73/revolt-fx/blob/master/README.md Loads RevoltFX bundle files and additional assets using the `FX.loadBundleFiles` method. This is an alternative to using PIXI Assets loader. ```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); }); ``` -------------------------------- ### Initialize Particle Emitter with Scale Source: https://github.com/bma73/revolt-fx/blob/master/README.md Initializes a particle emitter with a specified global scale. A scale of 2 means the emitter will be twice its defined size. ```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); ``` -------------------------------- ### Include RevoltFX via Script Tag (PixiJS 8.x) Source: https://github.com/bma73/revolt-fx/blob/master/README.md Includes RevoltFX and PixiJS 8.x using script tags. This method is suitable for direct HTML integration. ```html // Pixi 8.x ``` -------------------------------- ### Include RevoltFX via Script Tag (PixiJS 7.3.x) Source: https://github.com/bma73/revolt-fx/blob/master/README.md Includes RevoltFX and PixiJS 7.3.x using script tags. This method is suitable for direct HTML integration. ```html // Pixi 7.3.x ``` -------------------------------- ### Update RevoltFX Instance in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Demonstrates how to update the RevoltFX instance every frame by calling its `update` method within the application's ticker loop. This is crucial for animations and time-based effects. ```javascript app.ticker.add(function (delta) { //Update the RevoltFX instance fx.update(delta); }); ``` -------------------------------- ### Configure Webpack Alias for PixiJS in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Provides instructions for configuring Webpack to use aliasing for 'pixi.js'. This ensures that only a single instance of PixiJS is bundled, preventing potential conflicts in larger projects. The configuration is added to `webpack.config.js`. ```javascript const path = require('path'); module.exports = { // ... other configurations ... resolve: { alias: { 'pixi.js': path.resolve(__dirname, 'node_modules/pixi.js') } } }; ``` -------------------------------- ### Set Position and Rotation for Effect Sequence in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Shows how to set the x/y position and rotation properties of an effect sequence. Note: The provided code snippet contains a potential error in assigning values to 'sequence.init'. ```javascript sequence.init = 100; sequence.init = 100; sequence.init = Math.PI; ``` -------------------------------- ### Configure Parcel Alias for PixiJS in package.json Source: https://github.com/bma73/revolt-fx/blob/master/README.md Explains how to configure Parcel to alias 'pixi.js' by adding an 'alias' section to the `package.json` file. This practice helps in managing dependencies and ensuring a single PixiJS instance. ```json { // ... other package.json settings ... "alias": { "pixi.js": "./node_modules/pixi.js" } } ``` -------------------------------- ### Configure Rollup Alias for PixiJS in JavaScript Source: https://github.com/bma73/revolt-fx/blob/master/README.md Details how to set up Rollup to alias 'pixi.js' using the `@rollup/plugin-alias` plugin. This is essential for ensuring a single PixiJS instance is bundled. The configuration is added to `rollup.config.js`. ```javascript import alias from '@rollup/plugin-alias'; import path from 'path'; export default { // ... other configurations ... plugins: [ // ... other plugins ... alias({ entries: [ { find: 'pixi.js', replacement: path.resolve(__dirname, 'node_modules/pixi.js') } ] }) ] }; ``` -------------------------------- ### Set Emitter Target Source: https://github.com/bma73/revolt-fx/blob/master/README.md Sets a target display object for the emitter. The emitter will automatically follow the target's position and rotation. ```js emitter.target = displayObject; ``` -------------------------------- ### Set Emitter Target Offset Source: https://github.com/bma73/revolt-fx/blob/master/README.md Sets a target offset for the emitter. The emitter's position will be offset relative to its target's position. ```js emitter.targetOffet = 50; ``` -------------------------------- ### Set Emitter Position and Rotation Source: https://github.com/bma73/revolt-fx/blob/master/README.md Manually sets the x, y position and rotation of a particle emitter. Rotation is in radians. ```js emitter.x = 100; emitter.y = 100; emitter.rotation = Math.PI; ``` -------------------------------- ### Stop and Recycle Particle Emitter Source: https://github.com/bma73/revolt-fx/blob/master/README.md Stops a particle emitter and recycles it. By default, it waits for all existing particles to die before recycling. ```js emitter.stop(); ``` -------------------------------- ### Pause Particle Emitter Source: https://github.com/bma73/revolt-fx/blob/master/README.md Pauses the emission of particles from a specific emitter. Setting the `paused` property to `true` stops new particles from being created. ```js emitter.paused = true; ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.