particle-emitter icon indicating copy to clipboard operation
particle-emitter copied to clipboard

can not use editor export json file

Open kawais opened this issue 2 years ago • 4 comments

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();

`

kawais avatar Sep 29 '22 12:09 kawais

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.

andrewstart avatar Sep 29 '22 15:09 andrewstart

How to get textures or urls to textures , I met the same question, and I can not understand how to get the second parameter?

GuanTina avatar Oct 13 '22 06:10 GuanTina

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.

andrewstart avatar Oct 13 '22 14:10 andrewstart

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:

  1. Scroll down on the particle editor window until you see the "Particle Images" section:
image
  1. 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.

  2. 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);

thegoldenmule avatar Feb 14 '24 15:02 thegoldenmule