CODEWITHSUNDEEP
javamultithreadingjavafx
Kushagr Tyagi
Kushagr Tyagi

Reputation: 101

JavaFX GUI freezes by switching scenes

I am switching scenes for my game from my startup page to the game, the game scene works fine if I play it alone, but when I play it after switching from the startup page the game freezes for a bit.

What is causing my main game to freeze for sometime (it starts again after sometime) after switching scenes, I am positive that the game runs fine without me switching scenes.

The flow of control of program is - from player the startuppage scene is loaded to the stage and in the mainController if the play button is pressed the scene is swapped to my games scene. The problem only arises due to switching scenes. Please help. Thanks in advance.

Here is my main class player

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class player extends Application {
    Scene s1,s2;
    Stage stg;
public static void main(String args[]) {
        Application.launch(args);
}

@Override
public void start(Stage stage) throws Exception {
    stg = stage;
    FXMLLoader loader1 = new FXMLLoader(getClass().getResource("Main.fxml"));
    Parent root1 = loader1.load();

    s1 = new Scene(root1,800,600);

    s1.getStylesheets().add(getClass().getResource("main.css").toExternalForm());
    stg.setScene(s1);

    stg.show(); 

}
}

Here is my Controller for the startup page.

package application;
import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.Node;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.stage.Stage;

public class mainController   {
    @FXML 
    Button play;


public void func(ActionEvent event) throws Exception {
    FXMLLoader loader = new FXMLLoader (getClass().getResource("thread1.fxml"));
    Parent root = loader.load();
    Scene s2 = new Scene(root,800,600);
    Stage window = (Stage)(((Node)event.getSource()).getScene().getWindow());
    window.setScene(s2);
    window.show();
}
}

Here is my startup page fxml file

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.Pane?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.text.Text?>

<Pane id="mainpane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.162-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.mainController">
   <children>
      <ImageView id="menubg" fitHeight="1193.0" fitWidth="763.0" layoutY="-231.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@background.png" />
         </image>
      </ImageView>
      <Button fx:id="play" layoutX="265.0" layoutY="322.0" mnemonicParsing="false" onAction="#func" prefHeight="40.0" prefWidth="111.0" text="Play Game" textAlignment="CENTER" />
      <Button fx:id="help" layoutX="241.0" layoutY="483.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="58.0" text="Help" textAlignment="CENTER" />
      <Button fx:id="exit" layoutX="349.0" layoutY="483.0" mnemonicParsing="false" prefHeight="26.0" prefWidth="58.0" text="Exit" textAlignment="CENTER" />
      <Text id="title" layoutX="177.0" layoutY="231.0" strokeType="OUTSIDE" strokeWidth="0.0" text="PARACHUTE PANIC" textAlignment="CENTER">
         <font>
            <Font name="AR DARLING" size="31.0" />
         </font>
      </Text>
      <Text id="highscore" layoutX="254.0" layoutY="433.0" strokeType="OUTSIDE" strokeWidth="0.0" text="HIGHSCORE: 40">
         <font>
            <Font name="AR DARLING" size="17.0" />
         </font>
      </Text>
   </children>
</Pane>

The games controller class is too big to be uploaded

Here is my fxml file for the game

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.text.Font?>

