Programmation de jeu 2D : Un morpion en SDL, Deuxième partie

Jeu::Jeu()
{
    int i,j;
 
    //On met toutes les cases à Vide
    for(i=0;i<3;i++)
        for(j=0;j<3;j++)
            plateau[i][j] = Vide;
 
    //Valeur par défaut pour les surfaces        
    o=NULL;
    x=NULL;
    bg=NULL;
}

En quelques lignes, nous avons initialisé le tableau du jeu à Vide. Ensuite, nous mettons les pointeurs vers les surfaces à NULL. Ce sera le travail de la fonction init de charger les images.

Bien sûr, dans le destructeur, nous allons libérer les surfaces allouées (remarquons que, comme pour free/delete, nous pouvons passer NULL à ces fonctions) :

Jeu::~Jeu()
{
    //On libére les surfaces
    SDL_FreeSurface(o);
    SDL_FreeSurface(bg);
    SDL_FreeSurface(x);
}

La fonction init permettra de charger les images dans les surfaces de la classe. Si jamais il y a un problème, la fonction rendra false.

bool Jeu::init()
{
    //Vérification de l'allocation des surfaces
    if(o!=NULL)
        {
            SDL_FreeSurface(o), o = NULL;
        }
    if(x!=NULL)
        {
            SDL_FreeSurface(x), x = NULL;
        }
    if(bg!=NULL)
        {
            SDL_FreeSurface(bg), bg = NULL;
        }
 
    //On charge toutes les images dans les surfaces associées
    o = SDL_LoadBMP("o.bmp");
    x = SDL_LoadBMP("x.bmp");
    bg = SDL_LoadBMP("bg.bmp");
 
    //On teste le retour du chargement
    if( (o==NULL) || (x==NULL) || (bg==NULL))
        {
        cout << "Probleme de chargement du O, du X ou de l'image de fond" << endl;
        return false;
        }
 
    //On initialise le premier tour: ce sera Rond qui commencera
    tour = Rond;
 
    //Mis en place de la transparence
    if(SDL_SetColorKey(o,SDL_SRCCOLORKEY,0)==-1)
        cout << "Erreur avec la transparence du rond" << endl;
 
    if(SDL_SetColorKey(x,SDL_SRCCOLORKEY,0)==-1)
        cout << "Erreur avec la transparence de la croix" << endl;
 
    return true;
}

Avant de commencer le chargement des images, nous vérifions d'abord que les images n'ont pas déjà été chargées. Si c'est le cas, nous libérons la mémoire. Je tiens à souligner la technique suivante :

    if(o!=NULL)
        {
            SDL_FreeSurface(o), o = NULL;
        }

Cela permet d'être sûr que personne ne s'amuse à insérer du code entre la libération et la mise à NULL du pointeur. Ce genre d'erreur est souvent évitée en mettant les deux instructions sur la même ligne, separées d'une virgule. C'est d'ailleurs la seule fois où vous me verrez mettre deux instructions sur une même ligne ou utiliser une virgule.

Nous utilisons la bibliothèque SDL pour charger les images du fond d'écran (la grille du morpion), l'image d'un rond et l'image d'une croix. Comme vous le voyez, le chargement d'un fichier BMP se fait simplement. Par contre, il faudra utiliser l'extension de SDL_image pour charger d'autres formats d'image.

Après le chargement, nous vérifions que le chargement s'est bien passé. Ensuite, nous initialisons tour à Rond pour que le premier joueur joue avec les ronds. Comme beaucoup d'images que nous chargerons pour l'affichage à l'écran, nous avons besoin d'une couleur transparente. Généralement, nous utilisons la couleur magenta (puisqu'elle est rarement utilisée dans les images), mais ici nous utilisons le noir. Donc, pour définir la couleur noire comme couleur transparente, nous utilisons la fonction :

int SDL_SetColorKey(SDL_Surface *surface, Uint32 flag, Uint32 key);

