Aller au menu - Aller au contenu

Icône Faire des rotations avec SDL_gfx

Par Avatar Clément.S
Mise à jour : 12/01/2009
Difficulté : Intermédiaire Intermédiaire
108 visites depuis 7 jours, classé 550/786
Bonjour à tous. :D

Bienvenue dans ce mini-tuto où vous allez apprendre à faire des rotations sur des surfaces grâce à... SDL_gfx. :o
Ce tuto nécessite que vous connaissiez un peu la SDL. Donc ça ne sert à rien d'essayer de comprendre ce tuto si vous n'avez pas une petite connaissance de cette bibliothèque graphique. Si vous ne connaissez pas la SDL, vous pouvez suivre les cours de M@teo21 ici.

Bon, commençons...
Retour en haut
Sommaire du tutoriel :
Icône du chapitre
Retour en haut

C'est quoi SDL_gfx ?

SDL_gfx est une bibliothèque qui nécessite que la SDL soit installée.
Vous en avez sûrement déjà entendu parler dans les cours de M@teo21, je pense au chapitre SDL_image ou SDL_ttf.

SDL_gfx sert à faire des rotations mais aussi des figures géométriques, filtrer des images, gérer le temps de rafraîchissement de l'écran, etc...
Mais nous, ce qui nous intéresse, c'est la rotation, alors au boulot ! :pirate:
Retour en haut

Installation de SDL_gfx

Téléchargement



Tout d'abord, il faut télécharger le fichier zip de SDL_gfx ici (merci à transfear pour le lien).

Quand vous arriverez sur la page, cliquez sur "Click here" dans le paragraphe "Setting Up SDL_gfx in Visual Studio .NET 2003".


Ce que vous avez téléchargé est un fichier zip contenant SDL_gfx déjà compilé. Normalement, on aurait dû télécharger les sources sur le site officiel et les compiler, mais je ne sais pas le faire. C'est donc beaucoup plus pratique pour moi et pour vous de télécharger ce zip.


C'est téléchargé ? Bon maintenant, il faut décompresser ce zip.

Voici comment faire :

Faites un clic droit sur le fichier et cliquez sur "Extraire tout...", ensuite laissez-vous guider par l'assistant d'extraction qui va vous décompresser ça en moins de deux.

Maintenant que vous avez décompressé le fichier, allez dans le dossier issu de la décompression.

Dans le dossier lib se trouvent les fichiers sdlgfx.dll et sdlgfx.lib.
Dans le dossier include se trouvent les fichiers d'en-tête ou headers (*.h).

Nous aurons besoin de ces fichiers pour l'installation...

Installation sous Code::Blocks



Je vous rappelle les fichiers dont nous avons besoin :

  • sdlgfx.dll : placez ce fichier dans le dossier de votre projet ;
  • sdlgfx.lib : ce fichier va dans le dossier "C:\Program Files\CodeBlocks\mingw32\lib" ;
  • et les headers (*.h) : ils vont dans le dossier "C:\Program Files\CodeBlocks\mingw32\include\SDL".


OK ! Les fichiers sont bien placés !

Maintenant il faut... configurer votre projet pour utiliser SDL_gfx.

Créez d'abord votre projet si ce n'est pas déjà fait, en configurant comme pour un projet SDL normal. Si vous ne vous souvenez plus comment faire, rendez-vous ici.

Puis sous Code::Blocks, allez dans le menu "Projects", "Build options".
Dans l'onglet "Linker", cliquez sur le bouton "Add" et indiquez où se trouve le fichier "sdlgfx.lib".
Si on vous demande "Keep as a relative path ?", répondez Non.

C'est bon, l'installation sous Code::Blocks est terminée.

Installation sous Visual Studio



Pour Visual, voici la démarche :magicien: :

  • Allez dans le dossier de Visual (chez moi : "C:\Program Files\Microsoft Visual Studio 9.0").
  • Ensuite allez dans le dossier VC.
  • Mettez sdlgfx.lib dans le dossier lib.
  • Allez dans le dossier include et mettez les headers (*.h) dans le dossier SDL.
  • Et évidemment, sdlgfx.dll dans le dossier de votre projet. ;)


Pour configurer Visual pour SDL_gfx, cliquez sur le menu "Projet", puis sur "Propriété nom du projet", puis allez dans "Editeur de liens", puis sur "Entrée" et dans dépendances supplémentaire mettez sdlgfx.lib en plus des autres .lib.

Voilà vous avez SDL_gfx pour Visual Studio. :)

( merci Dark Patate )
Retour en haut

Faire une rotation

On entre maintenant dans la partie la plus intéressante. :)

Surtout n'oubliez pas de mettre le fichier sdlgfx.dll dans le dossier de votre
projet !


Tout d'abord, le main.c devrait ressembler à ça :

Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>
 
