Articles - Animation avec la SDL

Inconnue : Non-static method Url::html_convert_root_relative2absolute() should not be called statically, assuming $this from incompatible context dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/content/parser/content_second_parser.class.php à la ligne 78

Inconnue : Non-static method Url::path_to_root() should not be called statically, assuming $this from incompatible context dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/util/url.class.php à la ligne 234

Inconnue : Non-static method Url::server_url() should not be called statically, assuming $this from incompatible context dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/util/url.class.php à la ligne 235

Inconnue : Non-static method Url::_build_html_match_regex() should not be called statically, assuming $this from incompatible context dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/util/url.class.php à la ligne 240

Suggestion : Non-static method Url::_convert_url_to_absolute() should not be called statically dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/util/url.class.php à la ligne 241

Suggestion : Non-static method Comments::com_display_link() should not be called statically dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/articles/articles.php à la ligne 97

Suggestion : Non-static method SHA256::hash() should not be called statically dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/functions.inc.php à la ligne 1176

Suggestion : Non-static method SHA256::compute() should not be called statically dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/lib/sha256.class.php à la ligne 183

Suggestion : Non-static method SHA256::sum() should not be called statically dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/lib/sha256.class.php à la ligne 306

Suggestion : Non-static method SHA256::hashHex() should not be called statically dans le fichier /data/web/f5/1b/0e/gamedeve.tuxfamily.org/htdocs/kernel/framework/lib/sha256.class.php à la ligne 189

Animation avec la SDL

Poster commentaire

Dans cet article nous allons voir comment faire des animations avec la SDL à partir d'une seule image contenant plusieurs dessins. Le langage utilisé dans ce tutoriel est le C, la première fois j'ai choisis le C++, mais je me suis dis qu'en le faisais en C un plus grand nombre de gens pourrons en profiter, le code peut trés simplement être adapté pour ceux qui utilise le C++.

Nos ressources

Pour ce tutoriel, on a besoin d'images de ce genre :

Vous pouvez les trouver en cherchant sprites sur google, sinon voici le site ou je prend mes sprites : Sprite Data Base, vous allez trouver de très grandes images, vous devrai donc les couper pour les utiliser

[title=1][/title]

Le principe de la méthode qu'on va utiliser est d'afficher les images à l'affilé. Dans cette méthode l'image contient plusieurs dessins.
Nous avons besoin de connaitre certaines choses comme la taille des dessins en pixels, la marge entre chaque dessin et un autre en pixels ...

Pour ne pas vous attarder avec mon discours, je vais passer à la partie la plus importante, qui est de coder

Au début j'ai voulu utiliser le C++ dans ce cours, ainsi on aurai travailler avec des classes (POO), mais pour qu'un maximum de gens puissent en profiter, j'ai changé d'avis, et je vais utiliser que le C dans la suite du tutoriel.

La structure Animation

Pour ce tutoriel on aura besoin d'une structure (une seule), donc voici le code de la structre :

Code C :

struct
{
    int index;
    int lasttime;
    int delay;
    SDL_Surface* image;
    int width;
    int offset;
    int margin;
} typedef Animation;

Quelques explications s'imposent

index : c'est l'index du dessin qui sera affiché
lasttime : le temps lors du dernier changement de dessin
delay : le temps entre deux dessin en millisecondes
image : l'image qui contient tous les dessins
width : la largeur du chaque dessin
offset : le nombre de pixels a ignorer par la droite (marge à laisser au début)
margin : la marge entre deux dessins

Par la suite, on a besoin de deux fonctions :

Code C :

Animation* createAnimation(SDL_Surface* image, int width, int offset, int margin);
void freeAnimation(Animation* anim);

createAnimation : créer une nouvelle structure tout en allouant la mémoire necessaire.
freeAnimation : libére la mémoire précédement allouée lors de l'appelle à la fonction createAnimation

Le code de ces deux fonctions n'a rien de magique :

Code C :

