Im trying to create a scrolling background effect with two imageViews where one picture is on top of another picture and out of the window; then i try to scroll both down the window to create a scrolling effect by changing their y coordinates. I made a loop to do so and put a thread.sleep so it wouldnt do it too quickly. Then i reset the picutres positions and do the loop again. However, when i try to run the program, the window will never open. Taking out the loop obviously properly shows the window with the picutre.
public class TestBackground extends Application{
#Override
public void start(Stage stage) throws Exception {
stage.setTitle("DRIFT STAGE");
Pane game = new Pane();
Scene gameScene = new Scene(game, 956, 740);
ImageView background = new ImageView(getClass().getResource("bg.png").toExternalForm());
game.getChildren().add(background);
ImageView background2 = new ImageView(getClass().getResource("bg.png").toExternalForm());
game.getChildren().add(background2);
background2.setY(-740);
//loop to scroll background vertically
for (int j = 0; j < 20; j++) {
for (double i = 1.0; i < 741.0; i++) {
background.setY(background.getY() + i);
background2.setY(background2.getY() + i);
try {
Thread.sleep(250);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
background.setY(0.0);
background2.setY(-740.0);
}
stage.setScene(gameScene);
stage.show();
}
public static void main(String[] args) { launch(args); }
}
Your loop is not the right thing to do. Use a Transition Animation on each ImageView. You want a TranslateTransition.
Something like this:
// Animation to scroll background vertically
TranslateTransition trans1 = new TranslateTransition(Duration.minutes(1), background);
trans1.setFromY(0);
trans1.setToY(740);
trans1.setCycleCount(20);
TranslateTransition trans2 = new TranslateTransition(Duration.minutes(1), background2);
trans2.setFromY(-740);
trans2.setToY(0);
trans2.setCycleCount(20);
ParallelTransition parTrans = new ParallelTransition(trans1, trans2);
parTrans.play();
If your intention is to have these images as a parallax background that scrolls "forever", set the transitions to cycle indefinitely
trans1.setCycleCount(Animation.INDEFINITE);
and use slightly different durations for each.
If you are using the same image, don't load it twice:
Image bgImg = new Image(getClass().getResource("bg.png").toExternalForm());
ImageView background = new ImageView(bgImg);
game.getChildren().add(background);
ImageView background2 = new ImageView(bgImg);
game.getChildren().add(background2);
Here's the whole start method with an added speed slider, just for fun:
#Override
public void start(Stage stage) {
stage.setTitle("DRIFT STAGE");
Pane game = new Pane();
Scene gameScene = new Scene(game, 956, 740);
Image bgImg = new Image(getClass().getResource("bg.png").toExternalForm());
ImageView background = new ImageView(bgImg);
ImageView background2 = new ImageView(bgImg);
Slider speedSlider = new Slider(0, 5, 1);
game.getChildren().addAll(background, background2, speedSlider);
// Animation to scroll background vertically
TranslateTransition trans1 = new TranslateTransition(Duration.seconds(10), background);
trans1.setFromY(0);
trans1.setToY(740);
trans1.setInterpolator(Interpolator.LINEAR);
trans1.setCycleCount(Animation.INDEFINITE);
TranslateTransition trans2 = new TranslateTransition(Duration.seconds(10), background2);
trans2.setFromY(-740);
trans2.setToY(0);
trans2.setCycleCount(Animation.INDEFINITE);
trans2.setInterpolator(Interpolator.LINEAR);
ParallelTransition parTrans = new ParallelTransition(trans1, trans2);
parTrans.rateProperty().bind(speedSlider.valueProperty());
parTrans.play();
stage.setScene(gameScene);
stage.show();
}
Related
I'm trying to do a maze resolver with a cellular automaton but I have a display problem
for each new generation of a grid of an automaton we try to display the cells in the form of rectangle.The initialization works well and the grid is displayed,the last generation of the simulation is displayed too but not the intermediate steps.
pic of first generation
last generation
//Initialise la liste des rectangles
public void initRectList() {
for(int height = 0; height < this.mazeA.grid.getHeight(); height++) {
for(int width = 0; width < this.mazeA.grid.getWidth(); width++) {
this.rectList[height][width] = new Rectangle(REC_HEIGHT,REC_WIDTH, getColorCell(this.mazeA.grid, height, width));
}
}
}
//Dessine le labyrinthe
public void drawGrid() {
for (int height = 0; height < this.mazeA.grid.getHeight(); height++) {
for(int width = 0; width < this.mazeA.grid.getWidth(); width++) {
tilePane.getChildren().add(this.rectList[height][width]);
}
}
}
public class MazeFX {
private HBox root = new HBox();
private Scene scene = new Scene(root,1100,800);
private TilePane tilePane = new TilePane();
private Grid grid = new Grid(30,30);
private Rectangle[][] rectList = new Rectangle[30][30];
private VBox buttons = new VBox();
private Button reset = new Button("Reset");
private Button pas = new Button("Play");
private Button load = new Button("Load");
private MazeAutomaton mazeA;
private final double REC_HEIGHT = 20.;
private final double REC_WIDTH = 20.;
public MazeFX(Stage stage) throws InterruptedException {
scene.getStylesheets().add(getClass().getResource("/src/application.css").toExternalForm());
initButton();
initLayout();
initGridByTopologie();
mazeA = new MazeAutomaton(this.grid);
initRectList();
drawGrid();
pressedButtons(stage);
setWindow(stage);
displayWindow(stage);
}
to start the next generation you press a button.
//Action de l'utilisateur sur l'un des bouttons
public void pressedButtons(Stage stage) {
pressReset();
pressPAS();
pressLoad(stage);
}
//Boutton Play/Stop préssé
public void pressPAS() {
this.pas.setOnMouseClicked(e -> {
for (int i = 0; i < 30; i++) {
mazeA.nextStep();
try {
Thread.sleep(100);
} catch (InterruptedException interruptedException) {
interruptedException.printStackTrace();
}
updateRectColor();
}
}
);
}
the problem seems to be that we are stuck in the method setOnMouseClicked() and that the update of the rectangles is not done, with a textual display I see the evolution of the automaton which indicates us that the simulation works and that the problem seems to come from JavaFX
The JavaFX Application Thread runs as a loop. Effectively (the actual implementation details are far more complex) that loop does the following (in pseudocode):
while (applicationIsRunning()) {
if (thereAreEventsToHandle()) {
handleEvents();
}
if (thereAreAnimationsToUpdate()) {
updateAnimations();
}
if (itsTimeToRenderTheScene()) {
renderScene();
}
}
By default, JavaFX renders the scene at most 60 times per second.
The code in your event handler is executed on the FX Application Thread (it's invoked by the first block in the pseudocode loop above). Since it sleeps on that thread, the FX Application Thread never gets to the third part of the loop (rendering the Scene) until the entire event handler completes. Consequently, you never see the intermediate updates, because the scene is never rendered.
Assuming mazeA.nextStep() doesn't block (or take a long time to run), it's best to refactor this as an Animation, e.g. a Timeline:
public void pressPAS() {
this.pas.setOnMouseClicked(e -> {
KeyFrame updateMaze = new KeyFrame(Duration.ZERO, evt -> mazeA.nextStep());
KeyFrame updateRect = new KeyFrame(Duration.millis(100), evt -> updateRectColor());
Timeline timeline = new Timeline(updateMaze, updateRect);
timeline.setCycleCount(30);
timeline.play();
});
}
The timeline.play() method simply starts the animation and returns immediately, allowing the FX Application Thread to proceed. When the FX Application Thread checks for running animations, it will check if it's time to execute either of the handlers in the key frames, and if so will execute them. Then it will render the scene as usual.
I'm trying to do a maze resolver with a cellular automaton but I have a display problem
for each new generation of a grid of an automaton we try to display the cells in the form of rectangle.The initialization works well and the grid is displayed,the last generation of the simulation is displayed too but not the intermediate steps.
pic of first generation
last generation
//Initialise la liste des rectangles
public void initRectList() {
for(int height = 0; height < this.mazeA.grid.getHeight(); height++) {
for(int width = 0; width < this.mazeA.grid.getWidth(); width++) {
this.rectList[height][width] = new Rectangle(REC_HEIGHT,REC_WIDTH, getColorCell(this.mazeA.grid, height, width));
}
}
}
//Dessine le labyrinthe
public void drawGrid() {
for (int height = 0; height < this.mazeA.grid.getHeight(); height++) {
for(int width = 0; width < this.mazeA.grid.getWidth(); width++) {
tilePane.getChildren().add(this.rectList[height][width]);
}
}
}
public class MazeFX {
private HBox root = new HBox();
private Scene scene = new Scene(root,1100,800);
private TilePane tilePane = new TilePane();
private Grid grid = new Grid(30,30);
private Rectangle[][] rectList = new Rectangle[30][30];
private VBox buttons = new VBox();
private Button reset = new Button("Reset");
private Button pas = new Button("Play");
private Button load = new Button("Load");
private MazeAutomaton mazeA;
private final double REC_HEIGHT = 20.;
private final double REC_WIDTH = 20.;
public MazeFX(Stage stage) throws InterruptedException {
scene.getStylesheets().add(getClass().getResource("/src/application.css").toExternalForm());
initButton();
initLayout();
initGridByTopologie();
mazeA = new MazeAutomaton(this.grid);
initRectList();
drawGrid();
pressedButtons(stage);
setWindow(stage);
displayWindow(stage);
}
to start the next generation you press a button.
//Action de l'utilisateur sur l'un des bouttons
public void pressedButtons(Stage stage) {
pressReset();
pressPAS();
pressLoad(stage);
}
//Boutton Play/Stop préssé
public void pressPAS() {
this.pas.setOnMouseClicked(e -> {
for (int i = 0; i < 30; i++) {
mazeA.nextStep();
try {
Thread.sleep(100);
} catch (InterruptedException interruptedException) {
interruptedException.printStackTrace();
}
updateRectColor();
}
}
);
}
the problem seems to be that we are stuck in the method setOnMouseClicked() and that the update of the rectangles is not done, with a textual display I see the evolution of the automaton which indicates us that the simulation works and that the problem seems to come from JavaFX
The JavaFX Application Thread runs as a loop. Effectively (the actual implementation details are far more complex) that loop does the following (in pseudocode):
while (applicationIsRunning()) {
if (thereAreEventsToHandle()) {
handleEvents();
}
if (thereAreAnimationsToUpdate()) {
updateAnimations();
}
if (itsTimeToRenderTheScene()) {
renderScene();
}
}
By default, JavaFX renders the scene at most 60 times per second.
The code in your event handler is executed on the FX Application Thread (it's invoked by the first block in the pseudocode loop above). Since it sleeps on that thread, the FX Application Thread never gets to the third part of the loop (rendering the Scene) until the entire event handler completes. Consequently, you never see the intermediate updates, because the scene is never rendered.
Assuming mazeA.nextStep() doesn't block (or take a long time to run), it's best to refactor this as an Animation, e.g. a Timeline:
public void pressPAS() {
this.pas.setOnMouseClicked(e -> {
KeyFrame updateMaze = new KeyFrame(Duration.ZERO, evt -> mazeA.nextStep());
KeyFrame updateRect = new KeyFrame(Duration.millis(100), evt -> updateRectColor());
Timeline timeline = new Timeline(updateMaze, updateRect);
timeline.setCycleCount(30);
timeline.play();
});
}
The timeline.play() method simply starts the animation and returns immediately, allowing the FX Application Thread to proceed. When the FX Application Thread checks for running animations, it will check if it's time to execute either of the handlers in the key frames, and if so will execute them. Then it will render the scene as usual.
I'm trying to put an image as a background in a JavaFX scene, but my code isn't working.
Im trying to make a Battleship-game program in java eclipse but i'm stuck at a graphics problem.
public class WindowGUI extends Application{
Game game;
Image image;
public WindowGUI(Game game) {
this.game = game;
}
public static void main(String[] args) {
Game game = new Game();
new WindowGUI(game);
}
#Override
public void start(Stage stage) throws Exception {
stage.setTitle("Battleship");
image = new Image ("C:\\Users\\amali\\git\\inf101.v19.sem2\\inf101.v19.sem2\\src\\window\\battleshipbackground.jpg");
ImageView background = new ImageView(image);
Button startButton = new Button("START");
BorderPane newStack = new BorderPane();
newStack.getChildren().add(startButton);
newStack.getChildren().add(background);
stage.setScene(new Scene(newStack, 1300, 860));
stage.show();
startButton.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
// START THE GAME
}
});
}
}
When I first tried to run it, it worked and a new window opened with a button in the center, but the bakcground was blank. When i try setting an image as background in the window, behing the 'start'-button, nothing happens..
A better way to do it is to use the Background class rather than trying to add an ImageView as a child of your BorderPane.
Image image = new Image("C:\\Users\\amali\\git\\inf101.v19.sem2\\inf101.v19.sem2\\src\\window\\battleshipbackground.jpg");
BackgroundSize size = new BackgroundSize(BackgroundSize.AUTO,
BackgroundSize.AUTO,
false,
false,
true,
false);
Background background = new Background(new BackgroundImage(image,
BackgroundRepeat.NO_REPEAT,
BackgroundRepeat.NO_REPEAT,
BackgroundPosition.CENTER,
size));
newStack.setBackground(background);
Use BackgroundImage class.
or try this
JavaFX How to set scene background image
I am building a javaFX application.
The example program which is online working well: http://www.java2s.com/Tutorials/Java/JavaFX/1010__JavaFX_Timeline_Animation.htm
I changed it a bit:
I want to have these nice moving circles in the background. That's why I made these tricks:
Main.java:
#Override
public void start(Stage primaryStage) {
try {
// load the FXML resource
FXMLLoader loader = new FXMLLoader(getClass().getResource("Dashboard.fxml"));
// store the root element so that the controllers can use it
StackPane root = new StackPane();
Pane bgRoot = new Pane();
GridPane userRoot = (GridPane) loader.load();
// create and style a scene
Rectangle2D primaryScreenBounds = Screen.getPrimary().getBounds();
BackgroundScene bgScene = new BackgroundScene(root, bgRoot, primaryScreenBounds.getWidth(),
primaryScreenBounds.getHeight(), Color.BLACK);
// TODO CSS load:
// bgScene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
// create the stage with the given title and the previously created
// scene
primaryStage.setFullScreen(true);
primaryStage.setMaximized(true);
primaryStage.setResizable(false);
primaryStage.setMinWidth(primaryScreenBounds.getWidth());
primaryStage.setMinHeight(primaryScreenBounds.getHeight());
primaryStage.setScene(bgScene);
root.getChildren().add(bgRoot);
root.getChildren().add(userRoot);
// show the GUI
primaryStage.show();
userRoot.setPrefHeight(root.getHeight());
userRoot.setPrefWidth(root.getWidth());
} catch (Exception e) {
e.printStackTrace();
}
}
In the above code:
I have a stage with a stack pane.
There is a Pane on the StackPane with the Circles
On that there is a GridPane for controllers.
I made my own Scene as BackgroundScene:
public class BackgroundScene extends Scene {
private Pane bgRoot;
public BackgroundScene(Parent root, Pane bgRoot, double width, double height, Color color) {
super(root, width, height, color);
this.bgRoot = bgRoot;
makeGreenCircleAnimation();
}
public void makeGreenCircleAnimation() {
Group circles = new Group();
for (int i = 0; i < 30; i++) {
Circle circle = new Circle(Math.random() * this.getWidth(), Math.random() * this.getHeight(),
150, Color.web("white", 0.05));
circle.setStrokeType(StrokeType.OUTSIDE);
circle.setStroke(Color.web("white", 0.16));
circle.setStrokeWidth(4);
circles.getChildren().add(circle);
}
circles.setEffect(new BoxBlur(10, 10, 3));
Rectangle colors = new Rectangle(this.getWidth(), this.getHeight(),
new LinearGradient(0f, 1f, 1f, 0f, true, CycleMethod.NO_CYCLE,
new Stop[] { new Stop(0, Color.web("#00ff00")), new Stop(0.14, Color.web("#11ee11")),
new Stop(0.28, Color.web("#22dd22")), new Stop(0.43, Color.web("#33cc33")),
new Stop(0.57, Color.web("#44bb44")), new Stop(0.71, Color.web("#55aa55")),
new Stop(0.85, Color.web("#669966")), new Stop(1, Color.web("#778877")), }));
Group blendModeGroup = new Group(
new Group(new Rectangle(this.getWidth(), this.getHeight(), Color.DARKGREEN), circles), colors);
colors.setBlendMode(BlendMode.OVERLAY);
bgRoot.getChildren().add(blendModeGroup);
Timeline timeline = new Timeline();
makeAnimation(circles, timeline);
timeline.play();
timeline.setOnFinished(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
makeAnimation(circles, timeline);
timeline.play();
}
});
}
void makeAnimation(Group group, Timeline timeline) {
timeline.getKeyFrames().clear();
for (Node node : group.getChildren()) {
timeline.getKeyFrames()
.addAll(new KeyFrame(Duration.ZERO, // set start
// position at 0
new KeyValue(node.translateXProperty(), node.getLayoutX() + node.getTranslateX()),
new KeyValue(node.translateYProperty(), node.getLayoutY() + node.getTranslateY())),
new KeyFrame(new Duration(4000), // set end position at
// 40s
new KeyValue(node.translateXProperty(), Math.random() * this.getWidth()),
new KeyValue(node.translateYProperty(), Math.random() * this.getHeight())));
}
}
}
It contains the code from the tutorial (with minor changes).
I add the circles and everything to the Pane not to a Group (as in
the online example)
The problem is that it is seams to be moving:
The circles are moving to the right (always)
If I change something in the code:
Main.java (instantiating my scene):
BackgroundScene bgScene = new BackgroundScene(root, root, primaryScreenBounds.getWidth(),
primaryScreenBounds.getHeight(), Color.BLACK);
(so giving the circles to the StackPane)
This happens:
You can download the eclipse project:
https://www.dropbox.com/s/dovae0hxdtsnsdo/Test.7z?dl=0
Do you know what is the problem?
Or can you suggest something how I can put the circles nicely behind the button?
I have been working on a javafx program using FXML. I am trying to dynamically create a TilePane from information pulled in from one scene, and I can't seem to get the TilePane to show up. I've tried just about everything I can think of, and I am stumped. I am posting the relevant code below. Thank you for your help!
EDIT: I've simplified the code below for easier reading. If this isn't enough, I'll make an MCVE.
Main Controller
#FXML private ScrollPane gridScroll;
private TilePane tPane;
//Method to build each cell for the tilepane
private StackPane buildCell(Stitch stitch){
StackPane pane = new StackPane();
pane.setPrefSize(5, 5);
// add labels to stackpane
Label stitchLabel = new Label(stitch.getStitchType().toString());
Label strandLabel = new Label(stitch.getNumStrands().toString());
//create rectangle to color stackpane
Rectangle rect = new Rectangle (5, 5); //set rectangle to same size as stackpane
rect.setFill(stitch.getDisplayColor()); //Color the rectangle
rect.setStroke(Color.BLACK); //border the rectangle in black
pane.getChildren().addAll(stitchLabel, strandLabel, rect);
return pane;
}
protected void createTiles(Stitch[][] stitchArray, int width, int height){
tPane = new TilePane(); //Create a new tilepane
gridScroll.setContent(tPane); //add tilepane to existing scrollpane
tPane.setPrefColumns(width); //set prefcolumns to the array width
//add cells to tilepane
for (int i=0; i<width; i++){
for (int j=0; j<height; j++){
StackPane cell = buildCell(stitchArray[i][j]);
tPane.getChildren().add(cell);
}
}
}
Code from the secondary controller that calls the tilepane to be created
#FXML void finish(){
//create data to populate tilepane with
Stitch[][] stitchArray = floss.ImageConversion.createStitchArray(posterizedImage);
int width = (int) currentPicWidth; //cast double to int
int height = (int) currentPicHeight; //cast double to int
//get the main Controller
FXMLLoader loader = new FXMLLoader(getClass().getResource("InStitchesFXML.fxml"));
try {
loader.load();
} catch (IOException e) {e.printStackTrace();}
InStitchesController isCtrl = loader.getController();
//create the tiles
isCtrl.createTiles(stitchArray, width, height);
//close the stage
importStage.close();
}
I hope this helps clarify things.
Fixed it. I rewrote my code based on this tutorial.
Then, I created a BooleanProperty object and added a change listener to it. When the BooleanProperty was set to true, the code to create tiles was executed. Then, I set the BooleanProperty to true when I exited the tile creation dialog.
If anyone has any questions, I can post code snippets.