Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

Scaffolding for Particle Emitter

KamiFightingSpirit

By KamiFightingSpirit,
in Pixi.js

 Share

Recommended Posts

KamiFightingSpirit Newbie

KamiFightingSpirit

Posted
Posted (edited)

I am trying to setup a Pixi particle emitter using the pixi-particle dependency. Does someone have an example scaffolding file I could use? The examples that are listed are unfortunately only for v4 and I have not been able to accurately update them to get them to work.

 

I would want something that I could drop in an particle object from here: https://pixijs.io/pixi-particles-editor/ and then play around with to see how everything is working.

Edited by KamiFightingSpirit
Link to comment
Share on other sites
KamiFightingSpirit Newbie

KamiFightingSpirit

Posted
  • Author
Posted (edited)

Just tested again to make sure I hadn't missed something still not working unfortunately.

This is the scaffolding file that I have: https://github.com/pixijs/pixi-particles/blob/master/docs/examples/js/ParticleExample.js

Funnily enough, the examples already do read "PIXI.ParticleContainer" now.

 

The errors that I am getting when loading this in are as follows (yes, I have already corrected them but it is still not rendering anything but the framerate in upper left corner): 

PixiJS Deprecation Warning: PIXI.loader instance has moved to PIXI.Loader.sharedDeprecated since v5.0.0
pixi.js:4413 PixiJS Deprecation Warning: PIXI.Texture.fromImage method is deprecated, use PIXI.Texture.fromDeprecated since v5.0.0

 

And just so you can see, this is my emitter object configuration file: 

<!DOCTYPE html>
<html class="no-js">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>Particle Container Performance Tester</title>
    <meta name="description" content="smoke blast" />
    <link rel="stylesheet" href="css/main.css" />

    <!-- Required dependencies -->
    <script src="./js/pixi.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pixi-particles.js"></script>
    <!-- Example scaffolding -->
    <script src="./js/ParticleExample.js"></script>
  </head>
  <body>
    <div id="framerate"></div>
    <div id="particleCount"></div>
    <div id="instructions">Click Anywhere</div>
    <canvas id="stage" width="400" height="400"></canvas>
    <script>
      // See js/ParticleExample.js for actual setup
      new ParticleExample(
        // The image to use
        ["images/CartoonSmoke.png"],

        // Emitter configuration, edit this to change the look
        // of the emitter
        {
          alpha: {
            start: 0,
            end: 1
          },
          scale: {
            start: 0.01,
            end: 0.1,
            minimumScaleMultiplier: 0.001
          },
          color: {
            start: "#ffffff",
            end: "#bbe1f0"
          },
          speed: {
            start: 100,
            end: 200,
            minimumSpeedMultiplier: 1
          },
          acceleration: {
            x: 0,
            y: 1000
          },
          maxSpeed: 0,
          startRotation: {
            min: 0,
            max: 0
          },
          noRotation: false,
          rotationSpeed: {
            min: 0,
            max: 0
          },
          lifetime: {
            min: 0.5,
            max: 1
          },
          blendMode: "color_burn",
          frequency: 0.001,
          emitterLifetime: -1,
          maxParticles: 1000,
          pos: {
            x: 0,
            y: 0
          },
          addAtBack: false,
          spawnType: "ring",
          spawnCircle: {
            x: 0,
            y: 0,
            r: 100,
            minR: 50
          }
        },
        null,
        true
      );
    </script>
  </body>
</html>

 

Finally, here is my edited scaffolding file, I went through the PIXI docs to do my best to make sure the editing was accurate: 

