Search the Community

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! ?