<AnchorPane id="pane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.162-ea" xmlns:fx="http://javafx.com/fxml/1" fx:controller="application.Controller">
   <children>
      <ImageView fx:id="background" fitHeight="1094.0" fitWidth="731.0" layoutX="-2.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@background.png" />
         </image>
      </ImageView>
      <ImageView fx:id="player1" fitHeight="42.0" fitWidth="98.0" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefall.png" />
         </image>
      </ImageView>
        <ImageView fx:id="playero1" fitHeight="80" fitWidth="80" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefallp.png" />
         </image>
      </ImageView>
        <ImageView fx:id="player2" fitHeight="42.0" fitWidth="98.0" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefall.png" />
         </image>
      </ImageView>
        <ImageView fx:id="playero2" fitHeight="80" fitWidth="80" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefallp.png" />
         </image>
      </ImageView>
       <ImageView fx:id="player3" fitHeight="42.0" fitWidth="98.0" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefall.png" />
         </image>
      </ImageView>
        <ImageView fx:id="playero3" fitHeight="80" fitWidth="80" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefallp.png" />
         </image>
      </ImageView> 
      <ImageView fx:id="player4" fitHeight="42.0" fitWidth="98.0" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefall.png" />
         </image>
      </ImageView>
        <ImageView fx:id="playero4" fitHeight="80" fitWidth="80" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefallp.png" />
         </image>
      </ImageView> 
      <ImageView fx:id="player5" fitHeight="42.0" fitWidth="98.0" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefall.png" />
         </image>
      </ImageView>
        <ImageView fx:id="playero5" fitHeight="80" fitWidth="80" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefallp.png" />
         </image>
      </ImageView> 
      <ImageView fx:id="player6" fitHeight="42.0" fitWidth="98.0" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefall.png" />
         </image>
      </ImageView>
        <ImageView fx:id="playero6" fitHeight="80" fitWidth="80" layoutX="47.0" layoutY="27.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@freefallp.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud1" fitHeight="59.0" fitWidth="118.0" layoutX="-7.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud3" fitHeight="59.0" fitWidth="118.0" layoutX="150.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud4" fitHeight="59.0" fitWidth="118.0" layoutX="250.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud6" fitHeight="59.0" fitWidth="118.0" layoutX="340.0" layoutY="-2.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud7" fitHeight="59.0" fitWidth="118.0" layoutX="440.0" layoutY="-6.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud8" fitHeight="59.0" fitWidth="118.0" layoutX="540.0" layoutY="-6.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud9" fitHeight="59.0" fitWidth="118.0" layoutX="640.0" layoutY="-6.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
       <ImageView fx:id="boat" fitHeight="160" fitWidth="160" layoutX="0.0" layoutY="665.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@boat.png" />
         </image>
      </ImageView>
      <ImageView fx:id="water1" fitHeight="95.0" fitWidth="400.0" layoutX="386.0" layoutY="680.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@water.gif" />
         </image>
      </ImageView>
      <ImageView fx:id="water" fitHeight="95.0" fitWidth="400.0" layoutX="-10.0" layoutY="683.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@water.gif" />
         </image>
      </ImageView> 
      <ImageView fx:id="plane" fitHeight="95" fitWidth="95" layoutX="650.0" layoutY="31.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@airplane.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud2" fitHeight="59.0" fitWidth="118.0" layoutX="60.0" layoutY="-5.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud5" fitHeight="59.0" fitWidth="118.0" layoutX="190.0" layoutY="-17.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <ImageView fx:id="cloud10" fitHeight="59.0" fitWidth="118.0" layoutX="590.0" layoutY="-9.0" pickOnBounds="true" preserveRatio="true">
         <image>
            <Image url="@cloud.png" />
         </image>
      </ImageView>
      <Label fx:id="lives" layoutX="14.0" layoutY="6.0" text="Label">
         <font>
            <Font name="AR DARLING" size="18.0" />
         </font></Label>
      <Label fx:id="score" layoutX="579.0" layoutY="6.0" text="Label">
         <font>
            <Font name="AR DARLING" size="18.0" />
         </font></Label>
   </children>
</AnchorPane>

Upvotes: 1

Views: 1859

Answers (1)

Matruskan
Matruskan

Reputation: 353

I guess loading thread1.fxml from inside the JavaFX thread after button click might be the issue.

You may try loading it before the button click, so it won't take too long.

Player.java:

public class player extends Application {
    Scene s1,s2;
    Stage stg;
    public static void main(String args[]) {
        Application.launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        stg = stage;
        FXMLLoader loader1 = new FXMLLoader(getClass().getResource("Main.fxml"));
        Parent root1 = loader1.load();
        s1 = new Scene(root1,800,600);
        s1.getStylesheets().add(getClass().getResource("main.css").toExternalForm());
        stg.setScene(s1);

        FXMLLoader loader2 = new FXMLLoader (getClass().getResource("thread1.fxml"));
        Parent thread1Root = loader2.load();
        s2 = new Scene(thread1Root,800,600);
        ((MainController)loader2.getController()).setThread1Scene(s2);

        stg.show(); 
    }
}

MainController.java:

public class MainController {
    @FXML 
    Button play;
    private Scene thread1Scene;

    public void setThread1Scene(Scene s2) {
        this.thread1Scene = s2;
    }

    public void func(ActionEvent event) throws Exception {
        Stage window = (Stage)(((Node)event.getSource()).getScene().getWindow());
        window.setScene(s2);
        window.show();
    }
}

You could also show a "Loading" screen on button click, then load thread1.fxml within a Platform.runLater():

showLoadingLabel();
Platform.runLater(() -> doSomethingSlow());

Upvotes: 1

Related Questions