Introduction à l'éditeur de cartes en mosaïque Un outil indépendant de la plate-forme pour les cartes de niveaux

Dans cet article, je vais vous donner une introduction de base à l’éditeur de cartes en mosaïque et au processus de conception qui l’entoure, tout en soulignant les raisons de son utilisation. Je vais aussi rapidement vous montrer comment créer une carte dans Tiled.


Exigences

  • Version en mosaïque 0.8.1: http://www.mapeditor.org/
  • Tileset d'ici. Ces tuiles sont un ensemble légèrement modifié à partir du pavé de communauté OpenGameArt.org: http://opengameart.org

Qu'est-ce qui est carrelé?

Tiled est un éditeur de carte de carreaux à usage général. Il fonctionne comme un outil gratuit permettant de créer facilement des mises en page de cartes. Il est suffisamment polyvalent pour permettre de spécifier des éléments plus abstraits tels que les zones de collision, les positions d'apparition de l'ennemi ou les positions de mise sous tension. Il enregistre toutes ces données dans un format pratique et standardisé. tmx format.


Comment fonctionne le carrelage?

A la base, le processus de conception consistant à utiliser Tiled pour créer des cartes fonctionne comme suit:

  1. Choisissez votre taille de carte et la taille de la tuile de base.
  2. Ajouter des tilesets à partir d'une image.
  3. Placez les tilesets sur la carte.
  4. Ajoutez des objets supplémentaires pour représenter quelque chose d'abstrait.
  5. Enregistrer la carte en tant que tmx fichier.
  6. Importer le tmx limez et interprétez-le pour votre jeu.

Pourquoi devrais-je utiliser carrelé?

Avec un système normalisé et un puissant outil flexible déjà en place, vous pouvez vous concentrer sur des choses plus importantes dans votre jeu. Avec Tiled, vous pourrez prendre quelques sets de tuiles, créer votre niveau et être sur votre chemin..

Même si vous ne voulez pas que votre jeu ait des cartes basées sur des tuiles, Tiled reste un excellent choix en tant qu'éditeur de niveau. Avec mosaïque, vous pouvez spécifier la taille de chaque mosaïque dans votre image. vous pouvez créer votre carte sans une taille stricte sur les images. Ensuite, vous pouvez utiliser Tiled pour toutes les entités invisibles telles que les zones de collision ou les apparitions d'objets dans votre carte..

Une fois que vous êtes capable d'interpréter le tmx les données à votre jeu, les outils en mosaïque devient une illustration rapide pour cartographier le pipeline. La création de cartes dans Tiled étant très simple et ne nécessitant aucune expérience en programmation, même les non-développeurs peuvent l'utiliser..

Une autre raison d'utiliser Tiled est que toutes les informations de mise en page de la carte sont stockées dans le dossier. tmx fichier. C’est puissant car il vous permet d’envoyer le message tmx fichier à un joueur, et ils auraient instantanément la mise en page sans avoir à retélécharger le client (en supposant que le tmx la carte utilise des textures déjà sur l'ordinateur du joueur).


Créer votre première carte

Sur la prochaine partie du didacticiel, où nous utiliserons le jeu de mosaïques susmentionné, afin de créer une carte.

Installer

Après avoir lancé Tiled, allez à Fichier> Nouveau… pour commencer à créer une nouvelle carte. Un nouveau menu apparaîtra où vous avez quelques options:

Orientation: Nous avons un choix entre isométrique et orthogonal. Pour cet article, sélectionnez Orthogonal.

Taille de la carte: Sélectionnez 20 pour la largeur et la hauteur car nous n’aurons pas besoin d’une grande carte pour cet exemple. Cela peut être redimensionné plus tard.

Taille de la tuile: Pour le didacticiel, définissez la largeur et la hauteur sur 32 px. Carreau taille ne peux pas être changé une fois que vous l'avez sélectionné. Vous devrez commencer une nouvelle carte à partir de zéro si vous voulez une nouvelle taille de tuile

Maintenant que nous avons configuré les dimensions de la carte, nous souhaitons créer un ensemble de mosaïques pour le sol. Sélectionnez Carte> Nouveau pavé…

Image: Sélectionner grass-tiles-2-small.png à partir des images de tileset inclus. le prénom champ sera automatiquement défini sur le nom du fichier, mais n'hésitez pas à le modifier à votre guise.

Carrelage: Encore une fois, définissez la largeur et la hauteur sur 32px.

Tiled devrait ressembler à ceci:

Ajout du terrain

Comme vous pouvez le voir en bas à droite de l'image dans le Tuiles Voir, j'ai quatre carreaux sélectionnés. Vous pouvez sélectionner une ou plusieurs tuiles simplement en cliquant et en faisant glisser Tuiles la fenêtre. Lorsque vous cliquez sur la grande zone grise, ces carreaux sont estampés sur la coordonnée (la coordonnée étant indiquée en bas à gauche de la zone grise). Gardez un œil sur cela, car vous ne pourrez pas marquer en dehors des coordonnées de la carte - 20 dans ce cas (comme spécifié dans nos paramètres de carte) - ou sur des coordonnées négatives..

