Discussion :

[SaYeLic3]

Bonjour tout le monde,

Je veux créer une grille avec GridLayout pour un jeu dans lequel je souhaite colorier les cases avec un fond uni.
Pour cela, j'utilise la méthode setBackground() de JPanel, sauf que je n'ai pas le résultat attendu.

Les JPanels se colorient en blanc sauf que j'ai toujours une copie de toute la grille qui s'agrège en haut a gauche de l'écran.
Avec quelques tests, ce sont des composants JPanel créés qui s'affichent en double sur le coin.

De plus, j'ai une erreur "No such child : 1" lorsque que j'accède au tableau de JPanel pour définir la couleur de l'arrière plan.

J'essaie de trouver l'erreur mais je ne la vois pas.

Je débute en Java, si vous pourriez me trouver une solution ou une meilleure méthode d’implémentation, je vous remercie d'avance.

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
 
import java.awt.Color;
import java.awt.GridLayout;
import java.util.ArrayList;
 
import javax.swing.JFrame;
import javax.swing.JPanel;
 
public class Test {
	public static void main(String[] args) {
 
		int width = 50; 
		int height = 50; 
		ArrayList<MyPanel> arr = new ArrayList<>();
 
		JFrame t = new JFrame();
		JPanel pan = new JPanel (new GridLayout (width,height));
		int x = 1;
		int y = 1;
 
		for(int i = 0; i<(width*height);i++){
 
		   MyPanel p = new MyPanel();
		   MyListener listner = new MyListener(p); //MyListener a un champ MyPanel pour afficher les coordonnes dans la console à chaque click sur un JPanel
		   p.addMouseListener(listner);
 
		   if (x > width ) {
			   x = 1;
			   y++;
		   }
 
		   p.setX(x);
		   p.setY(y);
 
		   System.out.println("x : "+x+", y : "+y);
 
		   x++;
		   pan.add(p);
		   arr.add(p);
		}
 
		t.add(pan);
		t.setSize(700, 700);
		t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		t.setResizable(false);
		t.setVisible(true);
 
 
		for(int i = 0; i < arr.size(); i++) {
			t.getContentPane().getComponent(i).setBackground(Color.WHITE);
		}
	}
 
}

[joel.drigo]

Salut,

Déjà, montre-nous aussi le code de MyPanel et MyListener.

Mais je soupçonne un problème de redéfinition à cause de ça :

Code :

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

1
2
p.setX(x);
p.setY(y);

qui me fait penser que tu as un code du genre :

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
public class MyPanel extends JPanel {
 
	private int x;
	private int y;
 
	public void setX(int x) {
		this.x=x;
	}
 
	public void setY(int y) {
		this.y=y;
	}
 
	public int getX() {
		return x;
	}
 
	public int getY() {
		return y;
	}
 
}

Si c'est bien le cas, c'est normal que l'affichage foire.

Les méthodes getX() et getY() sont des méthodes utilisées par Swing pour connaître la position des composants, position calculée par les layout managers. Si tu caches les méthodes de Swing par les tiennes. Swing n'y comprend plus rien et foire. En l'occurence, tous tes panels sont ramassés en haut à gauche, parce qu'ils sont positionnés avec des x de 1 à 50, alors que la frame fait 700 de large, et des y de 1 à 50, alors que la frame fait 700 de haut. Comme il y a 50 composants en largeur, le grid layout dimensionne les panels à 13 pixels de large (700/50=14, avec les arrondis, les insets, tout ça, ça explique la différence de 1 pixel). Du coup, la partie affichée fait dans les 64 pixels de large calée à gauche et laisse le reste en gris. Pareil en vertical. Il vaut mieux définir une taille pour chaque petit panel, et faire un pack, que l'inverse, pour éviter les petits décalages qui vont faire que tu auras une bordure grise autour de ta fenêtre.

Ensuite, pour ce qui du "No such child: 1" :
Tu ajoutes 2500 composants (50×50) dans un panel que tu ajoutes à la fenêtre. Un seul panel. Il y'a donc qu'un seul composant dans le content pane.
Si tu fais une boucle de 0 à 2500 exclu (arr.size()), c'est normal que Swing te dise qu'il n'y a pas de composant d'index 1 (le seul qui existe est en 0).
Les instances de MyPanel ont été ajoutés dans "pan", pas dans le content pane.
Donc :