int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL;
    SDL_Event event;
    int continuer = 1;
 
    SDL_Init(SDL_INIT_VIDEO);
 
    ecran = SDL_SetVideoMode(500, 500, 32, SDL_HWSURFACE);
    SDL_WM_SetCaption("Faire des rotations avec SDL_gfx", NULL);
 
    while(continuer)
    {
        SDL_PollEvent(&event);
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
                break;
        }
 
        SDL_FillRect(ecran, NULL, SDL_MapRGB(ecran->format, 255, 255, 255));
        SDL_Flip(ecran);
    }
 
    SDL_FreeSurface(ecran);    
    SDL_Quit();
 
    return EXIT_SUCCESS;
}




La première chose à faire c'est d'inclure le fichier header :
Code : C
1
#include <SDL/SDL_rotozoom.h>


Mais il me semble que j'ai copié 5 fichiers header ? Non ?


Oui c'est vrai. Mais comme je l'ai déjà dit dans la première partie, SDL_gfx ne sert pas qu'à faire des rotations et dans notre cas, nous n'avons besoin que de SDL_rotozoom.h.

Maintenant regardons le prototype de la fonction permettant de faire une rotation :

Code : C
1
SDL_Surface * rotozoomSurface (SDL_Surface *src, double angle, double zoom, int smooth);


Le premier argument est en fait le nom de la surface à modifier.
Le deuxième est l'angle de rotation.
Le troisième est le zoom à appliquer sur la surface.

Hein ! Mais qu'est-ce que le zoom vient faire ici ?


Eh bien cette fonction permet de faire une rotation mais aussi un zoom.
C'est vrai que ce n'est pas terrible comme fonctionnement, mais il doit sûrement y avoir une raison. Si vous ne voulez pas faire de zoom, mettez 1.0.

Et enfin le quatrième argument sert à lisser la surface tournée, comme ça c'est plus joli. :)
Mettez 1 pour lisser, sinon mettez 0.

Maintenant qu'on a tout expliqué, voilà le code complet :

Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>
#include <SDL/SDL_rotozoom.h>
 
#define TEMPS       30 // Le temps qu'il y a entre chaque augmentation de l'angle.
 
int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *image = NULL, *rotation = NULL;
    SDL_Rect rect;
    SDL_Event event;
    double angle = 0;
 
    int continuer = 1;
    int tempsPrecedent = 0, tempsActuel = 0;
 
    SDL_Init(SDL_INIT_VIDEO);
 
    ecran = SDL_SetVideoMode(500, 500, 32, SDL_HWSURFACE);
    SDL_WM_SetCaption("Faire des rotations avec SDL_gfx", NULL);
 
    image = SDL_LoadBMP("image.bmp");
 
    rect.x =  150;
    rect.y =  150;
 
    while(continuer)
    {
        SDL_PollEvent(&event);
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
                break;
        }
 
        tempsActuel = SDL_GetTicks();
        if (tempsActuel - tempsPrecedent > TEMPS)
        {
            angle += 2; //On augmente l'angle pour que l'image tourne sur elle-même.
 
            tempsPrecedent = tempsActuel;
        }
        else
        {
            SDL_Delay(TEMPS - (tempsActuel - tempsPrecedent));
        }
 
 
        SDL_FillRect(ecran, NULL, SDL_MapRGB(ecran->format, 255, 255, 255));
 
        rotation = rotozoomSurface(image, angle, 1.0, 1); //On transforme la surface image.
 
        SDL_BlitSurface(rotation , NULL, ecran, &rect); //On affiche la rotation de la surface image.
        SDL_FreeSurface(rotation); //On efface la surface rotation car on va la redéfinir dans la prochaine boucle. Si on ne le fait pas, cela crée une fuite de mémoire. 
 
        SDL_Flip(ecran);
    }
 
    SDL_FreeSurface(ecran);
    SDL_FreeSurface(image);
    SDL_Quit();
 
    return EXIT_SUCCESS;
}

Surtout n'oubliez pas d'ajouter une image dans le dossier de votre projet. ;)

J'ai mis ici le code qui permet de gérer le temps qu'il y a entre chaque augmentation de l'angle, cela permet de gérer la vitesse de rotation. M@teo21 en a parlé ici.


Maintenant vous pouvez compiler et lancer votre programme.

Quand je lance mon programme, l'image bouge en même temps qu'elle tourne !!!


Ah oui, j'ai oublié de vous dire : quand nous plaçons notre image, sa taille change à cause de la rotation ce qui la fait bouger.

La surface rotation change de taille ?


Oui, regardez ceci pour comprendre :

erreurRotation1
Ici on a fait une rotation, donc la taille de la surface a changé.


En revanche ici, l'image n'est pas tournée, donc la surface garde sa taille normale :
erreurRotation2


Donc il faut placer notre image en fonction de sa taille.

