Déclencher une animation via MouseListener

Invité · 15/07/2014, 20h12

Bonjour, je souhaite faire un GUI pour mon puissance 4. Pour le moment, ça a l'air de bien marcher mas je voudrais ajouter une petite animation : je souhaite que le jeton décend progressivement (par exemple 0,5 sec par case). Pour placer le jeton, j'utilise un MouseListener, sauf que avec le MouseListener, je n'arrive pas à utiliser repaint(). J'ai fait des recherches et je suis tombé sur un certain Swing Timer mais j'ai vraiment pas compris comment ça fonctionne.
Voilà une partie de mon code.

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
 
public void mousePressed (MouseEvent event)
{
	int c = event.getX(); 
	int l = event.getY(); 
	for(int i = 0; i<6; i++)
	{
		for(int j = 0; j<7; j++)
		{
			if(50+100*i<l && l<150+100*i && c<450+100*j && 350+100*j<c && plateau[i][j]==0 && placable(i, j) && !fini)
			{
				if(color==Color.BLUE)
				{
					color = Color.RED; 
					plateau[i][j] = 2; 
				}
				else
				{
					color = Color.BLUE; 
					plateau[i][j] = 1; 
				}
				array.add(new Piece(i, j, color)); 
				fini = Jeu.fini(plateau, new Piece(i, j, color)); 
 
	for(int k=0; k<i+1; k++)
	{
		array.remove(array.size()-1); 
		array.add(new Piece(k, j, color)); 
		setArrayList(array); 
		repaint(); 
		try {
			Thread.sleep(500); 
		} catch (InterruptedException e) {
			e.printStackTrace(); 
		}
	}
	setArrayList(array); 
	repaint(); 
			}
		}
	}
}

**joel.drigo** · 16/07/2014, 08h46

Salut,

SWING utilise un thread unique, appelé EDT (Event Dispatch Thread), pour gérer affichage et traitement d'évenement. Un thread ne pouvant faire qu'un seul traitement à la fois, lorsque le programme boucle dans un événement (ici un événement de souris), pendant cette boucle, l'affichage ne peut donc être fait. Le résultat de ton code est donc un rafraichissement à la fin de la boucle, donc sans voir d'animation.

La solution : faire la boucle dans un autre thread que l'EDT, et ne transmettre à l'EDT que les ordres nécessaires au rafraichissement de l'affichage. Tu peux faire ton propre thread, à démarrer donc dans la méthode mousePressed(), ou utiliser la classe prévue à cet effet : SwingWorker.

Voir :

Avec éventuellement, si plus d'affinités : Better Swingworker

**joel.drigo** · 16/07/2014, 09h05

Par ailleurs, à chaque clic souris tu redessines complètement ton plateau de jeu : il serait plus simple et plus efficace que tes évenements souris modifient juste un état, et que l'affichage soit fait de manière indépendante. En gros, tu fais une méthode qui affiche ton plateau de jeu actuel, sauf la pièce en cours de déplacement (une option de la méthode d'affichage), un SwingWorker qui se charge de l'animation, et dans les évenements souris, tu modifies l'état des jetons, et tu fais un repaint(). Personnellement, je gérerais la chose avec deux variables pour chaque jeton, un qui indique la position actuelle du jeton, métons posFinale , et une indiquant la position intermédiaire actuelle, mettont posTemp, et utiliser une liste de jetons en cours de déplacement :

Jouer, c'est placer un jeton dans une colonne, c'est ajouter le jeton dans une liste de jetons présents dans la grille, puis modifier sa position
Modifier la position d'un jeton, c'est
- ajouter le jeton dans une liste de jetons en cours de déplacement, s'il ne s'y trouve pas déjà
- modifier posFinale,
- tester si un SwingWorker est déjà lancé : sinon, le lancer
dans le SwingWorker, parcourir la liste de jetons en cours de déplacement
- modifier posTemp
- si posTemp égale à posFinale, supprimer le jeton de la liste
raffraichir l'affichage (un simple appel à repaint())
si la liste de jetons est vide, arrêter le SwingWorker

Et la méthode d'affichage (appelée quelque part dans une méthode de type paint() du JPanel, ou autre composant que tu utilises):

Dessiner le fond du plateau (la grille)
Parcourir tous les jetons
- si posTemp est égale à posFinale, afficher le jeton en posFinale
- sinon afficher le jeton en posTemp
Eventuellement, dessiner l'avant-plan du plateau

Invité · 16/07/2014, 11h38

