0
\$\begingroup\$

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?

\$\endgroup\$
0
\$\begingroup\$

Probably the best lesson to learn from this "don't optimise too soon"; no matter how big your project gets, there is going to be a finite number of tiles being updated at any given time, so splitting hairs over implementation for efficiency reasons may be unnecessary.

To answer your question directly, I don't see a good reason not to treat all image as potential animations, where still images are 1-frame animations.

\$\endgroup\$
0
\$\begingroup\$

I'm doing effectively the same thing as you, although I think I have things organized a bit differently.

I have an object (struct actually) that stores information about each map tile, including if it has more than one frame and what the frame cycle time is. I then have a sprite-map object that contains all those tiles. I then update the sprite-map every tick and it updates any tiles that need to change frame.

This means all the animations update in sync, but each tile can animate at a different rate. The animation is cheap because it is just changing one number (active frame), and only on the tile type, not every instance. To make drawing cheaper you could use a Dirty-Rect system to only draw changed tiles. The sprite-map iterates through all its tiles and just skips any tile that doesn't contain the animated flag. Another optimization would be to store the list of animated tiles on load and only update those (although the ability to toggle animation could be neat).

You can read more about the system I'm working on in this blog post. I am using multiple layered views, and I latter refactored the code so each view gets its own independent copy of the tiles so the animations in different areas could be controlled separately.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.