Faire un pion

Version imprimable

12/11/2013, 13h33
Garywald

Faire un pion

bonjour à toutes et tous,

Je suis sur la conception d'un Monopoly et je bloque sur la conception des pions de jeu.

Mon plateau est un tableau de Jpanel et j'aimerai pouvoir mettre une image représentative du pion sur le Jpanel correspondant à la case où est situé le pion.

J'avais pensé à un Jbutton mais je n'ai pas besoin d'interagir avec le pion, juste l'afficher SUR le JPanel.
J'ai besoin d'une orientation, d'un conseil sur ce qui s'offre à moi comme opportunité pour la conception de mon jeton.
(un JLabel s'intègre dans le JPanel et je ne souhaite pas intégré le pion dans une case, juste l'afficher au dessus.)

Je vous remercie d'avance de vos conseils.

Salut,

Pourquoi ne pas simplement utiliser une image ?

Tu peux l'afficher simplement dans un JLabel par exemple avec un truc du genre.
Code:

1 2 3 4 5 BufferedImage image = ImageIO.read( /* File, URL ou InputStream */ ); ImageIcon icon = new ImageIcon(image); JLabel label = new JLabel(); label.setIcon(icon);

12/11/2013, 14h12
Garywald

Merci Nico02 pour ta réponse.

En fait, mes JPanels (mes cases) sont limitées et je ne peux plus rien rajouter dedans.
Et de fait, je ne crois pas qu'il soit possible de mettre un JLabel au dessus d'un JPanel, du genre superposition.

Je comprends pas très bien tes restriction mais bon..

Tu as une autre solution pour arriver à tes fin c'est d'utiliser une classe qui hérite de JPanel et qui va se charger d'afficher une image.

Code extrait de l’excellent tuto de J.M Doudoux

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
 
 
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Panel;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;
 
/**
 * Composant qui affiche une image
 */ 
public class AfficheImage extends Panel {
 
  private static final long serialVersionUID = 1L;
  private BufferedImage image;
 
  public AfficheImage(String nomFichier) {
 
    try {
      image = ImageIO.read(new File(nomFichier));
      this.setPreferredSize(new Dimension(image.getWidth(),
        image.getHeight()));
    } catch (IOException ie) {
      ie.printStackTrace();
    }
  }
 
  public void paint(Graphics g) {
    g.drawImage(image, 0, 0, null);
  }
}

Que tu utilises

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
 
import java.awt.BorderLayout;
import javax.swing.JFrame;
 
public class MonApp extends JFrame {
 
  private static final long serialVersionUID = 1L;
 
  public MonApp(String titre) {
    super(titre);
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    init();
  }
 
  private void init()
  {
    AfficheImage afficheImage = new AfficheImage("Duke.gif");
    this.setLayout(new BorderLayout());
    this.add(afficheImage, BorderLayout.CENTER);
    this.pack();
  }
 
  public static void main(String[] args) {
    MonApp app = new MonApp("Afficher image");
    app.setVisible(true);
  }
}

A souligner que cette méthode ne marche pas si les images sont dans un JAR.

Je te laisse lire le tuto pour plus d'infos ;)

Cdt.

