We Keep Coding

how to change the rotation direction on keypress in javafx

I have two circles that I want to turn them around a pivot clockwise if the right key is pressed and counter clockwise if the left key is pressed but my code does not work.
import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.geometry.Bounds;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.effect.GaussianBlur;
import javafx.scene.layout.*;
import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.scene.text.Font;
import javafx.scene.transform.Rotate;
import javafx.stage.Popup;
import javafx.stage.Stage;
import javafx.util.Duration;
import static java.lang.Math.cos;
import static java.lang.Math.sin;
public class Main extends Application {
public static final double CIRCLES_CENTER_X = 600;
public static final double CIRCLES_CENTER_Y = 450;
public static final double CIRCLES_RADIUS = 15;
public static final double CIRCLES_DISTANCE = 300;
public static final double GAME_HEIGHT = 700;
public static final double GAME_WIDTH = 1200;
private Stage primaryStage;
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
primaryStage.setMinWidth(GAME_WIDTH);
primaryStage.setMinHeight(GAME_HEIGHT);
final Scene scene;
BorderPane root = new BorderPane();
scene = new Scene(root, Main.GAME_WIDTH, Main.GAME_HEIGHT);
Circle orangeCircle = new Circle(Main.CIRCLES_CENTER_X + Main.CIRCLES_DISTANCE / 2 * cos(0),
Main.CIRCLES_CENTER_Y + Main.CIRCLES_DISTANCE / 2 * sin(0),
Main.CIRCLES_RADIUS, Color.ORANGE);
Circle yellowCircle = new Circle(Main.CIRCLES_CENTER_X - Main.CIRCLES_DISTANCE / 2 * cos(0),
Main.CIRCLES_CENTER_Y - Main.CIRCLES_DISTANCE / 2 * sin(0),
Main.CIRCLES_RADIUS, Color.YELLOW);
Pane game = new Pane(orangeCircle, yellowCircle);
root.setCenter(game);
SimpleIntegerProperty angle = new SimpleIntegerProperty(0);
root.setOnKeyPressed(ke -> {
if (ke.getCode().toString().equals("RIGHT")) {
angle.set(360);
}
if (ke.getCode().toString().equals("LEFT")) {
angle.set(-360);
}
});
root.setOnKeyReleased(ke -> {
if (ke.getCode().toString().equals("RIGHT")) {
angle.set(0);
}
if (ke.getCode().toString().equals("LEFT")) {
angle.set(0);
}
});
Rotate orangeCircleRotation = new Rotate(0, Main.CIRCLES_CENTER_X, Main.CIRCLES_CENTER_Y);
orangeCircle.getTransforms().add(orangeCircleRotation);
Rotate yellowCircleRotation = new Rotate(0, Main.CIRCLES_CENTER_X, Main.CIRCLES_CENTER_Y);
yellowCircle.getTransforms().add(yellowCircleRotation);
Timeline rotationAnimation = new Timeline();
rotationAnimation.setCycleCount(Timeline.INDEFINITE);
angle.addListener((ov, old_val, new_val) -> {
System.out.println("fk");
rotationAnimation.stop();
while (rotationAnimation.getKeyFrames().size() > 0) {
rotationAnimation.getKeyFrames().remove(0);
}
rotationAnimation.getKeyFrames().add(
new KeyFrame(Duration.millis(2000),
new KeyValue(orangeCircleRotation.angleProperty(), angle.getValue())));
rotationAnimation.getKeyFrames().add(
new KeyFrame(Duration.millis(2000),
new KeyValue(yellowCircleRotation.angleProperty(), angle.getValue())));
rotationAnimation.play();
}
);
primaryStage.setScene(scene);
primaryStage.show();
}
public Stage getPrimaryStage() {
return primaryStage;
}
}
It works almost fine but when i press a key and release it the circles does not stop. they just start turning backward until the last rotation change point and keep repeating that so also when i press the key again it jumps sometimes.(Because the backward turn has reached its end and starts from the beginning)(Hard to explain!you have to see it for yourself!)
Does anyone know how to fix or achieve this?