Animation* createAnimation(SDL_Surface* image, int width, int offset, int margin)
{
    Animation* anim = malloc(sizeof(Animation));
    anim->image = image;
    anim->width = width;
    anim->offset = offset;
    anim->margin = margin;
    anim->delay = 200;
    return anim;
}
 
void freeAnimation(Animation* anim)
{
    free(anim);
}

Les fonctions d'animation

On a besoin de deux fonctions très basiques, l'une nous permet de définir la vitesse de l'animation et l'autre d'afficher l'image.

Code C :

void setAnimationSpeed(Animation* anim, unsigned int speed);
void drawAnimation(Animation* anim, SDL_Surface* screen, SDL_Rect* position);

Code C :

void setAnimationSpeed(Animation* anim, unsigned int speed)
{
    if(speed > 0)
        anim->delay = 1.f/speed*1000.f;
}
 
void drawAnimation(Animation* anim, SDL_Surface* screen, SDL_Rect* position)
{
    if(SDL_GetTicks() - anim->lasttime >= anim->delay)
    {
        anim->lasttime = SDL_GetTicks();
        anim->index++;
        if(anim->offset + anim->offset*anim->index + anim->width*anim->index >= anim->image->w)
            anim->index = 0;
    }
    SDL_Rect rect;
    rect.w = anim->width;
    rect.h = anim->image->h;
    rect.x = anim->offset + anim->index * anim->width + anim->index * anim->margin;
    rect.y = 0;
    SDL_BlitSurface(anim->image, &rect, screen, position);
}

Le but de la fonction drawAnimation est d'afficher la bonne partie de l'image, cette partie change avec le temps pour avoir l'effet d'animation.

Dans main.cpp :
Code C :

#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>
#include "Animation.h"
 
int main(int argc, char** argv)
{
    SDL_Init(SDL_INIT_VIDEO);
 
    SDL_Surface* screen = SDL_SetVideoMode(640, 480, 32, SDL_HWSURFACE);
    SDL_WM_SetCaption("Animation avec SDL", 0);
 
    SDL_FillRect(screen, 0, SDL_MapRGB(screen->format, 200, 200, 240));
    SDL_Flip(screen);
 
    SDL_Surface* narutoStrip = SDL_LoadBMP("naruto_run.bmp");
    SDL_SetColorKey(narutoStrip, SDL_SRCCOLORKEY, SDL_MapRGB(narutoStrip->format, 0, 255, 0));
    SDL_Surface* soldierStrip = SDL_LoadBMP("soldier_run.bmp");
    SDL_SetColorKey(soldierStrip, SDL_SRCCOLORKEY, SDL_MapRGB(soldierStrip->format, 0, 0, 255));
 
    Animation* narutoAnim = createAnimation(narutoStrip, 54, 2, 2);
    setAnimationSpeed(narutoAnim, 10);
    Animation* soldierAnim = createAnimation(soldierStrip, 70, 2, 1);
    setAnimationSpeed(soldierAnim, 10);
 
    int continuer = 1;
    SDL_Event event;
 
    SDL_Rect pos;
    pos.x = 8;
 
    while (continuer)
    {
        SDL_PollEvent(&event);
 
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
            break;
        }
        SDL_FillRect(screen, 0, SDL_MapRGB(screen->format, 200, 200, 240));
        pos.y = 64;
        SDL_BlitSurface(narutoStrip, 0, screen, &pos);
        pos.y = 128;
        drawAnimation(narutoAnim, screen, &pos);
        pos.y = 192;
        SDL_BlitSurface(soldierStrip, 0, screen, &pos);
        pos.y = 256;
        drawAnimation(soldierAnim, screen, &pos);
        SDL_Flip(screen);
        SDL_Delay(8);
    }
 
    freeAnimation(narutoAnim);
    freeAnimation(soldierAnim);
 
    SDL_Quit();
 
    return 0;
}

Ecrit par: OSasuke, Le: 16/11/11

Game Developers

GameDevelopper

Partenaires

En ligne

Nos ressources

La structure Animation

Les fonctions d'animation