• Content Count

  • Joined

  • Last visited

  1. Got this answered! The example files don't work for V5 as there was a process change for creating a new renderer. The files within the test folder should be used for the latest clean structure. https://github.com/pixijs/pixi-particles/issues/120
  2. I have attached an image of what I see... It's just blank but the top left FPS reader. Did you run it and see something else?
  3. 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/pixi-particles@4.2.0/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);
  4. 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.
  5. Thanks! I got it to work by changing the local source links to CDNs with the version downgrade. And yes, still pretty new to everything, only picked up coding a few months ago and learning to navigate all the systems.
  6. This is going to sound really dumb so please excuse me being such a noob. I am trying to get the pixi-particle examples to work but can't seem to. What I did: I downloaded and unzipped the following: https://github.com/pixijs/pixi-particles Unzipped it and loaded up the examples folder via the command line with: python -m SimpleHTTPServer 8000 none of the examples are showing anything within http://localhost:8000/ when I navigate to them though. How can I get this working? Browser is showing the following errors: pixi.js:1 Failed to load resource: the server responded with a status of 404 (File not found) pixi-particles.js:1 Failed to load resource: the server responded with a status of 404 (File not found) ParticleExample.js:24 Uncaught ReferenceError: PIXI is not defined at new ParticleExample (ParticleExample.js:24) at explosion.html:25 What I have been trying (many other things too...): I have tried: npm install pixi.js pixi-particles But it doesn't seem to work, I'm not sure if I'm installing in the wrong place or what?
  7. Thanks! That worked, filling my container before trying to pivot it.
  8. Thanks for the reply! I am not fully clear what you mean when you say "world.position = screen/2;" I am assuming that world === container name? What is screen? Also, (cX,Cy) is referring to coordinates within the container itself? This is my full code: I have been stuck on this for hours so any help is greatly appreciated. <html> <head> <style> body { margin: 0; } canvas { display: block; background: blue; } </style> </head> <body> <canvas id="mycanvas"></canvas> <script src="pixi.js"></script> <script> const canvas = document.getElementById("mycanvas"); const app = new PIXI.Application({ view: canvas, width: window.innerWidth, height: window.innerHeight }); let radius = 1; let numStars = 3000; let graphicArr = []; let container = new PIXI.Container(); container.x = app.screen.width / 2; container.y = app.screen.height / 4; container.pivot.x = container.width / 2; container.pivot.y = container.height / 2; app.stage.addChild(container); addGraphics(); //DRAW THE STARS function addGraphics() { for (let i = 0; i < numStars; i++) { let graphic = new PIXI.Graphics(); graphic.y = (Math.random() * app.renderer.screen.height) / 2; graphic.x = (Math.random() * app.renderer.screen.width) / 4; graphic.lineStyle(0.1, 0x00ff00); graphic.beginFill(0x00ff00); graphic.drawCircle(0, 0, radius); container.addChild(graphic); graphicArr.push(graphic); } } app.ticker.add(animate); function animate() { container.rotation += 0.01; } </script> </body> </html>
  9. Hello All -- Looking forward to learning a lot from the people on these forums! How can I get the following to work? I am trying to get a container to rotate around it's center, much like is seen here: http://scottmcdonnell.github.io/pixi-examples/index.html?s=basics&f=container-pivot.js&title=Container Pivot However, I can't seem to figure out the math behind placing the container on the screen and then the amount that you must offset it in order to have the pivot rotate in the center. My setup is I have a screen with width: 1536 and height: 722 I have a container with width: 384 and height: 361 I have centered the container in the center by using the following: container.position.x = 576; container.position.y = 180.5; I tried to then set my pivot with the following: container.pivot.set(384 / 2, 361 / 2); My thinking that the local center of the container would be half of its width and half of its height, but then this repositions the container and it is no longer centered. My animate function is as follows FYI: app.ticker.add(animate); let delta = 0; function animate() { delta += 0.1; container.rotation += 0.01; }