Accueil Articles Tutoriels Forums
Afficher une image avec SDL
Créé par Loack le 08 Déc 2007 à 18:02, dernière modification le 05 Jan 2008 à 10:13
Tutoriel original écrit par Gabriel


Tout d'abord, le sommaire :

I - Introduction
II - Mise en place de la SDL
III - Afficher une image
IV - Gestion du clavier et de la souris



I - Introduction

L'introduction va être courte car je sais que vous êtes affamés de connaissances :smile:. Déjà il faut savoir que SDL signifie Simple DirectMedia Layer, c'est un moteur 2D de bas niveau. Il n'est pas très puissant mais il va nous suffire largement pour ce qu'on veut faire, de plus, il est facile à prendre en main.



II - Mise en place de la SDL


Pour utiliser la SDL, il faut installer de nouveaux fichiers de librairie (bibliothèque), préparer le linker et mettre en place les fichiers nécessaires à son exécution. Je vais vous expliquer comment l'installer sur Dev-C++ et Visual C++. Commençons par Dev-C++...

Il était temps :exclaim:



Dev-C++

Tout d'abord vous devez télécharger les fichiers necessaire, aujourd'hui c'est mon jour de bonté : ça se trouve ici.

Après les avoir téléchargés, décompressez le dossier. Vous avez normalement quatre dossiers (bin, include, share et lib). Copiez-les dans le répertoire de votre compilateur : C:\Dev-Cpp\ (attention le chemin peut être différent suivant la manière dont vous avez installé Dev-C++)

Ca y est, c'est installé :question:

Presque, il nous reste plus qu'à préparer notre projet, ceci est extrêmement simple si vous suivez bien tout :

Tout d'abord créer un nouveau projet console, et j'insiste sur console, puis dans les menus d'en haut :
Projet/Options du projet, onglet Paramètres. Ajoutez dans le cadre éditeur de liens (celui qui est tout à droite) cette ligne là :

-lmingw32 -lSDLmain -lSDL

Pour en finir, dans le dossier lib, il y a un fichier DLL nommé : SDL.dll, copiez-le dans le dossier de votre projet, faute de quoi votre programme ne fonctionnera pas :happy: .

VISUAL C++

Pour Visual, c'est le même système à quelques détails près, alors suivez bien la procédure. Téléchargez le fichier necessaire se trouvant ici.

Décompressez l'archive, puis copiez les dossiers obtenus dans le répertoire de Microsoft Visual C++. Il faut que vous copiez en gardant la même arborescence :smile: .

Comme pour Dev-C++, nous allons créer un nouveau projet, toujours en console. Pour inclure les librairies (bibliothèques), ajoutez ces deux lignes de code dans le fichier source principal :

#pragma comment(lib,"sdlmain.lib")
#pragma comment(lib,"sdl.lib")

Ce n'est pas fini, maintenant allez dans :
menu Projet/Settings, onglet C/C++, sélectionnez category = code generation, puis dans use run time library, sélectionnez multithreaded DLL.

Voilà :smile: et surtout ne pas oublier de mettre le fichier SDL.dll qui se trouve dans le dossier lib de l'archive, dans le dossier de votre projet :smile:.



III - Afficher une image


Enfin, nous arrivons à la partie intéressante : comment afficher une image :smile:. Vous allez voir que ce n'est pas si simple que ça.
Tout d'abord, il nous faut une image... Prenez donc celle-ci :
Image

Copiez l'image dans votre projet. Nous allons maintenant commencer le code...

Tout d'abord il faut déclarer la librairie que nous allons utiliser, pour l'instant nous n'avons besoin que de la SDL. Donc, déclarons :

Code :
#include <sdl>



Il faut bien déclarer notre fonction principale. Attention, la fonction principale va être spéciale car elle contient des paramètres dont SDL a besoin :

Code :
#include <sdl>

int main(int argc, char **argv)
{

    return 0;
}



Pour l'instant, rien de bien compliqué. Maintenant, nous allons déclarer deux surfaces : une pour la fenêtre et une autre pour l'image que l'on affichera.

On utilisera pour cela :
SDL_Surface *Nom

Code :
#include <sdl>

SDL_Surface *screen; //pour la fenetre
SDL_Surface *image; //pour l image

int main(int argc, char **argv)
{

    return 0;
}



Voilà nos deux surfaces de créées. Il nous reste à initialiser la fenêtre, et à appliquer une image.

