Big Tuto SFML 2 / Action-RPG : Legends of Meruvia

Chapitre 5 : Utilisons le Level Editor !

Tutoriel présenté par : Jérémie F. Bellanger (Jay81)
Date d'écriture : 10 janvier 2016
Date de révision : 17 juin 2016

      Prologue

   Bon, notre jeu affiche maintenant notre map, mais c'était quand même un peu complexe... 

   Je vous avais donc promis un chapitre un peu plus light et le voici : nous allons voir ici comment utiliser le dernier level editor du studio Meruvia (livré avec son code source, of course ).

   Vous pourrez ainsi vous amuser à changer les maps que je vous ai données dans le chapitre précédent ou en créer de nouvelles, car un Action-RPG demande souvent plusieurs centaines de maps !  Vous étes prévenus ! 

Notez que le level editor est programmé en C / SDL 2. Cela n'a pas d'incidence sur son utilisation en tant que logiciel : les maps seront bien entendu compatibles avec le Big Tuto SFML 2, vu que le format est identique. 
Toutefois, si vous souhaitez le modifier, il faudra mettre les mains dans le code source. Il est cependant abondamment commenté, et son moteur de base a fait l'objet de plusieurs chapitres dans le Big Tuto SDL 1.2 / 2.
Cela dit, si vous restez sur un format de map classique, comme celui présenté ici, vous n'aurez pas besoin d'y toucher. 

Autre point important : le level editor pour Action-RPG est un "fork" du level editor de Rabidja. Les 2 étant maintenant développés séparément, ils n'offrent pas toujours les mêmes fonctionnalités, sachant que certaines sont vraiment spécifiques au type de jeu créé : les Action-RPGs demandent en effet beaucoup plus de variables pour pouvoir gérer, par exemple, les warps, les PNJs, le temps qu'il fait, la musique, les coffres au trésor, le loot des monstres, les cinématiques, et j'en passe ! 

   Si vous n'avez toujours pas téléchargé le level editor, je vous redonne le lien ci-dessous : 

   Vous obtiendrez ainsi une archive zip à extraire, qui contiendra le projet Code::Blocks de notre level editor.

   Vous pourrez directement le lancer si vous êtes sous Windows, car il est déjà précompilé (cherchez l'exécutable LevelEditor.exe dans le dossier Level Editor), sinon il faudra le recompiler en utilisant la SDL 2 (par exemple sous Linux et Mac)!

   J'ai choisi de vous donner la totalité du code source pour 2 raisons :

1. A des fins pédagogiques, pour voir comment j'ai fait. On aurait pu faire bien différemment, et de façon plus aboutie, mais à vraie dire, quand je l'ai créé, j'en avais besoin pour un jeu, et il fallait qu'il soit opérationnel en 2 jours maxi, j'ai donc fait au plus rapide.  Il y aurait plein de choses à rajouter pour en faire un logiciel pro, et c'est là que vous intervenez !  N'hésitez pas à me faire part de vos améliorations, si vous en faites. 

2. Pour pouvoir modifier le code : en effet, pour gérer certaines options, il va falloir les changer dans les defs du programme et recompiler. Cela aurait été impossible autrement. Le logiciel est donc plus modulable ainsi et vous pourrez l'adapter facilement à vos projets ! Il manque une variable aux fichiers map pour s'intégrer à votre jeu ?  Pas de souci, il suffit de la rajouter et de recompiler!  Si vous souhaitez le convertir en C++ / SFML, en vous inspirant des fonctions qu'on a déjà écrites dans le Big Tuto, c'est aussi possible et cela vous ferait un excellent entraînement. Dans ce cas, n'hésitez pas à me contacter sur le forum pour me montrer vos résultats (ou demander un peu d'aide). 

Note : Le level editor est souvent mis à jour, notamment par la communauté que je remercie (et plus particulièrement Stephantasy pour son travail remarquable). Vous trouverez donc certainement de nouvelles fonctions selon la version que vous téléchargerez. Même si elles sont assez simples à comprendre, vous trouverez le détail de leur utilisation dans l'archive téléchargeable. 

      Pour les experts : modifier le code (à recompiler avec la SDL 2)

   Même si vous pouvez décider de modifier tout le code, si le coeur vous en dit, j'ai regroupé les principales valeurs à changer facilement dans le fichier defs.h. 

   Là, vous pourrez modifier les defines suivantes :

- MAX_MAP_X et MAX_MAP_Y si vous souhaitez agrandir ou rétrécir la taille de vos maps (notez que cette taille devra correspondre à celle de votre jeu, sinon il y a de grandes chances que ça plante ! ).