I wouldn't try to manipulate the key frames while the animation is in progress. Instead you can just pause/play the animation and change the rate. The only "gotcha" here is that it seems the animation ignores the change in rate if it is paused, so you need to call play() before setRate(...).
Here's the modified SSCCE:
import static java.lang.Math.cos;
import static java.lang.Math.sin;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.input.KeyCode;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;
public class RotatingCircles extends Application {
public static final double CIRCLES_CENTER_X = 600;
public static final double CIRCLES_CENTER_Y = 450;
public static final double CIRCLES_RADIUS = 15;
public static final double CIRCLES_DISTANCE = 300;
public static final double GAME_HEIGHT = 700;
public static final double GAME_WIDTH = 1200;
private Stage primaryStage;
public static void main(String[] args) {
Application.launch(args);
}
#Override
public void start(Stage primaryStage) {
this.primaryStage = primaryStage;
primaryStage.setMinWidth(GAME_WIDTH);
primaryStage.setMinHeight(GAME_HEIGHT);
final Scene scene;
BorderPane root = new BorderPane();
scene = new Scene(root, GAME_WIDTH, GAME_HEIGHT);
Circle orangeCircle = new Circle(CIRCLES_CENTER_X + CIRCLES_DISTANCE / 2 * cos(0),
CIRCLES_CENTER_Y + CIRCLES_DISTANCE / 2 * sin(0),
CIRCLES_RADIUS, Color.ORANGE);
Circle yellowCircle = new Circle(CIRCLES_CENTER_X - CIRCLES_DISTANCE / 2 * cos(0),
CIRCLES_CENTER_Y - CIRCLES_DISTANCE / 2 * sin(0),
CIRCLES_RADIUS, Color.YELLOW);
Pane game = new Pane(orangeCircle, yellowCircle);
root.setCenter(game);
Rotate orangeCircleRotation = new Rotate(0, CIRCLES_CENTER_X, CIRCLES_CENTER_Y);
orangeCircle.getTransforms().add(orangeCircleRotation);
Rotate yellowCircleRotation = new Rotate(0, CIRCLES_CENTER_X, CIRCLES_CENTER_Y);
yellowCircle.getTransforms().add(yellowCircleRotation);
Timeline rotationAnimation = new Timeline();
rotationAnimation.setCycleCount(Timeline.INDEFINITE);
rotationAnimation.getKeyFrames().add(new KeyFrame(Duration.seconds(2), new KeyValue(orangeCircleRotation.angleProperty(), 360)));
rotationAnimation.getKeyFrames().add(new KeyFrame(Duration.seconds(2), new KeyValue(yellowCircleRotation.angleProperty(), 360)));
root.setOnKeyPressed(ke -> {
if (ke.getCode() == KeyCode.RIGHT) {
rotationAnimation.play();
rotationAnimation.setRate(1);
} else if (ke.getCode() == KeyCode.LEFT) {
rotationAnimation.play();
rotationAnimation.setRate(-1);
}
});
root.setOnKeyReleased(ke -> {
rotationAnimation.pause();
});
primaryStage.setScene(scene);
primaryStage.show();
root.requestFocus();
}
public Stage getPrimaryStage() {
return primaryStage;
}
}
BTW In this code you really don't need two separate rotations, since they are identical. Just create a single rotation and add it to both circles' transforms lists. It may be different in your real code, of course...

Animation jumps to the right

