Can't display animated sprite / gif on a PIXI Tile map

Question

I have this map where I can add different Tiles. Till now all textures are normal Spritesheets. You can select on the editor one Tile Type and add it per click to the map, so that the selected tile displays the chosen tile type. Map with diffrent addable tile types

So far so good. Now I want to animate the small wind turbine so it's constantly turning. I made the following sprite sheet with texture packer: (There are four frames but I deleted them here so this question doesn't get too long)

{"frames": {

"wt1.png":
{
    "frame": {"x":0,"y":0,"w":72,"h":72},
    "rotated": false,
    "trimmed": false,
    "spriteSourceSize": {"x":0,"y":0,"w":72,"h":72},
    "sourceSize": {"w":72,"h":72}
},
...
},
"animations": {
    "wt": ["wt1.png","wt2.png","wt3.png","wt4.png"]
},
"meta": {
    "app": "https://www.codeandweb.com/texturepacker",
    "version": "1.1",
    "image": "animatedWT.png",
    "format": "RGBA8888",
    "size": {"w":144,"h":144},
    "scale": "1",
    "smartupdate": "$TexturePacker:SmartUpdate:11679a5566d7f64fe2a648dcd7ee9107:cd3569348d06082e95cf14df37fe1bf3:d807192215a8ab88d955d69e2dbe949c$"
}
}

Then I call this function textureLoader.addGIF("animatedWT", app); in my main.js. The other textures get called like this textureLoader.addSpritesheet("windturbines_big");

The definition of the function looks like this:

addGIF(animatedWT, app) {
    this.app.loader.add(`./textures/${animatedWT}.json`, (resource) => {
      this.textures[animatedWT] = new PIXI.AnimatedSprite(
        resource.spritesheet.animations.wt
      );
      // console.log(this.textures.animatedWT);
// Here I add some deeper laying attributes to the front of the object because i had some issues with //n // later calls on the object
      this.textures.animatedWT["baseTexture"] =
        this.textures.animatedWT._texture.baseTexture;
      this.textures.animatedWT["orig"] = this.textures.animatedWT._texture.orig;
      this.textures.animatedWT["_uvs"] = this.textures.animatedWT._texture._uvs;
// I don't really know what I do here but it's done in this tutorial
// https://youtu.be/FjiQSwohBVs?si=tyc_2JG7jNWziNxq
      app.stage.addChild(this.textures.animatedWT);
      app.ticker.add(this.animate(this.textures.animatedWT, app));
    });
  }
  animate(animatedWT, app) {
    animatedWT.x = app.renderer.screen.width / 2;
    animatedWT.y = app.renderer.screen.height / 2;
  }

the animatedWT object after added to app.stage or how the animatedSprite looks like:

children: (1) […]
​​​0: {…}
​​​​_anchor: {…}
​​​​_autoUpdate: true
​​​​_bounds: {…}
​​​​_boundsID: 0
​​​​_boundsRect: null
​​​​_cachedTint: 16777215
​​​​_currentTime: 0
​​​​_destroyed: false
​​​​_durations: null
​​​​_enabledFilters: null
​​​​_events: {}
​​​​_eventsCount: 0
​​​​_height: 0
​​​​_isConnectedToTicker: false
​​​​_lastSortedIndex: 0
​​​​_localBounds: null
​​​​_localBoundsRect: null
​​​​_mask: null
​​​​_playing: false
​​​​_previousFrame: 0
​​​​_roundPixels: false
​​​​_texture: {…}
​​​​_textureID: -1
​​​​_textureTrimmedID: -1
​​​​_textures: (4) […]
​​​​_tint: 16777215
​​​​_tintRGB: 16777215
​​​​_transformID: -1
​​​​_transformTrimmedID: -1
​​​​_uvs: {…}
​​​​_width: 0
​​​​_zIndex: 0
​​​​alpha: 1
​​​​animationSpeed: 1
​​​​baseTexture: {…}
​​​​blendMode: 0
​​​​children: []
​​​​filterArea: null
​​​​filters: null
​​​​indices: Uint16Array(6)
​​​​isMask: false
​​​​isSprite: true
​​​​loop: true
​​​​onComplete: null
​​​​onFrameChange: null
​​​​onLoop: null
​​​​orig: {…}
​​​​parent: {…}
​​​​pluginName: "batch"
​​​​renderable: true
​​​​sortDirty: false
​​​​sortableChildren: false
​​​​tempDisplayObjectParent: null
​​​​transform: {…}
​​​​updateAnchor: false
​​​​uvs: Float32Array(8)
​​​​vertexData: Float32Array(8)
​​​​vertexTrimmedData: null
​​​​visible: true
worldAlpha: 1
<prototype>: {…}

//to add a normal Sprite the function looks like this
  addSpritesheet(name) {
    this.app.loader.add(`./textures/${name}.json`, (resource) => {
      this.textures[name] = resource.textures;
    });
  }

In the next step the Tiles are rendered

