How to move AnimatedSprite with smooth animation

[heroku]

I want to make a tile based game. The tiles are animated, so I put tiles as AnimatedSprite 's inside a ParticleContainer.

 

  const allSpriteByPos = allPos.map(([i,j]) => {

    var tile = tileByIdx(i, j);
    var sp = animated(rFrames(tss, tile));

    let fWidth = sp.width,
        fHeight  = sp.height;

    sp.position.set(i * fWidth, j * fHeight);

    cbase.addChild(sp);

    return [i,j,sp];
  });

 

Now I have trouble moving these tiles, while changing the animation. I set `textures` property for AnimatedSprite for every update:

   allSpriteByPos.forEach(([i,j,sp]) => {
      var tile = tileByIdx(i, j);
      sp._textures = rFrames(tss, tile);
      let fWidth = sp.width,
          fHeight  = sp.height;

      sp.position.set(i * fWidth, j * fHeight);

    });

Here `rframes` returns the texture array for the animation. 

If I set the `textures` property every update, tiles don't animate.

If I remove that line, the tiles do animate, without moving.

So my question would be, how would I structure this code, so I would have my tiles mapped to animated sprites so I shall update both position and animation textures with regards to performance.

[ivan.popelyshev]

Sorry, no guarantees about AnimatedSprites inside ParticleContainer. ParticleContainer has limitations, its renderling logic is custom. Try those options:

var sprites = new PIXI.particles.ParticleContainer(10000, {
    scale: true,
    position: true,
    uvs: true
});

For tiles, I suggest use https://github.com/pixijs/pixi-tilemap its much faster than ParticleContainer, tutorial is here: https://github.com/Alan01252/pixi-tilemap-tutorial . 

You have to implement different algorithm for it - maintain a window of "vislble" tiles, and whenever the camera touches its side, make new window and refill the tilemap.

Animations can be achieved two ways: refill tilemap on every animation frame or use shader animation it has. Shader animation has limits and you have to study it closely to use. Author of tutorial understood how it works, so you can do that too.

[heroku]

Explain the different algorithm and refill map for animations, what is Shader animation, sorry your suggestion is too complicated the github code, or I quit, serious.

[ivan.popelyshev]

First, try pixi-tilemap without animations. Then try to animate it just by clearing it every frame and filling up again.

I'm ready to explain how RpgMaker MV works with tilemaps if you spend enough time on getting the basics

http://www.html5gamedevs.com/topic/34063-use-pixijs-to-build-a-game-like-agario/

[ivan.popelyshev]

Also, are you sure that simpel Container (not ParticleContainer) + many sprites doesnt work for you? How many tiles there are on screen?

[heroku]

Brother I am looking for less code less headache approach, so bear with me. I can both animate and move the sprites with no problem. I need code to do this "window visible tiles" and refill the map algorithms in a few simple lines. An object pool for pixi sprites, so I can create once for the window, and reuse them while sliding this window and moving the tiles thus sprites. Have no idea how to do that.

[ivan.popelyshev]

You have a pool of sprites, you move them around while sliding - that's one of possible algorithms, yes. I'm ok with helping people whatever algorithm they choose, its not my place to impose specific algorithm on you, I just want you to know that there are several.

ParticleContainer might make it faster , a bit, it has different approach for buffers. Do "uvs" options work for you?

PixiJS doesnt have effective solution for tiles out-of-package and there are no demos for vanilla pixi of how to make it effective. Its not a "hello world" material, you have to be patient and prepared to write some code.

There are projects that use Pixi with Tiled, and everyone has their own implementation: based on pixi-tilemap or without it.