Code :

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

1
2
3
for(int i = 0; i < arr.size(); i++) {
			pan.getComponent(i).setBackground(Color.WHITE);
		}

En plus, il ne faut jamais faire une boucle sur un ensemble de trucs par rapport à la taille d'un autre ensemble de trucs, même si l'autre a servi à construire le premier, parce qu'on peut vite se retrouver justement avec deux ensembles dont on pense qu'ils ont la même taille alors que pas forcément, l'un a changé, et pas l'autre, ou les deux ont changé mais pas de la même façon.

Donc, il vaudrait mieux faire :

Code :

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

1
2
3
4
 
		for(int i = 0; i < pan.getComponentCount(); i++) {
			pan.getComponent(i).setBackground(Color.WHITE);
		}

Aussi, il vaut mieux faire ce genre de chose dans le thread de Swing, si la fenêtre est déjà affichée, pour éviter d'éventuels conflits.

Voilà un exemple :

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
public static void main(String[] args) {
 
		int width = 50; 
		int height = 50; 
		JFrame t = new JFrame();
		JPanel pan = new JPanel (new GridLayout (width,0)); // on est pas obligé d'indiquer les deux, l'un sera ignoré de toute manière
		// ou JPanel pan = new JPanel (new GridLayout (0,height)); // on est pas obligé d'indiquer les deux, l'un sera ignoré de toute manière (je préfère le premier, ça me semble plus logique d'imposer un nombre de colonnes)
 
		MouseListener mouseListener = new MouseAdapter() {
 
			@Override
			public void mouseClicked(MouseEvent e) {
				((JPanel)e.getSource()).setBackground(Color.BLACK);
			}
 
		};
 
 
		for(int i = width*height; i>0;i--) { // en le faisant dans ce sens, on évite de calculer 2500 fois la multiplication de width par height (si on a besoin d'un i qui varie de 0 à 2499, on utilisera une varriable
 
                        // tu peux créer une classe MyPanel si tu veux
			JPanel panel = new JPanel();
			panel.setPreferredSize(new Dimension(14,14));
			panel.setBackground(Color.WHITE);
			panel.addMouseListener(mouseListener);
 
			pan.add(panel);
		}
 
		t.add(pan);
		t.pack(); // la frame se dimensionne par rapport à son contenu
		t.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		t.setResizable(false);
		t.setLocationRelativeTo(null); // pour centrer la fenêtre par rapport à l'écran
		t.setVisible(true);
 
 	}

PS : il existe d'autres moyens de procéder, mais tout dépend de ce que tu cherches à faire exactement. Par exemple, on pourrait procéder sur une image directement, mais l'inconvénient est une consommation plus importante de mémoire. On peut également gérer des composants personalisés, qu'on dessine, en gérant entièrement le positionnement soi-même. L'inconvénient est d'avoir à gérer la capture du clic de souris (ce n'est pas si compliqué que ça), mais l'avantage est qu'on peut faire ce qu'on veut, et ça pourra être plus léger en mémoire, parce qu'on a pas besoin de tout ce que fais un JPanel : on a besoin que de 2 couleurs. On perdra un peu de temps à faire des calculs mais sur des machines récentes, ça devrait passer. Par exemple :

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
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Point;
import java.awt.event.MouseAdapter;
import java.awt.event.MouseEvent;
import java.util.HashSet;
import java.util.Set;
 
import javax.swing.JFrame;
import javax.swing.JPanel;
 
public class CarresBlancsEtNoirs extends JPanel {
 
	private final int largeurCarre;
	private final int nbCarresLargeur;
	private final int nbCarresHauteur;
 
	private final Set<Point> etats;
	private final Dimension size;
 
	public CarresBlancsEtNoirs(int largeurCarre, int nbCarresLargeur, int nbCarresHauteur) {
		this.largeurCarre=largeurCarre;
		this.nbCarresHauteur=nbCarresHauteur;
		this.nbCarresLargeur=nbCarresLargeur;
		this.size=new Dimension(largeurCarre*nbCarresLargeur,largeurCarre*nbCarresHauteur);
		this.etats=new HashSet<>();
		addMouseListener(new MouseAdapter() {
			@Override
			public void mouseClicked(MouseEvent e) {
 
				int x = e.getX()/largeurCarre;
				int y = e.getY()/largeurCarre;
 
				boolean modify;
				if ( e.getButton()==MouseEvent.BUTTON1 ) {
					modify = etats.add(new Point(x,y));
				}
				else {
					modify = etats.remove(new Point(x,y));
				}
				if ( modify ) {
					repaint();
				}
 
			}
		});
	}
 