Alors j'ai tester le code et ça ne marche pas très bien.
Je transfert mon code et une image de mon plateau actuellement. (c'est le début, indulgence svp ^^)
http://nsa34.casimages.com/img/2013/...2219582909.jpg

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
package view;
 
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Panel;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
 
import javax.imageio.ImageIO;
 
public class AfficheImage extends Panel{
	private static final long serialVersionUID = 1L;
	  private BufferedImage image;
 
	  public AfficheImage(String nomFichier) {
 
	    try {
	      image = ImageIO.read(new File(nomFichier));
	      this.setPreferredSize(new Dimension(/*image.getWidth(),
	        image.getHeight()*/30,30));
	    } catch (IOException ie) {
	      ie.printStackTrace();
	    }
	  }
	  public void paint(Graphics g) {
	    g.drawImage(image, 0, 0, null);
	  }
}

et pour ma classe de dessin, je met juste le bout qui nous interesse :

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
int debut=0;
		int fin = debut+9;
 
		//print 9 cell and see if we pass the go
			for(int i=debut;i<fin;i++){
				if (i>39){
					i=0;
					fin = fin-40;
				}
				ligne.add(make_cell(Board.map[i]));
				for(Player p : listPlayer){
					if(p.getPlace()==Board.map[i]){
						drawImage();
					}
				}
			}
 
		//add Panel to the game.	
		game.add(action);	
		game.add(ligne);
		game.add(log);
		//we add the board to the content Pane
		this.setContentPane(game);
		this.setTitle("Game");//Title of the Frame
		this.setExtendedState(JFrame.MAXIMIZED_BOTH);
		this.setLocationRelativeTo(null);//center the frame
		this.setVisible(true);//Set the frame visible
		this.setDefaultCloseOperation(EXIT_ON_CLOSE);
	}
	private void drawImage()
	  {
	    AfficheImage afficheImage = new AfficheImage("img/go.jpg");
	    this.setLayout(new BorderLayout());
	    this.add(afficheImage, BorderLayout.CENTER);
	    this.pack();
	  }

12/11/2013, 16h37
Nico02

C'est quoi qui marche pas :aie: ?
12/11/2013, 16h43
Garywald

Ah oui désolé ^^ J'ai oublié de spécifier que l'image a été prise avec le changement opéré dans le code.
J'ai mis le joueur 1 en position départ et le joueur 2 une case après. Et la il n'y a aucune image qui apparait ni en depart, ni en case 1.

Pourtant j'ai bien mis le code que tu m'as donné dans la méthode drawImage().

Pourquoi le pion ne se dessine t il pas sur l'image départ ou la case suivante?

C'est vraiment le problème de superposition des éléments contre lequel je me bats.

Bon peut être que la seule solution acceptable reste le bouton...

C'est moche mais voila :

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
JPanel ligne = new JPanel();
ligne.setLayout(new GridBagLayout());
GridBagConstraints c = new GridBagConstraints();
int debut=0;
int fin = debut+9;
//print 9 cell and see if we pass the go
	for(int i=debut;i<fin;i++){
		if (i>39){
			i=0;
			fin = fin-40;
		}
		c.gridx=i;
		c.gridy=0;
		ligne.add(make_cell(Board.map[i]),c);
		for(Player p : listPlayer){
 
	        	if(p.getPlace()==Board.map[i]){
				JButton pio2 = new JButton(new ImageIcon(new ImageIcon("img/cross.png").getImage().getScaledInstance(20,20, Image.SCALE_DEFAULT)));
				System.out.println(i);
				c.gridx=i;
				ligne.add(pio2,c);
			}
		}
	}

Il faut cependant savoir que le bouton n'apparait que lorsque je passe dessus avec la souris... Ca c'est embetant.

13/11/2013, 14h49
sinok

Oublie les JPanels pour faire des jeux. Tu vas misérer pour la gestion des inputs, drag & drop, animations, placement et autres

Il est recommandé de plutôt tout dessiner à la mimine sur un unique JComponent.
Genre tu te crées une classe faisant le rendu d'une case sur un Graphics, puis une classe Faisant les rendus supplémentaires (genre pions & cie)

Et tu agences tout ça dans ton JComponent (redéfinition de la méthode paintComponent en utilisant les classes ded rendu crées avant et des translations).
13/11/2013, 18h05
Garywald

Bonjour Sinok, ça m'a l'air bien compliqué tout cela.

Je n'ai jamais vraiment dessiner de composant. Encore moins tout un plateau de jeu.

Comment ferais je pour savoir où est situé un pion? Ou encore comment savoir quelle case a été achetée par quel joueur...etc.

Rien que le dessin du plateau m'a l'air impressionnant.

Bon je suis en train de tester du coup, et on dirait qu'il y aura des problèmes d'affichage... Je vous poste ça en mode test :

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
 
package view;
 
import javax.swing.JFrame;
import javax.swing.JPanel;
 
public class Fenetre extends JFrame{
	Test []tab;
	public Fenetre() {
 
		for(int i = 0; i<tab.length;i++){
			tab[i]=new Test();
		}
 
		this.setTitle("Essai");
		this.setSize(900, 900);
		this.setLocationRelativeTo(null);               
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setContentPane(new Test());
		this.setVisible(true);
	}
	public static void main(String[] args) {
 
	}
}