For normal sprites it's done like this:

  renderWaterTile(x, y) {
// a random texture is chosen from the spritesheet
    const textureNumber = 1 + Math.round(this.randomizedTerrain[y][x] * 8);
// the texture from the TextureTile[][] is set to the new texture
    this.getTextureTile(x, y).texture =
      this.textures.water[`water-0${textureNumber}`];
    this.getTextureTile(x, y).visible = true;
  }

a this.TextureTile[][] normally loks like this:

_anchor: {…}
​​​_bounds: {…}
​​​_boundsID: 159
​​​_boundsRect: null
​​​_cachedTint: 16777215
​​​_destroyed: false
​​​_enabledFilters: null
​​​_events: {}
​​​_eventsCount: 0
​​​_height: 72
​​​_lastSortedIndex: 0
​​​_localBounds: null
​​​_localBoundsRect: null
​​​_mask: null
​​​_roundPixels: true
​​​_texture: {…}
​​​_textureID: 1
​​​_textureTrimmedID: -1
​​​_tint: 16777215
​​​_tintRGB: 16777215
​​​_transformID: 2
​​​_transformTrimmedID: -1
​​​_width: 72
​​​_zIndex: 0
​​​alpha: 1
​​​blendMode: 0
​​​children: []
​​​filterArea: null
​​​filters: null
​​​indices: Uint16Array(6)
​​​isMask: false
​​​isSprite: true
​​​parent: {…}
​​​pluginName: "batch"
​​​renderable: true
​​​sortDirty: false
​​​sortableChildren: false
​​​tempDisplayObjectParent: null
​​​transform: {…}
​​​uvs: Float32Array(8)
​​​vertexData: Float32Array(8)
​​​vertexTrimmedData: null
​​​visible: true
​​​worldAlpha: 1

TextureTile[][] is a matrix and is previously defined like this in the constructor:

this.textureTiles = Array2D.create(
      this.city.map.width,
      this.city.map.height,
      null
    );

this.city.map.allCells().forEach(([x, y]) => {
      const bgTile = new PIXI.Graphics();
      bgTile.x = x * MapView.TILE_SIZE;
      bgTile.y = y * MapView.TILE_SIZE;
      this.bgTiles[y][x] = bgTile;

// here it's predefined as new PIXI.Sprite maybe that's part of the problem
      const textureTile = new PIXI.Sprite();
      textureTile.x = x * MapView.TILE_SIZE;
      textureTile.y = y * MapView.TILE_SIZE;
      textureTile.width = MapView.TILE_SIZE;
      textureTile.height = MapView.TILE_SIZE;
      textureTile.roundPixels = true;
      this.textureTiles[y][x] = textureTile;
      this.renderTile(x, y);
    });

For my animated tile I tried several things:

Normally only the texture attribute of the object is updated but the PIXI.sprite object and the PIXI.animatedSprite Object are different from each other. So I tried it like this: this.textureTiles[y][x] = this.textures.animatedWT; instead of this: this.getTextureTile(x, y).texture = this.textures.water[water-0${textureNumber}];

here is the whole function:

  renderWindTurbineSmallTile(x, y) {
    let animatedWT = this.textures.animatedWT;
    // app.stage.addChild(img);

    animatedWT.animationSpeed = 1;
    animatedWT.play();

    animatedWT.onLoop = () => {
      console.log("loop");
    };
    animatedWT.onFrameChange = () => {
      console.log("currentFrame", animatedWT.currentFrame);
    };
    animatedWT.onComplete = () => {
      console.log("done");
    };
    // here is the important bit I think
    this.textureTiles[y][x] = this.textures.animatedWT;
    this.getTextureTile(x, y).visible = true;

with this I get no errors in the console and it prints the loops and frame changes etc. but I don't see the animated sprite just the grey tile

I also tried this: `this.getTextureTile(x, y).texture = this.textures.animatedWT.texture; It displays one frame of the animated sprite and if I add another windturbine it changes the frame but on all windturbines I set. I also have the feeling that the animation speed influences the change of the frames. enter image description here enter image description here

the texture object of the animatedWt looks like this:

_events: {}
​_eventsCount: 0
​_frame: {…}
​_rotate: 0
​_updateID: 1
​_uvs: {…}
​baseTexture: {…}
​defaultAnchor: {…}
​noFrame: false
​orig: {…}
​textureCacheIds: (1) […]
​trim: null
​uvMatrix: null
​valid: true
​<prototype>: {…}

I also tried this cause I thought maybe it doesn't work because in the constructor TextureTiles[][] is only defined as Sprite: this.textureTiles[y][x] = new PIXI.AnimatedSprite( this.textures.animatedWT.textures ); but again only a grey tile and no animatedSprite.

The Frame changes are constantly printed in all tries.

If anyone has an idea what I might be doing wrong, it would be nice to hear or if you have an example for a similar problem so I could have look :) also if anyone can tell me what app.ticker does, that would be great too.