Tuto :

Installation, configuration
et utilisation de la SDL2
sur CodeBlocks
F.Belabdelli
belabdelli@3il.fr
 Etape 1 : Installation de CodeBlocks
Télécharger (si vous ne l’avez pas encore) la dernière version
de CodeBlocks avec le compilateur MinGW :
http://www.codeblocks.org/downloads/binaries/

Double-cliquer sur
CodeBlocks sera installé dans le
dossier suivant :
C:\Program Files\CodeBlocks
https://zestedesavoir.com/tutoriels/461/utiliser-une-
bibliotheque-sous-windows-avec-mingw-ou-code-
blocks-en-langage-c/
2
Etape 2-1 : Installation de SDL2

Télécharger SDL2 du site officiel :

https://github.com/libsdl-org/SDL/releases/tag/release-2.26.3

Choisir : SDL2-devel-2.26.3-mingw.zip
Déplacer cette archive dans un dossier comme :
C:/Dev23/
Décompresser l’archive. Vous aller obtenir :
C:\dev23\SDL2-2.26.3
x86_64-w64-mingw32 : machine 64 bits
i686-w64-mingw32 : machine 32 bits

3
Etape 2-2 : Installation de SDL2

Dans une fenêtre console « cmd » taper gcc –v pour savoir la

version de SDL2 à utiliser.

4
Etape 3-1 : Création d’un projet Console Application

Lancer codeblocks et créer un nouveau projet de type

« console Application »

Choisir ensuite l’extension C :

5
Etape 3-2 : Création d’un projet Console Application

Donner un nom au projet

Choisir un emplacement pour le projet..

Cliquer sur « Next » ensuite « Finish »

6
Etape 4-1 : Configuration de CodeBlocks

Choisir le MinGW contenant le compilateur GCC.

Dans le menu, choisir « Settings » ensuite « Compiler »
Choisir l’onglet « Toolchain executables »
Sélectionner le dossier MinGW qui est dans le
Dossier d’installation de CodeBlocks

7
Etape 4-2 : Configuration de CodeBlocks

Indiquer les fichiers « include »

Choisir l’onglet « Search directories »
Ensuite l’onglet « Compiler »
Appuyer sur le bouton « Add » pour
spécifier le chemin des fichiers *.h
nécessaires pour la compilation
Si vous avez suivi les étapes
précédentes, vous devez choisir le dossier :

C:\dev23\SDL2-2.26.3\x86_64-w64-mingw32\include

8
Etape 4-3 : Configuration de CodeBlocks

Indiquer les fichiers « lib »

Choisir l’onglet « Search directories »
Ensuite l’onglet « Linker »
Appuyer sur le bouton « Add »
pour spécifier les librairies SDL2
Si vous avez suivi les étapes
précédentes, vous devez choisir
le dossier :

C:\dev23\SDL2-2.26.3\x86_64-w64-mingw32\lib

9
 Etape 4-4 : Configuration de CodeBlocks

Indiquer les librairies de liens :

Choisir l’onglet « Linker settings »
Appuyer sur le bouton « Add »
pour ajouter les librairies SDL2
Ajouter les 2 librairies suivantes :

libSDL2main.a
libSDL2.dll.a

Saisir dans la partie « Other linker options » les options suivantes

-lmingw32 -lSDL2main -lSDL2

10
Etape 4-6 : Configuration de CodeBlocks

Ajouter le fichier SDL2.dll

Aller dans le dossier : C:\dev23\SDL2-2.26.3\x86_64-w64-mingw32\bin
Copier le fichier SDL2.dll
Aller dans le dossier du projet (là où vous avez créer le projet).
Copier SDL2.dll (il est au même niveau que « testSDL2.cbp »)

11
 Etape 5 : Tester un programme SDL2
#include <stdlib.h> if( pWindow )
#include <stdio.h> {
#include <SDL2/SDL.h> SDL_Delay(3000); /* Attendre trois secondes, que
int main(int argc, char** argv) l'utilisateur voit la fenêtre */
{ SDL_DestroyWindow(pWindow);
/* Initialisation simple */ }
if (SDL_Init(SDL_INIT_VIDEO) != 0 ) else
{ {
fprintf(stdout,"Échec de l'initialisation de la SDL fprintf(stderr,"Erreur de création de la fenêtre:
(%s)\n",SDL_GetError()); %s\n",SDL_GetError());
return -1; }
} SDL_Quit();
/* Création de la fenêtre */ return 0;
SDL_Window* pWindow = NULL; }
pWindow = SDL_CreateWindow("Ma premiere application
SDL2",SDL_WINDOWPOS_UNDEFINED,
SDL_WINDOWPOS_UNDEFINED, 640, 480,
SDL_WINDOW_SHOWN);

12
Première fenêtre

13
Introduction à SDL2

La SDL - Simple DirectMedia Layer - est une bibliothèque

multimédia
Elle permet de créer des jeux vidéos 2D en C, C++, python…
Elle permet de :
afficher des fenêtres
afficher des images
de gérer le clavier
de jouer du son
Elle est multiplateforme, possède quelques 600 fonctions

