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 Description
SDL_WINDOW_FULLSCREEN Crée une fenêtre en plein écran
SDL_WINDOW_FULLSCREEN_DESKTOP Crée une fenêtre en plein écran à la résolution du bureau
SDL_WINDOW_SHOWN Crée une fenêtre visible
SDL_WINDOW_HIDDEN Crée une fenêtre non visible
SDL_WINDOW_BORDERLESS Crée une fenêtre sans bordures
SDL_WINDOW_RESIZABLE Crée une fenêtre redimensionnable
SDL_WINDOW_MINIMIZED Crée une fenêtre minimisée
SDL_WINDOW_MAXIMIZED 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