Image qui clignote

**Droumix** · 24/02/2015, 19h16

Bonjour,
je souhaite créer une application dans laquelle on peut éditer nos propres map de plateforme. Pour tout ce qui est interface j'utilise donc jpanel tout marche bien, mais je veux afficher une image qu'elle suive la sourie et que lorsque que l'on clique elle se place sur la bonne case, un éditeur quoi, niveau code pas de problème j'ai déjà fait ça auparavant mais sans interface.
Lors de chaque repaint() mon image clignote comme si ça affiché l'image puis ré affiché les panels ... mon code :

Main :

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) {
                // TODO Auto-generated method stub
                Editeur e = new Editeur();
        }
 
}

Fenetre :

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
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.FlowLayout;
import java.awt.Graphics;
import java.awt.GridLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.MouseEvent;
import java.awt.event.MouseMotionListener;
import java.util.ArrayList;
 
import javax.swing.BorderFactory;
import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;
import javax.swing.ScrollPaneConstants;
import javax.swing.Timer;
 
 
public class Editeur extends JFrame implements ActionListener, MouseMotionListener{
        int x,y;
        Herbe herbe;
        boolean h = false;
        Timer t;
 
        int width = 1300; int height = 1000;
        int cube = 64; int cubeW = 15; int cubeH = 12;
        int boutonH = 50;
        Dimension boutonD = new Dimension(200, boutonH);
 
        JPanel j  = new JPanel();
        JPanel k  = new JPanel(); //option
        JPanel l  = new JPanel(); //gamepanel
        JPanel l1  = new JPanel();
        JPanel m  = new JPanel(); //selecteur
        JPanel m1  = new JPanel();
 
 
        JScrollPane scroll  = new JScrollPane(m1); //contient panel m1
 
        JButton dirt = new JButton("terre");
        JButton eau = new JButton("eau");
        JButton brique = new JButton("brique");
        JButton caisse = new JButton("caisse");
        JButton zombie = new JButton("zombie");
        JButton ile = new JButton("ile");
        JButton passerelle = new JButton("passerelle");
 
 
        public Editeur(){
                this.setTitle("Editeur");
                this.setSize(width,height);
                this.setVisible(true);
                this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
                this.setResizable(false);
                this.setLocationRelativeTo(null);
 
                init();
                t = new Timer(25, this);
                t.start();
 
                addMouseMotionListener(this);
                setFocusable(true);
        }
 
 
        public void init(){
                //initialisation
                this.setContentPane(j);
                j.setLayout(new BorderLayout());
                k.setLayout(new BorderLayout());
                l.setLayout(new FlowLayout());
                l1.setLayout(new FlowLayout());
                m.setLayout(new FlowLayout());
                m1.setLayout(new FlowLayout());
 
 
                //modification
                j.setBackground(Color.black);
                k.setBackground(Color.black);
                l.setBackground(Color.black);
                m.setBackground(Color.black);
                m1.setBackground(Color.black);
                //l1.setBackground(Color.white);
 
                k.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.white),"Option"));
                m1.setBorder(BorderFactory.createTitledBorder(BorderFactory.createLineBorder(Color.white),"Bloc"));
 
                k.setPreferredSize(new Dimension(width,150));
                l1.setPreferredSize(new Dimension(cube * cubeW , cube * cubeH));
                m1.setPreferredSize(new Dimension(width - (cube * cubeW) - 20 , cube * cubeH));
 
                dirt.setPreferredSize(boutonD);
                eau.setPreferredSize(boutonD);
                zombie.setPreferredSize(boutonD);
                brique.setPreferredSize(boutonD);
                passerelle.setPreferredSize(boutonD);
                ile.setPreferredSize(boutonD);
                caisse.setPreferredSize(boutonD);
 
                dirt.addActionListener(this);
 
                //ajout
                m1.add(dirt); m1.add(eau); m1.add(ile); m1.add(caisse);
                m1.add(zombie); m1.add(brique); m1.add(passerelle);
 
                //mise en page
                j.add(k, BorderLayout.NORTH);
                j.add(l, BorderLayout.WEST);
                l.add(l1, FlowLayout.LEFT);
                j.add(m, BorderLayout.EAST);
                m.add(scroll, FlowLayout.LEFT);
        }
 
        public void paint(Graphics g){
                super.paint(g);
                if(h){
                        herbe.paint(g);
                }
 
        }
        public void actionPerformed(ActionEvent e) {
 
                if(e.getSource() == dirt){
                        herbe = new Herbe(50,500);
                        System.out.println("terre");
                        h = true;
 
                }
                if(e.getSource() == t){
                        repaint();
                }
 
        }
 
 
        public void mouseDragged(MouseEvent arg0) {
 
        }
 
 
        public void mouseMoved(MouseEvent arg0) {
                x = arg0.getX() - (cube/2);
                y = arg0.getY() - (cube/2);
        }
 
 
 
}

