# 2D Animated Tile rendering

The current game I've been working on needs to have animated tiles. I have a code for Tile and TileMap from my previous game that I recycled. However, it does not support tile animations.

The tile animations are independent from each other. Now, I have an Animation class for my sprites that looks like this (parts are ommited/abstracted):

function Animation(spriteatlas, frames, animationDelay){
this.spriteAtlas = spriteatlas;
this.frames = frames;                     // array of number of frames
this.animationDelay = animationDelay;     // array of delays

this.currentAnimationIndex = 0;

this.currentFrame = 0;
this.delayCounter = 0;
}

Animation.prototype.startAnimation = function(index){
this.currentFrame = 0;
this.delayCounter = this.animationDelay[index];
}

Animation.prototype.update = function(){
this.delayCounter--;
if(this.delayCounter === 0){
this.currentFrame++;

if(this.currentFrame == this.frames[i]){
this.currentFrame = 0;
}
}
}

Animation.prototype.render = function(ctx){
// Render the appropriate sprite
}


The actual Animation class has much more packed into it, since it is a generic animation.

I can just add an instance of the Animation in every tile, but I think it is inefficient and/or wasteful. Moreover, not all tiles are animated. One may argue that, yeah, it just costs a little memory since this is just a small game. But I do want to know and learn about more efficient ways so I can use them in my next bigger projects.

What are the techniques I can use?