how do I set the speed of animations?

Question

I'm using a Monogame template in Visual Studio. I have a Player.cs, which holds the WASD movement of my player, and the Game1.cs, where the Player class is updated.

I figured the next step, now that I can move around, would be to set animation to the movement. I'm not too sure how to go about it.

Previously, I followed a crash tutorial on how to get a sprite animated from a spritesheet, but it didn't have any triggers, such as when I move the player left, start the walking left animation.

Another problem is that it didn't tell me how to slow the animation down, so let's say I'm starting from the beginning in the ways of setting an animated sprite.

I'm currently at the place where, when I go a certain direction, the image switches to the corresponding one (so my player always faces the right way) - unfortunately it has all the frames displaying at once! :¬/

Any help would be appreciated! :)

Note: the Texture for my player isn't mine, and it's only a placeholder, which will be replaced by my own drawings in future.

Answer 1

~ This answer is just to help with animation speed. ~

If you want a detailed tutorial on making the animation itself, follow this link to RB Whitaker's website page :)

NOTE: although his tutorials are good, they are quite old. Most of his stuff will work, but if not, it might be something to do with the difference in versions etc.

http://rbwhitaker.wikidot.com/texture-atlases-1

For those who just want the source code for making an animation go, that's what I'll start with. The code for slowing it down will be after.

The following is in an AnimatedSprite.cs class :

public class AnimatedSprite
    {
        public Texture2D Texture { get; set; }
        public int Rows { get; set; }
        public int Columns { get; set; }

        private int currentFrame;
        private int totalFrames;

        private int currentUpdate;
        private int updatesPerFrame = 8;




        public AnimatedSprite(Texture2D texture, int rows, int columns)
        {
            Texture = texture;
            Rows = rows;
            Columns = columns;
            currentFrame = 0;
            totalFrames = Rows * Columns;
        }

        public void Update(GameTime gameTime)
        {
            currentUpdate++;
            if(currentUpdate == updatesPerFrame)
            {
                currentUpdate = 0;

                currentFrame++;
                if(currentFrame == totalFrames)
                {
                    currentFrame = 0;
                }
            }

        }

        public void Draw(SpriteBatch _spriteBatch, Vector2 location)
        {
            int width = Texture.Width / Columns;
            int height = Texture.Height / Rows;
            int row = currentFrame / Columns;
            int column = currentFrame % Columns;

            Rectangle sourceRectangle = new Rectangle(width * column, height * row, width, height);
            Rectangle destinationRectangle = new Rectangle((int)location.X, (int)location.Y, width, height);

            _spriteBatch.Draw(Texture, destinationRectangle, sourceRectangle, Color.White);
            
        }


    }

To implement this into the game, move over to your Game1.cs.

//put this with the rest of your fields
private AnimatedSprite animatedSprite;

//in your LoadContent
Texture2D texture = Content.Load<Texture2D>(" /*your animated sprite image name*/ ");
animatedSprite = new AnimatedSprite(texture, /*your columns*/ , /*your rows*/);

//in your Update
animatedSprite.Update(gameTime);

//in your Draw
animatedSprite.Draw(_spriteBatch, new Vector2( /*x position*/ , /*y position*/ ));

Okay, now you've an animation going. But it's super fast. Let's fix it! :D

Got back to your AnimatedSprite.cs :

//add to your fields
private int currentUpdate;
private int updatesPerFrame = 8;

//in your Update
//you want to move your "if" statement that's already there into this one
currentUpdate++;
if (currentUpdate == updatesPerFrame)
{
    currentUpdate = 0;

    currentFrame++;
    if (currentFrame == totalFrames)
    {
    /* ...*/
    }
}

That should be it!

The number assigned to updatesPerFrame will determine the speed of your animation. So if you make it a bigger number, the animation will be slower. Smaller number will be faster.

If there's any errors, please let me know! :)