Star rain

[Blockwelt]

Hi!

I´m a beginner regarding js and pixi and trying to learn some game dev at the same time.

My aim is a simple space shooter and so far i´ve got a space ship as a animated sprite, i can move it around etc.

Next step is a "star rain" that moves along the y axis, like this:

https://codepen.io/sevapp/pen/RVWvYJ

I´ve just manage to generate static random pixels on the screen, like this:

for(let i = 0; i < 100; i++) {
    starX = Math.floor(Math.random()*app.screen.width);
    starY = Math.floor(Math.random()*app.screen.height);

    star.beginFill(0xffffff);
    star.drawRect(starX,starY,2,2);
    star.endFill();
}

But there is no fun with static stars and i´m to noob to make dem move so should appreciate som help.

I decided to try the code from codepen, link above. But having a hard time both understanding everthing that happens in the code and implement it under pixijs.

This is how it looks in my implementation:

w = app.screen.width;
h = app.screen.height;

let lprng = (_) => ((_*106 + 1283) % 6075);

let stars = {
    seed: 19465639,
    dx: [0,w],
    dy: [0,h],
    number: 500,
    speed: 2,
    color: 0xffffff,
    side: 2
};

function drawStars(t) {
    let seed = stars.seed
    star.beginFill(stars.color);
    for(let i = stars.number; i--;) {
        seed = lprng(seed);
        let x = (stars.dx[0] + lprng(seed)) % (stars.dx[1] - stars.dx[0]);
        seed = lprng(seed);
        let y = (stars.dy[0] + lprng(seed) + t * (stars.speed * lprng(seed) / 6075 + 1)) % 
        (stars.dy[1] - stars.dy[0]);

        console.log(`LogX: ${x}`);
        console.log(`LogY: ${y}`);


        star.drawRect(
            x,
            y,
            stars.side * lprng(seed) / 6000 + 1,
            stars.side * lprng(seed) / 6000 + 1
        );
        star.endFill(); 
    }          
}

How do i make this work in a pixi-project?.

I´m not sure about the ticker an where to call the drawStars function.

The way its working now is not at all, its choking the cpu and i dont get any y values, just NaN

 

Edited January 2, 2021 by Blockwelt

[jonforum]

3 hours ago, Blockwelt said:

How do i make this work in a pixi-project?.

I´m not sure about the ticker an where to call the drawStars function.

The way its working now is not at all, its choking the cpu and i dont get any y values, just NaN

 

Pixijs have some demo , it also have similar stars space demo.
https://pixijs.io/examples/#/demos-advanced/star-warp.js

You can also make a little playground here with your code.
https://www.pixiplayground.com


Making a playground it more easy for help, If you stuck! ask again!
Note: NaN it mean issue in your math , related to javascript base and not pixijs.

 

Edited January 2, 2021 by jonforum

[ElliePanda]

Since there are presumably a lot of stars and they'll all look the same, you might get some performance benefit using a ParticleContainer.  Your code looks like you're re-generating all the stars every frame (if I'm parsing it right), but if you make each star a Sprite you don't need to!  If it was me, what I would do is generate a bunch of star Sprites with random X, Y, and scale initially.  I'd give them each a random .dy property to control how fast they move, and I'd add them all to the ParticleContainer.

In the tick function, I'd loop through all the sprites in the ParticleContainer, adding each one's .dy to its Y position.  If the new Y position is outside the visible area, I'd set its Y back to the top of the container and randomize its scale, X position, and .dy again.

That way, you're reusing an existing bunch of Sprites instead of garbage collecting stuff.  If you need to control the speed of the starfield as a whole, perhaps based on how fast your player is moving, you could factor that into the process by adding an overall speed adjustment something like this: "sprite.position.y = sprite.position.y + (sprite.dy * speedFactor)".  That would also let you reverse the direction if you needed to.

I coded this up in a playground to show you what it looks like: https://www.pixiplayground.com/#/edit/iWLHNxIENQwXhfOXtxN_S

[Blockwelt]

On 1/2/2021 at 9:04 PM, ElliePanda said:

Since there are presumably a lot of stars and they'll all look the same, you might get some performance benefit using a ParticleContainer.  Your code looks like you're re-generating all the stars every frame (if I'm parsing it right), but if you make each star a Sprite you don't need to!  If it was me, what I would do is generate a bunch of star Sprites with random X, Y, and scale initially.  I'd give them each a random .dy property to control how fast they move, and I'd add them all to the ParticleContainer.

In the tick function, I'd loop through all the sprites in the ParticleContainer, adding each one's .dy to its Y position.  If the new Y position is outside the visible area, I'd set its Y back to the top of the container and randomize its scale, X position, and .dy again.

That way, you're reusing an existing bunch of Sprites instead of garbage collecting stuff.  If you need to control the speed of the starfield as a whole, perhaps based on how fast your player is moving, you could factor that into the process by adding an overall speed adjustment something like this: "sprite.position.y = sprite.position.y + (sprite.dy * speedFactor)".  That would also let you reverse the direction if you needed to.

I coded this up in a playground to show you what it looks like: https://www.pixiplayground.com/#/edit/iWLHNxIENQwXhfOXtxN_S

Wow, thanks a lot,  that looks really good!

Yeah, you are probably right about the performance cause when i run it my cpu chokes.

Thanks for all the comments in the code, I´ll learn from this fore shure!

 

[ElliePanda]

9 hours ago, Blockwelt said:

Wow, thanks a lot,  that looks really good!

Yeah, you are probably right about the performance cause when i run it my cpu chokes.

Thanks for all the comments in the code, I´ll learn from this fore shure!

You're welcome!  It was fun, I'm just starting out with PixiJS too so I learned a bit in the process   ParticleContainers are fascinating; I ran up to 10,000 star sprites in the playground on my iPhone without any noticeable performance impact, and I have no idea how they do that...