https://zestedesavoir.com/tutoriels/pdf/1014/utiliser-la-sdl-en-langage-c.pdf

14
Initialiser la SDL2

https://wiki.libsdl.org/SDL2/SDL_Init
SDL_Init(SDL_INIT_VIDEO | SDL_INIT_AUDIO);

Drapeaux Description
SDL_INIT_VIDEO Initialise le système de gestion de rendu
SDL_INIT_JOYSTICK Initialise le système de gestion des joysticks
SDL_INIT_GAMECONTROLLER Initialise le système de gestion des contrôleurs de jeux
SDL_INIT_EVENTS Initialise le système de gestion des évènements
SDL_INIT_EVERYTHING Permet de tout initialiser
SDL_INIT_TIMER Initialise le système de gestion du temps
SDL_INIT_AUDIO Initialise le système de gestion de l’audio

15
Créer une fenêtre

https://wiki.libsdl.org/SDL2/SDL_CreateWindow
SDL_CreateWindow("Ma premiere application SDL2",
SDL_WINDOWPOS_UNDEFINED,
SDL_WINDOWPOS_UNDEFINED,
640,
480,
SDL_WINDOW_SHOWN);

Drapeaux
SDL_WINDOW_FULLSCREEN
SDL_WINDOW_FULLSCREEN_DESKTOP
SDL_WINDOW_SHOWN
SDL_WINDOW_HIDDEN
SDL_WINDOW_BORDERLESS
SDL_WINDOW_RESIZABLE
SDL_WINDOW_MINIMIZED
SDL_WINDOW_MAXIMIZED
Description
Crée une fenêtre en plein écran
Crée une fenêtre en plein écran à la résolution du bureau
Crée une fenêtre visible
Crée une fenêtre non visible
Crée une fenêtre sans bordures
Crée une fenêtre redimensionnable
Crée une fenêtre minimisée
Crée une fenêtre maximisée
16
Dessiner dans la fenêtre

https://wiki.libsdl.org/SDL2/SDL_CreateRenderer
Il faut utiliser un rendu (SDL_Renderer) pour dessiner dans une
fenêtre

Drapeaux Description
SDL_RENDERER_SOFTWARE Le renderer est logiciel, le rendu sera effectué par le CPU et les
données seront stockées en mémoire vive.
SDL_RENDERER_ACCELERATED Le renderer utilise l’accélération matérielle. Les données sont en
mémoire vidéo, plus rapide que la mémoire vive.
SDL_RENDERER_PRESENTVSYNC La mise à jour de la fenêtre de rendu est synchronisé avec la fréquence
de rafraîchissement de l’écran.

17
 Elément de dessin de base : le point et le rectangle
https://wiki.libsdl.org/SDL2/SDL_Rect
(0,0)

18
Dessiner un rectangle

// Déclarer et initialiser un rectangle

SDL_Rect rect ={20,30,100,200}; // x, y, largeur, hauteur
// Choisir une couleur de dessin, ici blanche
SDL_SetRenderDrawColor(pRenderer, 255, 255, 255, 255);
// Effacer l’écran (donc dessiner le fond avec la couleur choisie)
SDL_RenderClear(pRenderer);
// Changer la couleur de dessin (ici bleue)
SDL_SetRenderDrawColor(pRenderer, 0, 0, 255, 255);
// Dessiner le contour du rectangle
SDL_RenderDrawRect(pRenderer, &rect);
// Mettre à jour le rendu
SDL_RenderPresent(pRenderer);

19
Quelques fonctions utiles sur les Rectangles

https://wiki.libsdl.org/SDL2/CategoryRect
Vérifie si 2 rectangles ont une intersection :
SDL_bool SDL_HasIntersection(const SDL_Rect* A, const SDL_Rect* B)
Vérifie si 2 rectangles ont une intersection et donne le rectangle intersection
SDL_bool SDL_IntersectRect(const SDL_Rect* A, const SDL_Rect* B, SDL_Rect* result)
Vérifie si un point est dans un restangle :
SDL_bool SDL_PointInRect(const SDL_Point* p, const SDL_Rect* r)
Dessiner un rectangle :
int SDL_RenderDrawRect(SDL_Renderer* renderer, const SDL_Rect* rect)

20
Charger une image de fond

// Charger une image bmp

SDL_Surface* image = SDL_LoadBMP("tigre.bmp");
SDL_Texture* pTextureImage =
SDL_CreateTextureFromSurface(pRenderer, image);
SDL_FreeSurface(image);
SDL_SetRenderDrawColor(pRenderer, 0, 0, 0, 255);
SDL_RenderClear(pRenderer);

SDL_RenderCopy(pRenderer, pTextureImage, NULL, NULL); //

Affiche ma texture sur tout l'écran

SDL_RenderPresent(pRenderer);

21
Afficher une image

SDL_Rect src = {0, 0, 0, 0};

SDL_Rect dst = { 0, 0, 400, 300 };
SDL_QueryTexture(pTextureImage, NULL, NULL, &src.w,
&src.h);

22