- TILE_SIZE : même si vous pouvez la changer, je ne vous le conseille pas, car cela changerait la mise en page du programme. Si vous souhaitez faire de la HD et passer votre jeu en 64 x 64, par exemple, pas de souci. L'éditeur ne générera qu'un fichier de nombres, et il peut donc très bien rester en 32 x 32. Pensez simplement à redimensionner le tileset du jeu (en le divisant par 2) quand vous remplacerez celui du level editor. 

- MAX_TILES : si vous souhaitez utiliser vos propres tilesets, vous devrez la remplacer par le numéro de la dernière tile de votre tileset. Le scrolling du tileset s'adaptera alors automatiquement ! 

- LEVEL_MAX : si vous souhaitez rajouter des niveaux, indiquez le nombre de niveaux ici. Attention ! Si vous ne voulez pas que le programme plante, il faudra qu'il y ait autant de fichiers mapX.txt que de niveaux. Pour en ajouter, copiez/collez simplement un niveau et renommez-le (par exemple, si vous avez 2 niveaux et que vous en voulez un troisième, mettez cette valeur à 3, puis dans le dossier map de votre projet, copiez/collez map2.txt, puis renommez-le en map3.txt).

- MAX_TILESETS : si vous souhaitez rajouter des tilesets, indiquez le nombre de tilesets ici. Attention ! Si vous ne voulez pas que le programme plante, il faudra qu'il y ait autant de tilesets (A et B) que le nombre indiqué !

   Voilà pour ces principales valeurs, n'oubliez pas non plus de modifier / ajouter les fichiers tilesets / maps correspondants, comme indiqué. 

      Fonctionnement de notre tileset

   Nous n'avons pas encore pu détailler comment allait fonctionner notre jeu, ni même nos niveaux, et nous allons donc le faire maintenant. 

   Contrairement à Rabidja, nous avons déjà vu que les tiles de notre tileset standard n'auront aucune propriété prédéfinie (comme des tiles bloquantes ou des tiles spéciales).

   Tout cela sera géré grâce à un autre tileset, qui ne sera utile QUE pour le level editor, et qui n'apparaîtra QUE quand on choisira l'onglet Collisions en haut du level editor.

   Comme une image vaut mieux qu'un long discours  :

   Vous voyez ainsi que le tileset standard disparaît pour laisser apparaître un tileset moins glamour mais plus pratique ! 

   Par souci pratique, la fenêtre principale affiche les 3 couches de tiles telles qu'elles apparaîtront en jeu, et les tiles spéciales sont blittées par transparence par dessus. Cela permet de voir exactement ce qu'on fait.

   Voyons maintenant ce que nous propose ce nouveau tileset :

   Comme vous pouvez le voir, il existe plusieurs sortes de tiles spéciales. Nous allons les détailler ci-dessous. Notez cependant que toutes ne nous serviront pas encore dans cette première partie du tuto. 

- la première tile, blanche, est une tile vide, c'est-à-dire qu'elle ne fera rien et le personnage passera à-travers. C'est la tile de base qui recouvre toute la map.

- la tile rouge : très importante, cette tile permet de créer un mur : elle bloquera le joueur qui ne pourra pas marcher sur la tile qu'elle recouvre. Servez-vous en pour créer exactement le décor que vous voulez et vous pouvez même décider de créer des murs traversables pour faire des passages secrets (un peu comme dans les vieux Final Fantasy). 

- la tile door : elle sera utilisée dans la suite du projet pour créer des portes qui s'ouvrent / se ferment automatiquement (par exemple quand on tue tous les monstres d'une salle, comme dans Zelda). 

- la tile Ciné : elle sera utilisée dans la suite du projet pour déclencher une cinématique, dès qu'elle sera repérée par le jeu. Mais on verra ça plus tard, car c'est assez complexe à mettre en place ! 

- les tiles warps 1 à 10 : Chaque tile permet de "warper", soit se téléporter dans un autre niveau. Notez que vous pouvez choisir le niveau vers lequel téléporter le joueur dans les options en dessous : Spec N° indique le numéro de la warp spéciale sélectionnée (1 à 10) et value indique le niveau vers lequel on sera téléporté. Utilisez les boutons +1, -1 (ou +10, -10 pour aller plus vite ) pour sélectionner la bonne warp et changer sa valeur. Notez que le jeu va téléporter notre héros d'une warp vers une autre ayant le même numéro. Ainsi, si vous placez la warp1 sur le niveau de départ, il faudra placer la warp1 sur le niveau d'arrivée, sinon cela ne fonctionnera pas ! 

