Programmation de jeu 2D: Le morpion, Quatrième partie

Dans la fonction init, il y aura seulement un ajout à la fin de la fonction : la mise en place des positions des cases du plateau du morpion et, ensuite, la classe Jeu passera les surfaces qu'utiliseront les instances de la classe Objet. En fait, ceci est une nouveauté dans le code.

À la place d'avoir l'écran divise en 9 cases, on va avoir les cases parsemées dans la fenêtre. Voici une image du jeu de la version 4 (histoire de vous donner envie!) :

Sans montrer tout le code de la fonction init (il serait un peu trop long), nous montrerons qu'une petite partie.

    SDL_Rect r;
 
    /* Début du code d'initialisation */
    /* Mettre en place la largeur et l'hauteur d'une case */    
    r.w = 150;
    r.h = 150;
 
    /* Mise en place de la position de la première case */
    r.x = 74;
    r.y = 51;
    plateau[0][0].setPos(&r);
 
    /*
    Positionnement des 8 autres cases
    */
 
    //Mise en place des surfaces des cases
    for(i=0;i<3;i++)
        {
        for(j=0;j<3;j++)
            {
            plateau[i][j].setImage(vide,o,x,gagneo,gagnex);
            }
        }

Dans cette partie, nous utilisons une structure SDL_Rect pour initialiser la position des cases. Une fois que chacune des cases est initialisée, on parcourt les cases et on initialise les pointeurs des surfaces des cases. Vous remarquerez que j'ai ajouté une surface nommée vide. C'est le carré semi-transparent que vous avez vu dans l'image.

La classe Jeu possède et gère les surfaces du programme. Lorsque je programme un jeu, une classe va gérer les surfaces et les autres possèdent seulement des pointeurs. Cela permet de centraliser l'information et limiter les redondances. Pour le moment, c'est la classe Jeu qui contiendra les surfaces du jeu.

Vous remarquerez aussi que l'affichage de la case vide est transparent. Ceci est fait grâce au canal alpha. La valeur du canal alpha donne le pourcentage de transparence des pixels. Pour définir la valeur de ce canal, on utilise la fonction SDL_SetAlpha. D'un point de vue graphique, lorsqu'on dessine un pixel à l'écran, on veut calculer la couleur de ce pixel. Pour cela, on utilise la couleur de l'ancien pixel (celle qui se trouve déjà à l'écran), la couleur du nouveau pixel (celle de la surface qu'on va copier à l'écran) et la valeur du canal alpha pour calculer la nouvelle couleur du pixel.

int SDL_SetAlpha(SDL_Surface *surface, Uint32 flag, Uint8 alpha);

Cette fonction prend une surface en paramètre. Le deuxième paramètre de cette fonction ressemble beaucoup au paramètre similaire passé à la fonction SDL_SetColorKey. Voici les valeurs possibles :

1. Si flag vaut 0, alors l'alpha-blending sera désactivé ;
2. Si flag vaut SDL_SRCALPHA, alors l'alpha-blending sera activé ;
3. Si on ajoute l'option SDL_RLEACCEL, l'accélération RLE sera activée.

Voici, comment on l'appelle :

//Mise en place de la transparence
if(SDL_SetAlpha(vide,SDL_SRCALPHA,180)==-1)
    cout << "Erreur avec la transparence de la case vide" << endl;

Et voici comment on ajoute l'accélération SDL_RLEACCEL :

//Mise en place de la transparence
if(SDL_SetAlpha(vide,SDL_SRCALPHA|SDL_RLEACCEL,180)==-1)
    cout << "Erreur avec la transparence de la case vide" << endl;

Et le dernier paramètre est le pourcentage de transparence. Si on met 0, alors l'image sera entièrement transparente. Si on met 255, l'image sera totalement opaque. Pour revenir à des choses que vous connaissez, une implémentation possible pour la fonction SDL_SetColorKey serait de mettre à zéro le canal alpha de tous les pixels de la couleur que vous passez en paramètre.

Le calcul de la couleur du pixel se fait à partir de l'ancienne couleur, la nouvelle couleur et la valeur du canal alpha. Voici le calcul de la nouvelle couleur :