L'image :

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
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Rectangle;
 
import javax.swing.ImageIcon;
import javax.swing.JPanel;
 
public class Herbe extends JPanel {
        int x,y ;
        Rectangle box ;
        ImageIcon iherbe = new ImageIcon("image/herbe.png") ;
        Image herbe = iherbe.getImage() ;
 
        public Herbe(int sx, int sy) {
                x = sx ;
                y = sy ;
        }
 
        public void paint(Graphics g){
                super.paint(g);
                Graphics2D g2d = (Graphics2D) g ;
                g2d.drawImage(herbe, x, y, null) ;
        }
 
        public Rectangle getBox(){
                box = new Rectangle(x,y,64,64) ;
                return box ;
        }
}

Je veux donc simplement éviter le clignotement qui est du je pense à cause de Jpanel.
Ps: Je suis débutant en interface graphique il se peut que mon code ne soit pas très très propre ..

Merci d'avance !

**joel.drigo** · 24/02/2015, 20h31

Salut,

C'est ton Timer et le fait que tu dessines directement dans la JFrame qui provoque le clignotement, (le fait que la JFrame doivent se redessiner entièrement toutes les 25ms). A quoi sert ce timer ? Laisse donc SWING redessiner tranquille. Par contre, quand tu changes quelque chose que SWING ne peut pas connaitre, il faut lui dire :

Code :

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

1
2
3
4
5
6
7
 if(e.getSource() == dirt){
                        herbe = new Herbe(50,500);
                        System.out.println("terre");
                        h = true;
                        repaint();
 
                }

Ici, j'ai juste ajouté le repaint(), pour dire j'ai modifié herbe et h, et comme ils sont utilisés dans la méthode paint(), le dessin a forcément changé.

Par contre, tu devrais éviter de gérer tes tuiles par des JPanel, si tu ne les utilises pas en tant que JPanel, ce qui est le cas. Cela fonctionne comme ça, mais il y a plein de chose dans un JPanel, qui vont alourdir ton programme pour pas grand chose.

Si tu fais (j'ai supprimé l'héritage de JPanel et j'ai supprimé l'appel de super.paint() :

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
public class Herbe /*extends JPanel*/ {
        int x,y ;
        Rectangle box ;
        ImageIcon iherbe = new ImageIcon("image/herbe.png") ;
        Image herbe = iherbe.getImage() ;
 
        public Herbe(int sx, int sy) {
                x = sx ;
                y = sy ;
        }
 
        public void paint(Graphics g){
                //super.paint(g);
                Graphics2D g2d = (Graphics2D) g ;
                //g2d.drawImage(herbe, x, y, null) ;
                g2d.fillRect(x, y, 64, 64);
        }
 
        public Rectangle getBox(){
                box = new Rectangle(x,y,64,64) ;
                return box ;
        }
}

tu vas voir que ça continuer à fonctionner sans problème. Il y a juste une petite chose qui change : un JPanel est opaque par défaut. Là ça n'est plus cas. Si tu as besoin de gérer l'opacité de ta tuile, et que tu as des tuiles qui se superposent, il faudra dessiner un rectangle rempli de la couleur de background avant. Mais je pense que tu n'auras jamais de tuiles opaques qui se superposent (il n'y a pas de raison dans une map de jeu).

Par contre, ce serait mieux de faire tout ça dans un JPanel dédié. J'ai un peu près simuler ce que tu as fait en dessinant dans un JPanel au lieu de dessiner dans la JFrame directement

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
public class Demo extends JPanel implements ActionListener {
 