Nous allons donc créer une fonction pour l'initialisation de la SDL, comme ceci :

Code :
#include <sdl>

SDL_Surface *screen; //pour la fenêtre
SDL_Surface *image; //pour l'image

void InitSDL()
{
    SDL_Init(SDL_INIT_VIDEO);        // prépare SDL
    screen = SDL_SetVideoMode(800, 600, 32,SDL_HWSURFACE|SDL_DOUBLEBUF); 
}

int main(int argc, char **argv)
{
   
    return 0;
}



Voilà, notre fenêtre peut être initialisée, je vous laisse étudier un peu la fonction, mais pour l'instant rien de trop compliqué.

Maintenant, nous allons initialiser notre surface image pour qu'elle ait notre image en mémoire. C’est simple, il suffit juste de déclarer comme ceci :

image = SDL_LoadBMP("image1.bmp");

Nouvelle fonction, SDL_LoadBMP(), qui permet de charger une image de type BMP.

Résumons, nous devons avoir ceci comme code pour l'instant :

Code :
#include <sdl>

SDL_Surface *screen; //pour la fenêtre
SDL_Surface *image; //pour l image

void InitSDL()
{
    SDL_Init(SDL_INIT_VIDEO);        // preapare SDL
    screen = SDL_SetVideoMode(800, 600, 32,SDL_HWSURFACE|SDL_DOUBLEBUF); 
}

int main(int argc, char **argv)
{
    InitSDL();   
    image=SDL_LoadBMP("image1.bmp");
    return 0;
}



Pourquoi ça ne marche pas :question:

C'est normal, notre image est chargée, mais elle n'est pas mise sur la surface screen. Ce problème se résoud facilement grâce à une nouvelle fonction : SDL_BlitSurface(), qui nous permet en quelque sorte de tartiner (mettre du chocolat sur une tartine par exemple), sauf que dans notre cas c'est de mettre une image sur une fenêtre. Alors utilisons-la :

Code :
#include <sdl>

SDL_Surface *screen; //pour la fenetre
SDL_Surface *image; //pour l image

void InitSDL()
{
    SDL_Init(SDL_INIT_VIDEO);        // preapare SDL
    screen = SDL_SetVideoMode(800, 600, 32,SDL_HWSURFACE|SDL_DOUBLEBUF); 
}

int main(int argc, char **argv)
{
    InitSDL();   
    image=SDL_LoadBMP("image1.bmp");
    SDL_BlitSurface(image,NULL,screen,NULL);
    return 0;
}




IV - Gestion du clavier et de la souris


Il nous reste un dernier truc pour que notre code fonctionne, c'est les évènments. Car dans notre programme il peut se passer plein de choses, comme lorsque l'on clique, l'on appuie sur une touche ou alors lorsque l'on bouge la souris. Nous allons donc créer une boucle qui permet de récuperer ces évènements et de les interpréter.

Il faut avant tout déclarer notre évenement :

SDL_Event event;

Puis notre boucle qui sera :

Code :
    while(1)            
    {
        while(SDL_PollEvent(&event))        // aquisition d'evenement
        {
            if (event.type == SDL_KEYDOWN)  // on a appuyer sur une touche
            {
                if (event.key.keysym.sym == SDLK_ESCAPE) return 0;  // si on a appuyer sur echappe            }
        }
    }



On place ensuite le tout dans notre code, ce qui donne :

Code :
#include <sdl>

SDL_Surface *screen; //pour la fenetre
SDL_Surface *image; //pour l image
SDL_Event event;

void InitSDL()
{
    SDL_Init(SDL_INIT_VIDEO);        // preapare SDL
    screen = SDL_SetVideoMode(800, 600, 32,SDL_HWSURFACE|SDL_DOUBLEBUF); 
}

int main(int argc, char **argv)
{
    InitSDL();   
    image=SDL_LoadBMP("image1.bmp");
    SDL_BlitSurface(image,NULL,screen,NULL);
    while(1)            // boucle
    {
        while(SDL_PollEvent(&event))        // aquisition d'evenement
        {
            if (event.type == SDL_KEYDOWN)  // on appuie sur une touche ?
            {
                if (event.key.keysym.sym == SDLK_ESCAPE) return 0;
            }
        }
                 SDL_Flip(screen); //on affiche la prochaine frame
    }
    SDL_Quit();
    return 0;
}



Voilà... Vous savez maintenant afficher une image à l'aide de la SDL :smile:.