Busy with some simple MVC model for my study, there's 1 thing I can't figure out.. when I run my animation, the circle jumps a bit to the right (it seems like it's the half of the radius).
Here my 4 classes:
The model:
public class Model {
private int radius;
private int xAs;
private int yAs;
public Model(int xAs, int yAs, int radius){
this.xAs = xAs;
this.yAs = yAs;
this.radius = radius;
}
public int getRadius(){
return radius;
}
public void setRadius(int radius){
this.radius = radius;
}
public int getXAs(){
return xAs;
}
public void setXAs(int xAs){
this.xAs = xAs;
}
public int getYAs(){
return yAs;
}
public void setYAs(int yAs){
this.yAs = yAs;
}
}
The view:
import javafx.scene.control.Button;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
public class View extends Pane{
private Circle bal;
private Button start;
private Button stop;
private Model model;
public View(Model model){
this.model = model;
createBal();
this.getChildren().add(bal);
start = new Button("Start");
start.setMinWidth(75);
stop = new Button("Stop");
stop.setMinWidth(75);
}
public void createBal(){
bal = new Circle();
bal.setRadius(model.getRadius());
bal.setCenterX(model.getXAs()+bal.getRadius()/2);
bal.setCenterY(model.getYAs());
bal.setFill(Color.RED);
}
public Button getStart(){
return this.start;
}
public Button getStop(){
return this.stop;
}
public void adjust(){
bal.relocate(model.getXAs(), model.getYAs());
}
}
The controller:
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.util.Duration;
public class Controller {
View view;
Model model;
Timeline animatie;
private int yAsPositie = 1;
public Controller(View view, Model model){
this.view = view;
this.model = model;
animatie = new Timeline(new KeyFrame(Duration.millis(10), e -> beweegBal()));
animatie.setCycleCount(Timeline.INDEFINITE);
view.getStart().setOnAction(e -> animatie.play());
view.getStop().setOnAction(e -> animatie.stop());
}
public void beweegBal(){
model.setYAs(model.getYAs() + yAsPositie);
view.adjust();
}
}
The start(app)
import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class App extends Application {
public void start(Stage primaryStage) throws Exception {
Model bal = new Model(20, 20, 20);
View view = new View(bal);
Controller controller = new Controller(view, bal);
//horizontale box aanmaken voor buttons
HBox botMenu = new HBox(30);
//buttons toevoegen aan bottom menu
botMenu.getChildren().addAll(view.getStart(), view.getStop());
//stackpane als container voor canvas
Pane canvas = new Pane();
//canvas toevoegen aan zn container
canvas.setBackground(new Background(new BackgroundFill(Color.DARKGRAY, CornerRadii.EMPTY, Insets.EMPTY)));
//borderpane aanmaken
BorderPane pane = new BorderPane();
//bottom menu als onderste gedeelte indelen
pane.setBottom(botMenu);
botMenu.setAlignment(Pos.BOTTOM_CENTER);
botMenu.setPadding(new Insets(10, 10, 10, 10));
//canvascontainer toevoegen in het midden
pane.setCenter(canvas);
//view toevoegen
canvas.getChildren().add(view);
Scene scene = new Scene(pane, 500, 500);
primaryStage.setTitle("De vallende bal");
primaryStage.setScene(scene);
primaryStage.setMaxHeight(500);
primaryStage.setMaxWidth(500);
primaryStage.setMinHeight(500);
primaryStage.setMinWidth(500);
primaryStage.show();
}
public static void main(String args[]) {
launch(args);
}
}
If you run it, you will notice it jumps a bit to the right, been stuck on it for hours now.

It looks like you are interpreting model.xAs as the x-coordinate of the left edge of the ball, since you use it as the x coordinate when you relocate it. In that case, you surely need to initialize the center with
bal.setCenterX(model.getXAs()+bal.getRadius());
since the radius of a circle is the distance from the center to the edge.

Object instantiated through a another separate class is not appearing on panel

I need to create some circles on a panel and I want them to have some properties, which I plan to use in future like orientation, x and y position etc. For this, I created a general class Robot which extends circle. But, when I am creating an object of this class, it is not being created in the panel.
It works if I am not using a separate class and create object directly from Circle. But I need to maintain some variables with each object. Anybody knows what I am doing wrong in below code:
class Robot extends Circle
{
int radius;
double x;
double y;
int orientation;
Robot(int i)
{
radius = i;
orientation = getRandomIntCoordinates(360);
System.out.println("Inside the constructor");
}
private int getRandomIntCoordinates(int range)
{
Random randInt = new Random();
return randInt.nextInt(range);
}
}
//Inside Another class
private void loadPlayers(Pane playground)
{
robot = new Robot(25);
robot.relocate(200,200);
robot.setFill(Color.RED);
/*for(int i =0; i<100; i++)
{
particles.add(new Circle(7, Color.GREEN));
particles.get(i).relocate(getRandomCoordinates(720), getRandomCoordinates(520));
}*/
//playground.getChildren().addAll(particles);
playground.getChildren().add(robot);
}
Update: I have noticed that nothing gets added to the pane in case I am adding the object of class Robot, while it works flawlessly in case Circle's object is used. Is this a limitation with this inbuilt method? If yes, what can I do to overcome this?

A circle has x and y co-ordinates and a radius, you don't need to duplicate those values in your inherited Robot class. You do need to set the radius and position values of the circle appropriately (e.g. by calling the super constructor) or you won't see the circle.
import javafx.animation.Animation;
import javafx.animation.TranslateTransition;
import javafx.application.Application;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.geometry.Point2D;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.transform.Rotate;
import javafx.stage.Stage;
import javafx.util.Duration;
import java.util.Random;
import java.util.stream.Collectors;
import java.util.stream.IntStream;
public class BorgCollective extends Application {
private static final int PLAYGROUND_SIZE = 300;
private static final int NUM_ROBOTS = 500;
private static final int ROBOT_RADIUS = 10;
private final Random random = new Random(42);
class Robot extends Circle {
private static final int PATROL_LENGTH = 60;
private DoubleProperty orientation = new SimpleDoubleProperty();
public double getOrientation() {
return orientation.get();
}
public DoubleProperty orientationProperty() {
return orientation;
}
public void setOrientation(double orientation) {
this.orientation.set(orientation);
}
public Robot(int radius) {
super(radius);
orientation.set(
random.nextInt(360)
);
patrol();
}
private void patrol() {
Rotate rotate = new Rotate(orientation.get());
Point2D unitVector = rotate.transform(new Point2D(1, 0));
Point2D patrolVector = unitVector.multiply(PATROL_LENGTH);
TranslateTransition patrolAnimation = new TranslateTransition(
Duration.seconds(2),
this
);
patrolAnimation.setCycleCount(Animation.INDEFINITE);
patrolAnimation.setAutoReverse(true);
patrolAnimation.setFromX(0);
patrolAnimation.setFromY(0);
patrolAnimation.setByX(patrolVector.getX());
patrolAnimation.setByY(patrolVector.getY());
patrolAnimation.play();
}
public void relocateWithinPatrolRegionSize(int regionSize) {
int mx = ROBOT_RADIUS + Robot.PATROL_LENGTH;
int my = mx;
int dx = random.nextInt(regionSize - 2 * (ROBOT_RADIUS + PATROL_LENGTH));
int dy = random.nextInt(regionSize - 2 * (ROBOT_RADIUS + PATROL_LENGTH));
setCenterX(mx + dx);
setCenterY(my + dy);
}
}
#Override
public void start(Stage stage) {
Pane playground = new Pane();
playground.setPrefSize(
PLAYGROUND_SIZE,
PLAYGROUND_SIZE
);
IntStream
.range(0, NUM_ROBOTS)
.mapToObj(i ->
createRobot()
)
.collect(
Collectors.toCollection(
playground::getChildren
)
);
stage.setScene(new Scene(playground));
stage.show();
}
private Robot createRobot() {
Robot robot = new Robot(ROBOT_RADIUS);
robot.setFill(randomColor());
robot.relocateWithinPatrolRegionSize(PLAYGROUND_SIZE);
return robot;
}
private Color randomColor() {
return Color.rgb(
random.nextInt(256),
random.nextInt(256),
random.nextInt(256)
);
}
public static void main(String[] args) {
launch(args);
}
}

JavaFX button doesn't work

This is my first project in Java and JavaFX. I have most of the work done but I need a button that does something. I used things found in different tutorials but my button still doesn't work. Nothing happens when I click it. I will be VERY thankful for any tips. Please find a picture of my application attached so that you can understand better what the code draws. Here is my code (button is called b1):
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package po_javafx;
import java.awt.Color;
import java.awt.event.MouseEvent;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.animation.Animation;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.Event;
import javafx.event.EventHandler;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import static javafx.scene.paint.Color.CORNSILK;
import static javafx.scene.paint.Color.DARKGOLDENROD;
import javafx.scene.shape.Line;
import javafx.scene.shape.LineBuilder;
import javafx.stage.Stage;
import javafx.util.Duration;
public class PO_JavaFX extends Application {
public static World world = new World("Game");
static protected int width;
static protected int height;
static protected int civilOffsetX;
static protected int civilOffsetY;
static protected int bossOffsetX;
static protected int bossOffsetY;
static protected int heroOffsetX;
static protected int heroOffsetY;
/**
* #return the civilOffsetX
*/
public static int getCivilOffsetX() {
return civilOffsetX;
}
/**
* #param aCivilOffsetX the civilOffsetX to set
*/
public static void setCivilOffsetX(int aCivilOffsetX) {
civilOffsetX = aCivilOffsetX;
}
/**
* #return the civilOffsetY
*/
public static int getCivilOffsetY() {
return civilOffsetY;
}
/**
* #param aCivilOffsetY the civilOffsetY to set
*/
public static void setCivilOffsetY(int aCivilOffsetY) {
civilOffsetY = aCivilOffsetY;
}
/**
* #return the bossOffsetX
*/
public static int getBossOffsetX() {
return bossOffsetX;
}
/**
* #param aBossOffsetX the bossOffsetX to set
*/
public static void setBossOffsetX(int aBossOffsetX) {
bossOffsetX = aBossOffsetX;
}
/**
* #return the bossOffsetY
*/
public static int getBossOffsetY() {
return bossOffsetY;
}
/**
* #param aBossOffsetY the bossOffsetY to set
*/
public static void setBossOffsetY(int aBossOffsetY) {
bossOffsetY = aBossOffsetY;
}
/**
* #return the heroOffsetX
*/
public static int getHeroOffsetX() {
return heroOffsetX;
}
/**
* #param aHeroOffsetX the heroOffsetX to set
*/
public static void setHeroOffsetX(int aHeroOffsetX) {
heroOffsetX = aHeroOffsetX;
}
/**
* #return the heroOffsetY
*/
public static int getHeroOffsetY() {
return heroOffsetY;
}
/**
* #param aHeroOffsetY the heroOffsetY to set
*/
public static void setHeroOffsetY(int aHeroOffsetY) {
heroOffsetY = aHeroOffsetY;
}
#Override
public void start(Stage stage) throws Exception {
Pane root = new Pane();
setWidth(1400);
setHeight(1000);
Canvas background = new Canvas(getWidth(), getHeight());
final GraphicsContext context = background.getGraphicsContext2D();
File f = new File("background.png");
final Image image = new Image(new FileInputStream(f));
root.getChildren().add(background);
Button b1 = new Button("Spawn Civilian");
b1.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
System.out.println("Hello World!");
}
});
root.getChildren().add(b1);
b1.setLayoutX(1300);
b1.setLayoutY(10);
Canvas animation = new Canvas(getWidth(), getHeight());
Canvas animation2 = new Canvas(getWidth(), getHeight());
final GraphicsContext context2 = animation.getGraphicsContext2D();
final GraphicsContext context3 = animation2.getGraphicsContext2D();
File overlay100 = new File("close.png");
final Image but1;
but1 = new Image(new FileInputStream(overlay100));
File overlay = new File("cywil.png");
final Image cywil;
cywil = new Image(new FileInputStream(overlay));
File overlay2 = new File("city.png");
final Image miasto;
miasto = new Image(new FileInputStream(overlay2));
File overlay3 = new File("cross.png");
final Image skrzyzowanie;
skrzyzowanie = new Image(new FileInputStream(overlay3));
File overlay6 = new File("koksu.png");
final Image koksu = new Image(new FileInputStream(overlay6));
File overlay9 = new File("najman.png");
final Image najman = new Image(new FileInputStream(overlay9));
root.getChildren().add(animation);
root.getChildren().add(animation2);
Scene scene = new Scene(root, getWidth(), getHeight());
stage.setTitle("Old Gotham");
stage.setScene(scene);
stage.show();
final Duration oneFrameAmt = Duration.millis(1000 / 60);
final KeyFrame oneFrame = new KeyFrame(oneFrameAmt,
new EventHandler() {
#Override
public void handle(Event event) {
context2.drawImage(image, 0, 0);
//context2.drawImage(but1, 1250, 100, 100, 100);
int offset = 700;
context2.setLineWidth(5.0);
context2.setStroke(DARKGOLDENROD);
for (Road road : World.roads) {
if (road.getOrientation().equals("horizontal")) {
context2.strokeLine(road.getX(), road.getY(), road.getX2(), road.getY2());
} else if (road.getOrientation().equals("vertical")) {
context2.strokeLine(road.getX(), road.getY(), road.getX2(), road.getY2());
}
}
for (City city : World.cities) {
context3.drawImage(miasto, city.getX() - offset / 2, city.getY() - offset / 2, offset, offset);
}
int crossroadOffsetX = 150;
int crossroadOffsetY = 100;
for (Crossroad crossroad : World.crossroads) {
context2.drawImage(skrzyzowanie, crossroad.getX() - crossroadOffsetX / 2, crossroad.getY() - crossroadOffsetY / 2 + 20, crossroadOffsetX, crossroadOffsetY);
}
setCivilOffsetX(70);
setCivilOffsetY(40);
for (Civilian civilian : World.civilians) {
context2.drawImage(cywil, civilian.getX() - getCivilOffsetX() / 2, civilian.getY() - getCivilOffsetY() / 2, getCivilOffsetX(), getCivilOffsetY());
}
setBossOffsetX(70);
setBossOffsetY(40);
for (Boss boss : World.bosses) {
context2.drawImage(najman, boss.getX() - getBossOffsetX() / 2, boss.getY() - getBossOffsetY() / 2, getBossOffsetX(), getBossOffsetY());
}
setHeroOffsetX(70);
setHeroOffsetY(40);
for (SuperHero hero : World.superheroes) {
context2.drawImage(koksu, hero.getX() - getHeroOffsetX() / 2, hero.getY() - getHeroOffsetY() / 2, getHeroOffsetX(), getHeroOffsetY());
}
}
});
final Timeline tl = new Timeline(oneFrame);
tl.setCycleCount(Animation.INDEFINITE);
tl.play();
}
public static void main(String[] args) {
launch(args);
}
/**
* #return the width
*/
public static int getWidth() {
return width;
}
/**
* #param width the width to set
*/
public void setWidth(int width) {
this.width = width;
}
/**
* #return the height
*/
public static int getHeight() {
return height;
}
/**
* #param height the height to set
*/
public void setHeight(int height) {
this.height = height;
}
}

