Discussion :

[matthieu637]

Explication : On affiche plusieurs images les unes collé aux autres, qui forme au final ce qu'on peut appeler une map.
La map est bien plus grande que la zone que recouvre le JPanel.

On recherche donc la méthode qui permet de centrer l'intérieur du JPanel : au lieu de voir la zone en haut à gauche de la map, voir celle d'en bas à gauche.

On pourrait utiliser un JScrollPane mais cela ne nous convient pas, puisque l'image visible doit se déplacer grâce au clic dans la fenêtre ( avec un listener ).

Existe-t-il une telle méthode de déplacer à l'intérieur du JPanel?
Connaissez vous une meilleur méthode pour déplacer un personnage sur une carte?

Merci.

[bouye]

Bon je laisse ici pour le moment mais je pense que je déplacerais dans la section 2D plus tards.

Viou c'est faisable avec un simple changement de repère au moment du rendu via Graphics.translate() ou AffineTransforme.getTranslateInstance(). Après évidement il faut faire des restrictions sur ce qu'on dessine genre il ne sert à rien de dessiner une carte qui n'est pas visible (hors de la zone de vue/bounding box/zone de clip).

Donc, si tes cartes/ta scène sont affichées par des sous-composants au lieu d'être directement rendues par le JPanel lui-même c'est que tu es bon pour revoir toute ton architecture et recoder entièrement l'affichage.

[matthieu637]

La carte est bien affiché par le panneau lui même.
Est ce que

Graphics.translate() ou AffineTransforme.getTranslateInstance().

peut s'appliquer à notre code?
Dont-on recorder la partie qui dessine du JPanel?


Voici le code (très) raccourcis :

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
 
public class FenetreJeu extends JFrame
{ 
	public FenetreJeu() 
     {
       	    setBounds (...,..,..,..) ;
	    Container contenu = getContentPane() ;
	    setVisible(true);
	    panDes = new PaneauJeu() ;
	    contenu.add(panDes);
    }
    private JPanel panDes;
}
 
 
 
class PaneauJeu extends JPanel
{
    public PaneauJeu ()
   {
       // déclaration des tableau concernant les 'tiles'
       // ainsi que le listener qui servira à déplacer la zone visible
   }
 
     public void paintComponent (Graphics g)
     {	   super.paintComponent(g) ;
 
 for (int i = 0 ; i <= nbTile ; i++)
 if (coucheTile[i]==1) g.drawImage(ImTile[i].getImage(), xTile[i], yTile[i],null);
 
 for (int i = 0 ; i <= nbTile ; i++)
 if (coucheTile[i]==2) g.drawImage(ImTile[i].getImage(), xTile[i], yTile[i],null);
 
  ...
 
  }
}

Que pensez vous de cette méthode d'affichage pour une carte?

Lors de nos tests avec une barre de défilement ajouté, il n'y avait aucun problème, la carte s'ouvrait rapidement, le déplacement de la zone visible était rapide.

Donc nous voudrions simuler un déplacement de la barre de défilement lors d'un clic avec un listener sans pour autant qu'elle soit visible pour les joueurs.
( FenetreJeu.barrreDeDefilement.getVerticalScrollBar().setValue(e.getY()*...); )


Je ne sais pas si j'ai étais assez clair ?

Merci de vos réponses.

[bouye]

Ce n'est pas parfait (nottament quand on redimensionne la fenetre) mais cela devrait te donner des idees sur comment faire :

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
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
 
/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */
package test;
 
import java.awt.BorderLayout;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.GraphicsConfiguration;
import java.awt.GraphicsEnvironment;
import java.awt.RenderingHints;
import java.awt.Shape;
import java.awt.event.MouseEvent;
import java.awt.font.LineMetrics;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.SwingUtilities;
import javax.swing.event.MouseInputListener;
 
/**
 *
 * @author fabriceb
 */
public class Scroller extends JPanel implements MouseInputListener {
 
  private static final long serialVersionUID = 1l;
  private int nbTile = 10;
  private BufferedImage[] imTile = new BufferedImage[nbTile];
  private int[] xTile = new int[nbTile];
  private int[] yTile = new int[nbTile];
  int dx, dy;
  int tileWidth, tileHeight;
  int anchorX, anchorY;
  int areaHeight, areaWidth;
 
