particle-emitter
particle-emitter copied to clipboard
can not use editor export json file
json is download from editor, but occur error: Cannot use 'in' operator to search for 'framerate' in undefined pixi version: 6.5.4 particle-emitter version: 5.0.7 ` var json={ "alpha": { "start": 1, "end": 0 }, "scale": { "start": 0.1, "end": 0.01, "minimumScaleMultiplier": 1 }, "color": { "start": "#e4f9ff", "end": "#3fcbff" }, "speed": { "start": 200, "end": 50, "minimumSpeedMultiplier": 1 }, "acceleration": { "x": 0, "y": 0 }, "maxSpeed": 0, "startRotation": { "min": 0, "max": 360 }, "noRotation": false, "rotationSpeed": { "min": 0, "max": 0 }, "lifetime": { "min": 0.2, "max": 0.8 }, "blendMode": "normal", "frequency": 0.001, "emitterLifetime": -1, "maxParticles": 500, "pos": { "x": 0, "y": 0 }, "addAtBack": false, "spawnType": "circle", "spawnCircle": { "x": 0, "y": 0, "r": 0 } }
var emitterContainer = new PIXI.Container() var emitter = new particles.Emitter( emitterContainer, particles.upgradeConfig(json, []) ); app.stage.addChild(emitterContainer)
// Calculate the current time var elapsed = Date.now();
// Update function every frame var update = function () {
// Update the next frame
requestAnimationFrame(update);
var now = Date.now();
// The emitter requires the elapsed
// number of seconds since the last update
emitter.update((now - elapsed) * 0.001);
elapsed = now;
};
// Start emitting emitter.emit = true;
// Start the update update();
`
The second parameter for upgradeConfig()
must be an array of textures or urls to textures - it is throwing the error because you have an empty array there.
How to get textures or urls to textures , I met the same question, and I can not understand how to get the second parameter?
Because texture usage and urls are specific to your build process and hosting, there is no way for the editor to give you a url - you have to generate and provide that yourself.
Incredibly unhelpful answer. This particle library has to be one of the worst documented projects I've ever tried to use. Good lord.
Anyway, @GuanTina to answer your actual question instead of acting like you're an idiot:
- Scroll down on the particle editor window until you see the "Particle Images" section:
-
Download that image and serve it so that your application can download it. For instance, I'm using NextJS, so I can stick this image file in my
public/
directory. -
When you call
upgradeConfig
, you need to pass the path to this particle. Full example here:
const config = upgradeConfig(
{
"alpha": {
"start": 0.29,
"end": 0
},
"scale": {
"start": 0.5,
"end": 20,
"minimumScaleMultiplier": 1
},
"color": {
"start": "#ffffff",
"end": "#ffffff"
},
"speed": {
"start": 2000,
"end": 3000,
"minimumSpeedMultiplier": 1
},
"acceleration": {
"x": 0,
"y": 0
},
"maxSpeed": 0,
"startRotation": {
"min": 65,
"max": 65
},
"noRotation": false,
"rotationSpeed": {
"min": 0,
"max": 0
},
"lifetime": {
"min": 0.81,
"max": 0.81
},
"blendMode": "screen",
"frequency": 0.01,
"emitterLifetime": -1,
"maxParticles": 1000,
"pos": {
"x": 0,
"y": 0
},
"addAtBack": false,
"spawnType": "rect",
"spawnRect": {
"x": -600,
"y": -460,
"w": 900,
"h": 20
}
}
), ["/particle.png"]);
const emitter = new Emitter(
myParticleContainer,
config);