The Canvas instances you are adding to the root Pane after you add the button (animation and animation2) have the size of the scene, and these are covering everything below them, including the button, so you can't click on the button.
As a first simple solution, you can make these canvases transparent:
animation.setMouseTransparent(true);
animation2.setMouseTransparent(true);
But you can benefit from using different layouts, so you can have the graphic area in one pane and the controls in other. For instance, you could use a BorderPane. Something like this:
BorderPane root = new BorderPane();
Pane paneCenter= new Pane();
Canvas background= new Canvas(1200,1000);
Canvas animation = new Canvas(1200,1000);
Canvas animation2 = new Canvas(1200,1000);
paneCenter.getChildren().addAll(background, animation, animation2);
root.setCenter(paneCenter);
VBox paneRight = new VBox();
paneRight.setPrefSize(200, 1000);
paneRight.setPadding(new Insets(20));
paneRight.setAlignment(Pos.TOP_CENTER);
Button b1 = new Button("Spawn Civilian");
paneRight.getChildren().add(b1);
root.setRight(paneRight);
Scene scene = new Scene(root, 1400, 1000);

How show specific part of an image in javafx

i have this picture(all of these effects are in one .png file ) i want to display for example second picture how can i use Image and ImageView in javafx to display specific part of this image ? thanks

