CODEWITHSUNDEEP
imagejavafx-8effectslighting
MightyMalcolm
MightyMalcolm

Reputation: 191

JavaFX - Multiple lights on a dark background

I'm attempting to create something like a minimap with JavaFX, i.e. a (darkened) background image with some circles layered on top of it. Some of these circles need to be able to shed light on the background, revealing a small part of it. The following figure shows what I am aiming at.

Desired Result

I have worked my way forward using this SO solution, but at the moment, I am stuck because it seems that you can only set one instance of javafx.scene.effect.Lighting on the underlying StackPane.

I would really like to keep this as simple as possible and ideally only employ JavaFX. Any help is greatly appreciated :)

Upvotes: 0

Views: 312

Answers (1)

fabian
fabian

Reputation: 82461

I recommend adding together Circles filled with a RadialGradient on a Pane with black background using BlendMode.LIGHTEN and combining this with a ImageView containing the "map" using BlendMode.MULTIPLY:

private Circle circle;

// gradient with yellow in the center and black on the border
private final static RadialGradient GRADIENT = new RadialGradient(0, 0, 0.5, 0.5, 0.5, true, CycleMethod.NO_CYCLE, new Stop(0, Color.YELLOW), new Stop(1, Color.BLACK));

private void newCircle(Pane container) {
    circle = new Circle(50, GRADIENT);
    circle.setBlendMode(BlendMode.LIGHTEN);
    circle.setManaged(false);
    container.getChildren().add(circle);
}

private void setCirclePosition(MouseEvent event) {
    circle.setCenterX(event.getX());
    circle.setCenterY(event.getY());
}

@Override
public void start(Stage primaryStage) {
    Image image = new Image(imageURL);
    ImageView imageView = new ImageView(image);

    Pane mask = new Pane();
    mask.setBlendMode(BlendMode.MULTIPLY);
    mask.setStyle("-fx-background-color: black;");
    mask.setOnMouseMoved(this::setCirclePosition); // move cricle with mouse

    newCircle(mask);

    // create new circle on mouse click
    mask.setOnMouseClicked(evt -> {
        newCircle(mask);
        setCirclePosition(evt);
    });

    StackPane root = new StackPane(imageView, mask);

    Scene scene = new Scene(root);
    primaryStage.setScene(scene);
    primaryStage.show();
}

screenshot

Upvotes: 1

Related Questions