On veut mettre le pixel de l'image A sur le pixel de l'image B.
Soit dest la couleur du pixel de l'image B.
Soit orig la couleur du pixel de l'image A.
Soit alpha le canal alpha du pixel de l'image A.
Soit res la couleur du pixel résultat.
 
res = (dest * (255-alpha)/255)) + ((orig * alpha)/255)

Le code de la fonction videJeu est presque le même que dans la partie 3. Le seul changement est l'appel à la fonction init pour chaque case. En effet, ce sera maintenant à chaque case de se remettre à zéro.

void Jeu::videJeu()
{
    int i,j;
 
    //On met toutes les cases à Vide
    for(i=0;i<3;i++)
        for(j=0;j<3;j++)
            plateau[i][j].init();
 
    //On commence par Rond
    tour = Rond;
 
    //On met fini à false
    fini = false;
}

Comme pour la fonction videJeu, la fonction verifFini ressemble énormément à la version de la troisième partie. La seule différence est l'utilisation des fonctions pour les comparaisons et pour les mises à jour. Voici le code qui vérifie l'alignement par ligne :

for(i=0;i<3;i++)
    if(!plateau[i][0].estVide())
        {
        if((plateau[i][0].memeType(plateau[i][1]))&&(plateau[i][0].memeType(plateau[i][2])))
            {
            fini = true;
            typegagne = plateau[i][0].getType();
            plateau[i][0].setType(Gagne);
            plateau[i][1].setType(Gagne);
            plateau[i][2].setType(Gagne);
            }
        }
    else
        casevide = true;

Et la dernière partie de la fonction devient donc :

//Dernieres cases à vérifier pour le booléen casevide
if( (plateau[1][1].estVide())||(plateau[1][2].estVide())||
    (plateau[2][1].estVide())||(plateau[2][2].estVide()))
        casevide = true;

Finalement, cette fonction montre bien le changement entre une version avec énumération et une version objet. Toutes les comparaisons et toutes les mises à jour passent par des fonctions, mais le fond est le même.

La fonction clic est devenue nettement plus compliquée. En effet, nous n'avons plus la facilité de pouvoir calculer la case par rapport au couple (x,y). En fait, il va falloir parcourir chaque case du tableau plateau.

void Jeu::clic(int x, int y)
{
    int i,j;
    bool trouve=false;
 
    //Si le jeu n'est pas fini
    if(!fini)
        {
 
        //On parcourt tout le plateau pour trouver la case associée
        for(i=0;(i<3)&&(!trouve);i++)
            for(j=0;(j<3)&&(!trouve);j++)
                {
 
                //Si le clic a touché cette case
                if(plateau[i][j].estDedans(x,y))
                    {
 
                    //Si la case est vide
                    if((plateau[i][j].estVide()))
                        {
                        //On met le type à jour
                        plateau[i][j].setType(tour);
 
                        //On met à jour le tour
                        tour = (tour==Rond)?Croix:Rond;
                        }
 
                    //On dit qu'on a trouvé la case associée
                    trouve = true;
                    }
                }
        }
 
    //Si le clic a touché une case, il faudra vérifier si la partie est terminée
    if(trouve)
        verifFini();
}

On ajoute un test au début du parcours pour vérifier que la partie n'est pas finie. Si ce n'est pas le cas, on va tester chaque case. Si le clic correspond à la case, alors on regarde si la case est vide. Enfin, on met à jour le type de la case si toutes ces conditions sont remplies.

Donc pour savoir si nous sommes dans la case, la classe Objet possède une méthode qui rendra un booléen pour savoir si la position (x,y) est dans la zone de la case. Finalement, on a l'impression que le code est plus compliqué, mais il est plus lisible. En utilisant cette nouvelle classe Objet, je trouve personnellement que la fonction clic est plus facile à comprendre.

En effet, ce code dit bien : « Pour chaque case, on vérifie si le clic est dans la case courante. Si c'est le cas, on teste si la case est vide et enfin on met à jour le type de la case si nécessaire ».

Vous vous demandez sûrement l'avantage d'une telle séparation du code et d'une complication de la fonction clic. Premièrement, je rappellerais l'image que j'ai donnée au début du tutoriel. Est-ce que vous voudriez faire cela à la main ? Il faudrait vérifier chaque case séparément, le code serait long et difficile à modifier. En plus, qui nous oblige d'avoir des rectangles comme forme d'une case ? Il suffit de définir un objet qui permet d'avoir une case en forme d'ellipse/de triangle/etc. Le calcul étant internalisé, la classe Jeu n'a pas besoin de s'en soucier. Tout ce qu'elle sait, c'est que chaque objet est capable de dire si (x,y) est incluse dedans. C'est là, tout l'intérêt de la classe Objet.

