Animations On Nested Sprites

Phaser 3
1

I have a question about animating nested sprites. In my game I’m using Tiled tilemaps. I set up multiple layers for depth. In Phaser when I create each map layer, I nest them in their own container. I then create animated Sprites (heros, monsters, etc) and add them to one of the containers so they layer properly with the rest of the tilemap layers.

I realized quickly that nested Sprites don’t have their ‘preupdate’ functions called if they are nested. That’s fine because I can just hook them into the ‘preupdate’ event on the scene. However it seems when I wire them into the scene event they lose sync with each other. When I don’t nest and just add them to the root display list of the scene, all animations play in sync (each animation advance frames at the same time). It also seems that when I wire into the ‘preupdate’ event, that the animation speed will increase or decrease depending on the game’s frame rate, where when they are on the root display list it doesn’t.

Is there a better way of dealing with nested animated Sprites? Will this desync cause any issues?

2

Are you sure? I tried game objects/container/animation test and the sprites animate. They receive preUpdate() from the UpdateList plugin, not from their container.

Also, I don’t know all of your requirements, but usually one can control display order and visibility without using containers. So you might be able to avoid the hassle.

3

The only difference between what I’m doing and that example is that my sprites are extended so I don’t use scene.add. I have to use new and pass the scene to it. Without being able to look into it right now, I wonder if scene.add has extra steps that will add sprites to the update list, where when you use new then sprites miss out on those steps. I’ll try non-extended sprites later when I get a chance to see if that has any affect.

4

That’s exactly what happens @Sturb.

Here’s the source for this.scene.add.sprite:

GameObjectFactory.register('sprite', function (x, y, key, frame)
{
    var sprite = new Sprite(this.scene, x, y, key, frame);

    this.displayList.add(sprite);
    this.updateList.add(sprite);

    return sprite;
});
1 Like
5

Thanks for finding that @snowbillr.

@rich I wonder if there is anything that can be added to the sprite object that will add the sprite to these scene lists automatically in the case it’s created with new instead of scene.add - or if that’s even something worth while.

6

Usually done with

this.add.existing( new SpriteThing(this /*, …*/) );
1 Like
7

Perfect. Thanks!

8

I’d rather people got used to the way the factories work tbh, otherwise if every Sprite you instantiate is automatically added to the Scene lists, you won’t be able to do things like seeding an object pool, not unless every Game Object had a new constructor argument ‘addToScene’, which just gets a bit messy imho.

9

Makes sense. In that case if this.add.existing adds, is there a similar method for removing objects from those scene lists without destroying the object? I did a search on the GameObjectFactory and Scene class, but couldn’t see anything.

10

There is

this.sys.displayList.remove(sprite);
this.sys.updateList.remove(sprite);

but practically speaking, it’s probably easier to just switch off the sprite’s active and visible properties.

1 Like