Discussion :

[loockys]

Bonjour tout le monde.

En ce moment ma curiosité me pousse à comprendre le fonctionnement des collisions entre deux objets.
Pour mes expériences, j'ai pris deux formes qui représentent un rectangle, j'ai mis des couleurs différentes pour les différencier.

Sur l'exemple je contrôle le rectangle vert et quand je déplace sur le rectangle bleu, la détection se passe bien, vous verrez un drawstring de couleur jaune en haut à gauche quand les rectangles sont en collision.
voici une image qui représente ci-dessous mon explication.



Je vous mets tout le code source :

Class : Programme

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
 
import javax.swing.JFrame;
 
public class Programme extends JFrame {
	private static final long serialVersionUID = 1L;
 
	Panneau panneau;
 
	public Programme() {
		panneau = new Panneau();
		this.setTitle("titre fenetre");
		this.setSize(500, 500);
		this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		this.setResizable(false);
		this.setLocationRelativeTo(null);
 
		this.addKeyListener(panneau);
		this.add(panneau);
 
		this.setVisible(true);
	}
 
	public static void main(String[] args) {
		new Programme();
 
	}
}

Class: Panneau

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
 
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Rectangle;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.KeyEvent;
import java.awt.event.KeyListener;
 
import javax.swing.JPanel;
import javax.swing.Timer;
 
public class Panneau extends JPanel implements ActionListener, KeyListener {
	private static final long serialVersionUID = 1L;
 
	public Player p1;
	public Player p2;
 
	Timer timer;
 
	public int x;
	public int y;
	public int speed;
 
	public boolean collision;
 
	public Panneau() {
 
		setBackground(Color.black);
 
		p1 = new Player();
		p2 = new Player();
 
		timer = new Timer(15, this);
		timer.start();
 
		p1.x = 200;
		p1.y = 200;
 
		p2.x = 200;
		p2.y = 100;
 
	}
 
	public void paint(Graphics gr) {
		super.paintComponent(gr);
 
		gr.setColor(Color.green);
		gr.fillRect(p1.x, p1.y, p1.width, p1.height);
 
		gr.setColor(Color.blue);
		gr.fillRect(p2.x, p2.y, p2.width, p2.height);
 
		if (collision) {
			gr.setColor(Color.yellow);
			gr.drawString("COLLISION", 0, 15);
		}
 
	}
 
	public void collision() {
		Rectangle rect1 = p1.bounds();
		Rectangle rect2 = p2.bounds();
 
		if (rect1.intersects(rect2)) {
			collision = true;
 
		} else {
			collision = false;
		}
	}
 
	@Override
	public void keyPressed(KeyEvent e) {
		speed = 1;
 
		if (e.getKeyCode() == KeyEvent.VK_Z) {
			y = -speed;
 
		}
 
		if (e.getKeyCode() == KeyEvent.VK_S) {
			y = +speed;
 
		}
 
		if (e.getKeyCode() == KeyEvent.VK_Q) {
			x = -speed;
		}
 
		if (e.getKeyCode() == KeyEvent.VK_D) {
			x = +speed;
		}
 
	}
 
	@Override
	public void keyReleased(KeyEvent e) {
		if (e.getKeyCode() == KeyEvent.VK_Z) {
			y = 0;
		}
 
		if (e.getKeyCode() == KeyEvent.VK_S) {
			y = 0;
		}
 
		if (e.getKeyCode() == KeyEvent.VK_Q) {
			x = 0;
		}
 
		if (e.getKeyCode() == KeyEvent.VK_D) {
			x = 0;
		}
	}
 
	@Override
	public void keyTyped(KeyEvent arg0) {
	}
 
	public void move() {
		p1.x += x;
		p1.y += y;
 
	}
 
	@Override
	public void actionPerformed(ActionEvent arg0) {
		move();
		collision();
		repaint();
	}
 
}

Class: Player

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
 
import java.awt.Rectangle;
 
public class Player {
	public  int x;
	public  int y;
	public  int width;
	public  int height;
 
	public Player() {
		x = 0;
		y = 0;
		width = 64;
		height = 64;
	}
 
	public int getProfondeurY() {
		return y + height;
	}
 
	public int getProfondeurX() {
		return x + width;
	}
 
	public Rectangle bounds() {
		return (new Rectangle(x, y, width, height));
	}
}

Ma question est : Comment je pourrais empêcher le rectangle vert d'entrer dans le périmètre du rectangle bleu ?
Je me doute bien qu'il faudrait mettre des conditions if, mais si je suis venue vous demander de l'aide c'est que je ne parviens pas à mes fins.

D'avance merci.

[Pecose]

Bonjour,
Alors moi je suis pas un pro, mais j'avais fait un jeux avec des zombies et pour empêcher qu'ils se rentrent dedans, j'avais fait une boucle while avec comme condition,
l'intersection des sphères (c'etait des shères mais c'est pareil avec des carrés). Et dedans tu donnes un mouvement à ton shape qui avance de 1 pixel dans le sens opposé de l'autre objet. Et quand les deux ne se touchent plus tu affiches. Voila c'est tout ce que j'avais trouvé mais ca marchait très bien. Si d'autres on des solution moins gourmande, je suis preneur.
Bon courage.

[joel.drigo]

Salut,

L'idée de base que présente @Pecose est la bonne, mais pour éviter la boucle, il suffit de déterminer directement la différence entre la position qui se trouve en condition de collision et celle qui ne l'est plus. On peut utiliser par exemple la méthode Rectangle2D.intersect( rect1, rect2 ). Il faut bien entendu intégrer le test de collision aux méthodes de déplacement.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
private final static Rectangle intersection = new Rectangle(); // on peut réutiliser la même instance (le traitement est monothread (EDT))
public void actionPerformed(ActionEvent arg0) {
    move();
    collision();
    if ( collision ) {
       Rectangle2D.intersect(p1.bounds(), p2.bounds(), intersection);
       p1.x = p1.x - intersection.width * (int)Math.signum(x);
       p1.y = p1.y - intersection.height * (int)Math.signum(y);
    }
    repaint();
}

