Big Tuto SDL 2 : Rabidja v. 3.0

Chapitre 6 : Affichons notre premier niveau !

Tutoriel présenté par : Jérémie F. Bellanger (Jay81)
Dernière mise à jour : 8 octobre 2014
Date de révision : 30 mai 2016

      Prologue

   Eh, voilà !  Nous avons maintenant un magnifique background !

   C'est... comment dire ?  C'est zen !  C'est même très (trop) zen !

   Il va nous falloir un peu d'action, sinon on va s'ennuyer ferme, quand même ! 

   Mais avant d'ajouter le héros du jeu ou même quelques ennemis, il va falloir ajouter un niveau, autrement appelé une map ! 

   Eh oui, sinon, nos bonhommes tomberaient dans le vide ! 

   Et pour afficher nos maps, nous allons avoir besoin de deux choses :

- d'une part, des fichiers maps, que nous générerons à l'aide d'un éditeur de niveaux,

- et d'autre part, de tilesets.

Mais, c'est quoi un tileset ? 

Un tileset est un ensemble de tiles, autrement appelées tuiles en français, qui sont en fait des fragments de niveaux (elles font généralement 32 x 32 pixels, mais elles ont pu faire moins sur d'anciens jeux (NES ou Master System par exemple) comme : 16 x 16, 8 x 8 ou 16 x 8, etc... Sur des jeux HD, comme, au hasard, Aron's Journey in Dreamland HD , on peut en trouver de 64 x 64 pixels voire plus ). On les copie ensuite de façon répétitive pour créer une map à l'aide d'un éditeur de niveaux.

Si vous débarquez tout juste et que vous découvrez cette notion, je vous conseille alors de lire d'abord ce chapitre théorique avant de continuer, sinon, vous risquez d'être largué !

   Ok, mais où je trouve un level editor (ou éditeur de niveaux) ?

   Alors, il faut savoir que les éditeurs de niveaux que nous avions déjà créé en SDL 1.2 fonctionnent toujours, même s'il va falloir les retoucher pour qu'ils prennent en compte un affichage sur 3 couches. Cela dit, comme notre jeu est maintenant plus complexe, la création d'un véritable level editor digne de ce nom, prend plus de temps. C'est pourquoi, je vous conseille d'utiliser le mien, que je mets à votre disposition dans la section téléchargements. 

   La version que nous utiliserons pour le début de ce tuto est une ancienne bêta (v 0.82), qui sera bien suffisante pour l'instant. Mais vous pourrez télécharger la version complète avec toutes les fonctions pour la fin du tuto, afin de pouvoir créer votre propre jeu avec le maximum de confort. On verra plus tard comment l'utiliser. 

Télécharger le level editor

Le nouveau level editor est plus sympathique et gère même les écrans tactiles sous Windows 8

   D'accord, mais je n'ai pas de fichiers map, ni de tilesets, non plus ?!

tileset1.png et tileset1b.png, à enregistrer dans le dossier graphics

   ...et les fichiers map se trouvent dans le dossier map du projet complet, téléchargeable ci-dessous (dans la section téléchargements du site ).

   Alors, on récapitule : en ce début de chapitre, vous devez donc avoir :