	public void setPoint(int i) {
		setPoint(i/nbCarresLargeur, i%nbCarresLargeur);
	}
 
	public void setPoint(int x, int y) {
		if( x>=0 && x<nbCarresLargeur && y>=0 && y<nbCarresHauteur ) {
			etats.add(new Point(x,y));
			repaint();
		}
	}
 
	public void resetPoint(int i) {
		resetPoint(i/nbCarresLargeur, i%nbCarresLargeur);
	}
 
	public void resetPoint(int x, int y) {
		if( x>=0 && x<nbCarresLargeur && y>=0 && y<nbCarresHauteur ) {
			etats.remove(new Point(x,y));
			repaint();
		}
	}
 
	@Override
	protected void paintComponent(Graphics g) {
		super.paintComponent(g);
		g.setColor(getForeground());
		for(Point etat : etats) {
			g.fillRect(etat.x*largeurCarre, etat.y*largeurCarre, largeurCarre, largeurCarre);
		}
	}
 
	@Override
	public Dimension getPreferredSize() {
		return size;
	}
 
	public static void main(String[] args) {
		JFrame frame = new JFrame();
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		CarresBlancsEtNoirs carresBlancsEtNoirs = new CarresBlancsEtNoirs(14, 50, 50);
		carresBlancsEtNoirs.setBackground(Color.WHITE); // couleur de fond
		carresBlancsEtNoirs.setForeground(Color.BLACK); // couleur de dessin
		frame.add(carresBlancsEtNoirs);
		frame.pack();
		frame.setResizable(false);
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
	}
 
}

[SaYeLic3]

"Les méthodes getX() et getY() sont des méthodes utilisées par Swing pour connaître la position des composants, position calculée par les layout managers. Si tu caches les méthodes de Swing par les tiennes. Swing n'y comprend plus rien et foire. En l'occurence, tous tes panels sont ramassés en haut à gauche, parce qu'ils sont positionnés avec des x de 1 à 50, alors que la frame fait 700 de large, et des y de 1 à 50, alors que la frame fait 700 de haut. Comme il y a 50 composants en largeur, le grid layout dimensionne les panels à 13 pixels de large (700/50=14, avec les arrondis, les insets, tout ça, ça explique la différence de 1 pixel). Du coup, la partie affichée fait dans les 64 pixels de large calée à gauche et laisse le reste en gris. Pareil en vertical. Il vaut mieux définir une taille pour chaque petit panel, et faire un pack, que l'inverse, pour éviter les petits décalages qui vont faire que tu auras une bordure grise autour de ta fenêtre."

D'accord, c'était effectivement à partir de ce moment que ça n'avait pas marché. En rectifiant cette ligne, ça marche nickel.

Ensuite, pour ce qui du "No such child: 1" :
Tu ajoutes 2500 composants (50×50) dans un panel que tu ajoutes à la fenêtre. Un seul panel. Il y'a donc qu'un seul composant dans le content pane.
Si tu fais une boucle de 0 à 2500 exclu (arr.size()), c'est normal que Swing te dise qu'il n'y a pas de composant d'index 1 (le seul qui existe est en 0).
Les instances de MyPanel ont été ajoutés dans "pan", pas dans le content pane.

Je vois mieux, je pensais que j’accédais au "pan" en fessant "t.getContentPane()". t étant le frame.

Merci Beaucoup pour votre réponse bien claire et détaillée, c'était mon premier post et je vous remercie beaucoup.

