Tile Mapping : défilement automatique

L'exemple précédent proposait de se déplacer dans un monde, avec scrolling manuel : c'est-à-dire que c'était à vous de faire défiler l'écran avec des touches.

Tout joueur que vous êtes, vous savez que dans les jeux, ça ne se passe pas comme ça, que ce n'est pas vous qui faites manuellement défiler l'écran. L'ordinateur le fait pour vous.

Nous allons voir dans ce chapitre comment faire en sorte que l'ordinateur le fasse pour vous, qu'il suive automatiquement votre personnage pour un meilleur confort de jeu.

Je proposerai plusieurs méthodes.

Si vous aimez être le centre du monde, vous allez aimer cette méthode !

Avec cette méthode, nous souhaitons que le joueur soit toujours bien au milieu.

Nous allons donc ajuster le fenêtrage du scrolling pour faire en sorte que notre joueur soit au milieu. Nous déplaçons librement notre joueur, à l'ordinateur de nous suivre.

Si nous regardons le dessin ci-dessous :

Nous voyons le fenêtrage de scrolling en rouge. Nous voyons notre personnage bien centré au milieu du cadre rouge.

Le point bleu, en haut à gauche, se situe aux coordonnées de nos paramètres xscroll et yscroll. Ce sont ces paramètres qu'il faut mettre à jour en fonction de la position de notre personnage.

C'est un peu de géométrie !

III-A. Quelques calculs▲

x=perso−>x+perso−>w/2y=perso−>y+perso−>h/2

x=xscroll+largeurfenetre/2y=yscroll+hauteurfenetre/2

perso−>x+perso−>w/2=xscroll+largeurfenetre/2perso−>y+perso−>h/2=yscroll+hauteurfenetre/2

xscroll=perso−>x+perso−>w/2−largeurfenetre/2yscroll=perso−>y+perso−>h/2−hauteurfenetre/2

III-B. Clamping▲

Dans la majorité des jeux de plate-forme, ou vu de dessus, le personnage peut se déplacer dans l'écran. Le scrolling ne se met à le suivre que s'il va « trop au bord ».

Voyons quelques schémas pour comprendre.

Nous reconnaissons le rectangle rouge : fenêtrage de scrolling, avec son point haut gauche qui est toujours xscroll et yscroll.

Nous définissons un rectangle jaune, à l'intérieur, que nous appellerons rectangle limite.

Le concept est simple : notre personnage peut se promener dans tout le rectangle jaune. Nous considérons son centre (du personnage). Si son centre est dans le rectangle limite, on ne scrolle pas. Par contre, s'il en sort, on défile de façon à le ramener dedans.

Il faudra alors calculer de combien on sort, en x et en y, et ajuster xscroll et yscroll de ces valeurs pour ramener notre personnage à la limite où il ne sort pas.

Avant de passer aux calculs, regardons notre dessin.

• Le cas A est un rectangle jaune à égale distance du rectangle rouge dans les quatre directions . La conséquence, c'est que dès que le personnage arrive près du bord, il y a défilement. Cependant, si un ennemi arrive, comme on est près du bord, on aura peu de temps pour le voir.
• Le cas B est meilleur pour les jeux de plate-forme où on avance à droite. Dès qu'on franchit le milieu, on défile. On voit ainsi bien les ennemis arriver. On peut revenir en arrière, et on ne défilera que si vraiment on va trop en arrière.
• Le cas C présente un rectangle réduit à une seule ligne. Conséquence, le personnage sera toujours au centre horizontalement, mais la caméra ne fera pas de bond avec le personnage au moment des sauts. Si on revient en arrière, la caméra suit immédiatement.

Vous pouvez ajuster votre rectangle limite comme vous le souhaitez pour avoir la meilleure ergonomie possible.

Notez que le cas limite où le rectangle est réduit à un seul point, au centre de l'écran, nous ramène dans le cas « centre du monde » ci-dessus.

IV-A. Calculs▲

cxperso=xperso+wperso/2cyperso=yperso+hperso/2

xlimmin=xscroll+xlimylimmin=yscroll+ylim

xlimmax=xlimmin+wlimylimmax=ylimmin+hlim

if (cxperso<xlimmin) 
  xscroll -= (xlimmin-cxperso); 
if (cyperso<ylimmin) 
  yscroll -= (ylimmin-cyperso); 
if (cxperso>xlimmax) 
  xscroll += (cxperso-xlimmax); 
if (cyperso>ylimmax) 
  yscroll += (cyperso-ylimmax);

Voici maintenant l'heure de voir le code qui illustre ce que nous venons de voir.

Ouvrez et compilez le projet « prog6 ».

