Tuto GB Studio : Chapitre 3
Editer des niveaux avec Tiled

Dans ce troisième chapitre, nous allons éditer le niveau 2 pour le compléter avec le tileset 1, que j'ai préconçu. 

Nous verrons par la suite comment dessiner de nouveaux tilesets pour les rajouter et créer vos propres niveaux. Mais on va y aller par étapes. 😉

Commencez par ouvrir le logiciel Tiled en cliquant sur Tiled.exe dans le dossier Tiled (ou sur le raccourci sur votre bureau, si vous l'avez installé).

Là, cliquez sur Ouvrir un fichier ou un projet...

Là cherchez le projet Tuto Platformer.tiled-project que j'ai précréé dans le dossier Tuto GB Studio/Projets GB Studio/Fichiers Tiled.

Vous devrier obtenir ceci :

Ici, c'est assez simple :

• dans la colonne de gauche se trouvent les fichiers du projet : juste 2 pour l'instant : le niveau 2 et le tileset 1.
• Au milieu apparaît le niveau 2 que vous pouvez éditer et faire défiler.
• En bas à droite, se trouve le tileset 1 pour éditer le niveau.

Pour éditer la map, c'est toujours aussi simple :

• Faites un clic gauche sur une tile du tileset pour la sélectionner, puis faites un clic gauche sur la map du niveau pour la coller.
• Vous pouvez sélectionner une tile de la map en faisant un clic droit dessus (pratique pour gagner du temps 😉).
• Vous aussi sélectionner plusieurs tiles d'un coup avec la sélection rectangulaire en haut de la map et faire du copier / coller avec CTR + C / CTRL + V.
• N'oubliez pas de sauvegarder fréquemment en allant dans Fichier -> Tout sauvegarder.

Maintenant que vous avez fini votre niveau, sauvegardez-le bien puis exportez-le en tant qu'image :

Exportez-le puis allez dans les Fichiers Tiled, sélectionnez le fichier Level 02.png fraîchement exporté et copiez-le dans le dossier Tuto Platformer/assets/backgrounds.

Retour à GB Studio

Vous pouvez maintenant rouvrir le Tuto Platformer dans GB Studio et en allant dans le niveau 2, vous verrez que votre nouveau niveau s'affiche désormais ! 😃

Cependant, il va maintenant falloir l'éditer pour qu'il fonctionne dans notre jeu. 😜

Editer le sol et les murs

On va commencer par éditer les collisions avec le sol et les murs.

En effet, il faut dire au jeu quels sont les éléments solides ou non pour qu'il le sache.

Pour cela, cliquez sur l'icône murs en haut à droite de la map :

Un petit cube rouge va alors apparaître, si vous cliquez sur une tile de la map (8 x 8 pixels), elle va devenir rouge, indiquant un mur / bloc solide.

Les outils d'édition dans la barre du haut sont les suivants : 

• Carrés de sélection de 8 x 8 pixels ou de 16 x 16 (pour gagner du temps) 
• Remplissage pour remplir tout d'un coup (évitez de mettre des murs partout quand même 😋).
• Baguette magique : très utile : toutes les tiles identiques deviennent des murs par exemple, sur toute la map (attention quand même aux erreurs possibles entre des tiles solides et des tiles de décor 😉).
• Pentes : pour dessiner des pentes avec une ligne bleue.
• Carré rouge = mur / bloc solide, infranchissable par le joueur.
• Rectangles de couleur : indique des tiles qui ne sont franchissables que par un côté : on utilisera le bleu marine, par exemple, pour les tiles plateformes franchissables par le bas mais solides sur le dessus. 😜
• Echelle : pour mettre des échelles.
• Oeil : cache les monstres, déclencheurs, etc...

Voilà, à vous de jouer pour éditer les murs de votre map et éviter que Rabdja ne traverse le sol... 😅

Editer les couleurs de la map

En éditant votre map, vous aurez sans doute remarqué que les couleurs ne sont pas bonnes...

Eh oui, il ne faut pas oublier qu'on est sur Game Boy, et qu'à l'origine elle était en noir et blanc (ou plutôt en nuances de verts... 😅) ! La Game Boy Color vient apporter la couleur mais cela reste très limité.

En effet, cela fonctionne avec un système de palettes (et cela afin d'être rétrocompatible avec les jeux Game Boy qu'elle pouvait coloriser).

En gros, les graphismes sont toujours dessinés en noir et blanc (4 nuances, en gros : blanc, vert clair, vert foncé, noir. C'est pour ça que Tiled était en noir et blanc. 😉) Et ensuite, on applique des palettes à chaque tile de notre map.

Vous pouvez accéder aux palettes, en sélectionnant Palettes en haut à gauche :

Là, vous pouvez modifier les palettes par défaut et celles que j'ai déjà créées pour le niveau 1. Vous pouvez aussi en créer de nouvelles.

Ensuite, pour les importer dans votre scène, il faut les sélectionner ici :

Notez que vous êtes limité à 7 palettes + 1 pour l'UI (menus), ce qui ne permet pas d'afficher beaucoup de couleurs. Il faudra donc ruser quand vous dessinerez vos tiles plus tard, afin d'avoir un résultat correct. 😉

C'est hyper limitant mais ça force aussi à être créatif ! 😄

Voilà, passons maintenant à la peinture de notre niveau. Normalement, vous n'avez pas besoin de changer de palettes (sauf si vous en avez envie), car tout est préconfiguré.

Cliquez sur l'icône Palette, en-dessous des murs, pour afficher un menu qui ressemble au précédent. Là, comme pour les murs, vous allez pouvoir peindre chaque tile en choisissant la palette qui vous plaît le plus. Normalement, j'ai mis des noms assez compréhensifs pour les palettes, mais vous pouvez tout changer comme vous le souhaitez.

N'oubliez pas d'utiliser la baguette magique pour gagner du temps ! 😉

Notez aussi que Priorité des Tuiles vous permet de déclarer des tiles qui seront au premier plan : cela permettra au joueur de passer derrière ! Sympa comme effet, pour passer derrière un arbre ou une cascade. 😊

Et voilà un exemple. 🥳

Vous pouvez tester votre map à tout moment, en lançant le jeu avec la flèche en haut à droite ! 😀

Les pièges (déclencheurs / triggers)

Si vous avez lancé votre niveau pour tester, vous aurez sans doute remarqué que votre personnage ne meurt pas partout quand il tombe dans l'eau ou le vide. C'est parce qu'il manque le déclencheur (ou trigger en anglais) qui gère la mort du joueur.

Pour les rajouter, c'est simple, il vous suffit d'en sélectionner un que j'ai déjà créé et de le copier / coller comme on avait fait avec les Acteurs / Globulos :

Pour le code du déclencheur, c'est juste un copier/coller de celui qui cause la mort du joueur quand il touche un Globulos. 😉

Notez que comme on est limité à 30 déclencheurs, on peut en utiliser un grand couvrant plusieurs trous d'un coup, s'ils sont à la même hauteur. 

Astuce pour tester la map en cours sans avoir à recommencer TOUT le jeu 

Si vous devez tester votre niveau 40 fois, vous trouverez ça rapidement ennuyeux de recommencer le jeu à chaque fois (et encore, c'est que le niveau 2, imaginez le niveau 20 ! 😆)

Il existe une astuce facile : faites un clic droit sur votre map / niveau et choisissez : Set as Starting scene :

Déplacez ensuite le curseur orange pour le mettre au début du niveau (à côté du bleu par exemple).

Et voilà ! Pour le remettre au début du jeu, faites pareil sur la scène Logo. 😋