Cette fonction retourne -1 en cas d'erreur. Comme vous pouvez le remarquer, je ne fais qu'un simple affichage dans le cas d'une erreur. SDL possède un comportement différent dépendant du Système d'Exploitation pour l'affichage texte (via cout sous C++ et via printf/fprintf sous C). Sous Windows, il crée un fichier stdout.txt et stderr.txt et, sous Linux, il laisse le comportement natif (donc via le terminal qui a lancé le programme). Pour les problèmes mineurs, j'affiche simplement qu'il y a eu une erreur, mais je ne vais pas sortir du programme pour autant.

Revenons à la fonction SDL_SetColorKey, la variable flag peut prendre ces masques :

• SDL_SRCCOLORKEY : pour définir la couleur transparente ;
• SDL_RLEACCEL : pour définir l'accélération RLE si possible. En résumé, cette option permet d'accélérer l'affichage pour des images ayant beaucoup de pixels transparents.

Le dernier paramètre de cette fonction permet de donner la couleur qui deviendra transparente lorsque nous copierons la surface. Sans rentrer trop dans les détails, il existe trois canaux de couleurs en informatique : le rouge, le vert et le bleu. Mais, nous avons aussi un canal alpha qui servira pour faire du blending (par exemple). Par contre, SDL_SetColorKey demande à ce que ce dernier paramètre soit donné sous la forme d'un entier à 32 bits. Puisqu'il est difficile de calculer directement la correspondance (r,g,b,a) vers ce format à 32 bits, SDL fournit donc une fonction qui permet de le faire :

Uint32 SDL_MapRGB(SDL_PixelFormat* fmt, Uint8 r, Uint8 g, Uint8 b)

et si nous voulons spécifier le canal alpha :

Uint32 SDL_MapRGBA(SDL_PixelFormat* fmt, Uint8 r, Uint8 g, Uint8 b, Uint8 a)

Le premier paramètre est fourni par la surface qui nous intéresse. Donc si nous prenons notre code précédent, nous avions :

    if(SDL_SetColorKey(x,SDL_SRCCOLORKEY,0)==-1)
        cout << "Erreur avec la transparence de la croix" << endl;

Nous aurions pu aussi écrire :

    if(SDL_SetColorKey(x,SDL_SRCCOLORKEY,SDL_MapRGB(x->format,0,0,0))==-1)
        cout << "Erreur avec la transparence de la croix" << endl;

Présentons maintenant la fonction d'affichage. Cette fonction est assez simple, elle affichera l'image de fond, puis parcourt le tableau et affiche chaque case non vide. Puisque nous affichons un jeu de morpion, nous allons diviser la zone d'affichage de la fenêtre en trois colonnes et trois lignes.

Rappelons d'abord son prototype :

void affichage(SDL_Surface *screen);

Cette fonction prend donc en paramètre la surface sur laquelle nous voulons dessiner l'image courante. Généralement, nous passerons la surface qui a été rendue par la fonction SDL_SetVideoMode.

Pour afficher une surface, nous déclarons un rectangle avec la structure SDL_Rect. En effet, pour afficher une surface on utilise la fonction (1).

int SDL_BlitSurface(SDL_Surface *src, SDL_Rect *srcrect, SDL_Surface *dst, SDL_Rect *dstrect);