Cet exemple ressemble beaucoup à celui de la partie précédente : vous allez déplacer votre personnage vert dans le même monde, à la différence près que la caméra vous suivra.

Utilisez donc uniquement les touches de direction du clavier pour tester cet exemple.

Nous avons vu deux types de scrolling, l'exemple illustre le second.

Nous avions vu que le premier cas pouvait être considéré à partir du premier cas avec un rectangle limite ramené à un point central.

Vous pourrez modifier les paramètres de la fonction FocusScrollBox appelée dans le main pour l'envisager.

Vous pouvez remarquer que j'ai modifié légèrement les fichiers fsprite.h et fmap.h par rapport à l'exemple précédent.

Dans la mesure ou Map aura besoin de Sprite, et Sprite aura besoin de Map, nous pouvons voir :

• en haut de fmap.h
   

  Sélectionnez

  typedef struct Ssprite Sprite;

• en haut de fsprite.h

typedef struct Smap Map;

Regardons le main, dans le fichier prog6.c :

int main(int argc,char** argv) 
{ 
    Sprite* perso; 
    SDL_Surface* screen; 
    Map* carte; 
    Input in; 
    InitEvents(&in); 
    SDL_Init(SDL_INIT_VIDEO);        // prépare SDL 
    screen = SDL_SetVideoMode(LARGEUR_FENETRE,HAUTEUR_FENETRE,32,SDL_HWSURFACE|SDL_DOUBLEBUF); 
    carte = ChargerMap("level2.txt",LARGEUR_FENETRE,HAUTEUR_FENETRE); 
    perso = InitialiserSprite(150,150,24,32,carte); 
    FocusScrollBox(carte,perso,200,150,400,300); 
    while(!in.key[SDLK_ESCAPE]) 
    { 
        UpdateEvents(&in); 
        Evolue(&in,perso); 
        AfficherMap(carte,screen); 
        AfficherSprite(perso,screen); 
        SDL_Flip(screen); 
        SDL_Delay(5); 
    } 
    LibererMap(carte); 
    SDL_Quit(); 
    return 0; 
}

Comme dans l'exemple précédent, j'initialise une carte, puis un perso.

Ensuite, j'appelle la ligne suivante :

FocusScrollBox(carte,perso,200,150,400,300);

Cette ligne va simplement dire qu'à partir de maintenant, le scrolling sera automatique sur la carte autour du sprite perso avec un rectangle limite de 200,150,400,300 dans le repère de la fenêtre.

Une fois cette ligne posée, rien d'autre à changer dans le main.

Voyons maintenant la structure Map dans le fichier fmap.h :

struct Smap 
{ 
    int LARGEUR_TILE,HAUTEUR_TILE; 
    int nbtilesX,nbtilesY; 
    SDL_Surface* tileset; 
    TileProp* props; 
    tileindex** schema; 
    int nbtiles_largeur_monde,nbtiles_hauteur_monde; 
    int largeur_fenetre,hauteur_fenetre; 
// scroll 
    int xscroll,yscroll; 
    Sprite* tofocus; 
    SDL_Rect rectlimitscroll; 
};

Les nouveaux paramètres en bas sont un pointeur vers le sprite à focaliser, et le rectangle limite.

Tout ce que va faire la fonction FocusScrollBox, c'est remplir ces paramètres.

int FocusScrollBox(Map* m,Sprite* sp,int x,int y,int w,int h) 
{ 
    m->tofocus = sp; 
    m->rectlimitscroll.x = x; 
    m->rectlimitscroll.y = y; 
    m->rectlimitscroll.w = w; 
    m->rectlimitscroll.h = h; 
    return 0; 
}

C'est finalement la fonction AfficherMap qui va se charger de mettre le scrolling à jour.

int AfficherMap(Map* m,SDL_Surface* screen) 
{ 
    int i,j; 
    SDL_Rect Rect_dest; 
    int numero_tile; 
    int minx,maxx,miny,maxy; 
    UpdateScroll(m); 
    minx = m->xscroll / m->LARGEUR_TILE-1; 
    miny = m->yscroll / m->HAUTEUR_TILE-1; 
    maxx = (m->xscroll + m->largeur_fenetre)/m->LARGEUR_TILE; 
    maxy = (m->yscroll + m->hauteur_fenetre)/m->HAUTEUR_TILE; 
    for(i=minx;i<=maxx;i++) 
    { 
        for(j=miny;j<=maxy;j++) 
        { 
            Rect_dest.x = i*m->LARGEUR_TILE - m->xscroll; 
            Rect_dest.y = j*m->HAUTEUR_TILE - m->yscroll; 
            if (i<0 || i>=m->nbtiles_largeur_monde || j<0 || j>=m->nbtiles_hauteur_monde) 
                numero_tile = 0; 
            else 
                numero_tile = m->schema[i][j];<code type="c"><code type="c"> 
            SDL_BlitSurface(m->tileset,&(m->props[numero_tile].R),screen,&Rect_dest); 
        } 
    } 
    return 0; 
}

