web-dev-qa-db-ja.com

JavaFXによる形状の衝突のチェック

衝突検出を試みています。このテストでは、単純な長方形Shapeを使用し、それらのBoundをチェックして、それらが衝突しているかどうかを判断します。検出は期待どおりに動作しませんが。オブジェクトを移動するさまざまな方法(relocate、setLayoutX、Y)とさまざまなバインドチェック(boundsInLocal、boundsInParrentなど)を使用してみましたが、これでも機能しません。ご覧のとおり、3つのオブジェクトがある場合でも、1つだけが衝突を検出しても、検出は1つのオブジェクトに対してのみ機能します。これは問題を示すいくつかの作業コードです:

import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.Cursor;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.Paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

import Java.util.ArrayList;


public class CollisionTester extends Application {


    private ArrayList<Rectangle> rectangleArrayList;

    public static void main(String[] args) {
        launch(args);
    }

    public void start(Stage primaryStage) {
        primaryStage.setTitle("The test");
        Group root = new Group();
        Scene scene = new Scene(root, 400, 400);

        rectangleArrayList = new ArrayList<Rectangle>();
        rectangleArrayList.add(new Rectangle(30.0, 30.0, Color.GREEN));
        rectangleArrayList.add(new Rectangle(30.0, 30.0, Color.RED));
        rectangleArrayList.add(new Rectangle(30.0, 30.0, Color.CYAN));
        for(Rectangle block : rectangleArrayList){
            setDragListeners(block);
        }
        root.getChildren().addAll(rectangleArrayList);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

    public void setDragListeners(final Rectangle block) {
        final Delta dragDelta = new Delta();

        block.setOnMousePressed(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent) {
                // record a delta distance for the drag and drop operation.
                dragDelta.x = block.getTranslateX() - mouseEvent.getSceneX();
                dragDelta.y = block.getTranslateY() - mouseEvent.getSceneY();
                block.setCursor(Cursor.NONE);
            }
        });
        block.setOnMouseReleased(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent) {
                block.setCursor(Cursor.HAND);
            }
        });
        block.setOnMouseDragged(new EventHandler<MouseEvent>() {
            @Override
            public void handle(MouseEvent mouseEvent) {

                block.setTranslateX(mouseEvent.getSceneX() + dragDelta.x);
                block.setTranslateY(mouseEvent.getSceneY() + dragDelta.y);
                checkBounds(block);

            }
        });
    }

    private void checkBounds(Rectangle block) {
        for (Rectangle static_bloc : rectangleArrayList)
            if (static_bloc != block) {
                if (block.getBoundsInParent().intersects(static_bloc.getBoundsInParent())) {
                    block.setFill(Color.BLUE);        //collision
                } else {
                    block.setFill(Color.GREEN);    //no collision
                }
            } else {
                block.setFill(Color.GREEN);    //no collision -same block
            }
    }

    class Delta {
        double x, y;
    }
}
20
Giannis

CheckBoundsルーチンにわずかな論理エラーがあるようです 境界に基づいて)衝突を正しく検出していますが、同じルーチンで後続の衝突チェックを実行すると、ブロックの塗りつぶしが上書きされます。

次のようなものを試してください-ルーチンが衝突が検出されたことを「忘れない」ようにフラグを追加します。

_private void checkBounds(Shape block) {
  boolean collisionDetected = false;
  for (Shape static_bloc : nodes) {
    if (static_bloc != block) {
      static_bloc.setFill(Color.GREEN);

      if (block.getBoundsInParent().intersects(static_bloc.getBoundsInParent())) {
        collisionDetected = true;
      }
    }
  }

  if (collisionDetected) {
    block.setFill(Color.BLUE);
  } else {
    block.setFill(Color.GREEN);
  }
}
_

(親の境界に基づいて)実行しているチェックは、同じ親グループ内のノードの可視境界を囲む長方形の交差を報告することに注意してください。

代替実装

