Editeur de map

**DiR95** · 20/11/2014, 19h43

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.

**tchize_** · 20/11/2014, 19h58

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

**bouye** · 21/11/2014, 00h08

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).

**DiR95** · 21/11/2014, 01h33

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
		}
	}
 
}

**joel.drigo** · 21/11/2014, 01h40

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.

**DiR95** · 21/11/2014, 01h46

De cette facon la?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
public Rectangle getLimitesRectangle(){
 
		Rectangle rectangle = new Rectangle(x,y,100,100);
 
		return rectangle;
 
	}

**DiR95** · 21/11/2014, 01h55

Voila maintenant ce que je veux faire:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
		}
	}
 
}

**joel.drigo** · 21/11/2014, 02h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

Editeur de map

Interfaces Graphiques en Java

Vue hybride

Discussions similaires

Partager

Partager