  public Scroller() throws IOException {
    super();
    BufferedImage imageSrc = ImageIO.read(new File("markup1.jpg"));
    tileWidth = imageSrc.getWidth();
    tileHeight = imageSrc.getHeight();
    // Promote image for some acceleration.
    GraphicsConfiguration gc = GraphicsEnvironment.getLocalGraphicsEnvironment().getDefaultScreenDevice().getDefaultConfiguration();
    BufferedImage image = gc.createCompatibleImage(tileWidth, tileHeight, imageSrc.getTransparency());
    Graphics2D g2d = image.createGraphics();
    g2d.drawImage(imageSrc, 0, 0, null);
    g2d.dispose();
    // Layout tiles.
    int sideX = (int) Math.ceil(Math.sqrt(nbTile));
    int sideY = (int) Math.ceil(nbTile / (float) sideX);
    int index = 0;
    for (int j = 0; j < sideY && index < nbTile; j++) {
      for (int i = 0; i < sideX && index < nbTile; i++, index++) {
        imTile[index] = image;
        xTile[index] = i * tileWidth;
        yTile[index] = j * tileHeight;
      }
    }
    areaWidth = sideX * tileWidth;
    areaHeight = sideY * tileHeight;
    System.out.println("Area:");
    System.out.println("\tTiles: " + nbTile);
    System.out.println("\tLayout: " + sideX + " x " + sideY);
    System.out.println("\tDimension: " + areaWidth + " x " + areaHeight);
    // Set view on area center.
    dx = -(areaWidth - tileWidth) / 2;
    dy = -(areaHeight - tileHeight) / 2;
    //
    setFont(getFont().deriveFont(Font.BOLD, 15f));
    addMouseListener(this);
    addMouseMotionListener(this);
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  protected void paintComponent(Graphics g) {
    super.paintComponent(g);
    Dimension size = getSize();
    Graphics2D g2d = (Graphics2D) g.create();
    try {
      g2d.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, RenderingHints.VALUE_TEXT_ANTIALIAS_ON);
      Font font = g2d.getFont();
      g2d.setColor(Color.BLACK);
      Shape clip = g2d.getClip();
      for (int i = 0; i < nbTile; i++) {
        // Optimised painting.
        // Paint only what is visible.
        if (clip.intersects(dx + xTile[i], dy + yTile[i], imTile[i].getWidth(), imTile[i].getHeight())) {
          g2d.drawImage(imTile[i], dx + xTile[i], dy + yTile[i], null);
          String label = "Tile " + i;
          LineMetrics lineMetrics = font.getLineMetrics(label, g2d.getFontRenderContext());
          g2d.drawString(label, dx + xTile[i], dy + yTile[i] + lineMetrics.getAscent());
        }
        else {
          //System.out.println("Tile " + i + " outside of bounds : not painted.");
        }
      }
      String label = "dx: " + dx + ", dy: " + dy;
      Rectangle2D labelBounds = font.getStringBounds(label, g2d.getFontRenderContext());
      LineMetrics lineMetrics = font.getLineMetrics(label, g2d.getFontRenderContext());
      g2d.setColor(new Color(128, 128, 255, 128));
      g2d.fillRect(0, size.height - (int) labelBounds.getHeight(), (int) labelBounds.getWidth(), (int) labelBounds.getHeight());
      g2d.setColor(Color.BLACK);
      g2d.drawString(label, 0, size.height - (float) labelBounds.getHeight() + lineMetrics.getAscent());
    }
    finally {
      g.dispose();
    }
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  public void mouseClicked(MouseEvent e) {
    if (SwingUtilities.isMiddleMouseButton(e)) {
      dx = -(areaWidth - tileWidth) / 2;
      dy = -(areaHeight - tileHeight) / 2;
      repaint();
    }
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  public void mousePressed(MouseEvent e) {
    anchorX = e.getX();
    anchorY = e.getY();
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  public void mouseReleased(MouseEvent e) {
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  public void mouseEntered(MouseEvent e) {
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  public void mouseExited(MouseEvent e) {
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  public void mouseDragged(MouseEvent e) {
    Dimension size = getSize();
    int dx = this.dx + e.getX() - anchorX;
    int dy = this.dy + e.getY() - anchorY;
    dx = Math.min(dx, 0);
    dx = Math.max(dx, -(areaWidth - size.width));
    dy = Math.min(dy, 0);
    dy = Math.max(dy, -(areaHeight - size.height));
    anchorX = e.getX();
    anchorY = e.getY();
    this.dx = dx;
    this.dy = dy;
    repaint();
  }
 
  /** 
   * {@inheritDoc}
   */
  @Override
  public void mouseMoved(MouseEvent e) {
  }
 
  /**
   * @param args the command line arguments
   */
  public static void main(String[] args) {
    // TODO code application logic here
    SwingUtilities.invokeLater(new Runnable() {
 
      /** 
       * {@inheritDoc}
       */
      @Override
      public void run() {
        try {
          Scroller scroller = new Scroller();
          JFrame frame = new JFrame("Test");
          frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
          frame.setLayout(new BorderLayout());
          frame.add(scroller, BorderLayout.CENTER);
          frame.setSize(500, 500);
          frame.setLocationRelativeTo(null);
          frame.setVisible(true);
        }
        catch (Exception e) {
          e.printStackTrace();
          JOptionPane.showMessageDialog(null, e.getMessage(), "Error", JOptionPane.ERROR_MESSAGE);
        }
      }
    });
  }
}

Je deplace le sujet dans le forum 2D.

[matthieu637]

Merci pour cette réponse c'est partiellement ce que je voulais faire sauf qu'à la place d'avoir une image qui bouge en MouseDragged il faudrait qu'elle bouge grâce à un MousePresse : donc un centre du repère qui suit les coordonnées du clic de la souris.

J'utilise donc la même méthode de changement de repère que dans ton code : ( j'ai une fenêtre de 1024*738 se qui explique le 512 et le 369)

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
 
//---A l'intérieur du constructeur
addMouseListener (new MouseAdapter()
    { public void mousePressed (MouseEvent e)
      {
    	int x=e.getX();
    	int y=e.getY();
 
    	dx = x-512 ;
    	dy = -y+369 ;
repaint();
    }});
//---
protected void paintComponent (Graphics g)
   {
	   super.paintComponent(g) ;
              Graphics2D g2d = (Graphics2D) g.create();
	      g2d.setColor(Color.BLACK);
 
 
	      for (int i = 0; i < nbTile; i++) 
	      {
 g2d.drawImage(ImTile[i].getImage(),  xTile[i] - dx  , yTile[i] +  dy , null);
	        xTile[i] = xTile[i] - dx;
	        yTile[i] = yTile[i] +  dy;
 
	      }

Cela fonctionne correctement le centre du nouveau repère est sur le point cliqué, néanmoins le déplacement vers ce point est instantané.

Je cherche donc à rendre le déplacement 'coulissant' comme dans ton code mais avec un clic et non un Dragged.
J'ai tenté plusieurs façon mais j'ai à chaque fois un problème de repaint() à l'intérieur de la boucle.
Voici un exemple ou le repaint() ne fonctionne pas :

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
 
    addMouseListener (new MouseAdapter()
    { public void mousePressed (MouseEvent e)
      {
    	int x=e.getX();           dx = x-512 ;
    	int y=e.getY();           dy = -y+369 ;
 
        int nbr = 10;
 
		int dx2=dx/nbr;
		int dy2=dy/nbr;
 
		dx=dx/nbr;
		dy=dy/nbr;
    	for (int i=0;i<nbr;i++)
    	{
    	         dx=dx+(dx2);	
    	         dy=dy+(dy2);
    		 repaint();
    	}
}});

ou alors :

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
 
    addMouseListener (new MouseAdapter()
    { public void mousePressed (MouseEvent e)
      {
    	int x=e.getX();
    	int y=e.getY();
 
    	dx = x-512 ;
    	dy = -y+369 ;
 
    	while (x>512 | x<512)
        {
    		if (x<512) {dx--;x++;repaint();}
                if (x>512) {dx++;x--;repaint();}
 
        }
    	while (y>369 | y<369)
        {
    		if (y<369) {dy++;y++;repaint();}
                if (y>369) {dy--;y--;repaint();}
 
        }
}});

Comment faire?

[bouye]

Ok, ce n'est pas comme ca qu'il faut faire : en effet il n'y a aucun raffraichisssement durant le traitement de l'evenement de la souris (rappel l'EDT est partage a la fois entre le rendu graphique et la propagation des evenements). Mais sinon globalement l'idee etait correcte. => Tu dois donc lancer un Timer qui se chargera de faire l'animation (penser egalement a faire des pauses qui sont tout simplement gerees par le delai de repetition du timer).

[matthieu637]

Effectivement merci voilà ce que j'ai rajouté :

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
 
//(On rajoute l'implementation Runnable au JPanel)
//--Constructeur
    Thread t = new Thread (this);
    t.start();
//--
 
public void run() 
{
	    while (true) 
	    {
	      repaint();
	      try {Thread.sleep(50);}
	      catch (InterruptedException e) {System.out.println(e);
	    }
}

Il me reste encore quelques questions/problèmes :
-à la place du Thread.sleep(50); qui ne varie pas en fonction de la puissance du PC y a t-il un moyen pour déterminer un nombre 'potable' pour ne pas demander trop de capacité à un ordinateur qui en a peu?

( long time = System.currentTimeMillis();
Thread.sleep(Math.max(0,time - System.currentTimeMillis()));
Cette méthode est-elle efficace ? )

-maintenant que le centre du repère se déplace il ne s'arrête plus à cause du Thread qui repaint() du à ces lignes (dans la méthode paintComponent) :

Code :

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

1
2
3
 
	        xTile[i] = xTile[i] - dx;
	        yTile[i] = yTile[i] +  dy;

dx et dy n'étant pas nuls le déplacement continue.
Je ne peux pas rajouter un
dx=0;dy=0;
à la fin de la méthode paintComponent car les déplacements se font à nouveau instantanément.

[bouye]

Mais Lol...
Il ne te sert en gros a rien de faire une Thread de reaffichace continue (le contenu de la carte ne change pas assez souvent pour cela), contente-toi donc de lancer une Thread uniquement en cas de scroll et fait donc ton ton deplacement dans ta Thread (pas uniquement un appel a repaint()) !
Et sinon... utilise plutot un Timer Swing ca te causera moins de soucis futurs............................