Collision javafx jeux

Version imprimable

27/03/2019, 20h14
nanny33

Collision javafx / Binding

Bonjour,

J'ai commencé mon jeux en javafx et je suis en ce moment entrain de créer les collisions 2D, le personnage qui peut se déplacer étant un cercle, j'ai décidé de créer un carré invisible autour du cercle, j'ai décidé de relier grâce au binding les 4 cotés du carré au cercle pour faire en sorte que quand le joueur déplace le cercle qui est le personnage, que le carré reste autour du cercle. Puis après je vais créer des conditions Shapes, si le coté en haut du carré touche un mur, ... . J'aimerais que vous m'aidiez pour le binding car je ne sais pas comment faire, j'ai regardé des tutos mais je n'y arrive pas. Merci de bien vouloir m'aider.:P

Citation:

Envoyé par nanny33

Bonjour,

J'ai commencé mon jeux en javafx et je suis en ce moment entrain de créer les collisions 2D, le personnage qui peut se déplacer étant un cercle, j'ai décidé de créer un carré invisible autour du cercle,

Mais ça existe déjà... tous les nœuds disposent d'une boite englobante qui fait déjà ça : getBoundsInLocal() ou getBoundsInParent(). Sans parler du fait bien sur que les formes géométriques disposent également de méthodes pour tester les intersections et l'appartenance : intersects() et contains().

Citation:

j'ai décidé de relier grâce au binding les 4 cotés du carré au cercle pour faire en sorte que quand le joueur déplace le cercle qui est le personnage, que le carré reste autour du cercle.

Ca sert a rien, voir plus haut. Les valeurs de la boite englobante sont automatiquement mises a jour.

Citation:

Puis après je vais créer des conditions Shapes, si le coté en haut du carré touche un mur, ... . J'aimerais que vous m'aidiez pour le binding car je ne sais pas comment faire, j'ai regardé des tutos mais je n'y arrive pas. Merci de bien vouloir m'aider.:P

Après si, dans ton jeu, tu veux afficher un carre autour (par exemple si tu passes en mode debug/developpeur) la oui le binding peut aider mais c'est pas oblige tu peux aussi effectuer son positionnement a la main. Sinon un truc du genre devrait faire l'affaire :
Code:

1 2 3 4 5 6 7 circleBox.widthProperty.bind(Bindings.mult(circle.radiusProperty(), 2)); circleBox.heightProperty.bind(circleBox.widthProperty()); circleBox.layoutXProperty().bind(circle.layoutXProperty()); circleBox.layoutYProperty().bind(circle.layoutYProperty()); // Ou circleBox.layoutXProperty().bind(Bindings.subtract(circle.centerXProperty(), circle.RadiusProperty()); circleBox.layoutYProperty().bind(Bindings.subtract(circle.centerYProperty(), circle.RadiusProperty());

28/03/2019, 13h50
nanny33

D'accord, merci pour votre réponse, comment faire pour les collisions sans utiliser le binding comme vous l'avez dit auparavant? Et pour le binding, je comprend le code mais je ne vois pas ce que c'est circleBox , pour le circle, je le remplacerai donc pour le nom que j'ai donné cercle qui s'appelle c ?
29/03/2019, 00h26
bouye
Tu as 2 soucis distinct :
- Connaître la boite englobante du cercle. getBoundsInLocal() ou getBoundsInParent().
- Pour des besoins de débogage visuel afficher un carre autour du cercles. circleBox est un carre qui s'affiche autour du cercle.
Quand au calcul de collision, voir par exemple ici : Checking Collision of Shapes with JavaFX sur StackOverflow.

Comme indiqué a la fin de la réponse de jewelsea, pour un vrai jeu qui serait base sur le concept de la bouche de jeu (faisable en JavaFX avec un AnimationTimer), c'est plus efficace de tester les collisions durant chaque boucle du timer plutôt que lorsqu'un sprite se déplace.
29/03/2019, 06h57
nanny33

D'accord merci, je vais essayer de regarder ceci en détail
29/03/2019, 20h35
nanny33

Je n'est pas trés bien compris le principe car je ne connais pas vraiment les arraylist ..., pouvais vous me faire un exemple de code de collision stp en expliquant si vous pouvais bien sur . mr
20/06/2019, 18h09
nanny33