Merci pour ton explication mais je suis plutot nouveau en Java et j'ai du mal à comprendre SwingWorker. Pourrais-tu me dire si je dois tout recommencer ou il faut juste un simple changement ? (à la limite montrer un exemple qui ressemble - déclencher une petite animation avec MouseEvent -) Je met le code en entier si ça peut aider la compréhension.

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
 
import javax.swing.*; 
import java.awt.*; 
import java.util.*; 
 
public class Puissance4
{
	public static int x=0, y=0; 
	public static ArrayList<Piece> array = new ArrayList<Piece>(); 
	private Terrain ter = new Terrain(); 
 
	public Puissance4()
	{
		ter.setArrayList(array); 
		JFrame frame = new JFrame("Puissance 4"); 
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); 
 
		frame.getContentPane().add(ter); 
 
		frame.pack(); 
		frame.setVisible(true); 
	}
 
	public static void main(String args[]){
		Puissance4 fen = new Puissance4(); 
	}
 
}

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
 
import javax.swing.*; 
import java.awt.*; 
import java.util.*; 
 
public class Piece {
 
	private int diameter = 50, baseX = 375, baseY = 75, ligne, colonne; 
	private Color color; 
 
	public Piece (int lig, int col, Color c)
	{
		ligne = lig; 
		colonne = col; 
		color = c; 
	}
 
	public void draw (Graphics page)
	{
		page.setColor(color); 
		page.fillOval(baseX+100*colonne, baseY+100*ligne, diameter, diameter); 
	}
 
	public int getLigne ()
	{
		return ligne; 
	}
 
	public int getColonne ()
	{
		return colonne; 
	}
}

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
 
public class Jeu
{	
	public static boolean fini(int[][] plateau, Piece piece)
	{
		boolean winner = false; 
		winner = gagnant(plateau, piece, winner); 
		if(!winner)
		{
			winner = plateauFull(plateau, winner); 
		}
		return winner; 
	}
 
	public static boolean gagnant(int[][] plateau, Piece piece, boolean winner)
	{
		int ligne = piece.getLigne(); 
		int colonne = piece.getColonne(); 
		winner = colonne(plateau, ligne, colonne, winner); 
		if(!winner)
		{
			winner = ligne(plateau, ligne, colonne, winner); 
		}
		if(!winner)
		{
			winner = diagPrinc(plateau, ligne, colonne, winner); 
		}
		if(!winner)
		{
			winner = diagSecon(plateau, ligne, colonne, winner); 
		}
		return winner; 
	}
 
	public static boolean colonne(int[][] plateau, int l, int c, boolean winner)
	{
		int k = 0, i = 0; 
		while(k<4 && i<plateau.length)
		{
			if(plateau[i][c]==plateau[l][c])
			{
				k++; 
			}
			else
			{
				k = 0; 
			}
			i++; 
		}
		if(k==4)
		{
			winner = true; 
		}
		return winner; 
	}
 
	public static boolean ligne(int[][] plateau, int ligne, int colonne, boolean winner)
	{
		int k = 0, j = 0; 
		while(k<4 && j<plateau[0].length)
		{
			if(plateau[ligne][j]==plateau[ligne][colonne])
			{
				k++; 
			}
			else
			{
				k = 0; 
			}
			j++; 
		}
		if(k==4)
		{
			winner = true; 
		}
		return winner; 
	}
 
	public static boolean diagPrinc(int[][] plateau, int ligne, int colonne, boolean winner)
	{
		int b = 0, k = 0, min; 
		if(ligne<colonne)
		{
			min = ligne; 
		}
		else
		{
			min = colonne; 
		}
		while(ligne-min+b<plateau.length && colonne-min+b<plateau[0].length && k<4)
		{
			if(plateau[ligne-min+b][colonne-min+b]==plateau[ligne][colonne])
			{
				k++;
			}
			else
			{
				k = 0;
			}
			b++; 
		}
		if(k==4)
		{
			winner = true; 
		}
		return winner; 
	}
 
	public static boolean diagSecon(int[][] plateau, int ligne, int colonne, boolean winner)
	{
		int b = 0, k = 0, min;
		if(ligne<6-colonne)
		{
			min=ligne;
		}
		else
		{
			min=6-colonne;
		}
		while(0<=ligne-min+b && ligne-min+b<plateau.length && colonne+min-b<plateau[0].length && colonne+min-b>=0 && k<4)
		{
			if(plateau[ligne-min+b][colonne+min-b]==plateau[ligne][colonne])
			{
				k++; 
			}
			else
			{
				k = 0; 
			}
			b++; 
		}
		if(k==4)
		{
			winner = true; 
		}
		return winner; 
	}
 