- les tiles Monst (Monster) : elles permettent de placer le monstre correspondant sur la map, comme dans Rabidja. Nous aurons 2 monstres disponibles dans la 1ère partie de notre projet. 

- les tiles suivantes ne seront pas utilisée dans l'immédiat. Nous les détaillerons quand nous en aurons besoin, plus tard.  Mais sachez que j'ai déjà prévu des coffres au trésor (chest), des bosses, des PNJs, des pièges (Traps) et des mécanismes (Button).

      Fonctionnement du level editor

   Passons maintenant au fonctionnement de notre level editor, car même si j'ai essayé de faire en sorte qu'il soit le plus évident possible à utiliser, il y a quand même pas mal de fonctionnalités à voir !

   On peut utiliser le level editor de plusieurs façons : à la souris (on peut tout faire à la souris ), au clavier (certains raccourcis clavier sont bien pratiques et vous feront gagner du temps ), ou alors avec son doigt (ou un stylet) sur un écran tactile : c'est le cas par exemple si vous utilisez une tablette sous Windows 8 / 8.1 / 10 (sauf version Windows 8 RT, à bannir  !).

   La map s'affiche dans la fenêtre centrale, et commence par le niveau 1. On peut changer de niveau (en considérant que le niveau max sera défini dans la def qu'on a vu ci-dessus - et en considérant aussi que le fichier map correspondant est bien dans le bon répertoire ), en cliquant sur +1 / -1 ou +10 / -10 en face de Target level puis en appuyant sur GO. Cela permet de choisir tranquillement son niveau (même si c'est le niveau 712 ! Rappelons qu'un Action-RPG peut vite avoir beaucoup, beaucoup de niveaux, contrairement à un jeu de plateformes ! ) Une fenêtre s'ouvre alors et vous demande si vous voulez sauvegarder votre niveau avant d'en changer. Cela évite les manipulations malencontreuses. 

   On peut également changer de tileset en cliquant sur +1 ou -1 en face de Tileset number. Notez qu'un seul tileset peut être utilisé en même temps ! Comme ici, on n'a qu'un seul tileset, de toute façon, cela ne fera rien. 

   Pour naviguer dans la map, vous pouvez utiliser les flèches bleues, ou bien les touches fléchées du clavier.

   Quant à Mouse(113, 543), elle vous indique les coordonnées de la souris et l'icône Grille en face permet d'activer ou de désactiver l'affichage de la grille de tiles, pour mieux se repérer. 

   Le tileset s'affiche en haut à droite et on peut le faire défiler à l'aide des flèches bleues. En cliquant sur une tile, on la sélectionne et elle s'affiche dans le cadre Tile choisie.

   On peut aussi faire défiler les tiles à l'aide de la molette de la souris. 

   Les onglets du haut, permettent de sélectionner la couche à éditer (1, 2, 3, toutes les couches ensemble ou la surcouche Collisions). On peut aussi se servir de la touche F1.

Notez que les couches vont se superposer dans l'ordre suivant : couche 2 (Background) dans le fond, couche 1 (Action) par dessus, les sprites seront ensuite affichés par dessus ces deux couches, puis la couche 3 (Foreground) sera affichée par-dessus les sprites, ce qui permettra de les faire passer sous du feuillage, des arches, ponts, etc...

   Sur la map, un clic gauche colle la tile choisie sur la couche sélectionnée, tandis qu'un clic droit copie la tile pointée. Pour effacer une tile, il suffit simplement de coller la tile vide (0) par-dessus.  Attention, dans l'onglet ALL (qui affiche le résultat in-game), on ne peut pas éditer les tiles !

   On peut choisir l'emplacement de départ du niveau en cliquant sur la cible à côté de Choose start point, on clique ensuite où l'on veut sur la map, et on reclique sur le même bouton pour arrêter le choix du "startPoint".

   Ensuite, les boutons SAVE (ou la touche S) et LOAD (ou la touche L) permettent de sauvegarder / charger la map sélectionnée (i.e. le niveau en cours) et le bouton RESET (ou la touche R) réinitialise la map à 0. Là aussi, j'ai rajouté des messages de sécurité qui vous demanderont de confirmer. Qui plus est, après un RESET, la map n'est plus sauvegardeé directement. Si vous avez donc effacé votre map par erreur, il vous suffit de refaire LOAD et de confirmer pour la retrouver comme par magie (OUF !). 