	private Timer timer;
	private Herbe herbe;
 
 
	public Demo() {
		// à décommenter pour du double buffering s'il y a des animations en plus, et en particulier des choses qui se déplacent : super(true); 
		timer = new Timer(25, this);
		timer.start();
 
		herbe = new Herbe(25,25);
	}
 
	@Override
	protected void paintComponent(Graphics g) {
		super.paintComponent(g);
		herbe.paint(g); 
	}
 
	@Override
	public void actionPerformed(ActionEvent e) {
		repaint(); 
	}
 
 
	public static void main(String[] args) {
 
		JFrame frame =new JFrame();
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		JPanel panel = new JPanel(new BorderLayout());
 
		JPanel buttonPanel = new JPanel();
		buttonPanel.setLayout(new BoxLayout(buttonPanel, BoxLayout.Y_AXIS));
		for(int i=0;i<10; i++) {
			buttonPanel.add(new JButton(String.valueOf(i)));
		}
 
		panel.add(buttonPanel, BorderLayout.EAST);
		panel.add(new Demo(), BorderLayout.CENTER);
 
		frame.getContentPane().add( panel );
 
		frame.setSize(Toolkit.getDefaultToolkit().getScreenSize());
		frame.setLocationRelativeTo(null);
		frame.setVisible(true);
 
	}
 
	private class Herbe extends JPanel {
 
		private int x;
		private int y;
 
		public Herbe(int x, int y) {
			this.x=x;
			this.y=y;
		}
 
		@Override
		public void paint(Graphics g) {
			super.paint(g);
			g.fillRect(x, y, 64, 64);
		}
 
	}

Le timer n'est pas plus utile que pour ton programme, mais on voit qu'il ne fait pas clignoter

**Droumix** · 24/02/2015, 20h56

Merci beaucoup je test ça après, je me sers du timer car l'image est sensée suivre le sourie et donc prendre pour coordonné (x,y) j'ai juste oublié de rechanger cela avant de copier/coller.
Encore merci

**joel.drigo** · 24/02/2015, 21h17

Envoyé par Droumix

Merci beaucoup je test ça après, je me sers du timer car l'image est sensée suivre le sourie et donc prendre pour coordonné (x,y) j'ai juste oublié de rechanger cela avant de copier/coller.
Encore merci

Pareil, pas besoin du timer pour ça : il suffit de faire repaint() dans la méthode mouseDragged du MouseMotionListener.

**Droumix** · 25/02/2015, 13h19

Tout fonctionne au mieux, merci beaucoup pour ton aide.

**joel.drigo** · 25/02/2015, 14h34

Une classe paramétrable, Une Interface ou une abstraction, ou les deux.

La classe paramétrable si tu n'as que des images, et qu'on les affiche toujours de la même manière. Un abstraction suffira si tu n'as que des images, mais avec éventuellement quelques variantes, mais une grosse partie en commun (par exemple, le principal du dessin en commun, mais éventuellement, des règles de placement différentes (on pourrait imaginer qu'on ne peut pas placer une route en plein milieu de l'eau, par exemple). Une Interface te permettra d'avoir différentes variantes : une avec Image, une qui dessine directement dans le Graphics2d avec ses méthodes, etc.

Par exemple, la classe paramétrée :

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
public abstract class Tuile {
 
     public static final int TAILLE_TUILE = 64;
 
     private Point position;
     private final int w;
     private final int h;
     private final Image image;
 
     public Tuile(Point position, int w, int h, Image image) {
        setPosition(position);
        this.w=w;
        this.h=h;
        this.image=image;
     }
 
     public Tuile(Point position, int y, int w, int h, ImageIcon image) {
        this(x, y, w, h, mage.getImage());
     }
 
     public void setPosition(Point point) {
         setPosition( point.x, point.y );
     } 
 
     public void setPosition(int x, int y) {
          this.position = new Point(x, y);
     } 
 
      public void paint(Graphics g){
                paint((Graphics2D) g ;
        }
      public void paint(Graphics2D g){
                g.drawImage(image, position.x, position.y, w, h, null) ;
        }
 
        public Rectangle getBox(){
                return new Rectangle(position.x,position.y,w,h) ;
        }
 
 
}

Code :

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

1
2
3
4
5
6
7
8
public class TuileHerbe extends Tuile {
 