et mon dessins :ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
package view;
 
import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JPanel;
 
public class Test extends JPanel{	
	public void paintComponent(Graphics g){
		g.drawRect(0,0, 90, 150);
		g.setColor(Color.pink);
		g.fillRect(0,0, 89, 30);
		g.setColor(Color.black);
		g.drawLine(0, 31, 110, 51);
		g.drawString("Rue de la paix", 2, 38);
		g.drawString("£500",45,150);
	}
}

14/11/2013, 14h45
Garywald

Bonjour, En fait, en rapport avec l'exemple ci dessus qui je précise, ne marche pas, dois je vraiment passer par de simple rectangle dessiné pour faire un plateau de monopoly ou il y a plus simple et plus utile? Je suis débutant en graphisme Java et j'ai vraiment besoin de votre aide si vous avez un peu de temps.
Thanks
14/11/2013, 18h05
dinobogan

Tu devrais utiliser une BufferedImage, que tu redessines en partie ou entièrement selon tes besoins.
Dans la méthode surcharger paintComponent de ton JPanel de dessin, tu te contente de dessiner la BufferedImage.
C'est la méthode "standard" pour afficher le genre de jeu que tu souhaites développer.
14/11/2013, 18h30
Garywald

Je vais aller un peu plus me renseigner sur la BufferedImage.
Merci pour ta réponse dinobogan.

Voici en attendant ce que j'ai fait ... c'est moche mais c'est pour demander comment je peux faire autrement :
http://nsa33.casimages.com/img/2013/...3421646324.png

J'ai fait une classe qui extends JPanel et créé une case.J'ai dans une autre classe qui étant JFrame appelé cette fameuse classe (dans une boucle ) et j'ai utilisé setBounds pour les placer... C'est pas génial...

Cependant je ne vois pas du tout comment je pourrais savoir sur quelle case de Monopoly serait un pion donné par exemple. Même en utilisant les coordonnées des cases ce serait dur car toutes les cases ne font pas la même taille : exemple avec la case depart qui est plus large qu'une case chance.

Lol la galère, ça n'affiche plus rien, je vous transfert le code :

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
 
package view;
 
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.image.BufferedImage;
 
import javax.swing.JFrame;
import javax.swing.JPanel;
 
public class Test extends JPanel{	
	public Test() {
	}
	public void paintComponent(Graphics g){
		Image img = new BufferedImage(90,150,BufferedImage.TYPE_INT_RGB);
		Graphics2D g2d = (Graphics2D)img.getGraphics();
		g2d.drawRect(0,0, 90, 150);
		g2d.setColor(Color.pink);
		g2d.fillRect(1,1, 89, 30);
		g2d.setColor(Color.black);
		g2d.drawLine(0, 31, 90, 31);
		g2d.drawString("Rue de la paix", 2, 21);
		g2d.drawString("£500",40,145);
	}
	public static void main(String[] args) {
		JFrame f = new JFrame();
		f.setLayout(null);
		Test t = new Test();
		f.add(t);
		f.setTitle("Essai");
		f.setSize(800, 300);
		f.setLocationRelativeTo(null);               
		f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		f.setVisible(true);
	}
}

14/11/2013, 18h58
plegat

Salut,

Jète un oeil à ce tuto que j'ai fait concernant Java2D (ce n'est pas pour un plateau de jeu, mais ça peut s'adapter)

Personnellement, je ferai:
- le plateau de jeu avec une BufferedImage
- les pions, soit dessinés via rectangle ou cercle ou autre si tu fais quelque chose de simple, soit BufferedImage si c'est quelque chose de plus stylisé.

En tous cas, faire un mic mac de JPanel qui affiche des JFrame... si tu ne maitrises pas, tu vas t'emmêler les pinceaux.

Citation:

Envoyé par Garywald

Cependant je ne vois pas du tout comment je pourrais savoir sur quelle case de Monopoly serait un pion donné par exemple. Même en utilisant les coordonnées des cases ce serait dur car toutes les cases ne font pas la même taille : exemple avec la case depart qui est plus large qu'une case chance.