Mais nous pourrions aller encore plus loin : qu'est-ce qui oblige les cases d'être à un endroit fixe ? Nous pourrions mettre en place une version qui fait bouger les cases. Le code de la classe Objet serait à compléter, mais, de nouveau, la classe Jeu ne changerait pas.

Enfin, remarquez l'utilisation du booléen trouve pour ne pas rester inutilement dans la boucle.

Finalement, la fonction se termine avec un test qui nous dit si l'état du jeu change. Si c'est le cas, on vérifie si la partie est terminée (mettant donc le booléen fini à jour).

La fonction aff est devenue plus simple puisque nous avons migré le code d'affichage à l'objet sous-jacent. En effet, nous supposons maintenant qu'un objet correctement initialisé saura s'occuper de l'affichage correctement.

void Jeu::aff(SDL_Surface *screen)
{
    int k,l;
 
    //Dessiner le fond d'ecran
    SDL_BlitSurface(bg,NULL,screen,NULL);
 
    //Dessiner chaque case
    for(k=0;k<3;k++)
        for(l=0;l<3;l++)
            {
            plateau[k][l].affiche(screen);
            }
}

Enfin, la dernière fonction qu'on présentera de la classe Jeu est la fonction getFini. Cette fonction permettra au moteur de savoir si le jeu est fini. Voici le code étonnant qui fait ceci :

bool Jeu::getFini()
{return fini;}

On peut considérer, généralement, deux solutions pour l'implémentation de cette fonction :

1. La première solution est celle que nous avons proposée. Nous avons gardé le booléen fini de la partie 3 et l'avons migré dans la classe Jeu. Mais ce sera à la classe Jeu de mettre à jour ce booléen lorsqu'il le faut. Dans le cas du morpion, cela est fait à chaque clic qui provoque un changement de l'état du jeu. C'est ce qu'on voit dans la fonction clic ;
2. La deuxième solution est de ne jamais calculer si le jeu est fini sauf si le moteur le demande. Ceci veut donc dire que la fonction getFini appellera verifFini. Cette deuxième solution est pratique lorsque le moteur n'a pas besoin de savoir tout de suite (ou tout le temps) après un changement d'état du jeu si la partie est finie. Il n'est donc pas nécessaire de faire exécuter le code de verifFini à chaque clic qui provoque un changement.

Nous allons présenter dans cette section les membres de cet objet.

                //Les surfaces des cases
                std::vector<SDL_Surface *> images;
 
                //L'image à afficher
                int curimage;
 
                //Type de la case
                Case type;
 
                //Position de la case
                SDL_Rect pos;

Chaque objet possédera un vecteur d'images. La classe Jeu initialisera les surfaces de chaque objet.

Ensuite, nous avons un indice pour l'image qui sera affichée par l'objet et on aura une autre variable pour le type de la case. De nouveau, cette séparation des données est faite pour ne pas mélanger le type de l'image et l'image qu'on utilise pour faire le dessin.

Enfin, la variable pos donne la position et taille de chaque case.

Dans cette section, nous présenterons les fonctions de la classe Objet.

II-C-2-a. Constructeur▲

Objet::Objet()
{
    int i;
 
    images.resize(5);
    for(i=0;i<5;i++)
        images[i] = NULL;
 
    curimage = 0;
    pos.x = 0;
    pos.y = 0;
    pos.w = 0;
    pos.h = 0;
}

II-C-2-b. La fonction init▲

//Fonction d'initialisation
void Objet::init()
{
    //On met l'image à zéro et le type est Vide
    curimage = 0;
    type = Vide;
}

II-C-2-c. Les fonctions setImage et setPos▲

//Mise en place de la position de l'objet
void Objet::setPos(SDL_Rect *p)
{pos=*p;}

