How to move shapes in JavaFX?

Question

I've been trying to make a program that displays a circle and lets you move it using buttons but I haven't been able to figure out how to tell Java what direction to move the Circle when you press a certain button. I've tried setX and setY but apparently they aren't native to Circle. Here's what I've got so far:

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.stage.Stage;

public class Ball extends Application {
    private Circle circle = new Circle();

    @Override
    public void start(Stage primaryStage) {
        HBox pane = new HBox();
        pane.setSpacing(10);
        pane.setAlignment(Pos.CENTER);  
        Button btUp = new Button("UP");
        Button btDown = new Button("DOWN");
        Button btLeft = new Button("LEFT");
        Button btRight = new Button("RIGHT");

        pane.getChildren().add(btUp);
        pane.getChildren().add(btDown);
        pane.getChildren().add(btRight);
        pane.getChildren().add(btLeft);

        btUp.setOnAction(e -> circle.setY(circle.getY() - 10));
        btDown.setOnAction(e -> circle.setY(circle.getY() + 10));
        btLeft.setOnAction(e -> circle.setX(circle.getX() - 10));
        btRight.setOnAction(e -> circle.setX(circle.getX() + 10));

        BorderPane borderPane = new BorderPane();
        borderPane.setCenter(circle);
        borderPane.setBottom(pane);
        BorderPane.setAlignment(pane, Pos.CENTER);

        Scene scene = new Scene(borderPane, 200, 200);      
        primaryStage.setTitle("Ball"); // Set the stage title
        primaryStage.setScene(scene); // Place the scene in the stage
        primaryStage.show();

        circle.requestFocus();
    }

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

Consider adding the [javafx] tag to your list of tags and better talk about javafx instead of java, because there are multiple ways this question could be misinterpreted. — isaias-b, Oct 17 '15 at 19:47
Here is a solution for [Moving shapes on a JavaFX Canvas](http://stackoverflow.com/questions/21396055/moving-shapes-in-javafx-canvas). If, instead of a Canvas, you use the scene graph (as in your question and also a perfectly valid approach), the solution will be slightly different (I don't have a ready-made example for that at the moment). — jewelsea, Oct 17 '15 at 20:53

score 2 · Answer 1 · answered Apr 16 '16 at 16:23

The first problem with your code is the circle (or lack thereof).

You shouldn't use the no-argument circle unless you plan to define it later. One solution is to define the radius and fill color in one line:

private Circle circle = new Circle(50.0f, Color.RED);

As for moving the circle, you'll need to keep track of the changing circle position so add this with your instance variables:

private double newY, newX = 0;

I'll show you how to setup the down button (the code for Left, Right, and Up are very similar to down). Change your setOnAction method to:

btnDown.setOnAction(btnDownActionEvent);

Then define btnDownActionEvent after the main method (or wherever you want):

EventHandler<ActionEvent> btnDownActionEvent = new EventHandler<ActionEvent>()
{
    @Override
    public void handle(ActionEvent event)
    {
        System.out.println("Pressed Down");
        newY = circle.getCenterY() + 10 + newY;

        circle.setTranslateX(newX);
        circle.setTranslateY(newY);
    }
};

Also, you can remove circle.requestFocus();

score 0 · Answer 2 · answered Sep 15 '16 at 03:15

Create two variables: One for X coordinates and one for Y coordinates.

int newY, newX = 0;

Now use setOnKeyPressed on Scene to move the circle when arrow keys are pressed, using IF Logic.

scene.setOnKeyPressed(e ->{
    if(e.getCode() == KeyCode.RIGHT){
        newX = newX + 10;
        circle.setTranslateX(newX);
    }
    else if(e.getCode() == KeyCode.LEFT){
        newX = newX - 10;
        circle.setTranslateX(newX);
    }
    else if(e.getCode() == KeyCode.UP){
        newY = newY - 10;
        circle.setTranslateY(newY);
    }
    else if(e.getCode() == KeyCode.DOWN){
        newY = newY + 10;
        circle.setTranslateY(newY);
    }
});

Make sure to create Scene before above code, else you will get undefined error.

How to move shapes in JavaFX?

2 Answers2