
Slick2d, leçon 2 :: Affichage d'une carte
21 December 2013 11:38 Slick2d - Leçons 0-9Suite de ma série d'article sur Slick2D. Aujourd'hui on va afficher une carte.
Théorie
Vous l'avez certainement déjà remarqué, mais dans les jeux vidéo une carte est composé de petites images misent bout à bout. Si vous ne voyez pas ce que je veux dire, vous devriez mieux comprendre avec cet exemple tiré d'un jeu peu connu.
Chaque petit carré qui forme la carte est ce qu'on appel une tuile. Une carte est donc simplement un tableau de tuile juxtaposé. Mais les technique évoluant dans le temps on à souhaité afficher plusieurs couche de tuile qu'on appel des layers ceci affin de gérer des avants plan, des arrières plan ou encore de la transparence sur certaine tuiles.
On pourrai bien évidement s'amuser à tous coder nous même, créer un format de fichier et traiter l'affichage à la main. Mais heureusement Slick2D gère nativement les cartes faites sous Tiled
Création d'une carte avec Tiled
Tiled Map Editor est un outil open source permettant l'édition de carte 2D. Il gère les tuiles, les couches et même des objets vectoriels. Il peu également s'abstraire des contraintes de tuile pour afficher des éléments graphique. Voici quelque exemple de réalisation qu'on peu trouver sur le site officiel de Tiled.
Après avoir installé Tiled, il faut trouver les tuiles qu'on va utiliser. Pour la réalisation d'une démo ou d'une beta il n'est pas nécessaire d'utiliser ces propres ressource graphique. On en trouve beaucoup sur internet. On peu par exemple utilisé des rips de jeux vidéo mais je trouve préférable d'utiliser des ressources libre comme celle qu'on peu trouver sur Open Game Art. Pour cet exemple, je vais prendre des tuiles qui ont été faites pour le projet LPC (Liberated Pixel Cup) du site que je viens de citer. Vous pourrez trouvez ces tuiles dans cette archive ou dans les sources git que je fournis à la fin du tutoriel. Voici quelques une des tuiles que je compte utiliser pour ce tutoriel.
Commencer par mettre les images dans le dossier src/main/resources/map/tuiles du projet. Lancer Tiled et créer une nouvelle carte (Fichier > Nouveau). Il est important de sélectionner la compression en gzip pour que Slick2D puisse l'ouvrir. Pour l'exemple les tuiles font 32x32 pixels je garde une carte de 100x100 tuiles. Puis il faut ajouter les jeux de tuile (Cartes > Nouveau Tileset), puis enregistrer la carte dans le dossier src/main/resources/map.
Ensuite ben on laisse faire notre imagination. Après quelques heures de boulot on arrive à obtenir quelque chose. Je ne suis pas très doué mais voici le résultat.
Coding
Avec certaine version de Tiled, il est parfois nécessaire d'éditer le fichier TMX pour modifier les chemins d’accès au fichier contenant les tuiles avec des liens relatif comme suit :
<tileset firstgid="1" name="grass" tilewidth="32" tileheight="32">
<image source="tuiles/grass.png" width="96" height="192"/>
</tileset>
Et maintenant place au Java. La c'est si simplisme que cela se passe presque de commentaire. Dans la méthode init(), on charge la carte, il suffit de l’instancier en donnant en paramètre le nom du fichier. Pour l'affichage il suffit d'appeler la méthode render(x,y) sur l'objet carte précédemment chargé en donnant les coordonnées d'affichage.
@Override
public void init(GameContainer container) throws SlickException {
this.container = container;
this.map = new TiledMap("map/exemple.map");
}
@Override
public void render(GameContainer container, Graphics g) throws SlickException {
this.map.render(0, 0);
}
Et voici le résultat :
Dans le prochain article. Animation et déplacement.
Code source et ressources :
- Code source : Repo GitHub
- Tiled : Tiled Map Editor
- Ressources : Open Game Art
- Ressources LPC : Liberated Pixel Cup LPC Base Assets sprites & map tiles
bonjour,
est-il possible de rajouter de la place sur la map? j'aurais besoin de rajouter trois colonnes en plein milieu.
Bonjour.
Je ne comprend pas ta question. Pour éditer la carte tu peu utiliser tiledmapeditor comme je l'explique dans le tutorial sur l'affichage d'une carte. Je pense qu'il doit être possible de l'agrandir ;)
Bonjour,
tout d'abord j'adore tes tutos ils sont très bien fais !
Je rencontre cependant un petit problème au chargement de la map. Quand je fais ma carte sur Tiled avec 3 couches de Tiles tout va bien mais quand j'ajoute un calque objet pour gérer les collisions netBeans ne veux plus charger la map en m'affichant ce message d'erreur :
Merci d'avance !
Je n'avais pas vu la leçon 5 désolé, problème réglé !
Pas de soucis ^^, c'est à cela que servent les commentaires :]
Salut. Tout d'abord merci beaucoup pour ta série de tutos qui m'aide beaucoup. Je suis actuellement en train de créer un RPG et je me demandai si tu pouvais ajouter dans tes tutos une section sur les "magasins" ça m'aiderai beaucoup.
Oh! j'ai une autre question, peux-tu me dire la robustesse de slick2D concernant les jeux en réseau? et t'y colleras-tu dans tes tutos à venir? Car une fois mon jeu assez stable, je compte implanter un mode multijoueur. Merci d'avance
Salut
Merci pour ton retour.
Il y aura une section sur les magasin, après l'implémentation du sac et tous, du loot d'objet, de l'utilisation, et de l'argent.
Slick ne traite pas l'aspect réseau, de fait la robustesse viendra de lib que tu choisira pour faire du réseau. Je m'y collerai peut-être un jour, avec le projet Reddwarf (qui n'existe plus).
Cependant transformer un jeux solo en un jeux multi est un chemin de croix, ce n'est clairement pas une bonne idée. Le contraire est en revanche simpliste. Et pour l'avoir fait j'en sais quelque chose.
Merci pour ta réponse et j'ai hâte de voir ça! J'ai oublié de te demander si tu fera aussi une partie concernant la gestion des sauvegardes de jeu. Bonne continuation !
Bonjour,
J'ai un problème pour afficher la map. J'ai créé une map avec Tiled, et j'obtiens le code erreur suivant :
Quelqu'un pour m'aider ?
@ninokiri, je n'avais, pas prévu, mais du coup je vais y pensé
@Minolt, Oui je peu essayer, envoi moi ta carte par email. A mon avis cela viens de ta carte.
Salut! Je pense que je vais poser une question un peu bête , mais je me lance quand même : Comment faire apparaitre progressivement lettre par lettre les textes de dialogue dans dans un jeu avec slic2D ? En soit c'est pas vital mais ça fait plus soigne. Je te remercie d'avance pour ta réponse et surtout continue comme ça car je trouve ce que tu fais très bien et utile surtout.
Je ne connais pas de solution toute prête, il faut donc le faire soit même :]
Salut! Tout d'abord merci pour tes tutos! J'ai un petit problème lors du chargement de ma map, la fênetre s'affiche mais aucune carte n'apparaît. Aurais-tu une solution à ce problème?
Merci d'avance :-)!
Ben, sans indice non, peu tu m'envoyer ton code par mail ?
Je t'ai envoyé ça ;)
Salut ! J'ai un petit souci avec les ressources...
Je pense que cela vient simplement du fait que ma ressource n'est pas trouvée. Mais quand j'essaye de l'ajouter dans build path j'ai une erreur "nest". Je ne sais plus quoi faire :/. Please Help !!
C'est bon problème résolut ! mon erreur était là :
Bonjour
Merci pour le tuto
J'ai essayé de mofifier une map avec la version 0.14.2 de Tiled et elle ne veux plus se charger. J 'ai regardé le xml il est completement different de celui des cartes fournies avec le tuto.
voici les erreurs Java Quelqu'un a une idée?
Salut bob, dis et redis, les cartes généré par les version trop récente de Tiled ne marche pas avec Slick2D il faut lui ajouter des attribut à la main.
Salut,
Quand pourras-tu reprendre le post des tutos ?
J'ai essayé plusieurs versions de Tiled y compris des anciennes et aucune ne fonctionnait. Est ce que quelqu'un a un lien pour une vielle version qui fonctionne?
@ninokiri, c'est une bonne question
@Bob, ici tu trouvera une solution pour éditer à la main les cartes et résoudre le problème : http://www.shionn.org/tutoriels-slick-2d
Bonjour,
est-il possible que Slick ne permet que l'usage de tilesets basés sur une image, et non sur une collection d'image? dans le cadre de mon projet, j'aimerai utilisé mes propres tilesets générés par Tiled comme ceci:
or à partir du moment où la balise tile apparaît, Java me retourne une exception du type "Failed to parse tilemap". Suis-je donc obligé de créer mes tilesets à l'avance via un éditeur d'image, ou y-a-t-il moyen d'utiliser les tilesets comme ci-dessus dans Slick?
Salut warren, désoler en effet, il n'est pas simple de mettre de l'xml dans les commentaire de wordpress ! envoie moi ton bout de code par mail et je me charge de l'ajouter à ton propre commentaire et de répondre à ta question. (je te pris de m'escuser, j'ai effacé ton second commentaire)
Bonjour Warren, j'ai mis à jour ton commentaire avec ton xml. Donc oui en effet je ne crois pas que slick supporte les calques d'image. Cependant si dans ton cas toutes les images font 32x32, ou un multiple je t'invite à les regrouper dans un tileset :]
Parfait, je fais mes tilesets à l'avance moi même donc, et je créé un tileset basé sur une seule image. Merci pour ta réponse!
Bonjour, j'ai un problème ac tiled, je ne sais pas si c'est un problème de version mais je ne peux pas comprésser en gzip ( seulement en zlib ) ce qui me fait des erreurs ensuite lorsque je lance l'appli
c'est bon en fait ^^
Alors question peut-être très bête :
Je n'arrive pas à l'étape Puis il faut ajouter les jeux de tuile (Cartes > Nouveau Tileset), puis enregistrer la carte dans le dossier src/main/resources/map.
Après avoir créé la map sur Tiled je suis allé dans les fichiers
Utilisateurs/Moi/workspace/Entrainement_Slick/src
Puis j'ai créé un dossier map dans lequel j'ai enregistré la map créée sous Tiled au format .tmx
Cependant, rien n'y fait et j'obtient l'erreur suivante :
Je ne comprend pas trop ce qu'il faut faire, j'ai essayé plusieurs bidouilles mais rien ne marche.
Sinon super tuto !
Merci !
Salut,
Dans la leçon 1 as-tu pris la méthode "maven" ou la méthode "manuel" ?
Dans le cas de la version manuel il existe trop de cas dans la gestion du projet pour que je puisse t'aider facilement. Je te conseillerai de vérifier point par point l'article. Un conseille cependant, "map/Essai1.tmx" est relatif au dossier d'éxécution de ton projet et n'est pas relatif au dossier de tes sources.
bonjour, je me heurte à un problème. Je m'explique quand je veux créer une map avec tiled il me propose trois choix concernant le format de calque de Tile (CSV, base 64 non compressé et base 64 compressé par zlib),or dans aucun de ces formats je vois apparaîtreun format compressé par zgip. Le format zlib n'étant pas compatible avec slick2d netbeans m'affiche une erreur longue comprenant : ERROR:Unsupport tiled map type: base64,zlib (only gzip base64 supported). Je voudrais savori si cela est du à ma version du logiciel tiled ou si je dois ajouter un pluging affin de pouvoir compressé en gzip. Je précise que je ne connais absolument pas le format gzip donc la solution est peut être très simple mais je ne trouve pas de documentation claire sur le sujet.
Bonjour Martin,
Je ne connais pas les version récente de Tiled, il n'est pas nécessaire d’ajouter un plugin normalement, je t'invite à utiliser une version plus ancienne. Tu ne perdra pas en fonctionnalités car toutes les potentielles nouvelles fonctionnalités ne seront pas gérés par Slick.
je te remercie pour ta réponse rapide, j'ai télécharger une version antérieur et en effet cela fonctionne.
Bonjour et merci pour ces superbes tutos. J'ai un petit soucis par rapport au chemin d'accès, j'ai la même erreur que VicoCommeLaChips :
Où dois-je mettre mon fichier "exemple.tmx" ? Dois-je mettre "map/exemple.tmx" à côté du dossier "main" ? car quand je le met dedans (ou même dans "main/ressources") cela ne marche toujours pas...
Re, j'ai fini par trouver, pour ceux qui sont intéressé, il faut mettre "ressources" à coté de "src" puis retourner sur eclipse et rafraîchir le projet et enfin clique droit sur "ressources" (dans eclipse) >build path > use as Source Folder, et c'est bon
Bon tu as trouver, mais je vais quand même enrichir ta réponse car en fait la solution n'est pas si évidente à comprendre. C'est aussi pour cela que je n'ai pas répondu de suite pour te laisser chercher un peu.
Tiled charge la carte en passant pas le ClassPath. c'est à dire que le chemin donnée "map/exemple.tmx" est relatif au classpath, et donc doit être dans un des dossier lister dans le classpath.
Le classpath ca ressemble un peu à un variable d'environnement, il contient toutes les lib utilisé par le projet, les classes compilées mais également les ressources ajoutées à ce classe path.
C'est pour cela que je conseil vivement d'utilisé maven car cela uniformise cette gestion de classpath dans un environnement de dev. C'est à dire que le dossier "src/main/resources" est ajouté au classpath.
bonjour est-il possible de modifier la map par le code ? si oui comment svp?
Il n'est pas possible de modifier les cartes de Tiled à la volé.
Après tous dépends ce que tu entend par "modification". Si ce tu veux "ouvrir un coffre" ou "ramasser une pomme", on parle de sprite.
Si tu veux faire de la "modification de monde" comme minecraft. La ce n'est pas pas possible avec les carte de tiled, enfin si mais c'est chaud et c'est loin d'être évident. Tu dois refaire ton propre système de carte.
ok
sa me fait ca quand jessaie de chaeger la carte
Bonjour raymond,
Je me suis permis d'éditer tes deux commentaires en un seul pour le rendre plus lisible. Ici je pense que ton problème viens de l'endroit ou tu as mis tes images et ta carte. Je t'invite à relire le tuto du début et a bien suivre les étapes sur l'endroit ou mettre chaque fichier.
Bonjour,
Déjà ce tutoriel me semble très bien fait, bravo et merci à toi.
Je dis "me semble", car je dispose d'une des dernières versions de tiled, sous laquelle la compression en .gzip n'est pas possible. Je cherche une version antérieure pour disposer de ce format de compression, cependant je n'arrive pas à en trouver. Sur le site officiel, les liens de téléchargement renvoient toujours sur la dernière version. Quelqu'un saurait-il où je peux trouver une version de Tiled qui permette donc la compression en .gzip ?
Merci d'avance ! :)
Bonjour Axodo,
Je viens d'installer la version disponible dans mes dépots, c'est à dire la version 0.17. En effet la compression gzip n'est plus disponible. Je vais faire des recherches pour voir comment faire.
Edit 08/05/17 : Je n'ai pas trouvé de solution, aussi pour l'instant je te conseil de trouver une version plus ancienne de Tiled.
Bonjour, J'ai un petit problème sur l'affichage d'une map. J'ai fait un intérieur de maison avec donc pas mal de petits détails tel que des lampes sur une armoire, sauf que pour que tout soit bien propre j'ai du décaler certains calques (pour que la lampe soit bien au milieu de l'armoire par exemple). J'ai donc pas mal de calques qui ont un petit décalage horizontal et vertical mais cela ne ce voir pas sur Tiled car justement c'est fait expres pour que ce soit propre; mais par contre quand je lance la Tiledmap avec Eclipse, les calques se redécale et ils se remettent tous en position initial (0 décalage). L'affichage devient alors degeu (la lumière n'est plus au milieu de l'armoire mais a coté par exemple). As tu une idée de ce qu'il faut faire pour que les calques restent comme ils sont et qu'ils ne se redécalent pas ? Merci de ton retour
Salut,
Je ne savais pas qu'il était possible de décaler les calque dans tiled. En revanche je suis sur qu'une tel chose n'est pas supportée par Slick. Il te faut refaire le décalage à la mais quand tu affiche ce calque.
bonjour je rencontre le même problème @Minolt c'est à dire
je voulais savoir comment vous aviez régler le problème
Bonjour Merci pour ce tuto très utile et plutôt bien fait. J'ai trouvé une solution pour utiliser Tiled version récente et obtenir la carte désirée en "gzip". Il faut d'abord la créer en base64 non compressé. Ensuite dans les propriété de l'image dans tiled, il faut modifier "format de calque de tile" en choisissant dans le menu déroulant "base64 (compressé gzip)". on enregistre et hop ! Merci encore !
[erreur] j'ai ca comme erreur merci pour vos tutos!
@Hustler Il semble que ce soit votre chemin vers votre carte qui n'est pas bon-> "Resource not found: map/jeu.tsx"
Bonjour, généralement les erreurs lié au chargement de carte sont toujours un problème dans la version de Tiled, dans le format utilisé ou les chemin d’accès des fichier. En relisant le tuto, et les commentaire vous trouverez la solution.