Malgré l'ajout de toutes ces sécurités avec nos nouvelles boîtes de dialogue, une mauvaise manip' peut toujours arriver, pensez donc à sauvegarder fréquemment et à faire des copies de secours de vos maps ! 

   Les boutons Copy et Paste permettent de Copier / Coller une map d'un niveau à un autre. Cela peut-être pratique, pour un nouveau niveau de ne pas repartir de zéro, mais d'avoir déjà du sol et des éléments de décor (même si on est bien d'accord que chaque niveau doit être foncièrement différent, pas comme dans certains (mauvais) jeux, faits à la va-vite ).

   Enfin, le cadre central à gauche affichera des messages de confirmation, en plus des boîtes de dialogue de sécurité.

      Ajouts par Stephantasy (un grand merci à lui ! ) :

 La sélection :

   L’utilisation des nouvelles fonctionnalités (disponibles dans l'encadré à droite, à côté du choix du niveau, etc.) se fait à partir d’une sélection.

   Pour sélectionner une Tile, il suffit de maintenir le bouton « Control » ou « Ctrl » enfoncé et de faire un clic gauche sur une Tile. Un encadré apparait indiquant que la Tile est sélectionnée.

   En répétant l’opération sur une Tile un peu plus loin, on crée une zone de sélection :

Enfin, un clic droit désactivera une sélection

Un clic gauche de la souris sur la Map désactivera également la sélection. Cependant, il garde sa fonctionnalité initiale, c’est-à-dire qu’il permet de coller une Tile.

   Ajout / suppression de ligne / colonne
   Cette fonctionnalité permet d’agrandir ou de rétrécir une Map très facilement. Pour ajouter ou supprimer une ligne ou une colonne (« Row »et « Column »), il suffit de sélectionner une Tile, qui sera l’endroit de l’action, puis d’appuyer sur l’icône désirée :

 : Ajout d’une colonne vide.
 : Suppression de la colonne.
 : Ajout d’une ligne vide.
 : Suppression de la ligne.

   Ajout :

   Lors d’un ajout, une zone de Tile vide (Tile = 0) est ajoutée à l’endroit de la sélection. Tout le reste de la Map sera décalé vers la droite ou vers le bas.

Attention : Si votre Map est de 80 Tiles de haut ou de 80 Tiles de large et que vous ajoutez une rangée, la dernière rangée de la Map disparaitra, car elle sortira de la zone maximum permise.

   Suppression :

   Lors d’une suppression, toute la rangée sélectionnée sera supprimée. Tout le reste de la Map sera décalé vers la gauche ou vers le haut. Si votre Map était de 80 Tiles de haut ou de 80 Tiles de large, la dernière rangée sera alors vide.

Note : Vous constaterez qu’il n’y a pas besoin de choisir de calque. En effet, c’est la Map complète qui est affectée par l’action, donc tous les calques seront modifiés en même temps.

   Copier/coller d’une zone :

   Cette fonctionnalité permet de copier une partie de la Map, puis de la coller autre part. Pour copier une zone de la Map, il faut d’abord choisir un calque (Layer 1, 2 ou 3). Faites une zone de sélection, puis faites CTRL+C pour copier la zone sélectionnée.

   Choisissez le calque sur lequel vous souhaitez coller la zone copiée et sélectionnez une Tile.
    Enfin, faites CTRL+V. Et voilà !

   Remplissage
   Cette fonctionnalité permet de remplir une zone définie avec la Tile choisie. Commencez par choisir un calque. Ensuite, choisissez une Tile, de telle sorte qu’elle apparaisse dans « Tile choisie », puis sélectionnez une zone.
   Enfin, appuyez sur l’icône de remplissage . Magie, tout est rempli en 2 clics ! (En réalité, c’est 5 clics, mais on ne va pas chipoter… )
 

      Variables pour notre Action-RPG :

   Vous aurez enfin remarqué toutes ces variables, modifiables à l'aide des boutons +1/-1 ou +10/-10 pour aller plus vite, qui ont poussé au bas de notre fenêtre.

   Je vous rassure tout de suite, la plupart ne nous servira pas dans la première partie de ce tuto ! 

   Celles qui vont nous servir pour l'instant sont les valeurs des Warps : le numéro que vous rentrerez ici sera le niveau vers lequel sera envoyé le joueur quand il sortira de l'écran en haut, en bas, à droite ou à gauche. C'est tout !

   Pour les Warps Spéciales (quand on rentre dans les maisons par exemple), c'est Spec N° et j'ai déjà expliqué plus haut comment s'en servir. 

   Pour le reste, vous pouvez tout laisser à 0 pour l'instant, car on ne s'en servira pas dans l'immédiat ! 

   Et voilà pour l'utilisation de ce level editor ! Comme vous pouvez le voir, il a bien grossis depuis ses débuts ! 

   Je vous laisse donc vous amuser un peu avec et je vous dis à bientôt pour le chapitre 6 ! 

                                                                                                                                              Jay.