//Mise en place des surfaces
void Objet::setImage(SDL_Surface *vide,SDL_Surface *o, SDL_Surface* x, 
             SDL_Surface *gagneo, SDL_Surface *gagnex)
{
        images[0] = vide;
        images[1] = o;
        images[2] = x;
        images[3] = gagneo;
        images[4] = gagnex;
}

II-C-2-d. Les fonctions affiche et estDedans▲

//Fonction d'affichage
void Objet::affiche(SDL_Surface *dest)
{
    if(images[curimage])
        SDL_BlitSurface(images[curimage],NULL,dest,&pos);
}

//Est-ce que (x,y) est dans la case?
bool Objet::estDedans(int x, int y)
{
    return ( (x>pos.x)&&(x<pos.x+pos.w)&&(y>pos.y)&&(y<pos.y+pos.h));
}

II-C-2-e. La fonction estVide▲

//Est-ce que la case est vide?
bool Objet::estVide()
{return type==Vide;}

II-C-2-f. Les fonctions getType, setType et memeType▲

La particularité de la fonction setType est la gestion interne de curimage. En effet, il y a deux intérêts de cette variable :

1. Nous avons une seule énumération Gagne, mais nous voulons pouvoir distinguer une case gagnée de rond et de croix ;
2. Dans la version 3, si jamais nous avions deux alignements en même temps (par exemple, si vous avez une ligne horizontale et une ligne verticale qui se complète en même temps) le programme en affiche un seul (une seule sera considérée comme la ligne gagnante). Dans cette nouvelle version, nous pouvons afficher les deux alignements (voir l'image ci-dessous).

Finalement, l'ordre du stockage des surfaces que nous utilisons nous permet d'écrire cette fonction. En effet, si la case est vide, est un rond ou est une croix alors nous pouvons juste utiliser la valeur de l'énumération pour avoir l'indice de l'image.

Mais si la case est de type Gagne alors il faut ruser un peu. Nous savons que les surfaces sont stockées dans l'ordre Vide, Rond, Croix, Rond gagne et Croix gagne. Donc si la case est de type Gagne, l'indice de la surface est égale au type de la case (Rond ou Croix) plus 2.

La fonction setType

Sélectionnez

//On met en place le type de la case
void Objet::setType(Case t)
{
    switch(t)
    {
        //Dans ces cas, on a directement le type et curimage
        case Vide:
        case Rond:
        case Croix:
            type=t;
            curimage = t;
            break;
    //Dans le cas Gagne, on met seulement à jour curimage 
    //curimage = type+2 pour avoir l'indice de la surface Gagne X ou Gagne O
        case Gagne:
            curimage = type+2;
            break;
    }
}

La dernière fonction que nous présenterons pour cette classe est la fonction memeType qui retourne vrai si les objets sont de même type. Ne confondez pas même objet avec même type.

Certaines personnes demanderaient pourquoi ne pas utiliser/redéfinir l'opérateur de comparaison == ?

La réponse est assez simple : je trouve qu'il est mauvais usage de redéfinir cet opérateur. Surtout que nous pourrions avoir besoin de vérifier les valeurs des adresses des objets. Donc le code de la fonction memeType est :

La fonction memeType

Sélectionnez

//Est-ce que l'objet est du même type?
bool Objet::memeType(Objet &obj)
{
    return obj.type == type;
}

Pour le moment, le seul membre de cette classe est le plateau de jeu. Les seules fonctions membres de cette classe seront les fonctions clic et aff qui feront le lien entre la fonction main et la classe Jeu. Voici sa déclaration :

class Moteur
{
        private:
                //Le plateau de jeu
                Jeu jeu;
 
        public:
                //Constructeur/Destructeur
                Moteur();
                ~Moteur();
 
                //La fonction clic
                void clic(int , int);
                //La fonction d'affichage
                void aff(SDL_Surface *screen);
 
                //La fonction d'initialisation
                bool init();
};

Présentons maintenant l'implémentation de la classe Moteur.

II-D-2-a. Le Constructeur et le Destructeur▲

II-D-2-b. La fonction clic et la fonction aff▲

void Moteur::clic(int x, int y)
{
    if(jeu.getFini())
        {
        jeu.videJeu();
        }
    else
        jeu.clic(x,y);
}

void Moteur::aff(SDL_Surface *screen)
{
        jeu.aff(screen);
}

II-D-2-c. Remarques sur la classe Moteur▲