Voici le code :
Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>
#include <SDL/SDL_rotozoom.h>
 
#define TEMPS       30 // Le temps qu'il y a entre chaque augmentation de l'angle.
 
int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *image = NULL, *rotation = NULL;
    SDL_Rect rect;
    SDL_Event event;
    double angle = 0;
 
    int continuer = 1;
    int tempsPrecedent = 0, tempsActuel = 0;
 
    SDL_Init(SDL_INIT_VIDEO);
 
    ecran = SDL_SetVideoMode(500, 500, 32, SDL_HWSURFACE);
    SDL_WM_SetCaption("Faire des rotations avec SDL_gfx", NULL);
 
    image = SDL_LoadBMP("image.bmp");
 
    while(continuer)
    {
        SDL_PollEvent(&event);
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
                break;
        }
 
        tempsActuel = SDL_GetTicks();
        if (tempsActuel - tempsPrecedent > TEMPS)
        {
            angle += 2; //On augmente l'angle pour que l'image tourne sur elle-même.
 
            tempsPrecedent = tempsActuel;
        }
        else
        {
            SDL_Delay(TEMPS - (tempsActuel - tempsPrecedent));
        }
 
        SDL_FillRect(ecran, NULL, SDL_MapRGB(ecran->format, 255, 255, 255));
 
        rotation = rotozoomSurface(image, angle, 1.0, 1); //On transforme la surface image.
 
        //On positionne l'image en fonction de sa taille.
        rect.x =  200 - rotation->w / 2;
        rect.y =  200 - rotation->h / 2;
 
        SDL_BlitSurface(rotation , NULL, ecran, &rect); //On affiche la rotation de la surface image.
        SDL_FreeSurface(rotation); //On efface rotation car on va la redéfinir dans la prochaine boucle. Si on ne le fait pas, cela crée une fuite de mémoire. 
 
        SDL_Flip(ecran);
    }
 
    SDL_FreeSurface(ecran);
    SDL_FreeSurface(image);
    SDL_Quit();
 
    return EXIT_SUCCESS;
}


Et voilà ! On a réussi à faire notre rotation. Alors, des questions ?

Euh... oui. Dans la fonction rotozoomSurface, est-ce qu'on n'aurait pas pu mettre "image = rotozoomSurface(image, angle, 1.0, 1);" ?

C'est une très bonne question. En fait oui, normalement on aurait pu le faire, mais on ne peut pas à cause du zoom parce que si à chaque fois on refait un zoom sur la même surface, alors l'image va gRANDIR jusqu'à l'infini, voilà pourquoi.
Quand dans la fonction on met 1.0, c'est pour agrandir l'image à sa taille normale. Si on met 0, l'image ne s'affiche pas, car on ne fait pas de zoom.

Un petit exercice



Maintenant on pourrait ajouter un petit gadget dans notre programme pour que vous vous rendiez compte de ce que l'on peut faire d'intéressant avec SDL_gfx.
Par exemple, ça serait bien que l'image bouge avec la souris. Et pour faire encore mieux, on pourrait aussi ajouter un effet de zoom.

Correction :magicien: :



Secret (cliquez pour afficher)
Code : C
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
#include <stdlib.h>
#include <stdio.h>
#include <SDL/SDL.h>
#include <SDL/SDL_rotozoom.h>
 
#define TEMPS       30 // Le temps qu'il y a entre chaque augmentation de l'angle.
 
int main(int argc, char *argv[])
{
    SDL_Surface *ecran = NULL, *image = NULL, *rotation = NULL;
    SDL_Rect rect;
    SDL_Event event;
    double angle = 0;
    double zoom = 1;
    int sens = 1;
 
    int continuer = 1;
    int tempsPrecedent = 0, tempsActuel = 0;
 
    SDL_Init(SDL_INIT_VIDEO);
 
    ecran = SDL_SetVideoMode(500, 500, 32, SDL_HWSURFACE);
    SDL_WM_SetCaption("Faire des rotations avec SDL_gfx", NULL);
 
    image = SDL_LoadBMP("image.bmp");
 
    while(continuer)
    {
        SDL_PollEvent(&event);
        switch(event.type)
        {
            case SDL_QUIT:
                continuer = 0;
                break;
        }
 
        tempsActuel = SDL_GetTicks();
        if (tempsActuel - tempsPrecedent > TEMPS)
        {
            angle += 2; //On augmente l'angle pour que l'image tourne sur elle-même.
 
            tempsPrecedent = tempsActuel;
        }
        else
        {
            SDL_Delay(TEMPS - (tempsActuel - tempsPrecedent));
        }
 
        SDL_FillRect(ecran, NULL, SDL_MapRGB(ecran->format, 255, 255, 255));
 
        rotation = rotozoomSurface(image, angle, zoom, 0); //On transforme la surface image.
        
        //On repositionne l'image en fonction de sa taille.
        rect.x =  event.button.x - rotation->w / 2;
        rect.y =  event.button.y - rotation->h / 2;
 
        SDL_BlitSurface(rotation , NULL, ecran, &rect); //On affiche la rotation de la surface image.
        SDL_FreeSurface(rotation); //On efface la surface rotation car on va la redéfinir dans la prochaine boucle. Si on ne le fait pas, cela crée une fuite de mémoire. 
 
        if(zoom >= 2){sens = 0;}
        else if(zoom <= 0.5){sens = 1;}
 
        if(sens == 0){zoom -= 0.02;}
        else{zoom += 0.02;}
 
        SDL_Flip(ecran);
    }
 
    SDL_FreeSurface(ecran);
    SDL_FreeSurface(image);
    SDL_Quit();
 
    return EXIT_SUCCESS;
}
Retour en haut
Voilà, c'est fini. :D

