[AWT/SWING] Déplacer une image sur plusieurs JPanel

Version imprimable

07/09/2010, 14h16
Dark_TeToN

[AWT/SWING] Déplacer une image sur plusieurs JPanel

Bonjour à tous,

Alors voilà j'ai quelques notions en Java (donc je ne débute pas) mais je suis loin d'être un expert.

Alors avant toute chose, je me suis lancé dans un projet pour le moins "ambitieux", à savoir je souhaite programmer un petit logiciel en JAVA qui, pour l'instant, permet de jouer aux échecs, 2 joueurs sur le même PC.

Mon souci est que j'ai de très faibles notions en ce qui concerne l'évènementiel, et je suis un peu "perdu".

Alors voilà, j'ai une JFrame contenant un JPanel (qui en fait contient tout le futur contenu de la frame).
J'ai appliqué un BorderLayout à ce JPanel, et au centre se trouve un autre JPanel avec un GridLayout (pour faire donc les cases).

Donc chaque case est une Objet Case2D héritant d'un JPanel, Case2D a un attribut de type Image qui vaut soit "null", soit l'image d'une pièce.

Je souhaite que lorsque je drag & drop une pièce (donc une image) elle se déplace avec ma souris. J'ai mis un MouseMotionListener et le souci est que lorsque je l'applique à chaque objet Case2D, l'image se déplace mais reste dans les limites du JPanel, et lorsque je l'applique à la JFrame, mes cases se colorient en noir en fonction du mouvement de ma souris.

Je pense qu'il faut qu'il y ait un listener ET pour la JFrame ET pour les Case2D, mais ce concept étant nouveau pour moi, je ne vois pas comment faire en sorte que les images se déplacent dans la JFrame sans tenir compte du JPanel qui les affiche.

Je suis ouvert à toutes les suggestions.

Merci d'avance ^^

Pour faire un jeu mieux vaut considérer l'optique composant unique pour le plateau de jeu.

Au lieu d'un JPanel contenant un GridLayout de JPanel, il est conseillé d'utiliser un unique JPanel qui s'occupe de dessiner le jeu cia une redéfinition le ma méthode paintComponent.

Petit exemple d'échiquier:

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
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
191
192
193
194
195
196
 
 
package java2d;
 
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.Rectangle2D;
 
import javax.swing.JButton;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.JScrollPane;
 
public class ChessBoard extends JComponent {
 
    private int nbOfCellsX;
    private int nbOfCellsY;
    private int cellWidth;
    private int cellHeight;
    private Color lightCellBackground = Color.white;
    private Color darkCellBackground = Color.black;
 
    public ChessBoard(int nbOfCellsX, int nbOfCellsY, int cellWidth, int cellHeight) {
        super();
        this.nbOfCellsX = nbOfCellsX;
        this.nbOfCellsY = nbOfCellsY;
        this.cellWidth = cellWidth;
        this.cellHeight = cellHeight;
    }
 
    @Override
    public boolean isOpaque() {
        return true;
    }
 
    private void computePreferredSize() {
        int xLength = nbOfCellsX * cellWidth;
        int yLength = nbOfCellsY * cellHeight;
        Dimension oldSize = getPreferredSize();
        Dimension newSize = new Dimension(xLength, yLength);
        setPreferredSize(newSize);
        firePropertyChange("preferredSize", oldSize, newSize);
        revalidate();
        repaint();
    }
 
    @Override
    protected void paintComponent(Graphics g) {
 
        Rectangle2D rec = new Rectangle2D.Double(0, 0, cellWidth, cellHeight);
        for (int i = 0; i < nbOfCellsY; i++) {
            Graphics2D g2d = (Graphics2D) g.create();
            g2d.translate(0, i * cellHeight);
            for (int j = 0; j < nbOfCellsX; j++) {
                if ((i + j) % 2 == 0) {
                    g2d.setPaint(darkCellBackground);
                } else {
                    g2d.setPaint(lightCellBackground);
                }
                g2d.fill(rec);
                g2d.translate(cellWidth, 0);
            }
        }
 
        super.paintComponent(g);
    }
 
    /**
     * @return the nbOfCellsX
     */
    public int getNbOfCellsX() {
        return nbOfCellsX;
    }
 
    /**
     * @param nbOfCellsX
     *            the nbOfCellsX to set
     */
    public void setNbOfCellsX(int nbOfCellsX) {
        this.nbOfCellsX = nbOfCellsX;
        computePreferredSize();
    }
 
    /**
     * @return the nbOfCellsY
     */
    public int getNbOfCellsY() {
        return nbOfCellsY;
    }
 
    /**
     * @param nbOfCellsY
     *            the nbOfCellsY to set
     */
    public void setNbOfCellsY(int nbOfCellsY) {
        this.nbOfCellsY = nbOfCellsY;
        computePreferredSize();
    }
 
