Editeur de map

Bonsoir, je souhaite seulement une petite information . Je voudrais vous demandez s'il serait possible de me proposez un editeur de map efficace me permettant lors de la sauvegarde de recupérer un fichier texte avec un numéro pour chaque image pouvoir le recharger . J ai essayé d'en faire un il fonctionne mais j'en souhaite un plus efficace. (cela est pour un jeu rpg pour info)

Merci de votre coprehension et de votre aide.

Tu peux définir "éditeur de map" ?

Apparemment un editeur de niveau pour jeu 2D (rpg, plateforme, shooter, beat'em all, etc.). J'en connais aucun. Et dans éventualité ou j'en aurai besoin (ce qui n'est pas le cas), j'aurai tendance a essayer d'en programmer un moi-même (parce que c'est plus fun et que ca permet d'apprendre des choses).

J'en ai fais un , mais je vous explique:

La classe EditeurDeMapPanel me permet de créer mes maps et de les sauvegarder et les enregistrés dans un fichier texte . Seulement la toute les images sont de meme hauteur et largeur . Seulement imaginons que je prends une image 100 x 100 comment je peux faire pour que l'image soit décomposé sur plusieurs cases vu la taille de l'image. En fait je ne sais pas du tout comment sa marche si c'est cela

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279

public class EditeurDeMapPanel extends JPanel implements MouseListener, KeyListener, MouseMotionListener {     String ImageSelectionne[] = {"HERBE","CHEMIN","REGENERATION","ARENE","DRESSEUR"}; String Editeur[][]= new String[20][20];   // Px et Py sont les positions de l'image sur la map int Px; int Py; int indexIncremental = 0; Image Herbe; Image Chemin; Image Regeneration; Image Arene; Image Dresseur; FileWriter filew; String ImageCourante = "HERBE"; FileReader filer;   //On récupére le chemin d'accès de toute les images public EditeurDeMapPanel(){       ImageIcon herbe = new ImageIcon("images/herbe.jpg"); Herbe= herbe.getImage();   ImageIcon chemin = new ImageIcon("images/chemin.jpg"); Chemin= chemin.getImage();   ImageIcon regeneration = new ImageIcon("images/ipcentre.gif"); Regeneration = regeneration.getImage();   ImageIcon arene = new ImageIcon("images/arène.gif"); Arene = arene.getImage();   ImageIcon dresseur = new ImageIcon("images/water.png"); Dresseur= dresseur.getImage();   setFocusable(true); addMouseListener(this); addKeyListener(this); addMouseMotionListener(this);     }   //Methode qui va nous permettre de peindre les images public void paint(Graphics g){ super.paint(g); Graphics2D graphics2d = (Graphics2D) g;     for(int i=0;i<=19;i++){ for(int j=0;j<=19;j++){ if(Editeur[i][j] == "HERBE"){ graphics2d.drawImage(Herbe, i*25,j*25, null);   } if(Editeur[i][j] == "CHEMIN"){ graphics2d.drawImage(Chemin, i*25,j*25, null);   } if(Editeur[i][j] == "REGENERATION"){ graphics2d.drawImage(Regeneration, i*25,j*25, null); } if(Editeur[i][j] == "ARENE"){ graphics2d.drawImage(Arene, i*25,j*25, null);   } if(Editeur[i][j] == "DRESSEUR"){ graphics2d.drawImage(Dresseur, i*25,j*25, null); } } } if(ImageCourante == "HERBE"){ graphics2d.drawImage(Herbe, Px, Py, null); } else if(ImageCourante == "CHEMIN"){ graphics2d.drawImage(Chemin, Px, Py, null); } else if(ImageCourante == "REGENERATION"){ graphics2d.drawImage(Regeneration, Px, Py, null); } else if(ImageCourante == "ARENE"){ graphics2d.drawImage(Arene, Px, Py, null); } else if(ImageCourante == "DRESSEUR"){ graphics2d.drawImage(Dresseur, Px, Py, null); }   }     @Override public void mouseDragged(MouseEvent arg0) { // TODO Auto-generated method stub   }   //Methode pour centrer le curseur sur l'image public void mouseMoved(MouseEvent arg0) { Px= arg0.getX()- 13; Py=arg0.getY()- 13;   repaint(); }       @Override public void keyPressed(KeyEvent arg0) { char key = arg0.getKeyChar();     System.out.println(key); }         @Override public void keyReleased(KeyEvent arg0) { char key = arg0.getKeyChar(); int key1 = arg0.getKeyCode();   if(key1 == KeyEvent.VK_DOWN){ if(indexIncremental>0){ indexIncremental--; } if(indexIncremental == 0){ indexIncremental = 4; } } else if(key1 == KeyEvent.VK_UP){ if(indexIncremental<5){ indexIncremental++;   } if(indexIncremental == 5){ indexIncremental = 0; } } ImageCourante = ImageSelectionne[indexIncremental];     if(key == 's'){ try{ filew= new FileWriter(JOptionPane.showInputDialog(null,"Entrer le chemin de sauvegarde:","Editeur de Map",JOptionPane.QUESTION_MESSAGE)); for (int i=0;i<20;i++){ for (int j=0;j<20;j++){   if(Editeur[j][i] == "HERBE"){ filew.write("0"); } else if(Editeur[j][i] == "CHEMIN"){ filew.write("1"); } else if(Editeur[j][i] == "REGENERATION"){ filew.write("2"); } else if(Editeur[j][i] == "ARENE"){ filew.write("3"); } else if(Editeur[j][i] == "DRESSEUR"){ filew.write("D"); } else if(Editeur[j][i] == null){ filew.write(" "); } } filew.write("\r\n"); }   filew.close(); }   catch(Exception h){ } } else if(key == 'd'){ try{ filer = new FileReader(JOptionPane.showInputDialog(null,"Entrer le chemin de lecture:","Editeur de Map",JOptionPane.QUESTION_MESSAGE)); int i=0; int x=0; int y=0;   while((i = filer.read()) != -1){ char strImg = (char) i;   if(strImg == '0'){ Editeur[x][y] = "HERBE"; } else if(strImg == '1'){ Editeur[x][y] = "CHEMIN"; } else if(strImg == '2'){ Editeur[x][y] = "REGENERATION"; } else if(strImg == '3'){ Editeur[x][y] = "ARENE"; } else if(strImg == 'D'){ Editeur[x][y] = "DRESSEUR"; } else if(strImg == ' '){ Editeur[x][y] = null; }   // Sinon on depasse le tableau, on passe à la ligne suivante else if(strImg == '\r' || strImg == '\n'){ x--; }   if(x == 19){ y++; x=0; } else{ x++; }   } } catch(Exception ex){} }   repaint(); }               @Override public void keyTyped(KeyEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mouseClicked(MouseEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mouseEntered(MouseEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mouseExited(MouseEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mousePressed(MouseEvent arg0) { // TODO Auto-generated method stub   }   //Methode pour poser l'image public void mouseReleased(MouseEvent arg0) { int x= arg0.getX()/25; int y = arg0.getY()/25;   if(arg0.getButton()==MouseEvent.BUTTON1){ Editeur[x][y]= ImageCourante; } else if(arg0.getButton()==MouseEvent.BUTTON3){ Editeur[x][y] = null; } }   }

---

Salut,

Tu veux dire que toutes tes tuiles pour constituer ta map sont dans une image unique ? Je dirais que le moyen le plus simple est d'utiliser la méthode drawImage(image, ...coordonnées de la partie à dessiner..., ...endroit où la dessiner... ). Tu n'as plus qu'a pouvoir associer à tes identifiants de tuile (ceux-là même qui sont dans ton fichier représentant la map) le rectangle correspondant à son image dans l'image globale.

De cette facon la?

Code:

---

1 2 3 4 5 6 7

public Rectangle getLimitesRectangle(){   Rectangle rectangle = new Rectangle(x,y,100,100);   return rectangle;   }

---

Voila maintenant ce que je veux faire:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297

import java.awt.Graphics; import java.awt.Graphics2D; import java.awt.Image; import java.awt.event.KeyEvent; import java.awt.event.KeyListener; import java.awt.event.MouseEvent; import java.awt.event.MouseListener; import java.awt.event.MouseMotionListener; import java.io.FileReader; import java.io.FileWriter;   import javax.swing.ImageIcon; import javax.swing.JOptionPane; import javax.swing.JPanel;       @SuppressWarnings("serial") public class EditeurDeMapPanel extends JPanel implements MouseListener, KeyListener, MouseMotionListener {     String ImageSelectionne[] = {"HERBE","CHEMIN","REGENERATION","ARENE","DRESSEUR"}; String Editeur[][]= new String[20][20];   // Px et Py sont les positions de l'image sur la map int Px; int Py; int indexIncremental = 0; Image Herbe; Image Chemin; Image Regeneration; Image Arene; Image Dresseur; FileWriter filew; String ImageCourante = "HERBE"; FileReader filer;   //On récupére le chemin d'accès de toute les images public EditeurDeMapPanel(){       ImageIcon herbe = new ImageIcon("images/herbe.jpg"); Herbe= herbe.getImage();   ImageIcon chemin = new ImageIcon("images/chemin.jpg"); Chemin= chemin.getImage();   ImageIcon regeneration = new ImageIcon("images/ipcentre.gif"); Regeneration = regeneration.getImage();   ImageIcon arene = new ImageIcon("images/arène.gif"); Arene = arene.getImage();   ImageIcon dresseur = new ImageIcon("images/water.png"); Dresseur= dresseur.getImage();   setFocusable(true); addMouseListener(this); addKeyListener(this); addMouseMotionListener(this);     }   //Methode qui va nous permettre de peindre les images public void paint(Graphics g){ super.paint(g); Graphics2D graphics2d = (Graphics2D) g;     for(int i=0;i<=19;i++){ for(int j=0;j<=19;j++){ if(Editeur[i][j] == "HERBE"){ graphics2d.drawImage(Herbe, i*68,j*76, null);   } if(Editeur[i][j] == "CHEMIN"){ graphics2d.drawImage(Chemin, i*180,j*178, null);   } if(Editeur[i][j] == "REGENERATION"){ graphics2d.drawImage(Regeneration, i*147,j*159, null); } if(Editeur[i][j] == "ARENE"){ graphics2d.drawImage(Arene, i*157,j*75, null);   } if(Editeur[i][j] == "DRESSEUR"){ graphics2d.drawImage(Dresseur, i*25,j*25, null); } } } if(ImageCourante == "HERBE"){ graphics2d.drawImage(Herbe, Px, Py, null); } else if(ImageCourante == "CHEMIN"){ graphics2d.drawImage(Chemin, Px, Py, null); } else if(ImageCourante == "REGENERATION"){ graphics2d.drawImage(Regeneration, Px, Py, null); } else if(ImageCourante == "ARENE"){ graphics2d.drawImage(Arene, Px, Py, null); } else if(ImageCourante == "DRESSEUR"){ graphics2d.drawImage(Dresseur, Px, Py, null); }   }     @Override public void mouseDragged(MouseEvent arg0) { // TODO Auto-generated method stub   }   //Methode pour centrer le curseur sur l'image public void mouseMoved(MouseEvent arg0) { Px= arg0.getX()- 13; Py=arg0.getY()- 13;   repaint(); }       @Override public void keyPressed(KeyEvent arg0) { char key = arg0.getKeyChar();     System.out.println(key); }         @Override public void keyReleased(KeyEvent arg0) { char key = arg0.getKeyChar(); int key1 = arg0.getKeyCode();   if(key1 == KeyEvent.VK_DOWN){ if(indexIncremental>0){ indexIncremental--; } if(indexIncremental == 0){ indexIncremental = 4; } } else if(key1 == KeyEvent.VK_UP){ if(indexIncremental<5){ indexIncremental++;   } if(indexIncremental == 5){ indexIncremental = 0; } } ImageCourante = ImageSelectionne[indexIncremental];     if(key == 's'){ try{ filew= new FileWriter(JOptionPane.showInputDialog(null,"Entrer le chemin de sauvegarde:","Editeur de Map",JOptionPane.QUESTION_MESSAGE)); for (int i=0;i<20;i++){ for (int j=0;j<20;j++){   if(Editeur[j][i] == "HERBE"){ filew.write("0"); } else if(Editeur[j][i] == "CHEMIN"){ filew.write("1"); } else if(Editeur[j][i] == "REGENERATION"){ filew.write("2"); } else if(Editeur[j][i] == "ARENE"){ filew.write("3"); } else if(Editeur[j][i] == "DRESSEUR"){ filew.write("D"); } else if(Editeur[j][i] == null){ filew.write(" "); } } filew.write("\r\n"); }   filew.close(); }   catch(Exception h){ } } else if(key == 'd'){ try{ filer = new FileReader(JOptionPane.showInputDialog(null,"Entrer le chemin de lecture:","Editeur de Map",JOptionPane.QUESTION_MESSAGE)); int i=0; int x=0; int y=0;   while((i = filer.read()) != -1){ char strImg = (char) i;   if(strImg == '0'){ Editeur[x][y] = "HERBE"; } else if(strImg == '1'){ Editeur[x][y] = "CHEMIN"; } else if(strImg == '2'){ Editeur[x][y] = "REGENERATION"; } else if(strImg == '3'){ Editeur[x][y] = "ARENE"; } else if(strImg == 'D'){ Editeur[x][y] = "DRESSEUR"; } else if(strImg == ' '){ Editeur[x][y] = null; }   // Sinon on depasse le tableau, on passe à la ligne suivante else if(strImg == '\r' || strImg == '\n'){ x--; }   if(x == 19){ y++; x=0; } else{ x++; }   } } catch(Exception ex){} }   repaint(); }               @Override public void keyTyped(KeyEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mouseClicked(MouseEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mouseEntered(MouseEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mouseExited(MouseEvent arg0) { // TODO Auto-generated method stub   }   @Override public void mousePressed(MouseEvent arg0) { // TODO Auto-generated method stub   }   //Methode pour poser l'image public void mouseReleased(MouseEvent arg0) { int x= arg0.getX()/25; int y = arg0.getY()/25;   if(arg0.getButton()==MouseEvent.BUTTON1){ Editeur[x][y]= ImageCourante; } else if(arg0.getButton()==MouseEvent.BUTTON3){ Editeur[x][y] = null; } }   }

---

Seulement mnt sa les place n'importe ou...

Imaginons que tu aies une image 100 x 100 et des cases de 20 x 20, ce qui fait que ton image correspond à 5 x 5 cases, identifiées; par exemple, comme ça :

A1 A2 A3 A4 A5
B1 B2 B3 B4 B5
C1 C2 C3 C4 C5
D1 D2 D3 D4 D5
E1 E2 E3 E4 E5

Pour dessiner la case en haut à gauche, la A1, de coordonnées x=0, y=0, width=20, height=20, au coordonnées 140,60 dans la carte :

Code:

---

graphics.drawImage(image, 0, 0, 20, 20, 140, 60, 20, 20, observer);

---

où graphics est de classe Graphics (par exemple dans la méthode paint(Graphics) d'un JPanel

Pour la B2, ses coordonnées sont 20, 20, pour l'afficher en 0, 0:

Code:

---

graphics.drawImage(image, 20, 20, 20, 20, 160, 80, 20, 20, observer);

---

Mais j'ai l'impression qu'on ne parle pas tout à fait de la même chose : je me demande si tu n'a pas des images plus grande que les cases. Dans ce cas, c'est différent : tu afficheras ton image en une seule fois (ce sera plus rapide), mais dans la map, il faut que tu puisse stocker des informations qui désigne une image, tout en ayant l'information qui dit que ce n'est pas la peine de la dessiner (parce qu'elle dessiner à partir d'une autre case).

Par exemple, si tu as une image d'un batiment qui fait 3x3 cases, d'id, mettons X42, par exemple, tu peux mettre dans ton fichier, dans les cases correspondantes :

X42 (X42) (X42)
(X42) (X42) (X42)
(X42) (X42) (X42)

tu sais ainsi que toutes ces cases sont occupés par le batiment X42, mais que la où il y a des parenthèses, il n'y a rien a dessiner : le dessin de l'image entière aux coordonnées de la case en haut à gauche suffira pour couvrir les 9 cases.

On peut également utiliser la méthode getSubimage() de la classe BufferedImage pour récupérer une vue sur la tuile. On parle bien ici de vue, c'est a dire que la nouvelle image ne contient pas une copie de la zone de l'image source mais une vue sur celle-ci (donc consomme moins de mémoire).

Ça permettra de manipuler les tuiles plus aisément puisque leur système de coord est a chaque fois a (0, 0).

Je vais vous expliquer plus clairement . En fait j ai une map je positionne mes photos de tailles différentes lors d un clic ou je souhaite les placer je sauvegarde le placement des images dans un fichier texte. Et les redessine seulement une image 100x100 ne va pas prendre autant de cases qu une image 25 x 25

Donc en gros tu as ça?

Code:

---

1 2 3 4 5

A1 E1 E2 E3 E4 A5 B5 C5 D5 E5

---

avec A1 en 4x4 et les autres en 1x1 et tu coince sur quelque chose dans l'histoire, que je n'arrive pas à identifier.

C'est ce que je veux avoir mais je ne l ai pas ..
Et comment faire des map plus grande vu la taille de mes images ?

Ton éditeur est très simpliste, il va falloir réorganiser tout ça:

Avoir une classe à part entière pour stocker la map, et pas juste un tableau bi-dimensionnel de String. Tu peux avoir un tableau derrière, mais le but est que le code de dessins a juste un objet "map" qu'il interroge pour connaitre les objets et leur position
Utiliser une classe à part entière pour stocker un type d'objet, et pas une String. Cette classe pourra avoir des propriétés comme l'image à dessiner, sa taille, une descriptions, ....
Eviter les comparaisons de String avec == et préférer equals.


Pour le reste, je ne comprends pas où tu coince. Le code de dessins que tu as montré ne restreint pas l'image à une taille précise => ça dessine d'office l'entièreté de l'image, tu ne devrais pas avoir de coupure.


PS: après, pour un éditeur java opensource, tu peux jeter un oeil à http://gridarta.sourceforge.net/ pour t'inspirer, mais ils est probablement trop complet pour tes besoins.

En fait je veux que sa fasse si j ai une image qui prend 2x2 cases
A1 A1
A1 A1 A2
A2

Commence par séparer tes données de ton affichage.

Décider que quand on vois dans la map

Code:

---

1 2

A A A A

---

Il faut afficher un seule image, c'est le boulot de l'afficheur uniquement, qui va devoir quand il trouve un case avec un A décider de remonter à gauche et en haut jusqu'à ce qu'il n'y aie plus de A et a partir de là calculer sa distance au point supérieur gauche et donc calculer le bout de l'image à afficher.

Pour le moment ton code d'affichage et tes données sont mélangée, ce n'est pas facile.

Pourriez vous me donner un exemple concret pour illustrer s il vous plaît parce que je ne vois comment il peut afficher 4 A alors qu il n y a qu une seule image ...