trsh

Need advice for some project

Recommended Posts

Hi guys. I want to create a effect in PIXI, that looks like first frames in this video -> http://hubblesite.org/video/513/news_release/2006-01 (stars shooting/flying by). What would more experienced PIXI'oniers advice to achieve such effect? Performance is critical, I want it also to work on mobiles.

For now I'm thinking:

1) Particle container, that's for sure? Maybe with some 1-3 star sprites?

2) Projection plane for start movement? Or just calculate it with some custom simple logic?

 

Share this post


Link to post
Share on other sites

1. code projections and modify ParticleContainer that it works with them
2. code something simple like you did, sometimes its enough
3. use threejs PointCloud.

or you can wait when I code 3d projections for https://github.com/pixijs/pixi-projection and add support to ParticleContainer. Right now its only 2d projections stuff.

Anyway, simple formulas for projeciton. Im taking it from the head now. Dont think that I'll post complete code with commentaries, I just dont have enough time for that. You have to adjust my solution for your case, dont mind variable names, you can change to what you like it.

Assume that our center of screen is (0,0), focus distance is "d", and "z" is distance from object to focus plane (z=0 is default).

projPosition.x = position.x * d / (z+d);
projScale.x = scale.x * d / (z+d);

Dont forget to cut stars that already behind us, and have z < -d + eps, or their X already is too high.

Same applies to Y.

If you want to change (0,0) just change top container coords, I assume that you know how pixi transformations work.

Please dont use "scale.x+=" or something like that, store 3d position and 2d position in different variables. Also dont forget to sort points by Z.


Sorry, I wont show you my paint mad skillz, just imagine that you have a screen on distance D from you, and point is somewhere at (z+D), and you want to project point on that screen.

 

 

Share this post


Link to post
Share on other sites
2 hours ago, ivan.popelyshev said:

1. code projections and modify ParticleContainer that it works with them
2. code something simple like you did, sometimes its enough
3. use threejs PointCloud.

or you can wait when I code 3d projections for https://github.com/pixijs/pixi-projection and add support to ParticleContainer. Right now its only 2d projections stuff.

Anyway, simple formulas for projeciton. Im taking it from the head now. Dont think that I'll post complete code with commentaries, I just dont have enough time for that. You have to adjust my solution for your case, dont mind variable names, you can change to what you like it.

Assume that our center of screen is (0,0), focus distance is "d", and "z" is distance from object to focus plane (z=0 is default).


projPosition.x = position.x * d / (z+d);
projScale.x = scale.x * d / (z+d);

Dont forget to cut stars that already behind us, and have z < -d + eps, or their X already is too high.

Same applies to Y.

If you want to change (0,0) just change top container coords, I assume that you know how pixi transformations work.

Please dont use "scale.x+=" or something like that, store 3d position and 2d position in different variables. Also dont forget to sort points by Z.


Sorry, I wont show you my paint mad skillz, just imagine that you have a screen on distance D from you, and point is somewhere at (z+D), and you want to project point on that screen.

 

 

Ok. Cool tnx. But Object that come near do appear bigger, so have can I live without Scale?

Share this post


Link to post
Share on other sites

I just told you to calculate scale and position based on something else that you store, 3d position. Please think some time on it before asking more questions, imagine that we have veeeeery slow internet.

When you give me enough good questions, I'll reply with more answers. Lets batch our discussion like pixi does with sprites ;)

Share this post


Link to post
Share on other sites
17 minutes ago, ivan.popelyshev said:

I just told you to calculate scale and position based on something else that you store, 3d position. Please think some time on it before asking more questions, imagine that we have veeeeery slow internet.

When you give me enough good questions, I'll reply with more answers. Lets batch our discussion like pixi does with sprites ;)

Deal! Actually I figure it out and my demo will be ready soon. Tank you.

Share this post


Link to post
Share on other sites

@ivan.popelyshev

https://jsfiddle.net/obmjcnv7/13/

In the line 56 (console.log(sprites.children.length);) I can see abnormal numbers of particles and that's why they disapear sometimes not in right time.

I don't understand is it a bug of PIXI, or in my logic, as when I read from code, as one particle is removed, only then one is added. So it should always stay constant. :/

 

Share this post


Link to post
Share on other sites

Look at params for ParticleContainer constructor http://pixijs.download/dev/docs/PIXI.particles.ParticleContainer.html , it has maxSize and autoResize . Either set 5000 maxSize, either enable autoResize.

As for abnormal, you use "maggots.splice(i, 1);" while "i" is going upwards and after you remove first time,  maggots becames maggots[i-1]. But if you go down from "length-1" to "0", that'll work better! 

That's the code I commonly use for such cases, it is super-efficient:

let j = 0;
for (let i=0;i<children.length;i++) {
    let child = children[i];
    if (child.dead) {
       //somehow handel the death - fire an event or i dont know what do you want
       // its what we do instead of removeChild
       // this line here is only to make us feel better
        child.parent = null;
    }  else 
    {
      //oh its alive. Move it to alive, in the beginning of array
      // if no one was dead, j=i and it assigns itself, nothing bad ;)
       children[j++] = child;
    }
}
children.length = j;

Take paper and pencil and look at your algo, at fixed version (with backwards "for i") , and at my algorithm. Mine doesnt even require to clone the array.
I love algorithms!

Share this post


Link to post
Share on other sites

Yeah, and "for (var i = maggotsClone.length-1; i >=0; i--) {" removes the error, like i said. Also, you actually dont need clone that way.

Its a coding problem, not pixi one.

Take pen and paper, write all three algorithms down and try to emulate it manually.

I also recommend this book: https://www.amazon.com/Introduction-Algorithms-3rd-MIT-Press/dp/0262033844 , its easy to find free copy in internets. Be grateful I dont give advice to read Knuth ;)

Share this post


Link to post
Share on other sites
31 minutes ago, ivan.popelyshev said:

Yeah, and "for (var i = maggotsClone.length-1; i >=0; i--) {" removes the error, like i said. Also, you actually dont need clone that way.

Its a coding problem, not pixi one.

Take pen and paper, write all three algorithms down and try to emulate it manually.

I also recommend this book: https://www.amazon.com/Introduction-Algorithms-3rd-MIT-Press/dp/0262033844 , its easy to find free copy in internets. Be grateful I dont give advice to read Knuth ;)

Yeah, it does fix the error. I still don't understand the problem with array (it's just array with references to objects) and how is that connected with particles container, but I'll try :D later, going line by line with smaller amounts. And will change the logic, so no stars out of screen are not removed, but moved to the beginning again. Thanks again!

Share this post


Link to post
Share on other sites

Generate 2-5 positions instead of one, take the one that is farthest away from other bunnies.

Btw, if you want to use tint that make objects lighter and not darker like pixi default, try https://github.com/gameofbombs/pixi-heaven/ , just include "bin/pixi-heaven.js" and use "sprite.color.setDark".

Share this post


Link to post
Share on other sites
2 hours ago, ivan.popelyshev said:

Generate 2-5 positions instead of one, take the one that is farthest away from other bunnies.

Btw, if you want to use tint that make objects lighter and not darker like pixi default, try https://github.com/gameofbombs/pixi-heaven/ , just include "bin/pixi-heaven.js" and use "sprite.color.setDark".

No thanks, no Tint. Bunnies will be replaced with star textures. I want it as simple as possible. 

Share this post


Link to post
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...

  • Recently Browsing   0 members

    No registered users viewing this page.