Vu que c'est toi qui gère l'affichage et le positionnement, ça serait tout de même un comble si tu n'arrives pas à savoir où sont tes cases... :?
14/11/2013, 19h05
Garywald

Ouah un général 5 étoiles qui passe sur mon sujet :lahola:

Merci pour ta réponse, je vais lire ton tuto de suite et essayer de le mettre ne pratique dans l'heure.

Quand à mes composants, je sais où ils seront, mais je pensais qu'en mettant par exemple mes Jpanels dans des tableaux, il me suffirait de retrouver la case pour rajouter un composant(pion par exemple), etc... Plutot que de faire des calculs de coordonnées.
14/11/2013, 21h47
plegat

Citation:

Envoyé par Garywald

Quand à mes composants, je sais où ils seront, mais je pensais qu'en mettant par exemple mes Jpanels dans des tableaux, il me suffirait de retrouver la case pour rajouter un composant(pion par exemple), etc... Plutot que de faire des calculs de coordonnées.

Disons que si tu veux faire un prototype, pourquoi pas utiliser un tableau (ou plutôt partir sur un gridLayout par exemple)... mais si tu veux faire quelque chose d'un peu esthétique, autant tenter en java2D... (quoique je suis certain que quelqu'un existe quelque part qui est capable de faire un gridlayout esthétique...)