- ajouté un dossier map à votre projet, dans lequel vous aurez mis 2 fichiers : map1.txt et map2.txt, qui seront les fichiers de nos 2 niveaux (mais rassurez-vous, vous pourrez en créer bien d'autres après ! )

- copié les fichiers tileset1.png et tileset1b.png dans le dossier graphics de votre projet.

- (facultatif) téléchargé le level editor pour modifier les fichiers map à votre guise.

      Comment afficher une map ? Un peu de théorie...

   Mais pourquoi on a 2 tilesets identiques ? 

   Si vous regardez attentivement (c'est le jeu des 7 erreurs !  ), vous verrez qu'ils ne sont pas tout à fait identiques : certaines tiles sont un peu différentes.  Nous allons ainsi créer une animation assez sommaire (sur 2 frames) pour donner l'illusion de la vie à nos niveaux. Bien sûr, on pourrait viser plus de frames avec un système plus compliqué pour gagner en rendu, mais pour un petit jeu de plateforme rétro, ça sera suffisant (pensez que Mario 1 sur NES n'avait pas de tiles animées, ce qui ne l'empêche pas d'être un super jeu ! ).

   Concrètement, nous allons donc alterner les deux tilesets à la suite avec un timer (chronomètre), pour donner l'illusion du mouvement: un coup, on blittera la tile du tileset1 et l'autre fois la même tile mais dans le tileset1B. 

   C'est quoi un affichage sur 3 couches (ou layers) ? A quoi cela va-t-il nous servir ? 

   On pourrait se contenter de tout afficher sur une seule couche (aussi appelée layer en anglais, ou calque en français), comme au début du Big Tuto SDL 1.2. Cependant, l'affichage sur 3 couches est bien plus beau, et pas réellement plus difficile à gérer (la difficulté se trouve essentiellement dans le level editor, mais comme je vous le donne avec son code source ! ).

   Et en quoi, c'est plus beau ? 

   Cela permet d'empiler jusqu'à 3 tiles au même endroit : on peut ainsi dessiner un arbre devant un mur, par exemple, et encore blitter une fleur à ses pieds. Nos niveaux gagnent ainsi en complexité, sont moins répétitifs et donc plus jolis, et tout cela avec le même tileset minimaliste. 

   Qui plus est, cela nous permettra aussi de gérer la profondeur. En effet, nos 3 couches vont se répartir ainsi :

- 1. Background : tiles blittées dans le fond : tous les sprites passeront devant et ne pourront pas entrer en collision avec : elles sont juste là pour décorer. 
- 2. Tiles d'action : ces tiles apparaîtront devant le background et nos sprites entreront en collision avec : c'est donc sur cette couche qu'on trouvera le sol, les power-ups, etc...

- 3. Foreground : tiles blittées par dessus toutes les autres et par-dessus les sprites : tous nos sprites passeront derrière ces tiles : cela nous permettra, par exemple, de faire passer notre héros derrière un arbre, une plante, etc...
 

   Et comment va-t-on stocker notre map, concrètement ? 

   Dans des fichiers txt. Vous pouvez d'ailleurs ouvrir ceux que je vous ai donnés, pour voir à quoi ils ressemblent. 

   En fait, ce sont des lignes et des colonnes de chiffres, représentant chacun le numéro d'une tile à blitter à un emplacement précis de notre niveau, comme nous l'avons vu dans le tutoriel que je vous ai conseillé de lire plus haut.

   Quand nous lirons ces fichiers, nous rentrerons ces valeurs dans des tableaux de tiles (3 tableaux, 1 pour chaque couche de notre niveau).

   Dans chaque case, on trouve donc un numéro correspondant au numéro de la tile dans notre tileset, que l'on blittera aux coordonnées correspondant au numéro de sa case (ligne, colonne) multiplié par la taille d'une tile (soit dans notre cas 32 pixels, car nos tiles font toutes 32 x 32 pixels ). Regardez à nouveau le tableau ci-dessus et imaginez que 0 représente du ciel, 2 du sol, 3-4 un palmier et 6 un nuage.

   Vous le voyez  ? Je vous ai mis des jolies couleurs pour que ce soit mieux !  

   Bon, tout ça, c'est encore un petit peu compliqué, mais je vous rassure tout de suite, le code n'est pas si difficile que ça à comprendre, et il est très répétitif ! 

   Qui plus est, ça peut paraître une tâche immense que de blitter toutes ces centaines de tiles, 60 fois par seconde, mais c'est le PC qui va bosser ! 

      Le code

   Nous allons, logiquement, commencer par développer notre structure Map, dans notre header (en-tête) structs.h. Nous y ajouterons toutes les variables dont nous aurons besoin pour afficher notre map de niveau. 

Fichier : structs.h

   Comme vous pouvez le voir, on rajoute pas mal de variables ! 
   Je vous fais l'article rapidement :

- les SDL_Textures tileSet et tileSetB contiendront, selon toute logique, nos deux tilesets. 

- tilesetAffiche gardera en mémoire le numéro du tileset affiché à l'écran,

- beginx et beginy contiendront les coordonnées du point de départ de notre héros. Ce point de départ est paramétrable dans l'éditeur de niveaux , on n'est pas obligé de toujours commencer en haut à gauche ! 

- startx et starty contiendront le point de départ à partir duquel on doit dessiner la map. Pour l'instant, ce sera (0 ; 0), mais ces valeurs seront amenées à changer plus tard quand on mettra en place notre caméra et notre scrolling. 

- maxX et maxY sont les coordonnées de la fin de la map. On verra dans la fonction loadMap() qu'on scanne le fichier de la map, jusqu'à ce qu'il n'y ait plus que des 0 (= absence de tile) : ce sera alors la fin de notre niveau. Ainsi, peu importe la taille de notre map dans le level editor, le jeu s'y adaptera automatiquement ! 

- nos 3 tableaux tile, tile2 et tile3, de taille MAX_MAP_X et MAX_MAP_Y contiendront nos niveaux, en enregistrant pour chaque ligne et chaque colonne, le numéro de la tile à afficher, comme nous l'avons vu plus haut (et dans le tuto dédié que je vous avais invité à lire ).

- enfin mapTimer sera notre chrono pour savoir quel tileset (A ou B) afficher, valeur qui sera contenue dans tileSetNumber. 

   Voilà, complétons maintenant nos defs :

Fichier : defs.h - rajoutez :

   Nous définissons donc notre map pour avoir les dimensions max de 400 tiles de large par 150 de hauteur, ce qui est assez grand, puisque cela représente : (400 x 32 =) 12 800 x (150 x 32 =) 4800 pixels ! 

   La taille de notre tile de base sera de 32 x 32 pixels (si plus tard, vous souhaitez faire un jeu rétro, ou au contraire HD, vous pourrez changer facilement cette variable, et tout le reste devrait s'adapter automatiquement ).

   Et enfin, on définit un timer, ou chrono, de 20 tours de boucle (soit 1/3 de seconde puisqu'on est en 60 fps) pour l'anim' de notre map.

   Passons maintenant à l'initialisation de notre map :

Fichier : init.c

   Dans la fonction loadGame(), on va rajouter l'appel à deux fonctions que nous créerons ensuite : setValeurDuNiveau() qui se chargera simplement de changer la valeur du niveau à 1, pour afficher la map 1, et changeLevel() qui chargera le niveau en question.

   Et c'est tout, passons maintenant au fichier map.c :

Attention : En fonction de l'IDE que vous utiliserez le code sera sensiblement différent pour certaines fonctions. En effet, si Code::Blocks ne lève pas de warnings pour des fonctions telles que sprint_f ou fopen, Visual Studio les considère comme dépréciées et ne les aime pas du tout. Il existe un moyen d'ignorer ces warnings, mais tant qu'à utiliser VS, j'ai choisi de suivre ses recommandations en matière de sécurité, et j'ai donc mis à jour le code.

Fichier : map.c - modifiez :

   Commençons par initMaps(). Vous remarquerez que c'est très simple, puisqu'on rajoute simplement la valeur de notre timer, et on initialise à 0 la valeur du tileset (même si cette valeur sera changée par la suite, car on n'a pas de tileset 0 ).

Version Visual Studio

Fichier : map.c - ajoutez la fonction :

   Et la même chose pour Code::Blocks. Attention, ne copiez bien qu'une seule de ces deux versions (la bonne de préférence ! ).

   C'est cette fonction qui va se charger de lire et de charger nos fichiers maps.

   Pour cela, elle ouvre le fichier dont on lui envoie le nom en paramètre. Bien entendu, on rajoute une sécurité : si le fichier ne s'ouvre pas (ou n'existe pas), on fait un printf vers stderr et on quitte proprement.

   Ensuite, elle enregistre les 3 premiers chiffres du fichier dans les variables beginx, beginy et tilesetAffiche. C'est un choix que nous avons fait, en créant notre level editor : celui-ci enregistre les coordonnées de départ du joueur et le tileset à utiliser au début du fichier. Notez qu'on aurait aussi pu les mettre à la fin (cela aurait même été plus simple en fait, mais bon... ).

   Ensuite, elle va balayer toutes les valeurs des tiles et les stocker au bon endroit dans nos tableaux de tiles. Notez que le procédé se répète pour nos 3 tableaux et que le plus simple (et le plus clair) était un simple copier/coller. 

   Elle lit donc le fichier nombre par nombre et ligne par ligne (d'où la double boucle) et remplit notre tableau à deux dimensions au fur et à mesure. Comme notre fichier reprend le même format que notre tableau, c'est facile ! Un fscanf suffit à déterminer le numéro de la tile. L'illustration suivante montre ce que fait cette fonction :  

   Le mystère de map.maxX et map.maxY :

   Vous vous serez sans doute demandé pourquoi ces 2 variables changent à chaque fois que la valeur d'une tile est différente de 0.  En fait, si notre fichier a une taille prédéfinie, on veut pouvoir se laisser le choix de faire des niveaux de la taille qu'on veut (c'est mieux, non ? ).

   Alors pour ça, c'est très simple : les limites du fichier à lire sont clairement indiqués dans le programme (donc inchangeables, c'est MAX_MAP_X et Y) mais pas celles de la map. Comme je vous l'ai déjà dit, elles sont définies à la lecture du fichier map : les limites augmentent donc à chaque tour de boucle tant qu'il y a des tiles différentes de 0 (donc non-vides). Dès qu'il n'y a plus que des tiles vides, ça veut dire qu'on a atteint la fin de la map et qu'on ne pourra donc pas scroller dans le vide (plus tard).

   Comme ça, avec le même format de fichier, on pourra faire des niveaux horizontaux, verticaux ou les deux, de la taille que l'on désire (dans la limite de 400 x 150 tiles soit la taille du fichier). Malin, non ?  En plus, ça marche avec seulement 5 lignes de code !

   Et on n'oublie pas de fermer le fichier à la fin ! (C'est hyper important ! )

   Passons maintenant à la fonction drawMap() :

Fichier : map.c - ajoutez la fonction

   Je vous laisse d'abord lire les commentaires de ce fichier, qui sont déjà très complets. 

   Quand notre caméra et notre scrolling seront opérationnels (bientôt, bientôt ), les calculs au début de cette fonction permettront de déterminer à quel point débuter l'affichage de la map. Ces calculs sont un peu compliqués mais pour faire court, on calcule par quelles colonne et ligne de tiles on doit commencer l'affichage, selon les valeurs de map.startX et map.startY (qui augmenteront/diminueront plus tard selon les inputs et l'avancée de notre héros ). Ensuite, on calcule où commencer à blitter la première colonne et la première ligne (parfois hors-écran selon le scrolling). Enfin, on calcule où arrêter l'affichage de la map : si la 1ère ligne/colonne a été blittée hors écran, il va en effet falloir blitter une ligne/colonne de plus. 

   Sinon, vous aurez remarqué que, là encore, on a 3 versions du même code selon la couche à afficher. En effet, afin de pouvoir afficher la couche que l'on veut, quand on veut (et pas les 3 à la suite, puisqu'il va nous falloir ensuite intercaler nos sprites entre elles  ), on prend en argument le numéro de la couche ou layer à afficher et on la traite. A l'intérieur de chaque couche, l'affichage se fait grâce à une double boucle : on fait d'abord défiler les y, donc les lignes (on commence par la ligne 0 puis 1, 2, etc...) puis pour chaque ligne toutes les colonnes (x) jusqu'aux limites de la map définies par la taille de l'écran (en largeur et en hauteur). Logique, non ? 

    Pour chaque "case" de notre tableau, on reprend la valeur de notre tile (comme on l'a vu précédemment) et on blitte la tile correspondante à cet endroit précis grâce à notre fonction drawTile(), que nous rajouterons par la suite. 

   On vérifie ?  Mettons qu'on veuille afficher la tile N° 43 (eau basse bleue) puis la 126 (Monster 1) :

Cela marche !!! Ouf ! 

   Enfin, pour trouver les coordonnées où blitter sur la carte, c'est très simple, on envoie notre x et notre y de nos boucles, puisqu'ils s'incrémentent automatiquement de la taille d'un tile (32 pixels) à chaque tour de boucle ! 

   Bon, je sais que ce chapitre peut paraître un peu indigeste jusque-là puisqu'on voit beaucoup de choses nouvelles d'un coup, mais on arrive bientôt au bout, courage ! 

   Qui plus est, n'oubliez pas que vous pouvez aussi consulter le Big Tuto SDL 1.2 / 2 qui va un peu plus lentement (ici, on est dans le tuto Experts ! ).

   Passons à notre fonction changeLevel() dont nous avons parlé précédemment. Là encore, elle va changer selon notre IDE :

Version Visual Studio

Fichier : map.c - fonction à rajouter :

Version Code::Blocks

Fichier : map.c - fonction à rajouter :

   Heureusement, cette fonction est bien plus simple (les 2 plus compliquées étaient loadMap() et drawMap(), on a donc passé le pire ! ).

   On envoie simplement le nom du fichier map à charger en fonction du niveau. Puis, on détruit les tilesets chargés précédemment s'il y en a, pour charger ceux correspondant à notre map. Comme c'est très rapide, on n'a pas besoin d'écran de Loading. 

   Enfin, il est temps de faire un peu de ménage :

Fichier : map.c - mettre à jour :

   Comme le numéro du niveau en cours va être stocké dans le fichier player.c, il va nous falloir le créer et l'ajouter au projet.

   Copiez-y ensuite le code suivant :

Fichier : player.c - créer le fichier

   Voilà, pour l'instant c'est très embryonnaire : on y trouve simplement notre variable level et une fonction pour y accéder ainsi qu'une autre pour la modifier. 

   Rien de plus ! 

   Passons maintenant à notre fichier draw.c !

Fichier : draw.c - fonction à mettre à jour :

   On met d'abord à jour notre fonction drawGame() pour qu'elle affiche les 3 couches de la map dans l'ordre (couche 1 = action, couche 2 = background et couche 3 = foreground - cf. ci-dessus). 

Fichier : draw.c - fonction à rajouter :

   Et voici enfin notre fonction drawTile() dont le but va être de découper notre tileset pour afficher uniquement la bonne tile.

   Plus qu'à mettre à jour nos prototypes et c'est fini ! 

Fichier : prototypes.h - mettre à jour :

   Et c'est fini ! On peut maintenant compiler, lancer le programme et admirer le début de notre niveau s'animer sous nos yeux ébahis ! 

   Bon, c'était un chapitre un peu dense, avec beaucoup de nouveautés et de choses à digérer, c'est pourquoi le chapitre prochain sera plus light : je vous montrerai comment utiliser le level editor pour modifier la map, et revoir un peu tout ce que nous avons vu ici. 

   @ bientôt et merci de votre fidélité au site !

                                                                      Jay.