ZYandu

Best practice for consistently moving x value of many sprites

Recommended Posts

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

Share this post


Link to post
Share on other sites

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);
}

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;

 

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.