Download Eclipse SimRel 2018-09 edition then create a new blank scene with JavaFx in Windows 10

It has been a while since I have stopped developing game for windows 10 and android phone but starting from today I have decided to get really busy and spend most of my time writing articles as well as develop a few new games and applications at the same time for android phone as well as windows 10. Do follow this blog as well as my other blog codingdirectional.info to read all the brand new game and application development articles starting from today (November 5 2018) onward.

Here are what I have in mind for my new game development projects:

1) Develop 1 to 5 laptop games with JavaFx.
2) Develop 1 to 5 laptop games with pygame (a python framework for game development).
3) Develop 1 to 5 android games using Unity, AndEngine as well as purely Java code.

So there it is, it will be a very busy working days to me starting from today.

This article will become the starting point for one of the five games that I will create using JavaFx, if you want to follow the development of this new JavaFx game then don’t forget to follow the game development article in the JavaFx category of this website. The game which creates with pygame will be put under the Pygame category which you can also read it on this same website.

Ok, without wasting any time lets get started with our new JavaFx game development. Here are the things we need before we can start writing the JavaFx game.

1) I will use Java version 8 instead of 11 because Java 8 is the most stable version of Java at this moment. So you will need to go ahead and download the Java SE Development Kit 8u192 (includes JRE) if you have not yet installed one in your windows os already. After you have downloaded the JDK packages go ahead and follow the step by step set up instructions to install Java SDK on the windows os and we will then be ready for step number two.

2) The are lots of great tools that we can use to write a Java program but my best favorite is always Eclipse because I am the fan of Eclipse since I was a young man and until now Eclipse is still my best choice when it comes to picking an IDE for game development. So go ahead and Download Eclipse SimRel 2018-09 edition installer then start to download and install the Eclipse IDE for Java Developers to your Windows 10 OS.

Eclipse Installer
Eclipse Installer

3) After you have installed this latest version of Eclipse just go ahead and launch it, make sure you have have specified the location where to save your projects folder at the first time of your launch.

4) You will be greeted with the welcome screen after you have successfully launched the new Eclipse SimRel 2018-09, click ‘x’ at the top left of the welcome scene to exit it. We need one last step before we can use JavaFx to create a game, we need to install the JavaFX Tooling and Runtime for Eclipse and OSGi software, so go ahead and click on the Help menu then select Install New Software, then on the new pop up click on the Add button to create a new repository, give it a name under the Name field and enter this url http://download.eclipse.org/efxclipse/updates-released/3.3.0/site/ into the Location field and wait for Eclipse to download that Software. You will need to restart Eclipse once the software package has been installed.

5) After you have restarted Eclipse it is time to create a new JavaFx Project, go to the File menu then select New->Project->JavaFx->JavaFx Project then click on the Next button.

JavaFx Project
JavaFx Project

Next fill in the project name then click on the Finish button.

JavaFx Project
Create JavaFx Project

6) Now the java project has been created with a blank ui scene. Look at the file explorer panel of the Eclipse IDE and you should have seen the following file’s structure at the moment.

Click on Main.java file
Click on Main.java file

Select the Main.java file and you will see this file content on the coding panel.

package application;
	
import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.layout.BorderPane;


public class Main extends Application {
	@Override
	public void start(Stage primaryStage) {
		try {
			BorderPane root = new BorderPane();
			Scene scene = new Scene(root,400,400);
			scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
			primaryStage.setScene(scene);
			primaryStage.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}

Click the green arrow button at the top of Eclipse to run the project. If everything goes smoothly then you will see below scene pop up.

Empty JavaFx scene
Empty JavaFx scene

Next look at the file explorer again, do you notice there is a css file inside the application folder? This is where you can set style for the ui. Do you notice this line of code at the above program?

scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

This means that the scene and all the nodes under that scene will use that same style sheet above.

Now lets modified the above program a little. First we will reset the size of the window, make it non resizable and change the title of that window. Add in or change the code under the start function as follows.

primaryStage.setTitle("Hello World!");
primaryStage.setResizable(false);

Scene scene = new Scene(root,600,600);

Next we will add in a button at the center of the BorderPane’s node, add in an event listener to that button which will terminate the program and close the ui if we click on the button.

Button btn = new Button();
btn.setText("Close");
btn.setOnAction(new EventHandler<ActionEvent>() {
		        @Override public void handle(ActionEvent e) {
			    	System.out.print("close");
			        System.exit(0);
		}});
root.setCenter(btn);

Next lets open the application.css file then set the style for the ui background as well as the button. There is no different between JavaFx css property as compared with the normal one except we will need to prefix it with -fx-. Here is the content of the entire style sheet which you can easily figure it out what is it doing.

* {
    -fx-background-color: #000000;
}

.button {
    -fx-pref-width: 300pt;
    -fx-pref-height:60pt;
    -fx-text-fill: #ffffff;
    -fx-font-family: "Verdana";
    -fx-font-size: 36pt ;
    -fx-background-color: #008000;
    -fx-border-color: #ffffff;
    -fx-border-radius: 10;
    -fx-background-radius: 5;
    -fx-padding: 5;
}

In order for the button to use the button class in the above style sheet you will need this line of code under the start function.

btn.getStyleClass().add("button");

Here are the revise version of the code.

package application;
	
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;


public class Main extends Application {
	
	@Override
	public void start(Stage primaryStage) {
		try {
			primaryStage.setTitle("Hello World!");
			primaryStage.setResizable(false);
			Button btn = new Button();
			btn.setText("Close");
			btn.setOnAction(new EventHandler<ActionEvent>() {
			    @Override public void handle(ActionEvent e) {
			    	System.out.print("close");
			        System.exit(0);
			}});
			btn.getStyleClass().add("button");
			BorderPane root = new BorderPane();
			root.setCenter(btn);
			Scene scene = new Scene(root,600,600);
			scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
			primaryStage.setScene(scene);
			primaryStage.show();
		} catch(Exception e) {
			e.printStackTrace();
		}
	}
	
	public static void main(String[] args) {
		launch(args);
	}
}
The new window ui
The new window ui

Besides clicking on the button you can also press the ‘x’ button on the top of the pop up window to terminate the program.

With that we have finished the first chapter of the JavaFx game development article and get ready for the second one.

What we have learned from this article.

1) Setting up SimRel 2018-09 edition.
2) Install e(fx)clipse.
3) Run the program.

It will be a very busy day for me as I am now getting ready to develop my new game scene for this new game.