Tiled Map Editor : Différence entre versions

De Movilab.org
(Nouvelle carte)
m
 
(6 révisions intermédiaires par un autre utilisateur non affichées)
Ligne 22 : Ligne 22 :
 
*Appuyez sur les touches CTRL + N
 
*Appuyez sur les touches CTRL + N
  
<figure-inline class="mw-default-size">[./Fichier:TME-NouvelleCarte.png [[Fichier:TME-NouvelleCarte.png|link=|456x456px]]]</figure-inline>
+
[[Fichier:TME-NouvelleCarte.png]]
  
 
'''Paramètres à régler''' :
 
'''Paramètres à régler''' :
Ligne 39 : Ligne 39 :
 
4 : vous pouvez charger un tileset à l'aide du bouton juste au dessus du 4 ou en faisant un glisser-déposer dans la zone 2
 
4 : vous pouvez charger un tileset à l'aide du bouton juste au dessus du 4 ou en faisant un glisser-déposer dans la zone 2
  
<figure-inline>[./Fichier:TME-NouvelleCarte2.png <figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span>[[Fichier:TME-NouvelleCarte2.png|link=|800x800px]]</span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline>]</figure-inline>
+
[[Fichier:TME-NouvelleCarte2.png]]
  
 
==Tilesets==
 
==Tilesets==
Ligne 50 : Ligne 50 :
 
Maintenant, vous allez les '''charger''' dans Tiled Map Editor :
 
Maintenant, vous allez les '''charger''' dans Tiled Map Editor :
 
*Cliquez en bas à gauche, sur le petit icône blanc avec une étoile jaune
 
*Cliquez en bas à gauche, sur le petit icône blanc avec une étoile jaune
<figure-inline>[./Fichier:Tilesets1.PNG <figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span>[[Fichier:Tilesets1.PNG|link=|1273x1273px]]</span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline>]</figure-inline>
+
 
 +
[[Fichier:Tilesets1.PNG]]
  
 
*Vérifiez les paramètres des tuiles
 
*Vérifiez les paramètres des tuiles
<figure-inline>[./Fichier:Tilesets2.PNG <figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span>[[Fichier:Tilesets2.PNG|link=|395x395px]]</span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline>]</figure-inline>
+
[[Fichier:Tilesets2.PNG]]
  
<figure-inline>[./Fichier:Capture_tiled_1.png <figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span>[[Fichier:Capture tiled 1.png|link=|314x314px]]</span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline>]</figure-inline>
+
[[Fichier:Capture_tiled_1.png]]
  
 
Une fois que vous aurez trouvez votre image vous devez aller à droite de l'écran la ou il y a le calque. Un moment il y aura marque " CALQUE 1" vous devrez faire un double clic gauche sur le " CALQUE 1" et taper le mot " FOND"
 
Une fois que vous aurez trouvez votre image vous devez aller à droite de l'écran la ou il y a le calque. Un moment il y aura marque " CALQUE 1" vous devrez faire un double clic gauche sur le " CALQUE 1" et taper le mot " FOND"
  
<figure-inline>[./Fichier:Capture_tiled_2.png <figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span>[[Fichier:Capture tiled 2.png|link=|323x323px]]</span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline>]</figure-inline>
+
[[Fichier:Capture_tiled_2.png]]
 +
 
 +
'''1ER CHOIX  DE FOND'''
  
 
Une fois que vous aurez sélectionnez votre fond et qu'il est bien mis vous devez aller ensuite à droite de l'écran et vous sélectionnez un nouveau calque. Quand vous sélectionnerez le nouveau calque vous faites double clic pour renommer le calque en " PLATEFORME" et ce calque va vous permettre de ne pas effacer votre fond.
 
Une fois que vous aurez sélectionnez votre fond et qu'il est bien mis vous devez aller ensuite à droite de l'écran et vous sélectionnez un nouveau calque. Quand vous sélectionnerez le nouveau calque vous faites double clic pour renommer le calque en " PLATEFORME" et ce calque va vous permettre de ne pas effacer votre fond.
  
[[Fichier:Capture fond.png|thumbnail]]
+
[[Fichier:Capture fond.png]]
  
 
Vous sélectionnez une tuile pour le fond de votre map (carte)
 