Vous remarquerez peut-être que vous pouvez faire glisser le tampon sur la carte pour un placement rapide des tuiles; Toutefois, cela peut être problématique si vous avez sélectionné plusieurs tuiles pour votre jeu de tuiles, car elles ne feront que remplacer les tuiles précédentes. Une bonne solution est une sélection aléatoire parmi les tuiles que vous avez sélectionnées. Vous pouvez l'activer en cliquant sur l'icône de dés en haut de la fenêtre. Avec cette option activée, Tiled sélectionnera de manière aléatoire la tuile parmi celles que vous avez sélectionnées et la placera au fur et à mesure que vous faites glisser.

Assurez-vous de sauvegarder souvent!

Il existe également un outil de remplissage et un outil de gomme que vous trouverez utiles! Vous pouvez également faire pivoter et inverser la mosaïque sélectionnée avec les touches Z et X.

Après avoir joué un peu avec cela, vous pouvez vous attendre à quelque chose comme ça:

Ajout d'un objet au premier plan

Maintenant, notre petite carte a l'air un peu dépouillée, ajoutons donc un arbre à la scène. Aller à Carte> Nouveau carrelage… et cette fois sélectionnez le fichier tree2-final.png. Encore une fois, utilisez une largeur et une hauteur de 32 px.

Ensuite, nous souhaitons créer une nouvelle couche de tuiles qui ira sur la couche d'herbe. Sélectionner Calque> Ajouter un calque.

On devrait avoir Couche de tuiles 2 maintenant répertorié dans le Couches menu. Ce n'est pas un très joli nom, alors renommons-le Premier plan, et renommer Couche de tuiles 1 à Contexte.

Avant d’ajouter l’arbre entier, il suffit de sélectionner la base de l’arbre et d’ajouter l’arbre où vous le souhaitez, comme indiqué dans l’image ci-dessous..

Cela peut sembler un peu étrange mais supportez-moi ici. Lorsque nous avons cette carte dans notre jeu, nous voudrions que notre personnage apparaisse derrière l'arbre lorsqu'il passera devant nous; nous devrons donc donner aux feuilles des arbres une propriété de dire à votre jeu de la rendre au dessus du personnage. Vous avez peut-être remarqué que cela ne correspond pas parfaitement à la taille des carreaux, mais il peut être modifié en modifiant la taille de l'image ou la taille des carreaux..

Dans ce cas, créons un nouveau calque et nommez-le. Haut, dire à notre jeu de l'afficher au-dessus du personnage.

Maintenant avec le Haut couche sélectionnée, sélectionnez le reste de l’arborescence (tout sauf le tronc) et placez-le sur le tronc. Vous pouvez sélectionner des zones plus complexes du jeu de tuiles en maintenant la touche Ctrl enfoncée..

Il y a différentes façons de dire au jeu que nous voulons rendre des éléments superposés, tels que l'ajout d'une propriété à un calque ou à une mosaïque spécifique. Je préfère utiliser un calque pour tout ce qui sera rendu au-dessus du personnage, car cela permet de tout organiser.

Carrelé Sans Tuiles

Comme je l'ai mentionné, vous pouvez utiliser Tiled sans que cela soit "tiled". Voici un exemple rapide.

Ajouter un nouveau jeu de dalles avec Carte> Nouveau carrelage… et sélectionnez à nouveau l’arbre, mais cette fois, réglez la largeur et la hauteur de la mosaïque sur 256px. Essentiellement, vous créez un ensemble de mosaïques à partir de la taille exacte de l'image, ce qui en fait une grande mosaïque. Cela crée beaucoup plus d'espace libre pour le placement, car vous pouvez créer votre carte entière avec n'importe quel éditeur d'image sans vous limiter à la taille des mosaïques, puis l'importer à l'aide de cette méthode. De là, vous pouvez ajouter des objets qui permettent tout.

Spécifier les collisions

Maintenant, si nous voulions préciser les collisions, nous pouvons le faire de plusieurs manières. Je vais utiliser un calque d'objet, car ils peuvent être utilisés pour à peu près n'importe quoi, ce sera donc une bonne introduction.

Sélectionner Calque> Ajouter un calque d'objet. Avec le calque d'objet sélectionné, sélectionnez "Insérer un objet" en haut du menu. Maintenant, vous pouvez cliquer et faire glisser une boîte autour du tronc de l’arbre pour définir la boîte de collision..

C'est tout! Caressez-vous au dos alors que vous venez de terminer la carte initiale.


Conclusion

Merci d'avoir lu cet article. J'espère que vous avez trouvé une introduction utile à Tiled. Ensuite, découvrez comment interpréter le format TMX et insérer cette carte dans votre moteur de jeu..