    /**
     * @return the cellWidth
     */
    public int getCellWidth() {
        return cellWidth;
    }
 
    /**
     * @param cellWidth
     *            the cellWidth to set
     */
    public void setCellWidth(int cellWidth) {
        this.cellWidth = cellWidth;
        computePreferredSize();
    }
 
    /**
     * @return the cellHeight
     */
    public int getCellHeight() {
        return cellHeight;
    }
 
    /**
     * @param cellHeight
     *            the cellHeight to set
     */
    public void setCellHeight(int cellHeight) {
        this.cellHeight = cellHeight;
        computePreferredSize();
    }
 
    /**
     * @return the lightCellBackground
     */
    public Color getLightCellBackground() {
        return lightCellBackground;
    }
 
    /**
     * @param lightCellBackground
     *            the lightCellBackground to set
     */
    public void setLightCellBackground(Color lightCellBackground) {
        this.lightCellBackground = lightCellBackground;
        repaint();
    }
 
    /**
     * @return the darkCellBackground
     */
    public Color getDarkCellBackground() {
        return darkCellBackground;
    }
 
    /**
     * @param darkCellBackground
     *            the darkCellBackground to set
     */
    public void setDarkCellBackground(Color darkCellBackground) {
        this.darkCellBackground = darkCellBackground;
        repaint();
    }
 
    /**
     * @param args
     */
    public static void main(String[] args) {
        // TODO Auto-generated method stub
 
        JFrame f = new JFrame();
        final ChessBoard b = new ChessBoard(10, 10, 30, 30);
        JScrollPane p = new JScrollPane(b);
        p.getVerticalScrollBar().setUnitIncrement(5);
        f.add(p);
        JButton button = new JButton("Change number");
        button.addActionListener(new ActionListener() {
 
            @Override
            public void actionPerformed(ActionEvent e) {
                b.setNbOfCellsX(b.getNbOfCellsX() + 2);
                b.setNbOfCellsY(b.getNbOfCellsY() + 2);
            }
        });
        f.add(button, BorderLayout.SOUTH);
        f.setSize(600, 400);
        f.setLocationRelativeTo(null);
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.setVisible(true);
    }
 
}

Il te reste à définir un modèle correct, dessiner les pions en fonction du modèle, et la gestion du D&D se fera au moyen de deux Listeners: un MouseListener et un MouseMotionListener.

Voilà et c'est quand même vachement plus simple que la version à N composants.

07/09/2010, 15h15
Dark_TeToN

Alors j'ai regardé ton pti truc, alors je conçois qu'effectivement c'est plus simple de faire ainsi, mais personnellement je l'ai déjà fait pour faire un jeu du puissance 4 il y a quelques années, et tout ce que j'en retiens à l'heure actuelle c'est que cela reste brouillon comme type de programmation.

Je ne critique pas non plus, car au moins ton système est fonctionnel mais bon, j'ai plus l'impression en faisant comme ça de faire du rafistolage...

Un de mes profs m'a conseillé de faire ainsi, alors j'aimerai essayer de rester dedans, pas que je déplore ton archi, mais bon, je voulais faire un truc "relativement" propre.

Mon problème ne vient pas de l'archi mais de la technique, je souhaite juste que lorsque je déplace mon image, elle ne reste pas dans le JPanel. Alors est-ce que cela est possible ? Sinon en effet je changerai mon architecture mais à priori, cela doit être possible...

J'attends des solutions...

Merci d'avance
07/09/2010, 16h05
slim_java

Salut,

Citation:

Envoyé par Dark_TeToN

je souhaite juste que lorsque je déplace mon image, elle ne reste pas dans le JPanel. Alors est-ce que cela est possible ?

tu peux faire un truc comme un copier/coller : suite à un mouseDragged sur un panneau , tu récupère l'image à déplacer et au moment du relased , tu ajoute cette image au nouveau panneau

La solution se basant sur des JPanel et un nombre incommensurable de Listeners de de Hacks pour pouvoir faire un Drag And Drop correct t'amènera a produire un code lourd, bug prone. Pour deux ou trois composants ça doit être encore jouable, au delà c'est le bordel et les bugd assurés, avec un code de type imbittable.

Je te mets au défit de trouver le moindre jeu java digne de ce nom entièrement développé avec des composants placés via un layout. C'est ingérable. Les composants et layouts sont prévus pour réaliser des interfaces graphiques de type gestion, bref d'organiser une interface au niveau macro (c'est à dire définition des zones de l'interfaces, genre panel de menu/arbre à gauche, header, footer, contenu central & cie et la création de formulaires avec tout ce qui est champ textes, listes déroulantes &cie).

De plus en utilisant des composants Swing tu vas embarquer tout un paquet de méthodes, fonctionnalités qui te sont parfaitement inutiles, voire nuisibles dans certains cas extrêmes.