Collision javafx jeux

Bonjour, j'ai 16 ans et je suis entrant de faire un jeux complet un système de magasin de skins ..., il me reste plus que les collisions à mettre et le jeux est fini, dans mon jeux, des Circle ennemies rebondissent sur les murs et le personnage principal est un Circle plus petit, le but étant de rester le plus longtemps en vie sans toucher les ennemies cercles, pourvez vous m'aider svp mr.
20/06/2019, 21h41
bouye

Tu as déjà posé exactement la même question il y a 3 mois :roll:. Allez hop, fusion !

Bonjour,
dans mon jeux, il y a un Cercle c qui est le personnage principal qui se déplace avec les touches du clavier, j'ai crée un Group CircleBox qui contient touts les cercles ennemies qui rebondissent sur les murs et que le joueur doit esquiver, il manque les collision entre le group et le cercle si il y a, j'ai trouvé comment faire pour les collisions entre 2 cercles et j'ai trouvé ceci : (je sais pas ce qu'il faut mettre à la place des C1.rayon .. (rappel : C1 et C2 sont deux cercle testé par la collision, dans mon jeux, ca sera le cercle c et les ennemies CircleBox)) pouvez vous me dire svp* *:
Code:

1 2 3 4 5 6 int d2 = (C1.x-C2.x)*(C1.x-C2.x) + (C1.y-C2.y)*(C1.y-C2.y); if (d2 > (C1.rayon + C2.rayon)*(C1.rayon + C2.rayon)) System.out.println("Collision"); else System.out.println("Pas collision"); }

J'ai fais ceci mais dans la console, il y a toujours écrit"collision" même quand il n'y a pas collision :

Code:

1
2
3
4
5
6
7
8
9
//Collision :
 
//Balle 1 : ennemie
double d2 = (c.getLayoutX()-balle1.getLayoutX())*(c.getLayoutX()-balle1.getLayoutX()) + (c.getLayoutY()-balle1.getLayoutY())*(c.getLayoutY()-balle1.getLayoutY());
 
if (d2 > (c.getRadius() + balle1.getRadius())*(c.getRadius() + balle1.getRadius()))
    System.out.println("Collision");
else
    System.out.println("Pas collision");

Bon alors une petite démo vaut peut-être mieux qu'un long discour. Attention cependant, pour faire court cette démo repose sur plusieurs principes que tu ne maîtrise peut-être pas encore complètement :
Le code est au format JDK 9-12, je rappelle que pour les JDK les plus anciens, il suffit de remplacer le mot-clé var par le type approprié.
La méthode stream() n'existe pas sur la classe Optional dans le JDK8, le code a utiliser devrait être :
Code:

1 2 Optional.ofNullable(Main.class.getResource("styles.css")) .ifPresent(url -> scene.getStylesheets().add(url.toExternalForm()));
et pour le JDK7 c'est carrement la classe Optional qui n'existe pas, donc le code devient :
Code:

1 2 3 4 final URL url = Main.class.getResource("styles.css"); if (url != null) { scene.getStylesheets().add(url.toExternalForm()); }
L'utilisation d'une feuille de style externe (CSS) histoire de mettre hors du code tout ce qui est décoration graphique, couleur de remplissage, de bordure, épaisseur du trait, etc.
L'utilisation d'une pseudo classe qui permet de changer rapidement le style des formes.
J'ai aussi affiché 2 rectangles qui représentent les boites englobantes de chaque cercles. Pour faciliter la lecture du code je les ai bindé sur les boites englobantes des cercles dans le repère de leur parent.
Une TranslateTransition sert a animer le cercle c1 qui va passer sur le cercle c2. Cette animation change uniquement les valeurs de translateX et translateY et donc elle ne touche jamais layoutX, layoutY, centerX ou centerY (c'est important pour la suite, ca veut dire qu'en fait on ne peut pas se reposer sur ces valeurs pour les tests de collision).
Un AnimationTimer pour tester les collisions a 60FPS, ce calcul a donc lieu tous les 1/60eme de seconde :

