Afficher une image avec SDL
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
. 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
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é
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
.
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
.
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à
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
.
III - Afficher une image
Enfin, nous arrivons à la partie intéressante : comment afficher une image
. Vous allez voir que ce n'est pas si simple que ça.
Tout d'abord, il nous faut une image... Prenez donc celle-ci :

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 :
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 :
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 :
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 :
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 :
Pourquoi ça ne marche pas
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 :
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 :
On place ensuite le tout dans notre code, ce qui donne :
Code :
Voilà... Vous savez maintenant afficher une image à l'aide de la SDL
.
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
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
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é
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
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
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à
III - Afficher une image
Enfin, nous arrivons à la partie intéressante : comment afficher une image
Tout d'abord, il nous faut une image... Prenez donc celle-ci :

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
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