(function(window) {
	/**
	 *  Basic example setup
	 *  @class ParticleExample
	 *  @constructor
	 *  @param {String[]} imagePaths The local path to the image source
	 *  @param {Object} config The emitter configuration
	 *  @param {null|"path"|"anim"} [type=null] Particle type to create.
	 *  @param {boolean} [useParticleContainer=false] If a ParticleContainer should be used instead of a Container.
	 *  @param {boolean} [stepColors=false] If the color settings should be manually stepped.
	 */
	var ParticleExample = function(
		imagePaths,
		config,
		type,
		useParticleContainer,
		stepColors
	) {
		var canvas = document.getElementById("stage");
		// Basic PIXI Setup
		var rendererOptions = {
			view: canvas
		};
		/*var preMultAlpha = !!options.preMultAlpha;
		if(rendererOptions.transparent && !preMultAlpha)
			rendererOptions.transparent = "notMultiplied";*/
		var stage = new PIXI.Container(),
			emitter = null,
			renderer = PIXI.autoDetectRenderer(
				canvas.width,
				canvas.height,
				rendererOptions
			),
			bg = null;

		var framerate = document.getElementById("framerate");
		var particleCount = document.getElementById("particleCount");

		// Calculate the current time
		var elapsed = Date.now();

		var updateId;

		// Update function every frame
		var update = function() {
			// Update the next frame
			updateId = requestAnimationFrame(update);

			var now = Date.now();
			if (emitter) emitter.update((now - elapsed) * 0.001);

			framerate.innerHTML = (1000 / (now - elapsed)).toFixed(2);

			elapsed = now;

			if (emitter && particleCount)
				particleCount.innerHTML = emitter.particleCount;

			// render the stage
			renderer.render(stage);
		};

		// Resize the canvas to the size of the window
		window.onresize = function(event) {
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			renderer.resize(canvas.width, canvas.height);
			if (bg) {
				//bg is a 1px by 1px image
				bg.scale.x = canvas.width;
				bg.scale.y = canvas.height;
			}
		};
		window.onresize();

		// Preload the particle images and create PIXI textures from it
		var urls,
			makeTextures = false;
		if (imagePaths.spritesheet) urls = [imagePaths.spritesheet];
		else if (imagePaths.textures) urls = imagePaths.textures.slice();
		else {
			urls = imagePaths.slice();
			makeTextures = true;
		}
		urls.push("images/bg.png");
		var loader = new PIXI.Loader();
		for (var i = 0; i < urls.length; ++i) loader.add("img" + i, urls[i]);
		loader.load(function() {
			bg = new PIXI.Sprite(PIXI.Texture.from("images/bg.png"));
			//bg is a 1px by 1px image
			bg.scale.x = canvas.width;
			bg.scale.y = canvas.height;
			bg.tint = 0x000000;
			stage.addChild(bg);
			//collect the textures, now that they are all loaded
			var art;
			if (makeTextures) {
				art = [];
				for (var i = 0; i < imagePaths.length; ++i)
					art.push(PIXI.Texture.from(imagePaths[i]));
			} else art = imagePaths.art;
			// Create the new emitter and attach it to the stage
			var emitterContainer;
			if (useParticleContainer) {
				emitterContainer = new PIXI.ParticleContainer();
				emitterContainer.setProperties({
					scale: true,
					position: true,
					rotation: true,
					uvs: true,
					alpha: true
				});
			} else emitterContainer = new PIXI.Container();
			stage.addChild(emitterContainer);
			window.emitter = emitter = new PIXI.particles.Emitter(
				emitterContainer,
				art,
				config
			);
			if (stepColors)
				emitter.startColor = PIXI.particles.ParticleUtils.createSteppedGradient(
					config.color.list,
					stepColors
				);
			if (type == "path")
				emitter.particleConstructor = PIXI.particles.PathParticle;
			else if (type == "anim")
				emitter.particleConstructor = PIXI.particles.AnimatedParticle;

			// Center on the stage
			emitter.updateOwnerPos(window.innerWidth / 2, window.innerHeight / 2);

			// Click on the canvas to trigger
			canvas.addEventListener("mouseup", function(e) {
				if (!emitter) return;
				emitter.emit = true;
				emitter.resetPositionTracking();
				emitter.updateOwnerPos(e.offsetX || e.layerX, e.offsetY || e.layerY);
			});

			// Start the update
			update();

			//for testing and debugging
			window.destroyEmitter = function() {
				emitter.destroy();
				emitter = null;
				window.destroyEmitter = null;
				//cancelAnimationFrame(updateId);

				//reset SpriteRenderer's batching to fully release particles for GC
				if (
					renderer.plugins &&
					renderer.plugins.sprite &&
					renderer.plugins.sprite.sprites
				)
					renderer.plugins.sprite.sprites.length = 0;

				renderer.render(stage);
			};
		});
	};

	// Assign to global space
	window.ParticleExample = ParticleExample;
})(window);

 

Edited by KamiFightingSpirit
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...