Comme dit juste au-dessus a cause de notre transition, on ne peut pas vraiment se fier aux valeurs layoutX, layoutY, centerX ou centerY de c1 donc on va utiliser boundInParent qui est la boite englobante dans le parent lorsque toutes les transformations ont été appliquées).
Notre premier test vérifie sur les boites englobantes de c1 et c2 s'intersectent. Si c'est le cas on remplira le rectangle autour de c1 en orange.
Notre second test est plus précis : on va vérifier si la distance entre les centre des boites englobantes de c1 et c2 est inférieure a la somme de leurs rayons. Si c'est le cas on laisse le rectangle autour de c1 vide mais on remplira c1 en rouge. Pour la même raison (notre transition modifie d'autres valeurs), on ne teste pas le centre de c1 et c2 mais le centre de la boite englobante dans le parent lorsque toutes les transformations ont été appliquées.

Note : ce test ici suppose que c1 et c2 n'ont pas subi de transformation qui ont change leur forme donc je peux utiliser le rayon tel quel (getRadius). Si des transformations modifiant la forme ont lieu (ex: mise a l’échelle, déformation, etc.) le calcul devient plus complexe et il faut bien sur tenir compte de ces déformations si on veut des calculs de collision plus juste.
styles.css
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 .c1 { -fx-fill: null; -fx-fill: null; -fx-stroke: red; -fx-stroke-width: 1px; } .c1:collision { -fx-fill: red; } .c2 { -fx-fill: null; -fx-stroke: blue; -fx-stroke-width: 1px; } .bounds1 { -fx-fill: null; -fx-stroke: darkorange; -fx-stroke-width: 1px; -fx-stroke-dash-array: 5 5; } .bounds1:collision { -fx-fill: darkorange; } .bounds2 { -fx-fill: null; -fx-stroke: darkcyan; -fx-stroke-width: 1px; -fx-stroke-dash-array: 5 5; }
Main.java
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 package collisions; import javafx.animation.AnimationTimer; import javafx.animation.Interpolator; import javafx.animation.TranslateTransition; import javafx.application.Application; import javafx.beans.binding.Bindings; import javafx.css.PseudoClass; import javafx.geometry.Point2D; import javafx.scene.Scene; import javafx.scene.layout.Pane; import javafx.scene.shape.Circle; import javafx.scene.shape.Rectangle; import javafx.stage.Stage; import javafx.util.Duration; import java.net.URL; import java.util.Optional; public final class Main extends Application { private static final PseudoClass COLLISION_PSEUDO_CLASS = PseudoClass.getPseudoClass("collision"); @Override public void start(final Stage stage) throws Exception { // Les cercles. final var c1 = new Circle(20, 20, 15); c1.getStyleClass().add("c1"); final var c2 = new Circle(250, 250, 50); c2.getStyleClass().add("c2"); // Les boites englobantes des cercles. final var bounds1 = new Rectangle(); bounds1.getStyleClass().add("bounds1"); bounds1.xProperty().bind(Bindings.selectDouble(c1.boundsInParentProperty(), "minX")); bounds1.yProperty().bind(Bindings.selectDouble(c1.boundsInParentProperty(), "minY")); bounds1.widthProperty().bind(Bindings.selectDouble(c1.boundsInParentProperty(), "width")); bounds1.heightProperty().bind(Bindings.selectDouble(c1.boundsInParentProperty(), "height")); final var bounds2 = new Rectangle(); bounds2.getStyleClass().add("bounds2"); bounds2.xProperty().bind(Bindings.selectDouble(c2.boundsInParentProperty(), "minX")); bounds2.yProperty().bind(Bindings.selectDouble(c2.boundsInParentProperty(), "minY")); bounds2.widthProperty().bind(Bindings.selectDouble(c2.boundsInParentProperty(), "width")); bounds2.heightProperty().bind(Bindings.selectDouble(c2.boundsInParentProperty(), "height")); // Montage de l'UI. final var root = new Pane(); root.getChildren().addAll(bounds1, bounds2); root.getChildren().addAll(c1, c2); final var scene = new Scene(root, 500, 500); Optional.ofNullable(Main.class.getResource("styles.css")) .stream() .map(URL::toExternalForm) .forEach(scene.getStylesheets()::add); stage.setScene(scene); stage.setResizable(false); stage.show(); // Collision. final var worldClock = new AnimationTimer() { @Override public void handle(long l) { final var b1 = c1.getBoundsInParent(); final var b2 = c2.getBoundsInParent(); boolean colorBound = false; boolean colorShape = false; if (b1.intersects(b2)) { colorBound = true; final var center1 = new Point2D(b1.getCenterX(), b1.getCenterY()); final double distance = center1.distance(b2.getCenterX(), b2.getCenterY()); if (distance < c1.getRadius() + c2.getRadius()) { colorBound = false; colorShape = true; } } bounds1.pseudoClassStateChanged(COLLISION_PSEUDO_CLASS, colorBound); c1.pseudoClassStateChanged(COLLISION_PSEUDO_CLASS, colorShape); } }; worldClock.start(); // Animation. final var animation = new TranslateTransition(Duration.seconds(10), c1); animation.setInterpolator(Interpolator.LINEAR); animation.setCycleCount(TranslateTransition.INDEFINITE); animation.setAutoReverse(true); animation.setToX(500 - 2 * 15 - 20); animation.setToY(500 - 2 * 15 - 20); animation.play(); } }
La leçon a retenir ici est qu'il te faut faire extrêmement attention a comment tu vas positionner, faire bouger ou animer et surtout transformer tes objets a l’écran. Un bon calcul de collision doit tenir compte de ces transformations pour être précis. CEPENDANT, si les transformations sont trop complexes, le calcul peut devenir impossible ou trop coûteux en temps CPU donc rester sur une base simplifiée (ex: les boites englobantes) peut mener a un calcul rapide et peu coûteux mais moins précis.

J’ai mis ceci mais dans la console, il y a toujours écrit "collision" quand je bouge et quand il y a collision avec le cercle balle, il n’y a pas écrit "collision" :

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
 
                        //Création animation clavier pour pouvoir déplacer le cercle c :
HashSet<KeyCode> tab = new HashSet<KeyCode>();
 
 
 
 
 
 
 
AnimationTimer aT = new AnimationTimer() {
 
 
 
 
 
 
 
 
 
    public void handle(long l) {
 
 
        //Collision :
 
 
        //Balle 1 : ennemie
 
          double d2 = (c.getLayoutX()-balle.getLayoutX())*(c.getLayoutX()-balle.getLayoutX()) + (c.getLayoutY()-balle.getLayoutY())*(c.getLayoutY()-balle.getLayoutY());
 
 
        if (d2 > (c.getRadius() + balle.getRadius())*(c.getRadius() + balle.getRadius()))
 
          System.out.println("Collision");
 
        else
 
             System.out.println("Pas collision");
 
 
 
 
 
        for(KeyCode  t: tab) {
 
 
 
 
 
 
 
 
 
 
 
 
            switch(t){
 
 
 
 
 
 
 
 
 
            case ESCAPE:
                r.setVisible(true);
                exit.setVisible(true);
                re.setVisible(true);
 
 
 
 
 
 
                break;
 
 
 
 
              case Z :
 
 
 
 
                  c.setLayoutY(c.getLayoutY()-7);
                   break;
 
 
 
 
 
 
              case D :
 
                      c.setLayoutX(c.getLayoutX()+7);
                      break;
 
 
 
 
 
 
              case Q :
 
                    c.setLayoutX(c.getLayoutX()-7);
 
                      break;
 
 
 
 
 
 
 
 
              case S :
 
                      c.setLayoutY(c.getLayoutY()+7);
                      break;
 
 
 
 
            }
 
 
 
 
 
 
 
 
 
 
 
            //Collision mur de la fenetre :
 
            if (c.getLayoutX() > 490){
                  c.setLayoutX(490);
 
            }
 
 
            if (c.getLayoutY() > 290){
                  c.setLayoutY(290);
            }
 
            if (c.getLayoutY() < -287){
                  c.setLayoutY(-287);
            }
 
            if (c.getLayoutX() < -488){
                  c.setLayoutX(- 488);
            }
 
 
 
 
 
 
 
    };
 
 
 
 
           };
 
};
 
 
scene.setOnKeyPressed(e ->{
    boolean wasEmpty = tab.isEmpty();
    if(tab.add(e.getCode()) && wasEmpty)
            aT.start();
});
scene.setOnKeyReleased(e ->{
    if(tab.remove(e.getCode()) && tab.isEmpty())
            aT.stop();
});

25/06/2019, 17h52
nanny33

C'est bon j'ai réussi à faire les collisions avec les shape .intersect