Best practice for consistently moving x value of many sprites

[ZYandu]

I have a container of 150 sprites and I want all of them to move left 10 pixels each frame in a custom RAF gameloop. What are the best practices for moving all of the sprites at once? 

This is what I tried, but I am experiencing some stuttering / inconsistencies in how smooth they move.

const renderer = new PIXI.autoDetectRenderer({
      width: 1920,
      height: 1080,
      preserveDrawingBuffer: true,
      transparent: true,
      backgroundColor: 0xffffff,
      antialias: true,
});

let stage = new PIXI.display.Stage();
let spriteContainer = new PIXI.Container();
stage.addChild(spriteContainer);

for (let i = 0; i <= 150; i++) {
    let sprite = PIXI.Sprite.fromImage(tallLine);
    sprite.x = i * 10;
    spriteContainer.addChild(sprite);
}

requestAnimationFrame(rafGameLoop);

//move all the sprites left 10 pixels per frame
const rafGameLoop = () => {
    requestAnimationFrame(rafGameLoop);
    spriteContainer.children.forEach(sprite => {
        sprite.x = sprite.x - 10;
    });
    renderer.render(stage);
}

 

Thank you! ?

[MrBread]

It appears from your code that all of your sprites are the same. If this is the case, I suggest using a ParticleContainer instead as this will vastly improve rendering performance.

 

const renderer = new PIXI.autoDetectRenderer({
      width: 1920,
      height: 1080,
      preserveDrawingBuffer: true,
      transparent: true,
      backgroundColor: 0xffffff,
      antialias: true,
});

let stage = new PIXI.display.Stage();
let spriteContainer = new PIXI.ParticleContainer();
stage.addChild(spriteContainer);

for (let i = 0; i <= 150; i++) {
    let sprite = PIXI.Sprite.fromImage(tallLine);
    sprite.x = i * 10;
    spriteContainer.addChild(sprite);
}

requestAnimationFrame(rafGameLoop);

//move all the sprites left 10 pixels per frame
const rafGameLoop = () => {
    requestAnimationFrame(rafGameLoop);
    spriteContainer.children.forEach(sprite => {
        sprite.x = sprite.x - 10;
    });
    renderer.render(stage);
}

 

[themoonrat]

First... Just move the sprite container left 10 pixels, then it's children will all move with it.

Second, avoid creating functions every frame. Use a basic for loop, or create a function that's reused. But don't create a new anonymous function every frame for within a forEach. You do that everywhere and the garbage will add up quickly.

[jonforum]

If you really want move sprites individually and not from container this is more optimised

  for (let i=0, l=spriteContainer.children.length; i<l; i++) {
        spriteContainer.children[i].x-=10;
    };

 

But move the container are the best practice.

spriteContainer.x-=10;