Animation independent frame duration per tile

demo/basic.js

@@ -45,7 +45,7 @@ loader.load(function onAssetsLoaded(loader, resources)
         frame++;
     }
 
-    setInterval(animShader, 400);
+    setInterval(animShader, 100);
 });
 
 function buildTilemap()
@@ -81,8 +81,17 @@ function buildTilemap()
     // tilemap.addFrame(textures[frame % 2 == 0 ? "chest.png" : "red_chest.png"], 4 * size, 4 * size);
 
     // new way: animate on shader: 2 frames , X offset is 32 , "red_chest" is exactly 34 pixels right in the atlas
+    // Frame changes every 100ms because of `setInterval(animShader, 100)`, so the first animation
+    // will change to the next frame every 100ms
     tilemap.tile(textures['chest.png'], 4 * size, 4 * size).tileAnimX(34, 2);
 
+    // You can also set independent time for each tile.
+    // In this second chest, we pass 3 to tileAnimDivisor
+    // 3 multiplies the 100ms we have in setInterval by 3, making the duration 300ms
+    tilemap.tile(textures['chest.png'], 5 * size, 4 * size).tileAnimX(34, 2).tileAnimDivisor(3);
+    // You can alternatively set it by passing animDivisor option when creating the tile. Below a frame duration is 600ms
+    tilemap.tile(textures['chest.png'], 8 * size, 4 * size, {animX: 34, animCountX: 2, animDivisor: 6});
+
     // button does not appear in the atlas, but tilemap wont surrender, it will create second layer for special for buttons
     // buttons will appear above everything
     tilemap.tile(resources.button.texture, 6 * size, 2 * size);

index.d.ts

@@ -37,6 +37,7 @@ declare class CompositeTilemap extends Container {
     tileRotate(rotate: number): this;
     tileAnimX(offset: number, count: number): this;
     tileAnimY(offset: number, count: number): this;
+    tileAnimDivisor(divisor: number): this;
     tile(tileTexture: Texture | string | number, x: number, y: number, options?: {
         u?: number;
         v?: number;
@@ -47,13 +48,14 @@ declare class CompositeTilemap extends Container {
         rotate?: number;
         animCountX?: number;
         animCountY?: number;
+        animDivisor?: number;
         alpha?: number;
     }): this;
     renderCanvas: (renderer: CanvasRenderer) => void;
     render(renderer: Renderer): void;
     isModified(anim: boolean): boolean;
     clearModify(): void;
-    addFrame(texture: Texture | string | number, x: number, y: number, animX?: number, animY?: number, animWidth?: number, animHeight?: number, alpha?: number): this;
+    addFrame(texture: Texture | string | number, x: number, y: number, animX?: number, animY?: number, animWidth?: number, animHeight?: number, animDivisor?: number, alpha?: number): this;
     addRect(textureIndex: number, u: number, v: number, x: number, y: number, tileWidth: number, tileHeight: number, animX?: number, animY?: number, rotate?: number, animWidth?: number, animHeight?: number): this;
     setBitmaps: (tileTextures: Array<BaseTexture>) => this;
     get texPerChild(): number;
@@ -161,11 +163,13 @@ declare class Tilemap extends Container {
         rotate?: number;
         animCountX?: number;
         animCountY?: number;
+        animDivisor?: number;
         alpha?: number;
     }): this;
     tileRotate(rotate: number): void;
     tileAnimX(offset: number, count: number): void;
     tileAnimY(offset: number, count: number): void;
+    tileAnimDivisor(divisor: number): void;
     tileAlpha(alpha: number): void;
     renderCanvas: (renderer: CanvasRenderer) => void;
     renderCanvasCore(renderer: CanvasRenderer): void;
@@ -183,7 +187,7 @@ declare class Tilemap extends Container {
     getLocalBounds(rect?: Rectangle): Rectangle;
     destroy(options?: IDestroyOptions): void;
     addFrame(texture: Texture | string | number, x: number, y: number, animX: number, animY: number): boolean;
-    addRect(textureIndex: number, u: number, v: number, x: number, y: number, tileWidth: number, tileHeight: number, animX?: number, animY?: number, rotate?: number, animCountX?: number, animCountY?: number, alpha?: number): this;
+    addRect(textureIndex: number, u: number, v: number, x: number, y: number, tileWidth: number, tileHeight: number, animX?: number, animY?: number, rotate?: number, animCountX?: number, animCountY?: number, animDivisor?: number, alpha?: number): this;
 }
 export { Tilemap as RectTileLayer }
 export { Tilemap }

src/CompositeTilemap.ts

@@ -187,6 +187,17 @@ export class CompositeTilemap extends Container
         return this;
     }
 
+    /** Changes `tileAnimDivisor` value of the last added tile. */
+    tileAnimDivisor(divisor: number): this
+    {
+        if (this.lastModifiedTilemap)
+        {
+            this.lastModifiedTilemap.tileAnimDivisor(divisor);
+        }
+
+        return this;
+    }
+
     /**
      * Adds a tile that paints the given tile texture at (x, y).
      *
@@ -207,6 +218,7 @@ export class CompositeTilemap extends Container
      *      per row.
      * @param [options.animCountY=1024] - For animated tiles, this is the number of animation frame textures
      *      per column.
+     * @param [options.animDivisor=1] - For animated tiles, this is the animation duration each frame
      * @param [options.alpha=1] - Tile alpha
      * @return This tilemap, good for chaining.
      */
@@ -224,6 +236,7 @@ export class CompositeTilemap extends Container
             rotate?: number,
             animCountX?: number,
             animCountY?: number,
+            animDivisor?: number,
             alpha?: number,
         } = {}
     ): this
@@ -442,6 +455,7 @@ export class CompositeTilemap extends Container
         animY?: number,
         animWidth?: number,
         animHeight?: number,
+        animDivisor?: number,
         alpha?: number
     ): this
     {
@@ -453,6 +467,7 @@ export class CompositeTilemap extends Container
                 animY,
                 animCountX: animWidth,
                 animCountY: animHeight,
+                animDivisor,
                 alpha
             }
         );