SDL How to animate a Sprite when key is pressed

Question

I'm going to get straight to the point: I have a sprite sheet that has 8 movement sprites (http://i.imgur.com/hLpo2Qn.png cant post images :\ ), so it creates the illusion that im walking) My problem is that when i press and hold a key i want the sprite to kinda have an animated walk. For example when i press the up arrow the first two sprites play in a loop until i let go of the key. All I've been able to do so far is to get only one sprite showing for each direction, so it kinda gives an unrealistic effect. Code:

#include <SDL/SDL.h>

int main(int argc, char* argv[])
{
SDL_Init(SDL_INIT_EVERYTHING);
SDL_Surface* screen, *image;
screen = SDL_SetVideoMode(640, 480, 32, SDL_SWSURFACE);
bool running = true;
const int FPS = 30;
Uint32 start;
bool direction[4] = {0, 0, 0, 0};
SDL_Rect pos;
    pos.x = 0;
    pos.y = 0;
    SDL_Rect sprite;
    sprite.x = 160;
    sprite.y = 0;
    sprite.w = 32;
    sprite.h = 32;;
Uint32 color = SDL_MapRGB(screen -> format, 0xff, 0xff, 0xff);
image = SDL_DisplayFormat(SDL_LoadBMP("sprite.bmp"));
SDL_SetColorKey(image, SDL_SRCCOLORKEY, SDL_MapRGB(screen -> format, 255, 0, 255));
while (running == true)
{
    start = SDL_GetTicks();
    SDL_Event event;
    while(SDL_PollEvent(&event))
    {
        switch(event.type)
        {
        case SDL_QUIT:
            running = false;
            break;
        case SDL_KEYDOWN:
            switch(event.key.keysym.sym)
            {
            case SDLK_UP:
                direction[0] = 1;
                sprite.x = 0;
                break;
            case SDLK_LEFT:
                direction[1] = 1;
                sprite.x = 224;
                break;
            case SDLK_DOWN:
                direction[2] = 1;
                sprite.x = 160;
                break;
            case SDLK_RIGHT:
                direction[3] = 1;
                sprite.x = 96;
                break;
            }
            break;
        case SDL_KEYUP:
            switch(event.key.keysym.sym)
            {
            case SDLK_UP:
                direction[0] = 0;
                sprite.x = 32;
                break;
            case SDLK_LEFT:
                direction[1] = 0;
                break;
            case SDLK_DOWN:
                direction[2] = 0;
                break;
            case SDLK_RIGHT:
                direction[3] = 0;
                break;
            }
            break;
        }
    }
    if(direction[0])
        pos.y-- ;
    if(direction[1])
        pos.x--;
    if(direction[2])
        pos.y++;
    if(direction[3])
        pos.x++;

    SDL_FillRect(screen, &screen -> clip_rect, color);
    SDL_BlitSurface(image, &sprite, screen, &pos);
    SDL_Flip(screen);

        if(1000 / FPS > SDL_GetTicks() - start)
        SDL_Delay(1000 / FPS - (SDL_GetTicks() - start));

}
SDL_FreeSurface(image);
SDL_Quit();
return 0;

}

Answer 1

Disclaimer: This is not the only or best way to achieve what you wanting. It is simply one possible solution

You need to implement a basic timer/counter to switch between the two appropriate images.

For this example I would store your sprite offsets in a 2D array int sprite_x[4][2]; - this would represent the four directions and the two image offsets for each. Then on a key press instead of using a bool array just have a single integer index int sprite_index; for indexing the sprite offsets. All you would then need to do is have another integer value called something like int current_key; which you would switch between 0 and 1.

// Used for indexing the 2D array
enum
{
    WALK_LEFT,
    WALK_RIGHT,
    WALK_UP,
    WALK_DOWN

    WALK_MAX
};

// How many sprites per animation
const int NUM_KEYFRAMES = 2;

// 2D array to hold the x value offsets for sprites
int sprite_x[WALK_MAX][NUM_KEYFRAMES];

int sprite_index = WALK_LEFT;  // Current animation
int current_key = 0;           // Current keyframe for the animation

// Set up all the x value offsets in the array
sprite_x[WALK_LEFT][0] = 0;
sprite_x[WALK_LEFT][1] = 32;
sprite_x[WALK_RIGHT][0] = 64;
sprite_x[WALK_RIGHT][1] = 96;
.
.
.

You then simply update the sprite x value accordingly sprite.x = sprite_x[sprite_index][current_key];