        private final static Image IMAGE= new ImageIcon("image/herbe.png").getImage(); // par contre, pour le chargement de l'image, ce serait intéressant de la charger par Class.getResource()/Class.getResourceAsStream());
        public TuileHerbe Position position) {
            super(position, TAILLE_TUILE, TAILLE_TUILE, IMAGE);
        }
 
}

Dans ta classe EditeurPanel :

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
public class EditeurPanel extends JPane {
 
       public static final int HAUTEUR_MAP = 10;
       public static final int LARGEUR_MAP = 10.
 
	private Tuile tuile; 
 
        private Tuile[][] map = new Tuile[HAUTEUR_MAP][LARGEUR_MAP]; // exemple pour une map de 10x10
 
 
        public void setTuile(Tuile tuile) {
               this.tuile = tuile;
               repaint();
        }
 
        public Tuile getTuile() {
               return this.tuile;
        }
 
        public void resetTuile() {
              this.tuile = null;
               repaint(); 
        }
 
        public void bougeTuile(int x, int y) {
              if ( this.tuile!=null ) {
                  this.tuile.setPosition(x,y);
                  repaint();
              }
        }
 
        public void setMap(Tuile tuile, Point position) {
             int x = point.x;
             int y = point.y;
             int i = point.x/Tuile.TAILLE_TUILE;
             int j = point.y/Tuile.TAILLE_TUILE;
             if ( j>=0 && j<map.length && i>=0 && i<map[0].length ) {
 
                int x = i*Tuile.TAILLE_TUILE;
                int y= j*Tuile.TAILLE_TUILE;
                tuile.setPosition( x, y );   
                map[j][i] = tuile;
                repaint();
             }
        }
 
        protected void paintComponent(Graphics g) {
              super.paintComponent(g);
 
              Graphics2D g2d = (Graphics2D)g;
 
              // dessin de la map déjà existante
              for(Tuile[] ligne : map) {
                 for(Tuile tuileMap : ligne) {
                       if ( tuileMap!=null ) {
                            tuileMap.paint(g2d);
                       }
                 }
              }
 
              // dessin de la tuile en cours de dépose
              if( tuile!=null ) {
                  tuile.paint(g2d);
              }
 
        }
 
}

Dans l'actionListener ça peut être :

Code :

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

1
2
3
4
 if(e.getSource() == herbe){
                        tuile = new Herbe(50,500);
                        editeurPanel.setTuile(tuile);
                }

En fait, moi ce que je ferai, c'est utilise une enum :

Code :

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

1
2
3
4
5
public enum TypeTuile {
 
     HERBE, TERRE, EAU
 
}

on fait une méthode pour créer une tuile :

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
protected Tuile creerTuile(TypeTuile type, Point position) {
     Tuile tuile;
     switch(type) {
         case HERBE :
             tuile = new TuileHerbe(position);
             break;
         case TERRE :
             tuile = new TuileTerre(position);
             break;
         case  EAU :
             tuile = new TuileEau(position);
             break;
         case 
     }
    return tuile;
}

Et le Bouton boutonHerbe :

Code :

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

1
2
3
4
5
6
7
8
9
JButton buttonHerbe = new JButton("Herbe");
		buttonHerbe.addActionListener(e-> {
 
			Point p = button.getMousePosition();
			p.x-=Tuile.TAILLE_TUILE/2;
			p.y-=Tuile.TAILLE_TUILE/2;
 
		editeurPanel.setTuile( createTuile( TypeTuile.HERBE, SwingUtilities.convertPointToScreen(p, buttonHerbe) ) );
		}

Et dans le MouseListener (écoutant à EditorPanel ):

Code :

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

1
2
3
4
5
6
7
 
public void mouseClicked(MouseEvent e) {
   if ( tuile!=null ) {
      editeurPanel.setMap(editeurPanel.getTuile(), e.getPoint());  
      editeurPanel.resetTuile();
   }
}

Image qui clignote

AWT/Swing Java

Discussions similaires

Partager

Partager