En l'occurence ton prof n'a probablement jamais réalisé de jeu en Swing.

Pour faire une architecture propre voilà ce que je proposerait.

Une interface Piece définissant les méthodes de base de base d'une pièce (position, liste de des déplacements possible, couleur et ainsi de suite)

Une Classe abstraite AbstractPiece permettant d'implémenter les fonctionnalités communes de l'interface Pièce.

Une classe par type de pièce: Pïon, Tour, Fou, Cavalier, Roi, Reine implémentant les déplacements possibles pour une pièce par rapport à une case de donnée.

Une classe EchiquierModel contenant une liste de Pieces par joueur, le nombre de cases, l'agencement noir/blanc des cases, gérant les positions initales des pièces (si possible en faire une interface et utiliser une implémentation, ça pourrait être réutilisable pour d'autres jeux par exemple des dames)

Une interface PiecePainter qui servira de base à un ensemble de classe servant à dessiner une pièce à un endroit précis. Cette interface devra posséder à minima deux méthodes: une méthode renvoyant la classe (genre getTargetClass) que ce painter est censé afficher (donc Pion.class, Roi.class, Fou.class, Tour.class suivant les cas) ainsi qu'une méthode drawPiece(Graphics g, boolean floating) permettant de dessiner la pièces dans une cellule (si floating à false) ou directement à l'origine du repère (faire en sorte que l'origine des graphics fassent correspondre le coin haut de la case avec un 0,0).

Bien sur une classe par pièce implémentant l'interface PiecePainter (donc RoiPainter qui reverra Roi.class pour le getClass et dessinera l'icone du roi au bon endroit).

Une classe EchiquierView qui possède une référence sur un EchiquierModel, plus une map de contenant donc un couple <Class,PiecePainter> par type de Piece a afficher (retournée par le getTargetClass du painter en key) par type de pièce à afficher.

Cette classe EchiquierView redéfinira la méthode paintComponent pour réaliser le dessin de la façon plus ou moins suivante:
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 @Override protected void paintComponent(Graphics g) { super.paintComponent(g); //On definit un rectangle de la taille des cases; Rectangle2D rec = new Rectangle2D.Double(0, 0, cellWidth, cellHeight); //Dessin des cases une par une for (int i = 0; i < echiquier.getVerticalCellCount(); i++) { //On crée une copie temporaire des graphics Graphics2D g2d = (Graphics2D) g.create(); //On deplace l'origine des graphics à la ligne en court g2d.translate(0, i * cellHeight); //On boucle sur les colonnes for (int j = 0; j < echiquier.getHorizontalCellCount(); j++) { //On choisit le background en fonction du modèle puis on dessine la case if (echiquier.isDarkCell(j,i)) { g2d.setPaint(darkCellBackground); } else { g2d.setPaint(lightCellBackground); } g2d.fill(rec); //On récupère la pièce eventuellement située dans la cellule Piece p = echiquier.getPieceAt(j,i); //On recupere le painter correspondant a la piece PiecePainter painter = painterMap.get(p.getClass()); //moving piece est une variable contenant la piece en cours de deplacement if(p != this.movingPiece) { p.drawPiece(g2d,false); } //On deplace l'origine des graphics sur la case suivante g2d.translate(cellWidth, 0); } //On fige les graphics temporaires g2d.dispose(); } //Gestion de la pièce en cours de deplacement le cas échéant if(movingPiece != null ) { Graphics2D g2d = (Graphics2D) g.create(); g2d.translate(mouseX,MouseY); PiecePainter painter = painterMap.get(movingPiece.getClass()); if(p != this.movingPiece) { movingPiece.drawPiece(g2d,true); } g2d.dispose(); } }
Pour moi ceci correspond à une archi à peu près propre et pas trop mal foutue.

07/09/2010, 17h04
Dark_TeToN

Ok merci pour tes conseils... Je ne pensais pas que la méthode que je voulais faire serais aussi galère... Mais tu as des arguments de poids !!!
Je vais étudier un peu plus dans la soirée ton modèle.
Mais donc dans ce cas le déplacement me parait beaucoup plus simple !

Merci beaucoup !
07/09/2010, 17h41
Ivelios

Je viens juste rajouter mon avis pour appuyer sinok.
Pour mon jeu je ne suis pas allé aussi loin dans le détail.
Un interface Drawable avec méthode paint(graphics g) & getRectangle().
Un classe Joueur implementant Drawable.
Et un JPanel qui repaint(joueur.getRectangle()); et qui dessine joueur.paint(g);
Plus qu'à modifier les attributs de joueur (posX,posY) pour le faire bouger
08/09/2010, 09h10
Dark_TeToN

Merci pour vos conseils ^^

On va partir là-dessus ^^