Suite 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