# Animations On Nested Sprites

**URL:** <https://phaser.discourse.group/t/animations-on-nested-sprites/1095>\
**Category:** Phaser 3\
**Created:** [February 6, 2019, 1:55pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095 "2019-02-06T13:55:14Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sturb](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Sturb](https://phaser.discourse.group/u/Sturb)\
**Post date:** [February 6, 2019, 1:55pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/1 "2019-02-06T13:55:14Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 6, 2019, 5:13pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/2 "2019-02-06T17:13:03Z")

</div>

> [@Sturb](#):
>
> I realized quickly that nested Sprites don’t have their ‘preupdate’ functions called if they are nested.

Are you sure? I tried [game objects/container/animation test](https://labs.phaser.io/view.html?src=src/game%20objects/container/animation%20test.js&v=dev) 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.

---

<div class="post-metadata">

**Author:** ![Sturb](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Sturb](https://phaser.discourse.group/u/Sturb)\
**Post date:** [February 6, 2019, 5:25pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/3 "2019-02-06T17:25:03Z")

</div>

> [@samme](#):
>
> I tried [game objects/container/animation test](https://labs.phaser.io/view.html?src=src/game%20objects/container/animation%20test.js&v=dev) and the sprites animate.

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.

---

<div class="post-metadata">

**Author:** ![snowbillr](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/snowbillr/32/332_2.png) [@snowbillr](https://phaser.discourse.group/u/snowbillr)\
**Post date:** [February 6, 2019, 7:26pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/4 "2019-02-06T19:26:34Z")

</div>

That’s exactly what happens @Sturb.

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

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

```

---

<div class="post-metadata">

**Author:** ![Sturb](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Sturb](https://phaser.discourse.group/u/Sturb)\
**Post date:** [February 6, 2019, 7:32pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/5 "2019-02-06T19:32:56Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 6, 2019, 7:47pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/6 "2019-02-06T19:47:35Z")

</div>

Usually done with

```
this.add.existing( new SpriteThing(this /*, …*/) );
```

---

<div class="post-metadata">

**Author:** ![Sturb](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Sturb](https://phaser.discourse.group/u/Sturb)\
**Post date:** [February 6, 2019, 7:52pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/7 "2019-02-06T19:52:50Z")

</div>

> [@samme](#):
>
> Usually done with
> 
> ```javascript
> this.add.existing( new SpriteThing(this /*, …*/) );
> 
> ```

Perfect. Thanks!

---

<div class="post-metadata">

**Author:** ![rich](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/rich/32/4_2.png) [@rich](https://phaser.discourse.group/u/rich)\
**Post date:** [February 6, 2019, 10:06pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/8 "2019-02-06T22:06:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sturb](https://avatars.discourse-cdn.com/v4/letter/s/df788c/32.png) [@Sturb](https://phaser.discourse.group/u/Sturb)\
**Post date:** [February 6, 2019, 11:15pm UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/9 "2019-02-06T23:15:21Z")

</div>

> [@rich](#):
>
> 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

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.

---

<div class="post-metadata">

**Author:** ![samme](https://yyz2.discourse-cdn.com/free1/user_avatar/phaser.discourse.group/samme/32/5275_2.png) [@samme](https://phaser.discourse.group/u/samme)\
**Post date:** [February 7, 2019, 2:28am UTC](https://phaser.discourse.group/t/animations-on-nested-sprites/1095/10 "2019-02-07T02:28:25Z")

</div>

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.