This answer is overkill. But with a nice set of images like you have in your question, maybe overkill is what is called for :-)
The fundamental design is the same as Uluk's, it just adjusts the Viewport of the ImageView rather than setting a clip, but the concept is the same.
Beware => Java 8
import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.event.*;
import javafx.geometry.Rectangle2D;
import javafx.scene.Scene;
import javafx.scene.control.Control;
import javafx.scene.effect.*;
import javafx.scene.image.*;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.util.Duration;
class ExploadableImageView extends ImageView {
private final Rectangle2D[] cellClips;
private int numCells;
private final Duration FRAME_TIME = Duration.seconds(.5);
public ExploadableImageView(Image explosionImage, int numCells) {
this.numCells = numCells;
double cellWidth = explosionImage.getWidth() / numCells;
double cellHeight = explosionImage.getHeight();
cellClips = new Rectangle2D[numCells];
for (int i = 0; i < numCells; i++) {
cellClips[i] = new Rectangle2D(
i * cellWidth, 0,
cellWidth, cellHeight
);
}
setImage(explosionImage);
setViewport(cellClips[0]);
}
public void explode(EventHandler<ActionEvent> onFinished) {
final IntegerProperty frameCounter = new SimpleIntegerProperty(0);
Timeline kaboom = new Timeline(
new KeyFrame(FRAME_TIME, event -> {
frameCounter.set((frameCounter.get() + 1) % numCells);
setViewport(cellClips[frameCounter.get()]);
})
);
kaboom.setCycleCount(numCells);
kaboom.setOnFinished(onFinished);
kaboom.play();
}
}
class ExplodableItem extends StackPane {
public ExplodableItem(Image objectImage, Image explosionImage, int numCells) {
ImageView objectView = new ImageView(objectImage);
ExploadableImageView explosionView = new ExploadableImageView(
explosionImage, numCells
);
setMinSize(
Math.max(
objectImage.getWidth(),
explosionView.getViewport().getWidth()
),
Math.max(
objectImage.getHeight(),
explosionView.getViewport().getHeight()
)
);
objectView.setPickOnBounds(false);
objectView.setOnMouseClicked(event -> {
getChildren().setAll(explosionView);
explosionView.explode(complete -> getChildren().setAll(objectView));
});
DropShadow drop = new DropShadow(10, Color.GOLD);
drop.setInput(new Glow());
objectView.setOnMouseEntered(event -> objectView.setEffect(drop));
objectView.setOnMouseExited(event -> objectView.setEffect(null));
getChildren().setAll(objectView);
}
}
public class CatWhack extends Application {
public static void main(String[] args) {
launch(args);
}
private static final int NUM_CELLS_PER_EXPLOSION = 6;
#Override
public void start(Stage stage) {
Image objectImage = new Image("http://icons.iconarchive.com/icons/iconka/meow/96/cat-box-icon.png"); // cat icon linkware: backlink to http://www.iconka.com required
// looks likes imgur may have blocked direct access to following png from a Java app (somehow).
// but you can still download the QMqbQ.png from that location
// and save it locally in the same directory as the CatWhack program
// then pick it up by replacing the new Image call with:
// new Image(CatWhack.class.getResourceAsStream("QMqbQ.png"));
Image explosionImage = new Image("http://i.stack.imgur.com/QMqbQ.png");
TilePane tiles = new TilePane();
tiles.setPrefColumns(4);
for (int i = 0; i <16; i++) {
tiles.getChildren().add(
new ExplodableItem(objectImage, explosionImage, NUM_CELLS_PER_EXPLOSION)
);
}
tiles.setMinSize(Control.USE_PREF_SIZE, Control.USE_PREF_SIZE);
stage.setTitle("Cat Whack - Click a cat to whack it!");
stage.setScene(new Scene(tiles));
stage.show();
}
}
Simpler example
Here is the same concept as demonstrated in the above game, but just with a simpler system of an animated image which can be controlled via method calls rather than user mouse clicks on the image.
The animated image is similar to a Sprite. The code below is not meant to be a production quality Sprite system (probably a true Sprite system for a game would have more functions and features), it just demonstrates very simple display of an animated image based upon a Viewport.
import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.ToggleButton;
import javafx.scene.image.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;
class Sprite extends ImageView {
private final Rectangle2D[] cellClips;
private int numCells;
private final Timeline timeline;
private final IntegerProperty frameCounter = new SimpleIntegerProperty(0);
public Sprite(Image animationImage, int numCells, Duration frameTime) {
this.numCells = numCells;
double cellWidth = animationImage.getWidth() / numCells;
double cellHeight = animationImage.getHeight();
cellClips = new Rectangle2D[numCells];
for (int i = 0; i < numCells; i++) {
cellClips[i] = new Rectangle2D(
i * cellWidth, 0,
cellWidth, cellHeight
);
}
setImage(animationImage);
setViewport(cellClips[0]);
timeline = new Timeline(
new KeyFrame(frameTime, event -> {
frameCounter.set((frameCounter.get() + 1) % numCells);
setViewport(cellClips[frameCounter.get()]);
})
);
}
public void playOnce() {
frameCounter.set(0);
timeline.setCycleCount(numCells);
timeline.stop();
timeline.playFromStart();
}
public void playContinuously() {
frameCounter.set(0);
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.stop();
timeline.playFromStart();
}
public void stop() {
frameCounter.set(0);
setViewport(cellClips[frameCounter.get()]);
timeline.stop();
}
}
public class SpriteSample extends Application {
private static final int NUM_CELLS_PER_ANIMATION = 6;
private static final Duration FRAME_TIME = Duration.seconds(.5);
public static void main(String[] args) {
launch(args);
}
#Override
public void start(Stage stage) {
// looks likes imgur may have blocked direct access to following png from a Java app (somehow).
// but you can still download the QMqbQ.png from that location
// and save it locally in the same directory as the CatWhack program
// then pick it up by replacing the new Image call with:
// new Image(Sprite.class.getResourceAsStream("QMqbQ.png"));
Image tilesheetImage = new Image(SpriteSample.class.getResourceAsStream("QMqbQ.png"));
Sprite sprite = new Sprite(tilesheetImage, NUM_CELLS_PER_ANIMATION, FRAME_TIME);
ToggleButton animationControl = new ToggleButton("Animate");
animationControl.setOnAction(event -> {
if (animationControl.isSelected()) {
animationControl.setText("Stop");
sprite.playContinuously();
} else {
animationControl.setText("Animate");
sprite.stop();
}
});
VBox layout = new VBox(10, sprite, animationControl);
layout.setPadding(new Insets(10));
layout.setAlignment(Pos.CENTER);
stage.setScene(new Scene(layout));
stage.show();
}
}