Après, tu dois pouvoir passer également par des "librairies" (oui, je sais qu'on dit bibliothèque!) type jeu 2D, mais je ne maitrise pas...
15/11/2013, 13h17
Garywald

Citation:

Après, tu dois pouvoir passer également par des "librairies" (oui, je sais qu'on dit bibliothèque!) type jeu 2D, mais je ne maitrise pas...

Moi non plus je ne maitrise pas, mais je vise un peu d'esthetique, c'est mon projet. Je vais partir sur tes conseils. Je vais le faire en graphique2d. Par contre j'ai du mal, il ne veux rien afficher quand je le fais en g2d alors qu'il affiche en graphics g.

Bonjour,

pitié, malgré vos conseils j'ai trouvé quelque chose d'autre :

J'ai fait la classe extendant ^^ jpanel et je créé dedans une cellule qui selon la sorte de cellule est redessiné par paintcomponent d'une autre façon.

Ca me donne ça :

http://nsa33.casimages.com/img/2013/...1908950108.png

Par contre le problème c'est la case départ...les quatre coins de mon plateau en fait qui sont censé être plus grand et je ne sais pas s'il est possible de redimensionner un JPanel en surchargeant la méthode paintComponent.

Je vous montre le code :
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 public void do_cell(){ this.setPreferredSize(new Dimension(120,170)); this.setBorder(BorderFactory.createLineBorder(Color.black)); } public void paintComponent(Graphics g){ if(kind.equals("go")){ this.setPreferredSize(new Dimension(160,170)); g.drawImage(new ImageIcon("img/go.jpg").getImage().getScaledInstance(150,150,Image.SCALE_DEFAULT), 0, 0, this); } if(kind.equals("city")){ g.setColor(color); g.fillRect(0, 0, 120,35); g.setColor(Color.black); g.drawLine(0, 35, 120, 35); g.drawString(name, 20, 20); } } }
Je précise que les cellules sont créé dans un gridbag layout :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 JPanel ligne = new JPanel(); ligne.setLayout(new GridBagLayout()); GridBagConstraints c = new GridBagConstraints(); int debut=0; int fin = debut+9; //print 9 cell and see if we pass the go for(int i=debut;i<fin;i++){ if (i>39){ i=0; fin = fin-40; } c.gridx=i; c.gridy=0; ligne.add(make_cell(Board.map[i]),c);//make_cell call the Cell_View method for now }
S'il vous manque des détails de code, demandez moi. En attendant, j'aimerai juste savoir comment redimensionner mon JPanel depuis mon Paintcomponent.
setPreferredSize() ne fait rien et setSize empiète sur la case suivante.

15/11/2013, 17h43
Garywald

YYYYessss !!!

Done, j'ai trouvé le soucis, il faut revalidé et redessiné le JPanel.

Donc lorsque je remets la taille, revalidate(); et repaint(); sont de rigueur.
Ça marche.

j'ai donc bien une ligne de case qui va pouvoir évoluer et se faire redessiner avec la possibilité de rajouter un pion si un joueur est présent sur la case avec un BufferedImage().

Nouveau problème : réussir à ne pas couper les mots et à faire des retours à la ligne avec drawString();
15/11/2013, 18h48
sinok

http://docs.oracle.com/javase/tutori...uringtext.html

Et tu as également la classe LineBreakMeasurer qui va t'être très utile
15/11/2013, 19h07
Garywald

Merci Sinok, j'étais déjà allé consulter la Javadoc, et après avoir crié victoire pour avoir réussi à centrer du texte (avec difficulté), je n'ose même pas essayer de faire des retour à la ligne.

bon decidemment, les images ont un problème avec moi.

http://nsa33.casimages.com/img/2013/...5231759554.png

Voici le code, j'ai bien vérifié mes conditions, elles sont correcte :

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
 
public void paintComponent(Graphics g){
 
		if(kind.equals("go")||kind.equals("go_to_jail")||kind.equals("jail")||kind.equals("free_parking")){
			this.setPreferredSize(new Dimension(170,170));
			this.revalidate();
			this.repaint();
 
			if(kind.equals("go")){
				g.drawImage(new ImageIcon("img/go.jpg").getImage().getScaledInstance(170,170,Image.SCALE_DEFAULT), 0, 0, this);
 
			}
			else if(kind.equals("go_to_jail")){
				g.drawImage(new ImageIcon("img/gotojail.jpg").getImage().getScaledInstance(170,170,Image.SCALE_DEFAULT), 0, 0, this);
 
			}
			else if(kind.equals("jail")){
				g.drawImage(new ImageIcon("img/justvisiting.jpg").getImage().getScaledInstance(170,170,Image.SCALE_DEFAULT), 0, 0, this);
			}
			else{
				g.drawImage(new ImageIcon("img/freeparking2.jpg").getImage().getScaledInstance(170,170,Image.SCALE_DEFAULT), 0, 0, this);
			}
		}
 
		else if(kind.equals("community_chest")||kind.equals("chance")){
			if(kind.equals("community_chest")){
				g.drawImage(new ImageIcon("img/community_chest.gif").getImage().getScaledInstance(100,100,Image.SCALE_DEFAULT),10,10,this);
			}
			else {
				g.drawImage(new ImageIcon("img/chance.gif").getImage().getScaledInstance(100,100,Image.SCALE_DEFAULT),0,0,this);
			}			
			this.repaint();
		}

16/11/2013, 15h22
Garywald

Bon c'est tout bête, la superposition des images est du au fait que je n'appel pas super.paintComponent(g);
Je ne comprends pas comment ça marche, la méthode paintComponent est pourtant spécifique à ma classe qui étends JPanel... Pourquoi dois je l'appeler à nouveau ?
16/11/2013, 17h11
plegat

Citation:

Envoyé par Garywald

Pourquoi dois je l'appeler à nouveau ?

Tu ne dois pas l'appeler à nouveau, et je dirais même que tu ne dois pas l'appeler tout court!

paintComponent est gérée par le système, toi tu te contentes d'appeler un repaint sur ton composant ou sur le composant parent, et le système s'occupera d'appeler le paintComponent qui va bien quand il faudra (ou quand il aura envie...).

Le repaint va demander au système de faire un paintComponent. Donc tente de comprendre ce qu'il va se passer si en passant dans un paintComponent, celui ci rencontre un... repaint!

Personnellement, je ne serais pas passé par un gridbag (qui quelque part t'oblige à faire joujou avec des resize et des revalidate et à insérer d'autres panels ou autre...). Quitte à devoir dessiner en manuel, autant ne dessiner que dans un panel sans avoir à gérer de layout...
17/11/2013, 20h21
Garywald

Merci Plegat,

En effet, pour le repaint, ça coule de source. ;)
Mais lorsque l'on est dans son projet, on perd le regard du spectateur qui peut faire remarquer des évidences qui ne nous saute pas aux yeux.

Fuseau horaire GMT +2. Il est actuellement 11h59.