Vous sélectionnez une tuile pour le fond de votre map (carte)
  
<figure-inline class="mw-default-size">[./Fichier:Capture_peinture.png <figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span>[[Fichier:Capture peinture.png|link=|35x35px]]</span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline>]</figure-inline>
+
[[Fichier:Capture_peinture.png]]
 +
 
 +
[[Fichier:Capture map tiled.png]]
  
 
Pour remplir votre fond en un seul coup vous devez cliquez sur la case peinture qui est dans la barre d'outil en haut de votre écran et vous faites un clic sur la carte pour que les soient rempli et à la fin votre carte est totalement rempli.
 
Pour remplir votre fond en un seul coup vous devez cliquez sur la case peinture qui est dans la barre d'outil en haut de votre écran et vous faites un clic sur la carte pour que les soient rempli et à la fin votre carte est totalement rempli.
  
<figure-inline class="mw-default-size">[./Fichier:Capture_tilrd.png <figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span><figure-inline><span>[[Fichier:Capture tilrd.png|link=|44x44px]]</span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline></span></figure-inline>]</figure-inline>
+
[[Fichier:Capture_tilrd.png]]
  
 
Ensuite vous devez sélectionnez plateforme, puis vous sélectionnez votre carré et vous l'ajouter sur votre carte que vous êtes entrain de crée   
 
Ensuite vous devez sélectionnez plateforme, puis vous sélectionnez votre carré et vous l'ajouter sur votre carte que vous êtes entrain de crée   
Ligne 77 : Ligne 82 :
 
Une fois que votre terrain est crée c'est a vous de crée votre propre environnement,décors,etc... Imaginer votre map (carte) de rêve.     
 
Une fois que votre terrain est crée c'est a vous de crée votre propre environnement,décors,etc... Imaginer votre map (carte) de rêve.     
  
[[./Fichier:Capture_map.png]]
+
'''2EME CHOIX DE FOND'''
 +
 
 +
Maintenant pour ajouter une finition a votre carte (map) on va rajouter un fond pour que ça soit colorer.     
 +
[[Fichier:Capture tiled 3.png|thumbnail]]   
 +
 
 +
Première étape: cliquer sur le calque         
 +
 
 +
Deuxième étape: Cliquer sur le "calque d'image"
 +
 
 +
[[Fichier:Capture 4.png]]
 +
 
 +
[[Fichier:Capture 5 tiled.png]]
 +
 
 +
Troisième étape: Cliquer sur image qui est situer a droite de votre écran et cliquer sur les 3 petits points                   
 +
 
 +
Quatrième étape: vous sélectionnez votre image de fond la ou vous l'avez enregistrez     
 +
 
 +
