Jump to content

Understanding pixi-particles


Recommended Posts

Hello everyone. I have a few questions related to a project I'm working on and there's one area I keep getting stopped up on and I can't seem to wrap my head around it. I'll be sharing code for it, but I also want to warn you that I'm pretty new to pixi so there might be all kinds of wrong things here and there that could be contributing to this issue. 

The project is pretty simple. A series of panels appearing in sequence to look like a comic book. There will be some animation here, some music there. Voice clips, etc etc. For the most part (save optimizing it probably), everything is going pretty swell. 


(If an image is missing, you see a blank page, or a hostgator namespace error pops up, you should be able to just refresh until it decides to spit out the right page. I just bought this domain so that I didn't have to share the actual domain for my project. It's password locked and would be bothersome to have people view it that way)

There's the overall stage, the 'game'. Then the layers inside are layered containers:

- page 

-- panels

--- sprites (along with the aforementioned music and sfx, I've muted music and voiceovers for this. The text is being put on the DOM).

For each panel, I wanted to be able to add a weather effect. Using the snow and rain examples (I'm using snow to test and it's colored green: https://pixijs.io/pixi-particles/examples/snow.html ), I technically got it working, but... with each new panel, the speed of the emitter seems to increase. To be honest, I don't think I implemented my idea correctly at all and I haven't been able to fix this. I'm kind of just feeling around the dark hoping to hit jackpot. 

I think it has something to do with this: 

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

Like, maybe the update emitter is multiplying itself against existing emitters. I had code in that destroyed the previous emitter before starting a new one at some point, but the result was the same. The effects speed up each new panel/emitter created. 

Maybe that's not the issue. Maybe all my code is a mess and it's finally catching up to me. (for example, the whole renderer situation. I commented out/deleted all references to that but maybe I needed it?) 

If anyone has the time, I really just want to figure out what's causing the particles to increase in speed. 

Here are the files I think are most relevant, I hope it makes sense to everyone (if you need something else, I can provide a link):

Particle creation: http://kirasandbox.com/gohi/assets/js/particles.js

Panel creation (it's just being inserted into the weatherContainer created on each panel): http://kirasandbox.com/gohi/assets/js/buildPanel.js

Pixi setup (not much going on with that, maybe that's the problem?): 

var game = new PIXI.Application(1280, 720, {backgroundColor : 0xFFFFFF, view : stage});


P.S: As I mentioned when I first linked this website, I just bought the domain so it's acting kind of funky right now? You'll know it's properly loaded when it looks something like this:


Link to comment
Share on other sites

13 hours ago, Exca said:

You have the update timer running multiple times and your main emitter is common to all fo the particleExample instances. So you will have all of the previous updates ticking away with the current one. So each added panel is a multiplier for the speed.

Urg, thank you so much. I'm glad I was on the right track at least and my assumptions were right. I'm not as stupid as I thought.  I've moved the update function outside of the function creating the particles and it works like a charm. 


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.

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.


  • Recently Browsing   0 members

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