必要に応じて、元のサンプルを更新して、Nodeの視覚的形状の境界ボックスではなく、視覚的形状に基づいて確認できるようにしました。これにより、正確に円などの非長方形の形状の衝突を検出します。これの鍵は---(Shape.intersects(shape1、shape2) メソッドです。

_import javafx.application.Application;
import javafx.event.EventHandler;
import javafx.scene.*;
import javafx.scene.input.MouseEvent;
import javafx.scene.Paint.Color;
import javafx.stage.Stage;

import Java.util.ArrayList;
import javafx.scene.shape.*;

public class CircleCollisionTester extends Application {

  private ArrayList<Shape> nodes;

  public static void main(String[] args) { launch(args); }

  @Override public void start(Stage primaryStage) {
    primaryStage.setTitle("Drag circles around to see collisions");
    Group root = new Group();
    Scene scene = new Scene(root, 400, 400);

    nodes = new ArrayList<>();
    nodes.add(new Circle(15, 15, 30));
    nodes.add(new Circle(90, 60, 30));
    nodes.add(new Circle(40, 200, 30));
    for (Shape block : nodes) {
      setDragListeners(block);
    }
    root.getChildren().addAll(nodes);
    checkShapeIntersection(nodes.get(nodes.size() - 1));

    primaryStage.setScene(scene);
    primaryStage.show();
  }

  public void setDragListeners(final Shape block) {
    final Delta dragDelta = new Delta();

    block.setOnMousePressed(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        // record a delta distance for the drag and drop operation.
        dragDelta.x = block.getLayoutX() - mouseEvent.getSceneX();
        dragDelta.y = block.getLayoutY() - mouseEvent.getSceneY();
        block.setCursor(Cursor.NONE);
      }
    });
    block.setOnMouseReleased(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        block.setCursor(Cursor.HAND);
      }
    });
    block.setOnMouseDragged(new EventHandler<MouseEvent>() {
      @Override public void handle(MouseEvent mouseEvent) {
        block.setLayoutX(mouseEvent.getSceneX() + dragDelta.x);
        block.setLayoutY(mouseEvent.getSceneY() + dragDelta.y);
        checkShapeIntersection(block);
      }
    });
  }

  private void checkShapeIntersection(Shape block) {
    boolean collisionDetected = false;
    for (Shape static_bloc : nodes) {
      if (static_bloc != block) {
        static_bloc.setFill(Color.GREEN);

        Shape intersect = Shape.intersect(block, static_bloc);
        if (intersect.getBoundsInLocal().getWidth() != -1) {
          collisionDetected = true;
        }
      }
    }

    if (collisionDetected) {
      block.setFill(Color.BLUE);
    } else {
      block.setFill(Color.GREEN);
    }
  }

  class Delta { double x, y; }
}
_

サンプルプログラムの出力。サンプルでは、​​円がドラッグされており、ユーザーは現在、別の円と衝突しているとマークされている円を(青色にペイントすることにより)ドラッグしています。デモのために、現在ドラッグされている円のみに、衝突色がマークされています。

collisions

追加の質問に基づくコメント

以前のコメントで 交差デモアプリケーション に投稿したリンクは、特定のタイプの衝突検出サンプルとしてではなく、さまざまな境界タイプの使用を説明するためのものでした。ユースケースでは、変更リスナーの複雑さを増やしたり、さまざまな種類の境界タイプをチェックしたりする必要はありません。1つのタイプで十分です。ほとんどの衝突検出は、ノードのレイアウト境界やローカル境界などの他のJavaFX境界タイプではなく、視覚境界の交差にのみ関心があります。したがって、次のいずれかを行うことができます。

  1. (元の質問で行ったように)getBoundsInParentの交差をチェックします。これは、ノードの視覚的な端を囲む最小の長方形のボックスで機能しますOR
  2. 視覚的な形状の境界ボックスではなく、Nodeの視覚的な形状に基づいてチェックする必要がある場合は、Shape.intersect(shape1, shape2)ルーチンを使用します。

長方形にsetLayoutXまたはtranslateXを使用する必要がありますか

layoutX およびlayoutYプロパティは、ノードの配置またはレイアウトを目的としています。 translateX およびtranslateYプロパティは、ノードの視覚的な場所を一時的に変更することを目的としています(たとえば、ノードがアニメーションを実行しているとき)。あなたの例では、どちらのプロパティでも機能しますが、翻訳プロパティよりもレイアウトプロパティを使用する方がおそらく良い方法です。つまり、ノードで TranslateTransition のようなものを実行したい場合は、開始および終了の変換値は、親グループ内の位置ではなく、ノードの現在のレイアウト位置に相対的になるため、これらの値がどうあるべきかをより明確にします。

これらのレイアウトを使用してサンプルで座標を平行移動するもう1つの方法は、ドラッグ操作中にキャンセルするESCなどがある場合です。 layoutX、Yをノードの初期位置に設定し、translateX、Y値を設定するドラッグ操作を開始し、ユーザーがEscキーを押した場合、translateX、Yを0に戻してドラッグ操作をキャンセルするか、ユーザーがマウスを離した場合layoutX、YをlayoutX、Y + translateX、Yに設定し、translateX、Yを0に戻します。つまり、translation isの値は、ノードの元のレイアウト位置からのノードの視覚座標の一時的な変更に使用されます。

円がアニメーション化されていても、交差は機能しますか?円をマウスでドラッグせずに、ランダムに移動させた場合はどうなるでしょうか。この場合も色は変わりますか?

これを行うには、衝突検出関数が呼び出され、衝突ハンドラーが呼び出される場所を変更するだけです。 (上記の例のように)マウスドラッグイベントに基づいて交差をチェックする代わりに、各ノードの boundsInParentProperty() の変更リスナー内で衝突をチェックします。

_block.boundsInParentProperty().addListener((observable, oldValue, newValue) -> 
        checkShapeIntersection(block)
);
_

注:アニメーション化されている図形がたくさんある場合、 game loop 内でフレームごとに1回衝突をチェックすると、ノードが移動するたびに衝突チェックを実行するよりも効率的です(boundsInParentPropertyの変更で行われるように)上記のリスナー)。

31
jewelsea