(l'image dois être égale ou plus grande que la zone de grille).                   
 +
 
 +
[[Fichier:Capture grille avec img background.png]]
 +
 
 +
Cinquième étape: FIN                   
  
 
=Tutoriels vidéos=
 
=Tutoriels vidéos=

Version actuelle datée du 17 juillet 2019 à 12:35

Tiled Map Editor est un éditeur de carte pour jeu vidéo. La création d'une carte (ou map) se fait exactement comme pour la construction d'un toit : tuile après tuile.

Ce logiciel est gratuit et libre. Vous pouvez choisir de faire un donc pour soutenir les développeurs du jeu, mais ce n'est pas obligatoire.

Pourquoi choisir Tiled Map Editor ?

Facile d'utilisation et de prise en main, il permet de faire à peu près n'importe quel type de map en 2 dimensions :

  • Orthogonale, pour les maps vues du dessus,
  • Isométrique, pour donner l'illusion de la 3D, comme pour le jeu Zelda ou plus récemment Clash of Clans,
  • Hexagonale, est assez similaire à isométrique mais avec des tuiles à base hexagonale.

Le format TMX de sortie du logiciel est lisible par la grande majorité des éditeurs de jeux vidéos, dont Stencyl.

Tutoriel texte

Pour créer une map, vous allez utiliser un ensemble de tuiles appelé tileset. C'est un ensemble de tuiles de motifs différents, que vous allez assembler.

Pour commencer, vous allez utiliser des tilesets déjà constitués, et vous pourrez créer les vôtres plus tard.

Nouvelle carte

Une fois le logiciel ouvert, vous allez créer une nouvelle carte. Trois solutions :

  • Fichier > Nouveau > Nouvelle carte
  • Appuyer sur le bouton Nouveau > Nouvelle carte
  • Appuyez sur les touches CTRL + N

TME-NouvelleCarte.png

Paramètres à régler :

  • Taille de la carte, en hauteur et largeur. C'est le nombre de tuiles qui composeront votre map.
  • taille des éléments, en pixels. Il faut que les pixels correspondent à ceux du jeu de tuiles que vous téléchargez.


Voici ensuite l'interface principale

1 : fenêtre principale, où vous créez votre map. Et nous retrouvons bien nos petite tuiles de 16px par 16px.

2 : le tileset que vous utilisez

3 : les claques, c'est-à-dire les différentes couches sur lesquelles vous allez travailler

4 : vous pouvez charger un tileset à l'aide du bouton juste au dessus du 4 ou en faisant un glisser-déposer dans la zone 2

TME-NouvelleCarte2.png

Tilesets

Vous allez récupérer les tilesets suivants :

  • Rendez-vous sur Open Game Art
  • Cherchez le fichier nommé "Tiled Terrains" ou "[LPC] Terrain Repack", fabriqués par http://poufpoufproduction.fr en licence CC-BY-SA 3.0
  • Téléchargez-les sur votre ordinateur, et choisissez l'endroit où vous les mettez pour pouvoir les retrouver


Maintenant, vous allez les charger dans Tiled Map Editor :

  • Cliquez en bas à gauche, sur le petit icône blanc avec une étoile jaune

Tilesets1.PNG

  • Vérifiez les paramètres des tuiles

Tilesets2.PNG

Capture tiled 1.png

Une fois que vous aurez trouvez votre image vous devez aller à droite de l'écran la ou il y a le calque. Un moment il y aura marque " CALQUE 1" vous devrez faire un double clic gauche sur le " CALQUE 1" et taper le mot " FOND"

Capture tiled 2.png

1ER CHOIX DE FOND

Une fois que vous aurez sélectionnez votre fond et qu'il est bien mis vous devez aller ensuite à droite de l'écran et vous sélectionnez un nouveau calque. Quand vous sélectionnerez le nouveau calque vous faites double clic pour renommer le calque en " PLATEFORME" et ce calque va vous permettre de ne pas effacer votre fond.

Capture fond.png

Vous sélectionnez une tuile pour le fond de votre map (carte)

Capture peinture.png

Capture map tiled.png

Pour remplir votre fond en un seul coup vous devez cliquez sur la case peinture qui est dans la barre d'outil en haut de votre écran et vous faites un clic sur la carte pour que les soient rempli et à la fin votre carte est totalement rempli.

Capture tilrd.png

Ensuite vous devez sélectionnez plateforme, puis vous sélectionnez votre carré et vous l'ajouter sur votre carte que vous êtes entrain de crée

Une fois que votre terrain est crée c'est a vous de crée votre propre environnement,décors,etc... Imaginer votre map (carte) de rêve.

2EME CHOIX DE FOND

Maintenant pour ajouter une finition a votre carte (map) on va rajouter un fond pour que ça soit colorer.

Capture tiled 3.png

Première étape: cliquer sur le calque

Deuxième étape: Cliquer sur le "calque d'image"

Capture 4.png

Capture 5 tiled.png

Troisième étape: Cliquer sur image qui est situer a droite de votre écran et cliquer sur les 3 petits points

Quatrième étape: vous sélectionnez votre image de fond la ou vous l'avez enregistrez

(l'image dois être égale ou plus grande que la zone de grille).

Capture grille avec img background.png

Cinquième étape: FIN

Tutoriels vidéos

  • Tutoriel en français

0:40 => comment télécharger le logiciel 1:20 => début de l'utilisation du logiciel

  • Comment faire des terrains aléatoires en choisissant la répartition des différentes tuiles sur votre terrain. Vidéo en anglais.
  • Six tutoriels en anglais. Avec ces tutoriels, vous savez tout faire :
    • The Basics
    • Terrain
    • AutoMap
    • Objects layers and coding
    • Creating non-tiled map
    • et enfin, Isometric maps

Ensembles de tuiles à télécharger

Sources