animation saccade swing

Version imprimable

Bonjour,

j'ai un problème de saccade lors d'une animation (très simple : une balle qui bouge horizontalement) avec Swing.

Je précise que si je remplace mes JFrame et JPanel par les classes AWT Panel et Frame cela fonctionne correctement (au problème d'absence de double Buffering près).

Ma question est donc comment faire en SWING pour avoir quelquechose de fluide. Je vous poste mon code ci dessous :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
import javax.swing.*;
import java.awt.*;
 
public class CasseBrique {
 
 
	public CasseBrique(){
 
		JFrame frame = new JFrame("Casse brique v1.0");
		frame.setSize(new Dimension(800,600));
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		Jeu jeu = new Jeu(100,100,2,0);
		frame.add(jeu);
		frame.setVisible(true);
		jeu.init();
	}
 
	public static void main(String[] arg){
		new CasseBrique();
	}
}

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
 
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;
 
 
public class Jeu extends JPanel{
 
	private int x,y;
	private int vx,vy;
	private Timer timer;
	ActionListener moveBall;
 
	public Jeu(int x, int y, int vx, int vy){
		this.x=x;
		this.y=y;
		this.vx=vx;
		this.vy=vy;
 
		moveBall = new ActionListener() {
 
			@Override
			public void actionPerformed(ActionEvent e) {
				calculerPosition();
				repaint();
			}
		};
	}
 
	public void paint(Graphics g){
		super.paint(g);
		g.fillOval(x, y, 40, 40);
	}
 
	public void init(){
		this.setBackground(Color.BLACK);
		this.setForeground(Color.BLUE);
		timer= new Timer(40, moveBall);
		timer.start();
	}
 
	private void calculerPosition() {
		if (x<0 ||x>=800-10)
			vx=-vx;
 
		if (y<0 || y>=600-10)
			vy=-vy;
 
		x+=vx;
		y+=vy;
	}
}

Pour ma part c'est fluide.

J'ai fait cependant quelques changements :

Lancement de l'application dans l'EDT.
Quand on appelle repaint() ca demande un re-affichage complet. Ici j'ai rappelle des repaint() localises sur l'ancien et le nouvel emplacement de la boule. Au final la zone de clip du Graphics lors du prochain affichage sera l'union de ces deux zones. A noter que j'ai mis un peu de marge autour ce qui est toujours utile quand on fait de l'anti-alias.
Renomme paint() en paintComponent() (paint() c'est pour l'AWT).
Le rendu se fait desormais en fonction de la zone de clip du Graphics.
Egalement on cree un nouveau Graphics2D a partir de l'ancien, ca permet de modifier sa config ou de lui appliquer des transformations sans que cele ne bousille l'ancien (ou que l'on soit oblige de restorer/annuler ces transformations). La zone de clip du nouveau Graphics est compatible avec celle de l'ancien.

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
 
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package animation;
 
import javax.swing.*;
import java.awt.*;
 
public class CasseBrique {
 
    public CasseBrique() {
 
        JFrame frame = new JFrame("Casse brique v1.0");
        frame.setSize(new Dimension(800, 600));
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        Jeu jeu = new Jeu(100, 100, 2, 0);
        frame.add(jeu);
        frame.setVisible(true);
        jeu.init();
    }
 
    public static void main(String[] arg) {
        // Lancement dans l'EDT.
        SwingUtilities.invokeLater(new Runnable() {
 
            /**
             * {@inheritDoc}
             */
            @Override
            public void run() {
                new CasseBrique();
            }
        });
    }
}

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
 
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package animation;
 
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.*;
 
public class Jeu extends JPanel {
 
    private int x,  y;
    private int vx,  vy;
    private Timer timer;
    ActionListener moveBall;
 
    public Jeu(int x, int y, int vx, int vy) {
        this.x = x;
        this.y = y;
        this.vx = vx;
        this.vy = vy;
 
        moveBall = new ActionListener() {
 
            /**
             * {@inheritDoc}
             */
            @Override
            public void actionPerformed(ActionEvent e) {
                int margin = 2;
                // Effacement de l'ancienne position de la boule.
                repaint(Jeu.this.x - margin, Jeu.this.y - margin, 40 + 2 * margin, 40 + 2 * margin);
                calculerPosition();
                // Affichage du nouvel emplacement de la boule.
                repaint(Jeu.this.x - margin, Jeu.this.y - margin, 40 + 2 * margin, 40 + 2 * margin);
            }
        };
    }
 
    /**
     * {@inheritDoc}
     */
    @Override
    protected void paintComponent(Graphics g) {
        super.paintComponent(g);
        Shape clip = g.getClip();
        if (clip.intersects(x, y, 40, 40)) {
            Graphics2D g2d = (Graphics2D) g.create();
            //g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
            try {
                g2d.fillOval(x, y, 40, 40);
            } finally {
                g2d.dispose();
            }
        }
    }
 
    public void init() {
        this.setBackground(Color.BLACK);
        this.setForeground(Color.BLUE);
        timer = new Timer(40, moveBall);
        timer.start();
    }
 
    private void calculerPosition() {
        if (x < 0 || x >= 800 - 10) {
            vx = -vx;
        }
 
        if (y < 0 || y >= 600 - 10) {
            vy = -vy;
        }
 
        x += vx;
        y += vy;
    }
}

Mais bon, c'etait quand meme fluide avant ces changements.

12/05/2009, 01h26
pmier

Bonjour,

je viens de voir que j'avais une réponse donc tout d'abord merci de t'être donné la peine de tester et pour tes suggestions.

J'ai tout d'abord une question quel est l'intérêt de lancer le code dans l'EDT ?

Sinon en fait j'ai pas mal potassé depuis ce post.

Effectivement j'ai retesté en SWING après avoir fait un détour par AWT et l'animation me parait correct et fluide, j'avais peut être poussé le bouchon un peu loin !

Sinon concernant le code après avoir constaté qu'avec mon programme si j'augmentais la resolution les temps de réponse devenaient désastreux, j'ai effectivement dans un premier temps fait comme toi en ajoutant une zone de clipping. Cela fonctionne très bien.

Le seul truc qui m'a dérangé en fait c'est la structure du code : être obligé de redéfinir la méthode Paint qui ne prends pas de paramètres autre que Graphic, je ne trouve vraiement pas cela pratique quand tu souhaites faire quelque chose d'un peu plus conséquent. Etant donné que je débute la méthode pour écrire mon code élégament m'a peut être échappée mais je n'ai pas trouvé!

La deuxième solution que j'ai testé pour faire du double buffering, c'est la technique du "page flipping". Et si j'ai bien compris comment cela fonctionne, avec le page flipping tu ne peux pas faire du clipping (la je veux bien avoir confirmation) vu que tu as uniquement un pointeur sur ta mémoire vidéo et un pointeur sur ta zone d'affichage et que tu ne fais que switcher les deux. Cela semble ne pas trop mal marcher mais je pense qu'il faut encore que je convertisse le format de mes images au format natif pour atteindre une meilleur vitesse.
De plus je trouve qu'avec cette technique tu n'as pas à redéfinir la méthode paint et que donc l'écriture du code est beaucoup plus aisée.

Voili voilou, si vous pouvez confirmer ou infirmer mes propos cela m'interesserait, étant donné que je n'ai aucune certitude sur ce que je viens d'ennoncer :oops:

En ce qui concerne els images natives il faut procéder de la façon suivante pour en créer une à partir de n'importe quelle image

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
  public static BufferedImage loadCompatibleImage(URL resource) throws IOException {
    BufferedImage image = ImageIO.read(resource);
    GraphicsConfiguration configuration = GraphicsEnvironment.
      getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration();
    BufferedImage compatibleImage = configuration.createCompatibleImage(image.getWidth(),
                                                                        image.getHeight());
    Graphics g = compatibleImage.getGraphics();
    g.drawImage(image, 0, 0, null);
    g.dispose();
    return compatibleImage;
  }

Sinon t'es tu intéressé aux bibliothèques destinées à l'animation telles que le timingframework

12/05/2009, 15h47
pmier

Merci pour le code.

Pour le framework je viens juste de voir la réponse que tu faisais à gifffftane qui semble avoir le même problème que moi et j'allais justement m'y interresser. :lol:
14/05/2009, 23h06
bouye

Ce n'est pas tant qu'elle soit native mais qu'elle est dans le meme format interne que la carte video et donc cela evite une etape de convertion au niveau de l'affichage (et donc l'affichage en est plus rapide).

De maniere generale, mieux vaut rester avec une solution semi-soft (qui peut quand meme avoir une acceleration materielle via OpenGL ou Direct3D) utilisant BufferedImage. Effectuer un changement d'image offscreen peut s'apparenter a du pageflipping.

Sinon cote pure materielle il faut voir du cote de BufferStrategy ou de VolatileImage mais c'est moins evident a mettre en place et il y a des contraintes au niveau de la GUI. Changer le buffer actif dans la strategie est la maniere de faire du pageflipping.
15/05/2009, 21h44
pmier

[code]Effectuer un changement d'image offscreen peut s'apparenter a du pageflipping.
[/quote]

Tu peux préciser ou mieux donner un exemple. Perso il est vrai que j'ai un peu de mal à comprendre toutes les nuances et possibilité. Le seul truc que j'avais cru comprendre c'est que lors du page flipping tu copies tes données directement dans la mémoire vidéo et quand tu as fini tu change juste l'adresse du pointeur "d'affichage".
En gros il me semblait que cela permettait d'économiser la phase recopie depuis la mémoire de l'ordi vers la mémoire vidéo.

J'utilise effectivement un bufferStrategy. Cela ne m'a pas semblé super compliqué mais bon. J'ai également vérifié que ma carte supportait le page flipping donc ca me parrait OK.

Citation:

Sinon cote pure materielle il faut voir du cote de BufferStrategy ou de VolatileImage mais c'est moins evident a mettre en place et il y a des contraintes au niveau de la GUI.

Si des contraintes te viennent à l'esprit sans que tu doives te faire chier à cherche cela m'intéresse.
16/05/2009, 04h29
bouye

Yep ca économise cette étape mais le principe c'est quand même d'avoir un changement complet et instantanné de la scène en passant le pointeur du buffer actif vers un autre, ce qui correspond à remplacer l'image offscreen par une autre.

Alors mes tests datent de la préhistoire (genre aux alentours de 2003) mais à l'époque il me semblait que les couleurs transparentes étaient mal voir pas du tout supportées, que cela ne marchait pas avec n'importe quel composant (donc on perdrait l'abstraction de la surface de dessin, il fallait s'attacher/s'enchainer à une Window ou un Canvas), et qu'il fallait passer en mode plein écran et qu'en plus on perdait pas mal au niveau portabilité car c'était loin d'être supporté de partout. Mais bon, jamais refait depuis.