Vous pouvez constater un appel à une fonction UpdateScroll, qui s'en occupera.

Dans cette fonction :

int UpdateScroll(Map* m) 
{ 
    int cxperso,cyperso,xlimmin,xlimmax,ylimmin,ylimmax; 
    if (m->tofocus==NULL) 
        return -1; 
    cxperso = m->tofocus->x + m->tofocus->w/2; 
    cyperso = m->tofocus->y + m->tofocus->h/2; 
    xlimmin = m->xscroll + m->rectlimitscroll.x; 
    ylimmin = m->yscroll + m->rectlimitscroll.y; 
    xlimmax = xlimmin + m->rectlimitscroll.w; 
    ylimmax = ylimmin + m->rectlimitscroll.h; 
    if (cxperso<xlimmin) 
        m->xscroll -= (xlimmin-cxperso); 
    if (cyperso<ylimmin) 
        m->yscroll -= (ylimmin-cyperso); 
    if (cxperso>xlimmax) 
        m->xscroll += (cxperso-xlimmax); 
    if (cyperso>ylimmax) 
        m->yscroll += (cyperso-ylimmax); 
    ClampScroll(m); 
    return 0; 
}

Nous calculons les nouvelles positions de xscroll et yscroll en fonction du personnage et de la boîte limite, avec les formules vues ci-dessus.

Puis nous appelons la fonction ClampScroll :

void ClampScroll(Map* m) 
{ 
    if (m->xscroll<0) 
        m->xscroll=0; 
    if (m->yscroll<0) 
        m->yscroll=0; 
    if (m->xscroll>m->nbtiles_largeur_monde*m->LARGEUR_TILE-m->largeur_fenetre-1) 
        m->xscroll=m->nbtiles_largeur_monde*m->LARGEUR_TILE-m->largeur_fenetre-1; 
    if (m->yscroll>m->nbtiles_hauteur_monde*m->HAUTEUR_TILE-m->hauteur_fenetre-1) 
        m->yscroll=m->nbtiles_hauteur_monde*m->HAUTEUR_TILE-m->hauteur_fenetre-1; 
}

Cette fonction envisage donc le cas où la fenêtre de scrolling dépasserait à l'extérieur du monde, et si c'est le cas, elle la remet dans le monde correctement : elle l'empêche de sortir.

Notre scrolling automatique est maintenant en place.

À l'utilisation, il suffira uniquement d'appeler la fonction FocusScrollBox une fois pour toutes et le scrolling sera automatique !

Plus besoin de se casser la tête, de mettre en place plein de lignes dans le main.

Un seul appel de FocusScrollBox, et le tour est joué !

A la fin de cette partie, les collisions avec le décor sont gérées, le scrolling est automatique, et tout cela avec peu d'appels de fonctions.

Si les techniques ont pu vous paraître compliquées, rappelez-vous qu'une fois en place, l'utilisation est simple.

Après tout, pour le moment, nous n'avons dans notre header fmap.h que six fonctions...

Ceci est la troisième version du tutoriel sur le TileMapping.

Gardez bien en tête que même si la technique vous paraît complexe, une fois les outils en place, l'utilisation, elle, ne l'est pas trop. Il suffit de regarder la taille du main pour le comprendre.

Voici ce qui sera prévu dans les parties suivantes :

• remplacer cet affreux carré vert par un personnage animé ;
• gérer un champ de gravité, pour pouvoir faire des sauts et avancer de façon plus réaliste ;
• faire un fond de stage qui défilera moins vite que les tiles.

Nous pourrons aussi voir :

• comment animer des tuiles (eau, lave qui bouge), comment avoir des tuiles semi-transparentes : une barrière par exemple qui laisserait apparaître le fond entre ses barreaux ;
• comment rajouter des ennemis, leur donner un comportement ;
• comment interagir avec le monde (casser des briques, prendre des bonus…) ;
• comment mettre des tuiles qui masquent en partie notre personnage : par exemple il pourra passer derrière un bosquet et nous ne verrons alors plus ses jambes.

Nous verrons cela avec le temps, en fonction de mes disponibilités, de vos commentaires, de vos demandes par message privé ou sur le topic officiel du tutoriel.

À bientôt pour la suite !