Le premier argument est l'image que l'on veut copier. Le deuxième argument est la partie de la surface source que nous voulons copier (si nous mettons NULL, toute la surface source est utilisée). Le troisième argument est la surface destination et le quatrième argument est la position que va prendre la copie de src (s'il est égal à NULL, alors la position est (0,0)).

Je dis bien « position ». En effet, la version actuelle de SDL n'utilise pas la taille du rectangle pour faire l'affichage. Il n'y a donc pas de zoom possible avec la bibliothèque SDL de base. Il faudra utiliser l'extension SDL_gfx pour faire des zooms/rotations ou alors faire les transformations à la main.

Donc la fonction d'affichage commence par le calcul de la largeur et hauteur d'une case et l'initialisation de la structure r qui sera la position où copier les ronds et les croix.

void Jeu::aff(SDL_Surface *screen)
{
    //Le couple (w,h) représentera les dimensions d'une case du plateau
    int w = WIDTH/3, h=HEIGHT/3,i,j,k,l;
    SDL_Rect r = { 0 };
 
    //Dessiner le fond d'ecran
    SDL_BlitSurface(bg,NULL,screen,&r);
 
    //On parcourt les cases du tableau, r sera le SDL_Rect qui représentera la position de la case courante
    for(k=0,i=0;i<HEIGHT;i+=h,k++)
        {
        r.y = i;
        for(j=0,l=0;j<WIDTH;j+=w,l++)
            {
            r.x = j;
 
            //On dessine en fonction du type de la case
            if(plateau[k][l]==Croix)
                {
                SDL_BlitSurface(x, NULL, screen,&r);
                }
            else if(plateau[k][l]==Rond)
            {
                SDL_BlitSurface(o, NULL, screen,&r);
                }
            }
        }
}

Dans cette fonction d'affichage, nous commençons par la copie de l'image de fond. En principe, on met d'abord une couleur de fond (généralement le noir) sur toute la surface de la fenêtre, mais ici, notre image de fond occupera toute la fenêtre, donc cette mise à zéro est inutile.

Ensuite, nous avons un nid de boucles qui permet de parcourir le plateau du jeu. Nous allons donc pouvoir dessiner les ronds et les croix. Nous allons avoir deux variables par dimensions : le couple (k,l) parcourrait le tableau jeu de la classe et le couple (i,j) représentera la position courante de la case à afficher.

Puis, le corps de la boucle met à jour la position de la variable r (la position destination de la surface copiée). Finalement, un simple test vérifie si la case courante est une croix ou un rond et affiche la surface associée.

Pourquoi avoir deux couples ? Pour une petite raison d'optimisation et simplification du code. Nous pouvons facilement remarquer qu'à tout moment de cette boucle, nous avons l'équivalence :

    i == k*h
    j == l*w

Donc nous pourrions écrire la mise à jour de la position de r comme ceci :

    r.x = l*w;
    r.y = k*h;

Mais, nous échangeons donc une paire de sommes par deux multiplications. Une multiplication prenant plus de temps qu'une somme, je préfère limiter leur nombre. Par contre, il est déconseillé de trop tenter d'optimiser lors d'un début de projet. Les déclarations de boucles for avec plusieurs itérateurs sont généralement des mauvaises idées. Je me le permets ici parce ce que cela ne complique pas vraiment le code ou sa lecture.

La fonction clic gère l'évènement souris. Rappelons d'abord son prototype :

void clic(int x, int y);

Elle prend comme argument les coordonnées du clic souris. Comme pour l'affichage, nous allons commencer par calculer la largeur et hauteur d'une case.

    //On récupère la largeur et l'hauteur d'une case
    w = WIDTH/3;
    h = HEIGHT/3;

Ensuite, nous calculons la case associée à la position de la souris lors du clic avec le calcul suivant :

    //Calcul de la case associée
    i = y/h;
    j = x/w;

Chaque case du morpion fait w pixels de large et h pixels de haut. Logiquement, si on prend la division entière (y/h, x/w) nous aurons la case associée. Remarquez l'inversion des coordonnées. Ceci arrive souvent lorsque nous passons de l'affichage à l'interprétation des données du jeu. En effet, par convention en C/C++ et d'autres langages, la 1re dimension d'un tableau à deux dimensions est considérée comme les lignes du tableau. Donc (2, 3) représente la case qui se trouve à la 3e ligne (on commence à zéro) et la 4e colonne. Or, à l'affichage, (53, 123) représente souvent le 54e pixel (on commence aussi à zéro!) de la 124e ligne! Il faut donc faire attention et programmer en connaissance de cause.

Enfin, nous allons mettre à jour la valeur de la case si la case est de type Vide. Ahhh, après tant de discussions, nous arrivons à la première ligne de code qui est intimement liée au fait que nous programmons un morpion. En effet, le fait que le clic n'est pris en compte que si la case est vide est déjà un bon point. Remarquons qu'après la mise à jour de la case (si elle est effectuée), nous mettons également à jour la variable tour.

    //Si la case est vide, on met à jour son type et la variable tour
    if(plateau[i][j]==Vide)
        {
        plateau[i][j] = tour;
        tour = (tour==Rond)?Croix:Rond;
        }