Maintenant vous savez faire des rotations !
Et donc grâce à cela, vous allez pouvoir réaliser plein de super trucs.

Bonne programmation ! :)
Retour en haut

Partager

Retour en haut
24 commentaires pour "Faire des rotations avec SDL_gfx"
Note moyenne : 3.88 / 4 (8 votes)
Pseudo Commentaire
En ligne Pierroda # Posté le 28/12/2010 à 14:10:10
Avatar

Ville : Verviers
Pays : Belgique
Études : Université de Liege

 Merci beaucoup pour ce tuto, il est très bien !

On reste par contre sur sa faim concernant les nombreuses possibilités de SDL_gfx, c'est dommage.

Et une petite remarque dans ton code final : tu ne fais pas de SDL_FreeSurface pour l'élément "rotation", mais bien les autres. Donc il manque une ligne à mon avis.

Je mets 16/20 pour l'intention de faire ce tuto (dans une doc très compliquée) et l'aide que tu apportes. Mais cela pourrait être plus recherché.
Site de Julien Haenen, l'Artiste

Image utilisateur
 
Hors ligne White Sh4dow # Posté le 11/02/2011 à 12:45:06
Avatar

Avis : Très bon

Salut Clément,
Tout d'abord laisse moi te remercier pour ton tuto qui est simple et donne ce qu'il faut pour faire une rotation.

J'avais juste une question concernant la méthode rotozoomSurface, il y a un quatrième argument dont tu ne parles pas, int smooth, qu'est ce qu'il fait ? Pourquoi met-on sa valeur à 1 ?
C'est un paramètre de lissage après la rotation ?

Merci d'expliquer un peu cet argument :)

Ensuite, comme le dit freecircus, ca pourrait être intéressant d'avoir des explications par rapport aux autres possibilités offertes par SDL_gfx. Mais si tu ne les connais pas, on ne peut pas te les demander ^^ Par contre si quelqu'un connait, qu'il ne se retient pas de partager !

Bravo, merci.

17/20.

PS : je ne sais pas si d'autres ont eu ce problème, mais après l'installation de SDL_gfx Code::Blocks ne reconnait toujours pas #include <SDL/SDL_rotozoom.h>.
Pourtant j'ai bien "linké" correctement, et placé les fichiers .lib et .h correctement (chez moi dans O:\Program Files (x86)\CodeBlocks\MinGW\.. etc ).
Quelqu'un a-t-il une idée ? Merci.

PS 2 : Tout semble marcher en changeant le dossier d'installation vers celui ou j'ai installé la SDL et toutes les autres librairies (donc un répertoire différent que celui indiqué dans le tutoriel).
Hors ligne nathred # Posté le 16/06/2011 à 00:12:36

Y a moyen avec ces bibliothèques d'eviter le zoom/dézoom de l'image lorsqu'on la tourne?
Parce qu'un élément qui se met à grossir dès qu'on touche à son angle, dans un programme,
ça fait pas très sérieux... o_O
Merci pour vos réponses
Hors ligne White Sh4dow # Posté le 12/02/2012 à 13:53:58
Avatar

Avis : Très bon

Tutoriel simple et efficace. J'apprécie ton travail ! :)
Hors ligne malfrax # Posté le 23/02/2012 à 16:58:55
Strategic Wars [10%]
Avatar

 Je te remercie ! :D j'avais juste besoin de trouve comment on installe gfx mais j'ai quand même lu ton tuto et j'ai trouver sa bien. Un commentaire plus haut dis que on a encore "faim" de gfx et c'est vrai mais j'avais besoin de réduire une image pour la faire passer de 150x150 a 40x40 et sa marche super bien ! :) et dire que j'ai osé pensai de créer de nouvelle image plus petit XD

Projet C++/SFML :


Strategic Wars :

Lien vers le site|Lien vers le poste du site du zero
 

Voir tous les commentaires