PS : Oui(merci pour l'exemple), justement je cherche à mettre des images, j'aurai un personnage(image) qui va se déplacé sur la grille avec des obstacles(images). Pour l'instant, j'essaie de mettre des carré de couleur unie. Je me demande si l'utilisation de la GridLayout est préférable pour ce genre d'idée avec les images.

Dans ce cas là, est ce que je pourrais juste utiliser un seul JPanel dans un JFrame dans lequel je pourrai dessiner avec des drawImage() ?

Merci encore pour votre attention .

[joel.drigo]

Je vois mieux, je pensais que j’accédais au "pan" en fessant "t.getContentPane()". t étant le frame.

t.add(pan); est l'équivalent de t.getContentPane().add(pan); (tout ce qui "ajouté" à la frame par add l'est au content pane). Si tu avais fait t.setContentPane(pan);, tu aurais remplacé le content pan par ton panel, et donc tu aurais bien obtenu tes "MyPanel" par getContentPane().getComponent(i). Tiens, au passage, ça me fait penser qu'il y avait une autre façon d'éviter le "no such child" :

Code :

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

1
2
3
for(Component component : pan.getComponents()) {
			component.setBackground(Color.WHITE);
		}

justement je cherche à mettre des images, j'aurai un personnage(image) qui va se déplacé sur la grille avec des obstacles(images). Pour l'instant, j'essaie de mettre des carré de couleur unie. Je me demande si l'utilisation de la GridLayout est préférable pour ce genre d'idée avec les images.

Swing est fait principalement pour faire des interfaces, de type formulaire ou dans le genre. Les layouts managers sont là pour que ces insterfaces soit responsives. Ils définissent des "grilles" et sont orientés pour que tout composant soit entièrement dans une case de la grille. Du coup, il n'est pas possible qu'un composant soit à cheval sur 2 cases ou plus. Dès qu'on veut gérer plusieurs couches superposées, ça devient plus compliqué, parce que ce n'est pas trop prévu pour ça : il y a rarement des composants les uns au-dessus des autres dans un formulaire. Il y a bien des moyens (comme l'OverlayLayout par exemple, mais qui a ses limites). Et ce n'est pas non plus très orienté animation, ou au changement d'echelle, ou à tout autre effet graphique un peut particulier (jamais impossible, mais compliqué avec pleins d'effets de bord à combattre).

Du coup, si on veut plusieurs couches, des éléments qui se superposent, qui se chevauchent, animés (déplacement ou autre), etc. On se retrouve à devoir bidouiller tout ça, particulièrement en enlevant petit à petit ce qui gêne, ou à le contourner lorsqu'on ne peut pas. En gros, on a des composants qui font plein de choses, mais dont on utilise que 5%, et on a plein de code qu'on ne devrait pas avoir normalement pour faire ce qu'on veut. Autant faire ses propres composants, légers, adapté. Simuler un composant léger qu'on gère soit même pour dessiner directement dans le graphique est simple. Si tu as trois machin différents (un personnage, des obstacles sous forme d'image, ça fait 2), et 2 plans (2 z-index), tu peux directement utiliser effectivement des drawMachin (donc en Java2D) comme dans mon exemple, en associant les éléements avec un Point pour le positionnement.
S'il y a plusieurs types de sprites, plusieurs couches,etc ça devient intéressant de les gérer par des classes, avec une interface de base du type

Code :

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

1
2
3
public interface Drawable {
    void draw(Graphics2D g);
}

Il y a une autre approche, non objet : l'ECS. Plus complexe à mettre en place, elle est beaucoup plus souple que le MVC pour les jeux. Ce modèle est beaucoup plus simple et plus performant pour gérer de nombreux élements (personnage, obstacle, enemis, effets) qui ont beaucoup d'interactions (collisions par exemple).

Dans le des deux cas, le dessin en Java2D sera plus souple et plus performant pour gérer le dessin, les combinaisons entre élements (transparence, superpositions, ou composite plus généralement). On pourra utiliser des images pour faire du cache (une image est plus rapide à afficher qu'un ensemble de composants qu'il faut parcourir, ou dessiner vectoriellement, et les composites permettent de faire des combinaisons d'images, comme l'affichage d'un sprite par dessus un décor). Toutefois, un ECS s'intègre plus facilement dans une game loop qu'un MVC.

On peut toujours combiner les deux systèmes, par exemple, pour l'affichage d'un panneau de scores sur le côté de la partie "jeu".

[SaYeLic3]

Merci beaucoup pour les idées, j'ai pu implémenter ce que je voulais dans une bonne forme.