You can utilize the clip property of the Node, along with x property of the ImageView. Below is a demo showing the part of image in timeline, like a gif animated picture:
#Override
public void start(Stage stage) {
Group root = new Group();
Image image = new Image(this.getClass().getResource("your.png").toExternalForm());
final int numberOfFrames = 6; // in image
double frameWidth = image.getWidth() / numberOfFrames;
Scene scene = new Scene(root, frameWidth, image.getHeight());
final ImageView view = new ImageView(image);
Rectangle mask = new Rectangle(frameWidth, image.getHeight());
view.setClip(mask);
Timeline timeline = new Timeline();
for (int i = 0; i <= numberOfFrames; i++) {
KeyFrame kf = new KeyFrame(Duration.seconds(i), new KeyValue(view.xProperty(), -frameWidth * i, Interpolator.DISCRETE));
timeline.getKeyFrames().add(kf);
}
timeline.setCycleCount(Timeline.INDEFINITE);
timeline.play();
root.getChildren().add(view);
stage.setScene(scene);
stage.show();
}

As someone who is new to JavaFX, I had the same question. The question asks for much less than the above answers provide. We just want to manually select and display a portion of the image in an ImageView without animation. Here is the simplest solution wherein the user enters the image number and presses a button to display the desired image part.
package com.pakzaban;
import javafx.fxml.FXML;
import javafx.geometry.Rectangle2D;
import javafx.scene.control.TextField;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
public class Controller {
#FXML
public ImageView imageView;
public TextField numberField;
private final int IMAGE_WIDTH = 50;
private final int IMAGE_HEIGHT = 80;
private int imageNumber = 1;
public void onSetImagePressed(){
try {
imageNumber = Integer.parseInt(numberField.getText());
//SET THE WHOLE IMAGE INTO IMAGEVIEW
Image wholeImage = new Image("com/pakzaban/wholePicture.png");
imageView.setImage(wholeImage);
//SET THE VIEWPORT TO DESIRED PART OF THE IMAGE
Rectangle2D imagePart = new Rectangle2D((imageNumber - 1) * IMAGE_WIDTH, 0, IMAGE_WIDTH, IMAGE_HEIGHT);
imageView.setViewport(imagePart);
}
catch (Exception e){
e.printStackTrace();
}
}
}