	public static boolean plateauFull(int[][] plateau, boolean winner)
	{
		int i = 0, j = 0; 
		while(i<plateau.length && plateau[i][j]!=0)
		{
			while(j<plateau[0].length && plateau[i][j]!=0)
			{
				j++; 
			}
			i++; 
		}
		if(plateau[i][j]!=0)
		{
			winner = true; 
		}
		return winner; 
	}
 
	public static void initPlateau(int[][] plateau)
	{
		for(int i = 0; i<plateau.length; i++)
		{
			for(int j = 0; j<plateau[0].length; j++)
			{
				plateau[i][j]=0; 
			}
		}
	}
}

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
 
import javax.swing.*; 
import java.awt.*; 
import java.util.*; 
import java.awt.event.*; 
 
public class Terrain extends JPanel
{
	private ArrayList<Piece> array; 
	public int x=0, y=0; 
	public boolean fini = false; 
	public int[][] plateau; 
	public Color color = Color.BLUE; 
 
	public Terrain()
	{
		plateau = new int[6][7]; 
		Jeu.initPlateau(plateau); 
		addMouseListener(new ColonneListener()); 
 
		setBackground(Color.BLACK); 
		setPreferredSize(new Dimension(1401, 701)); 
 
	}
 
	public void paintComponent(Graphics page)
	{
		super.paintComponent(page); 
 
		page.setColor(Color.LIGHT_GRAY); 
		page.fillOval(300, 0, 200, 200); 
		page.fillOval(900, 0, 200, 200); 
		page.fillRect(300, 100, 800, 601); 
		page.fillRect(400, 0, 600, 100); 
 
		page.setColor(Color.WHITE); 
		// Menu
		page.drawRect(0, 0, 200, 300); 
 
		page.setFont(new Font("Arial", Font.BOLD, 50)); 
		page.drawString("Menu", 10, 50); 
 
		page.setFont(new Font("Arial", Font.BOLD, 20)); 
		page.drawString("Regles", 10, 100); 
		page.drawString("Rejouer", 10, 150); 
		page.drawString("Quitter", 10, 200); 
 
		page.drawString("Joueur1", 10, 340); 
 
 
		// Bottom Left
		page.drawRect(0, 350, 200, 350); 
		// Bottom Right
		page.drawRect(1200, 350, 200, 350); 
 
 
		page.setColor(Color.BLUE); 
		page.fillRect(0, 325, 201, 24); 
 
		page.setColor(Color.RED); 
		page.fillRect(1200, 325, 201, 24); 
 
		page.setColor(Color.WHITE); 
		page.drawString("Jedi - Joueur1", 10, 345); 
		page.drawString("Sith - Joueur2", 1210, 345); 
 
		page.setColor(Color.YELLOW); 
		if(color==Color.BLUE)
		{
			page.fillOval(225, 325, 25, 25); 
		}
		else
		{
			page.fillOval(1150, 325, 25, 25); 
		}
 
		page.setColor(Color.BLACK); 
 
		for(int i=0; i<7; i++)
		{
			for(int j=0; j<6; j++)
			{
				page.fillOval(375+100*i, 75+100*j, 50, 50); 
			}
		}
 
		for(Piece piece : array)
		{
			piece.draw(page); 
		}
 
		if(fini)
		{
			page.fillRect(0, 0, 1401, 701); 
 
		}
 
	}
 
 
	public void setArrayList(ArrayList<Piece> list)
	{
		array = list; 
	}
 
 
	private class ColonneListener implements MouseListener
	{
		public void mousePressed (MouseEvent event)
		{
			int c = event.getX(); 
			int l = event.getY(); 
			for(int i = 0; i<6; i++)
			{
				for(int j = 0; j<7; j++)
				{
					if(50+100*i<l && l<150+100*i && c<450+100*j && 350+100*j<c && plateau[i][j]==0 && placable(i, j) && !fini)
					{
						array.add(new Piece(i, j, color)); 
 
						for(int k=0; k<i+1; k++)
						{
							array.remove(array.size()-1); 
							array.add(new Piece(k, j, color)); 
							setArrayList(array); 
							repaint(); 
							try {
								Thread.sleep(500); 
							} catch (InterruptedException e) {
								e.printStackTrace(); 
							}
						}
						if(color==Color.BLUE)
						{
							color = Color.RED; 
							plateau[i][j] = 1; 
						}
						else
						{
							color = Color.BLUE; 
							plateau[i][j] = 2; 
						}
						fini = Jeu.fini(plateau, new Piece(i, j, color)); 
					}
				}
			}
		}
 