On pourrait aussi bien faire ces calculs directement avec les coordonnées et des tests, mais c'est plus concis comme ça, avec peu de pertes de performances.

Il y a tout de même 2 problèmes qui rendent les choses un peu plus complexes. Le premier est qu'on a un mouvement "continu" (par x et y de Panneau) : en cas de collission, il faut donc également remettre à zéro ces variables (sinon le rectangle réapparait "derrière" : fais le test pour voir ce que je veux dire).

Code :

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

1
2
3
4
5
6
if ( collision ) {
       Rectangle2D.intersect(p1.bounds(), p2.bounds(), intersection);
       p1.x = p1.x - intersection.width * (int)Math.signum(x);
       p1.y = p1.y - intersection.height * (int)Math.signum(y);
       x = y = 0; // remise à zéro du déplacement
    }

Mais cette modification simple ne fonctionne que si on a un déplacement uniquement sur un seul axe : x ou y, mais pas les deux en même temps. En cas de déplacement selon 2 axes, le carré se repositionne selon une position erronée (fais le test pour voir ce que je veux dire).

On peut éviter ça en comparant les écarts de collision vertical et horizontal :

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
if ( collision ) {
			Rectangle2D.intersect(p1.bounds(), p2.bounds(), intersection);
			if( intersection.width>intersection.height ) { // si l'écart horizontal et plus grand que l'écart vertical, on arrête le déplacement vertical
				p1.y = p1.y - intersection.height * (int)Math.signum(y);
				y=0;
			}
			else if( intersection.width==intersection.height ) { // en cas d'égalité, en arrête les 2
				p1.x = p1.x - intersection.width * (int)Math.signum(x);
				p1.y = p1.y - intersection.height * (int)Math.signum(y);
				x=y=0;
			}
			else { // écart vertical supérieur à écart horizontal, arrêt déplacement horizontal
				p1.x = p1.x - intersection.width * (int)Math.signum(x);
				x=0;
			}
		}

qu'on peut simplifier en

Code :

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

1
2
3
4
5
6
7
8
if( intersection.width>=intersection.height ) {
    p1.y = p1.y - intersection.height * (int)Math.signum(y);
    y=0;
}
if( intersection.width<=intersection.height ) {
    p1.x = p1.x - intersection.width * (int)Math.signum(x);
    x=0;
}

Voire en utilisant une méthode :

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
	@Override
	public void actionPerformed(ActionEvent arg0) {
		move();
		collision();
		if ( collision ) {
			Rectangle2D.intersect(p1.bounds(), p2.bounds(), intersection);
			if( intersection.width>=intersection.height ) {
				p1.y = fixLocation(p1.y, intersection.height, y);
				y=0;
			}
			if( intersection.width<=intersection.height ) {
				p1.x = fixLocation(p1.x, intersection.width, x);
				x=0;
			}
		}
		repaint();
	}
 
	private static int fixLocation(int value, int gap, int speed) {
		return value - gap * (int)Math.signum(speed);
	}

[loockys]

Les explications sont claires, je n'ai rien à redire merci Pecose et joel.drigo.
Ps: j'espère que ce poste sera utile aux intéressés, moi je suis satisfait des réponses qui ont été dites.

[joel.drigo]

On peut d'ailleurs améliorer le code pour avoir un mouvement continu (le rectangle en mouvement contourne le rectangle obstacle et continu le mouvement lorsqu'il "arrive au bord", ce qui est empêcher par la mise à 0 de x ou y). Pour cela, on traite à part le cas de déplacement en diagonale tel que largeur et hauteur de l'intersection soit égale, ce qui correspond à un déplacement "aux alentours" des coins. La résolution précédente annule tout mouvement dans ce cas (et donc on a un problème de blocage lorsqu'on arrive juste au contournement du coin) : pour résoudre le problème, on va devoir calculer le déplacement de distances horizontale et verticale, de manière à déterminer si on se rapproche ou on s'éloigne de l'obstable. Si on se rapproche, on annule le mouvement, sinon on le laisse. En fait, on pourrait appliquer cette même méthode dans tous les cas, mais elle est un tout petit peu plus lente (plus de calcul).

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
if ( collision ) {
			final Rectangle p1bounds = p1.bounds();
			final Rectangle p2bounds = p2.bounds();
			Rectangle2D.intersect(p1bounds, p2bounds, intersection);
			if ( intersection.width==intersection.height ) {
				final double disth = p1bounds.getCenterX()-p2bounds.getCenterX(); // on calcule la distance entre les centre
				final double disthold = disth-x; // on cherche à savoir si cette ditance s'allonge ou racourcit
				final double distv = p1bounds.getCenterY()-p2bounds.getCenterY();
				final double distvold = distv-y;
				if( Math.abs(distv)<Math.abs(distvold) ) { // on se "rapproche"
					p1.y = fixLocation(p1.y, (int)Math.abs(distvold-distv), y);
				}
				if( Math.abs(disth)<Math.abs(disthold) ) {
					p1.x = fixLocation(p1.x, (int)Math.abs(disthold-disth), x);
				}
			}
			else {
				if( intersection.width>intersection.height ) {
					p1.y = fixLocation(p1.y, intersection.height, y);
				}
				if( intersection.width<intersection.height ) {
					p1.x = fixLocation(p1.x, intersection.width, x);
				}
			}
		}