Problème pour redessiner une fenêtre (repaint, clignotement, saccades)

**YuGiOhJCJ** · 19/01/2011, 05h21

Bonjour,

j'écris un jeu de tennis de table (tel que Pong) en Java avec Swing.
Le but pour l'instant n'est que de déplacer deux raquettes verticalement (la balle et le filet ne sont pas encore présents).
Je dessine sur une JFrame.
Pour cela, je redéfinis la méthode paint(Graphics g).

La première solution sans aucun appel à la méthode repaint pose le problème que la fenêtre n'est pas redessinée lorsque je déplace les raquettes (en fait elle est redessinée seulement lorsqu'on la cache puis qu'on l'affiche à nouveau).

La deuxième solution avec repaint à chaque événement pose le problème de clignotement (probablement car trop d'appels à repaint sont effectués) mais résoud le problème que la fenêtre n'était pas redessinée.

La troisième solution avec repaint toutes les 60ms pose le problème de clignotement (probablement car trop d'appels à repaint sont effectués) mais résoud le problème que la fenêtre n'était pas redessinée. Si on augmente le délai : 200ms alors le problème de clignotement est résolu mais un nouveau problème apparaît : avec 200ms, la fenêtre est redessinée un peu tard (le déplacement des raquettes est saccadé).

Bref, aucune de mes solutions ne me convient.

Est-ce que quelqu'un aurait une solution pour que lorsque je déplace mes raquettes la fenêtre se redéssine correctement?

Merci bien.

Voici le code :

Solution 1 :

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
 
import java.awt.event.KeyListener;
import java.awt.event.KeyEvent;
public class Controller implements KeyListener
{
	private Model model;
	public Controller(Model model)
	{
		this.model = model;
	}
	@Override
	public void keyPressed(KeyEvent e)
	{
		if(e.getKeyChar() == this.model.getUp1())
		{
			this.model.setY1(this.model.getY1() - 1);
		}
		else if(e.getKeyChar() == this.model.getDown1())
		{
			this.model.setY1(this.model.getY1() + 1);
		}
		else if(e.getKeyChar() == this.model.getUp2())
		{
			this.model.setY2(this.model.getY2() - 1);
		}
		else if(e.getKeyChar() == this.model.getDown2())
		{
			this.model.setY2(this.model.getY2() + 1);
		}
	}
	@Override
	public void keyReleased(KeyEvent e)
	{
	}
	@Override
	public void keyTyped(KeyEvent e)
	{
	}
	public Model getModel()
	{
		return this.model;
	}
}
 
public class Main
{
	public static void main(String args[])
	{
		new Model("Tennis de table", "0.1", "YuGiOhJCJ", "19/01/2011", 600, 600, 'z', 's', 'o', 'l');
	}
}
public class Model
{
	private String name;
	private String version;
	private String author;
	private String date;
	private int width;
	private int height;
	private int y1;
	private char up1;
	private char down1;
	private int y2;
	private char up2;
	private char down2;
	private View view;
	private Controller controller;
	public Model(String name, String version, String author, String date, int width, int height, char up1, char down1, char up2, char down2)
	{
		this.name = name;
		this.version = version;
		this.author = author;
		this.date = date;
		this.width = width;
		this.height = height;
		this.y1 = 0;
		this.up1 = up1;
		this.down1 = down1;
		this.y2 = 0;
		this.up2 = up2;
		this.down2 = down2;
		this.view = new View(this);
		this.controller = new Controller(this);
		this.view.addKeyListener(this.controller);
	}
	public String getName()
	{
		return this.name;
	}
	public String getVersion()
	{
		return this.version;
	}
	public String getAuthor()
	{
		return this.author;
	}
	public String getDate()
	{
		return this.date;
	}
	public int getWidth()
	{
		return this.width;
	}
	public int getHeight()
	{
		return this.height;
	}
	public int getY1()
	{
		return this.y1;
	}
	public char getUp1()
	{
		return this.up1;
	}
	public char getDown1()
	{
		return this.down1;
	}
	public int getY2()
	{
		return this.y2;
	}
	public char getUp2()
	{
		return this.up2;
	}
	public char getDown2()
	{
		return this.down2;
	}
	public void setY1(int y1)
	{
		this.y1 = y1;
	}
	public void setY2(int y2)
	{
		this.y2 = y2;
	}
	public View getView()
	{
		return this.view;
	}
	public Controller getController()
	{
		return this.controller;
	}
}
import javax.swing.JFrame;
import java.awt.Graphics;
import java.awt.Color;
import java.util.Vector;
public class View extends JFrame
{
	private Model model;
	public View(Model model)
	{
		this.model = model;
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setTitle(this.model.getName() + " version " + this.model.getVersion() + " par " + this.model.getAuthor() + " le " + this.model.getDate());
		this.setSize(this.model.getWidth(), this.model.getHeight());
		this.setVisible(true);
	}
	@Override
	public void paint(Graphics g)
	{
		int width = 10;
		int height = 50;
		g.setColor(Color.white);
		g.fillRect(0, 0, this.model.getWidth(), this.model.getHeight());
		g.setColor(Color.black);
		g.fillRect(0, this.model.getY1(), width, height);
		g.fillRect(this.model.getWidth() - width, this.model.getY2(), width, height);
	}
	public Model getModel()
	{
		return this.model;
	}
}

Solution 2 :

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
 
import java.awt.event.KeyListener;
import java.awt.event.KeyEvent;
public class Controller implements KeyListener
{
	private Model model;
	public Controller(Model model)
	{
		this.model = model;
	}
	@Override
	public void keyPressed(KeyEvent e)
	{
		if(e.getKeyChar() == this.model.getUp1())
		{
			this.model.setY1(this.model.getY1() - 1);
		}
		else if(e.getKeyChar() == this.model.getDown1())
		{
			this.model.setY1(this.model.getY1() + 1);
		}
		else if(e.getKeyChar() == this.model.getUp2())
		{
			this.model.setY2(this.model.getY2() - 1);
		}
		else if(e.getKeyChar() == this.model.getDown2())
		{
			this.model.setY2(this.model.getY2() + 1);
		}
	}
	@Override
	public void keyReleased(KeyEvent e)
	{
	}
	@Override
	public void keyTyped(KeyEvent e)
	{
	}
	public Model getModel()
	{
		return this.model;
	}
}
 
public class Main
{
	public static void main(String args[])
	{
		new Model("Tennis de table", "0.1", "YuGiOhJCJ", "19/01/2011", 600, 600, 'z', 's', 'o', 'l');
	}
}
public class Model
{
	private String name;
	private String version;
	private String author;
	private String date;
	private int width;
	private int height;
	private int y1;
	private char up1;
	private char down1;
	private int y2;
	private char up2;
	private char down2;
	private View view;
	private Controller controller;
	public Model(String name, String version, String author, String date, int width, int height, char up1, char down1, char up2, char down2)
	{
		this.name = name;
		this.version = version;
		this.author = author;
		this.date = date;
		this.width = width;
		this.height = height;
		this.y1 = 0;
		this.up1 = up1;
		this.down1 = down1;
		this.y2 = 0;
		this.up2 = up2;
		this.down2 = down2;
		this.view = new View(this);
		this.controller = new Controller(this);
		this.view.addKeyListener(this.controller);
	}
	public String getName()
	{
		return this.name;
	}
	public String getVersion()
	{
		return this.version;
	}
	public String getAuthor()
	{
		return this.author;
	}
	public String getDate()
	{
		return this.date;
	}
	public int getWidth()
	{
		return this.width;
	}
	public int getHeight()
	{
		return this.height;
	}
	public int getY1()
	{
		return this.y1;
	}
	public char getUp1()
	{
		return this.up1;
	}
	public char getDown1()
	{
		return this.down1;
	}
	public int getY2()
	{
		return this.y2;
	}
	public char getUp2()
	{
		return this.up2;
	}
	public char getDown2()
	{
		return this.down2;
	}
	public void setY1(int y1)
	{
		this.y1 = y1;
		this.view.repaint();
	}
	public void setY2(int y2)
	{
		this.y2 = y2;
		this.view.repaint();
	}
	public View getView()
	{
		return this.view;
	}
	public Controller getController()
	{
		return this.controller;
	}
}
import javax.swing.JFrame;
import java.awt.Graphics;
import java.awt.Color;
import java.util.Vector;
public class View extends JFrame
{
	private Model model;
	public View(Model model)
	{
		this.model = model;
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setTitle(this.model.getName() + " version " + this.model.getVersion() + " par " + this.model.getAuthor() + " le " + this.model.getDate());
		this.setSize(this.model.getWidth(), this.model.getHeight());
		this.setVisible(true);
	}
	@Override
	public void paint(Graphics g)
	{
		int width = 10;
		int height = 50;
		g.setColor(Color.white);
		g.fillRect(0, 0, this.model.getWidth(), this.model.getHeight());
		g.setColor(Color.black);
		g.fillRect(0, this.model.getY1(), width, height);
		g.fillRect(this.model.getWidth() - width, this.model.getY2(), width, height);
	}
	public Model getModel()
	{
		return this.model;
	}
}

Solution 3 :

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
 
import java.awt.event.KeyListener;
import java.awt.event.KeyEvent;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
public class Controller implements KeyListener, ActionListener
{
	private Model model;
	public Controller(Model model)
	{
		this.model = model;
	}
	@Override
	public void actionPerformed(ActionEvent e)
	{
		this.model.getView().repaint();
	}
	@Override
	public void keyPressed(KeyEvent e)
	{
		if(e.getKeyChar() == this.model.getUp1())
		{
			this.model.setY1(this.model.getY1() - 1);
		}
		else if(e.getKeyChar() == this.model.getDown1())
		{
			this.model.setY1(this.model.getY1() + 1);
		}
		else if(e.getKeyChar() == this.model.getUp2())
		{
			this.model.setY2(this.model.getY2() - 1);
		}
		else if(e.getKeyChar() == this.model.getDown2())
		{
			this.model.setY2(this.model.getY2() + 1);
		}
	}
	@Override
	public void keyReleased(KeyEvent e)
	{
	}
	@Override
	public void keyTyped(KeyEvent e)
	{
	}
	public Model getModel()
	{
		return this.model;
	}
}
 
public class Main
{
	public static void main(String args[])
	{
		new Model("Tennis de table", "0.1", "YuGiOhJCJ", "19/01/2011", 600, 600, 'z', 's', 'o', 'l');
	}
}
import javax.swing.Timer;
public class Model
{
	private String name;
	private String version;
	private String author;
	private String date;
	private int width;
	private int height;
	private int y1;
	private char up1;
	private char down1;
	private int y2;
	private char up2;
	private char down2;
	private View view;
	private Controller controller;
	public Model(String name, String version, String author, String date, int width, int height, char up1, char down1, char up2, char down2)
	{
		this.name = name;
		this.version = version;
		this.author = author;
		this.date = date;
		this.width = width;
		this.height = height;
		this.y1 = 0;
		this.up1 = up1;
		this.down1 = down1;
		this.y2 = 0;
		this.up2 = up2;
		this.down2 = down2;
		this.view = new View(this);
		this.controller = new Controller(this);
		this.view.addKeyListener(this.controller);
		new Timer(200, this.controller).start();
	}
	public String getName()
	{
		return this.name;
	}
	public String getVersion()
	{
		return this.version;
	}
	public String getAuthor()
	{
		return this.author;
	}
	public String getDate()
	{
		return this.date;
	}
	public int getWidth()
	{
		return this.width;
	}
	public int getHeight()
	{
		return this.height;
	}
	public int getY1()
	{
		return this.y1;
	}
	public char getUp1()
	{
		return this.up1;
	}
	public char getDown1()
	{
		return this.down1;
	}
	public int getY2()
	{
		return this.y2;
	}
	public char getUp2()
	{
		return this.up2;
	}
	public char getDown2()
	{
		return this.down2;
	}
	public void setY1(int y1)
	{
		this.y1 = y1;
	}
	public void setY2(int y2)
	{
		this.y2 = y2;
	}
	public View getView()
	{
		return this.view;
	}
	public Controller getController()
	{
		return this.controller;
	}
}
import javax.swing.JFrame;
import java.awt.Graphics;
import java.awt.Color;
import java.util.Vector;
public class View extends JFrame
{
	private Model model;
	public View(Model model)
	{
		this.model = model;
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setTitle(this.model.getName() + " version " + this.model.getVersion() + " par " + this.model.getAuthor() + " le " + this.model.getDate());
		this.setSize(this.model.getWidth(), this.model.getHeight());
		this.setVisible(true);
	}
	@Override
	public void paint(Graphics g)
	{
		int width = 10;
		int height = 50;
		g.setColor(Color.white);
		g.fillRect(0, 0, this.model.getWidth(), this.model.getHeight());
		g.setColor(Color.black);
		g.fillRect(0, this.model.getY1(), width, height);
		g.fillRect(this.model.getWidth() - width, this.model.getY2(), width, height);
	}
	public Model getModel()
	{
		return this.model;
	}
}

**sinok** · 19/01/2011, 22h30

Dans ce genre de cas il est préférable de déclencher les repaint à intervalles réguliers non discernables par l'oeil humain (genre toutes les n millisecondes), probablement via un Timer Swing. Puis il te faut faire les calculs dans les listeners pour les positions, mais sans déclencher de repaint. La méthode paint se basant sur le résultat des calculs réalisés au moment des events pour dessiner les éléments au bon endroit.

**Ivelios** · 21/01/2011, 13h07

+1 pour sinok
Faire les repaints toutes les 25 ms (par exemple) dans un TimerSwing

Pour aller plus loin : Toutes les 25 ms tu regardes si les éléments dans la fenêtre on bougé -> Si oui : repaint seulement l'élément et pas toutes la fenêtre, il faut utiliser repaint(x,y,w,h);
Et ça pour chaque éléments ( 3 = 1balle + 2raquettes)

Tu peux aller voir ici pour comprendre comment gérer le repaint(x,y,w,h);

**YuGiOhJCJ** · 22/01/2011, 23h55

OK merci pour vos conseils.

Je viens de déclencher les repaint à intervalles réguliers (24 images / secondes) en utilisant un Timer Swing.

Je fais des calculs dans le listener pour ne pas tout redesinner (mais seulement la partie qui a changé et seulement si elle a changé). Ainsi j'appelle repaint(x, y, w, h).

Mais même ainsi, lorsque je déplace une raquette, je remarque qu'elle clignote.

Comment faire pour éviter ce clignotement ?

Voici le nouveau 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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
import java.awt.event.KeyListener;
import java.awt.event.KeyEvent;
import java.awt.event.ActionListener;
import java.awt.event.ActionEvent;
public class Controller implements KeyListener, ActionListener
{
    private Model model;
    public Controller(Model model)
    {
        this.model = model;
    }
    @Override
    public void actionPerformed(ActionEvent e)
    {
        int width = this.model.getRacketWidth();
        int height = this.model.getRacketHeight();
        if(this.model.getY1() != this.model.getY1Old())
        {
            this.model.getView().repaint(0, this.model.getY1(), width, height);
            this.model.getView().repaint(0, this.model.getY1Old(), width, height);
            this.model.setY1Old(this.model.getY1());
        }
        if(this.model.getY2() != this.model.getY2Old())
        {
            this.model.getView().repaint(this.model.getWidth() - width, this.model.getY2(), width, height);
            this.model.getView().repaint(this.model.getWidth() - width, this.model.getY2Old(), width, height);
            this.model.setY2Old(this.model.getY2());
        }
    }
    @Override
    public void keyPressed(KeyEvent e)
    {
        if(e.getKeyChar() == this.model.getUp1())
        {
            this.model.setY1(this.model.getY1() - 1);
        }
        else if(e.getKeyChar() == this.model.getDown1())
        {
            this.model.setY1(this.model.getY1() + 1);
        }
        else if(e.getKeyChar() == this.model.getUp2())
        {
            this.model.setY2(this.model.getY2() - 1);
        }
        else if(e.getKeyChar() == this.model.getDown2())
        {
            this.model.setY2(this.model.getY2() + 1);
        }
    }
    @Override
    public void keyReleased(KeyEvent e)
    {
    }
    @Override
    public void keyTyped(KeyEvent e)
    {
    }
    public Model getModel()
    {
        return this.model;
    }
}

Code :

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

1
2
3
4
5
6
7
8
 
public class Main
{
    public static void main(String args[])
    {
        new Model("Tennis de table", "0.1", "YuGiOhJCJ", "22/01/2011", 600, 600, 24, 'z', 's', 'o', 'l');
    }
}

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
 
import javax.swing.Timer;
public class Model
{
    private String name;
    private String version;
    private String author;
    private String date;
    private int width;
    private int height;
    private int racketWidth;
    private int racketHeight;
    private int fps;
    private int y1;
    private int y1Old;
    private int y2;
    private int y2Old;
    private char up1;
    private char down1;
    private char up2;
    private char down2;
    private Timer timer;
    private View view;
    private Controller controller;
    public Model(String name, String version, String author, String date, int width, int height, int fps, char up1, char down1, char up2, char down2)
    {
        this.name = name;
        this.version = version;
        this.author = author;
        this.date = date;
        this.width = width;
        this.height = height;
        this.racketWidth = 10;
        this.racketHeight = 50;
        this.fps = fps;
        this.y1 = 0;
        this.y1Old = 0;
        this.y2 = 0;
        this.y2Old = 0;
        this.up1 = up1;
        this.down1 = down1;
        this.up2 = up2;
        this.down2 = down2;
        this.view = new View(this);
        this.controller = new Controller(this);
        this.view.addKeyListener(this.controller);
        this.timer = new Timer(1000/fps, this.controller);
        this.timer.start();
    }
    public String getName()
    {
        return this.name;
    }
    public String getVersion()
    {
        return this.version;
    }
    public String getAuthor()
    {
        return this.author;
    }
    public String getDate()
    {
        return this.date;
    }
    public int getWidth()
    {
        return this.width;
    }
    public int getHeight()
    {
        return this.height;
    }
    public int getRacketWidth()
    {
        return this.racketWidth;
    }
    public int getRacketHeight()
    {
        return this.racketHeight;
    }
    public int getY1()
    {
        return this.y1;
    }
    public int getY1Old()
    {
        return this.y1Old;
    }
    public int getY2()
    {
        return this.y2;
    }
    public int getY2Old()
    {
        return this.y2Old;
    }
    public char getUp1()
    {
        return this.up1;
    }
    public char getDown1()
    {
        return this.down1;
    }
    public char getUp2()
    {
        return this.up2;
    }
    public char getDown2()
    {
        return this.down2;
    }
    public void setY1(int y1)
    {
        this.y1 = y1;
    }
    public void setY2(int y2)
    {
        this.y2 = y2;
    }
    public void setY1Old(int y1Old)
    {
        this.y1Old = y1Old;
    }
    public void setY2Old(int y2Old)
    {
        this.y2Old = y2Old;
    }
    public View getView()
    {
        return this.view;
    }
    public Controller getController()
    {
        return this.controller;
    }
}

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
 
import javax.swing.JFrame;
import java.awt.Graphics;
import java.awt.Color;
public class View extends JFrame
{
    private Model model;
    public View(Model model)
    {
        this.model = model;
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        this.setTitle(this.model.getName() + " version " + this.model.getVersion() + " par " + this.model.getAuthor() + " le " + this.model.getDate());
        this.setSize(this.model.getWidth(), this.model.getHeight());
        this.setVisible(true);
    }
    @Override
    public void paint(Graphics g)
    {
        int width = this.model.getRacketWidth();
        int height = this.model.getRacketHeight();
        g.setColor(Color.white);
        g.fillRect(0, 0, this.model.getWidth(), this.model.getHeight());
        g.setColor(Color.black);
        g.fillRect(0, this.model.getY1(), width, height);
        g.fillRect(this.model.getWidth() - width, this.model.getY2(), width, height);
    }
    public Model getModel()
    {
        return this.model;
    }
}

Problème pour redessiner une fenêtre (repaint, clignotement, saccades)

AWT/Swing Java

Discussions similaires

Partager

Partager