		public boolean placable (int i, int j)
		{
			boolean placable = true; 
			int c = i+1; 
			while(c<6 && placable)
			{
				if(plateau[c][j]==0)
				{
					placable = false; 
				}
				c++; 
			}
			return placable; 
		}
 
		public void mouseClicked (MouseEvent event) {}
		public void mouseReleased (MouseEvent event) {}
		public void mouseEntered (MouseEvent event) {}
		public void mouseExited (MouseEvent event) {}
	}
 
}

**joel.drigo** · 16/07/2014, 12h09

En gros, si tu utilises un thread :

pour créer un thread, par exemple

Code :

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

1
2
3
4
5
6
7
8
9
Thread thread = new Thread() {
 
   public void run() {
 
       // ici le code à faire
 
   }
 
};

pour démarrer le thread,
Code : Sélectionner tout - Visualiser dans une fenêtre à part
```
thread.start();
```

Pour forcer l'exécution d'un code dans l'EDT :

En mode asynchrone (qui ne bloque pas le thread courant) :

Code :

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

1
2
3
4
5
6
7
SwingUtilities.invokeLater(new Runnable() {
 
				public void run() {
					// ici le code à faire
 
				}
			});

En mode synchrone (qui bloque le thread courant, en attendant la fin du code) :

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
 
			try {
				SwingUtilities.invokeAndWait(new Runnable() {
 
					public void run() {
						// ici le code à faire
 
					}
				});
			} catch (InterruptedException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			} catch (InvocationTargetException e) {
				// TODO Auto-generated catch block
				e.printStackTrace();
			}

Lorsqu'on a un code du type :

Code :

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

1
2
3
4
5
... instructions ne concernant pas l'UI ...
... rafraichissement UI soit repaint() ...
... instructions ne concernant pas l'UI ...
... instructions concernant l'UI autre que repaint() ...
...

à mettre dans un thread :

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
 
Thread thread = new Thread() {
 
   public void run() {
 
     ... instructions ne concernant pas l'UI ...
     ... rafraichissement UI soit repaint() ...
     ... instructions ne concernant pas l'UI ...
     SwingUtilities.invokeLater(new Runnable() {
 
				public void run() {
					... instructions concernant l'UI autre que repaint() ...
 
				}
			});
     ...
 
   }
 
};

Pour un SwingWorker, c'est (plus ou moins) la même chose, sauf qu'on te fourni des méthodes à implémenter, en fonction de ce que tu veux faire :

execute() pour démarrer
done() pour terminer (et mettre à jour l'UI par rapport à l'état final)
doInBackground() pour faire le code en dehors de l'EDT (en l'occurence ta boucle)
publish(List) pour produire des résultats intermédiaires (appelé donc dans doInBackground())
process(List) pour mettre à jour l'UI avec les résultats intermédiaires envoyées dans publish()

process() et done() sont exécutés dans l'EDT, les autres dans un thread à part (un thread propre au SwingWorker).

A noter, que la classe SwingWorker est paramétrée par deux paramètres :

Le premier (T) : pour typer un résultat éventuel produit par le traitement
Le second (V) : pour typer les résultats intermédiaires (en l'occurence, dans ton cas, ça pourrait être les jetons en déplacement)

**joel.drigo** · 16/07/2014, 12h12

Ah, oui il y'a le Timer aussi, j'oubliais. Que j'oubliais un peu volontairement, parce qu'il me semble un peu plus complexe de gérer de l'animation multiple (les différents jetons à différents moments, les interactions entre les jetons, etc...), mais c'est faisable en y réfléchissant bien. Il serait probablement plus simple de gérer un Timer par jeton dans ce cas.

**tchize_** · 16/07/2014, 11h46

Envoyé par arda.gs1905

J'ai fait des recherches et je suis tombé sur un certain Swing Timer mais j'ai vraiment pas compris comment ça fonctionne.

Ce n'est pas compliquer, c'est une classe qui va appeler actionPerformed sur une de test classes, à intervalle régulier. L'intervalle et le nombre de répétitions sont configurable. Rien de bien sorcier en gros. Un méthode appelée régulièrement, et qui a accès à l'interface grahique puisque exécutée depuis l'EDT (comme ton mouse listener)

Déclencher une animation via MouseListener

Java

Vue hybride

Discussions similaires

Partager

Partager