Create a simple JavaFx program with an empty scene

This article will be a warm-up for a new JavaFx game project tutorial, which I will create and share on this blog. What we will create in this article is a simple blank game scene using the JavaFx library. If you already have the Java 8 SDK installed on your computer, you will also install the JavaFx library.

The following ui program is a simple program uses to display the blank scene of JavaFx.

package info.codingdirectional;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class JavaFxExample extends Application {
	
	private double CANVAS_WIDTH = 300;
	private double CANVAS_HEIGHT = 300;

	@Override
	public void start(Stage stage) throws Exception {
		StackPane root = new StackPane();
		Scene theScene = new Scene( root, CANVAS_WIDTH, CANVAS_HEIGHT);
		stage.setScene(theScene);
		stage.setTitle( "Empty Game Scene" );
		stage.show();
	}
	
	public static void main(String[] args) {
		Application.launch(args);
	}

}

The width and height of the scene are both 300.

Empty Scene
Empty Scene

Begin the game development with JavaFx in Eclipse Oxygen

Welcome to the first chapter of the game development with JavaFx series, if you are new here then I just want to let you know that starting from this week I will post two articles about the game development with JavaFx in this blog every week with the full source code included inside the article. The game I am creating is a new game which is created only for this JavaFx gaming tutorial series and I do hope you will like it.

In the first chapter of this JavaFx gaming development we are going to create a simple user interface with the JavaFx library. We will use eclipse oxygen ide to develop our JavaFx gaming development project so if you have not yet downloaded eclipse oxygen then you can download it’s installer and from there you can then install the Eclipse Java Oxygen IDE for your game development.

Besides eclipse oxygen you also need to have Java 8 installed in your computer system and if you have already downloaded the Java 8 SDK then you should also already have installed the JavaFx library as well which comes together with the same download so there is no need to further download JavaFx library separately anymore in order for you to develop game with JavaFx. However you still need to download the JavaFx tooling and runtime plugin for Eclipse Oxygen before you can start to develop your JavaFx desktop gaming application, under the eclipse oxygen’s header go to Help->Eclipse Marketplace then type in e(fx)clipse to the search box to download the only plugin which you ever need for the JavaFx development in eclipse oxygen.

With that sattle let create a brand new project in eclipse oxygen. Goto File->New->Java Project. Fill in the project name then click Finish.

Next create a Java project package, right create on the GamingDemo folder and then select New->Package. Provide a package name for the entire project package, the best is to turn around the url of your website to make it the name of the package. Next click Finish.

Now right click on the package and select New->Class to create a Java class. Provide the name for the class and click on the browse button beside superclass to search for JavaFx’s Application class under the Choose a type search box. Select the JavaFx Application class then click OK.

Use the New Java Class setting as shown below, make sure you have given the name for that class and click Finish.

Now the class has been generated, under the two methods of that class fill in below code, don’t worry about the code, the main mission here is just to create our first project in eclipse oxygen and set up the JavaFx library for future development, we will come back to the code explanation part on the next chapter. If you see any red line below the code just hover it then click to import the necessary javafx’s class which it needs.

package info.codingdirectional;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class GamingDemo extends Application {
	
	private double CANVAS_WIDTH = 600;
	private double CANVAS_HEIGHT = 600;

	@Override
	public void start(Stage stage) throws Exception {
		StackPane root = new StackPane();
		Scene theScene = new Scene( root, CANVAS_WIDTH, CANVAS_HEIGHT);
		stage.setScene(theScene);
		stage.setTitle( "Empty Game Scene" );
		stage.show();

	}

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

}

Now click on the green arrow button on the eclipse oxygen header to compile and then run the code.

That is it, we have succeed creating our first JavaFx project, in the next chapter we will talk about the storyline and the layout of our new game, then in the next next chapter we will start coding.

How to create JavaFx project with Netbeans 8.1

Hi, this is the first article of my new article series on creating JavaFx game with Netbeans 8.1. In this article I am going to show you how to set up and launch the new JavaFx project in NetBeans 8.1. My new gaming project Mechanikal Reptile will use NetBeans to create and therefore if you have not yet installed NetBeans you can do so by visiting NetBeans homepage and download the IDE now. Also I am using Java 8 in this project so make sure you have the latest copy of the JDK installed in your computer.

Once you have installed NetBeans you can launch it and start a new project. Go to File->New Project, then select JavaFx and JavaFx Application on the right pane and click Next. Fill out the detail as follow, I have named my new game project Mechanikal Reptile and I have also created a main folder for all my Java project. Leave other settings as default and click on Finish.

NetBeans IDE
NetBeans IDE

OK, now we are ready to launch our first JavaFx project, select Run->Compile File to compile your Java code first then look at the output pane, if your code has no error then you will see the ‘BUILD SUCCESSFUL’ message which means we can now run the JavaFx program.

NetBeans Output
NetBeans Output

Now click on the green arrow button on the main menu header to run the project.

JavaFx
JavaFx

The full source code to create game buttons and the title page with JavaFx

As my game progress I will publish a new game source code everyday until I have completed the whole game. I am simply too lazy (maybe too tired because I am developing both JavaFx game as well as android game at the same time) to explain to you what I am actually doing here therefore the title of this post should not be called the javafx gaming tutorial but instead the full javafx gaming source code instead. The game code should be easy to understand if you are already familiar with the Java program.

In this episode my mission is simple, which is to create the buttons on top of the game title page which I have created earlier.

Take note that I have changed the previous Group object to StackPane object which is more suitable for this game.

Also make sure your project contains the below folder tree.

follow these structure!
follow these structure!

Basically under the asset folder there are three files 1) 550 x 550 pixels title screen 2) 142 x 69 pixels play button 3) 142 x 69 pixels score button. More buttons will be added in the future…

Here is the source code

package mightyrock;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class MightyRock extends Application {

	@Override
	public void start(Stage theStage) throws Exception {
		
		final double CANVAS_WIDTH = 550;
		final double CANVAS_HEIGHT = 550;
		
		final Image titleScreen = new Image( "asset/title.png" ); //title screen image
		final Image playButton = new Image("asset/play.png"); //the play button image
		final Image scoreButton = new Image("asset/score.png"); //the score button image

		final ImageView flashScreen_node = new ImageView();
		flashScreen_node.setImage(titleScreen); //set the image of the title screen
	
		final Button play_button  = new Button();
		final ImageView play_button_node = new ImageView(); 
		
		final Button score_button = new Button();
		final ImageView score_button_node = new ImageView(); 
		
		play_button_node.setImage(playButton); //set the image of the play button
		score_button_node.setImage(scoreButton); //set the image of the score button
		
		play_button.setGraphic(play_button_node);
		play_button.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY))); //this is to make the button background transparent
		
		score_button.setGraphic(score_button_node);
		score_button.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
		
		/*
		 * create the container of those buttons
		 */
		final VBox buttonContainer = new VBox(1);
		buttonContainer.setAlignment(Pos.TOP_CENTER);
		Insets buttonContainerPadding = new Insets(220, 1, 1, 1);
		buttonContainer.setPadding(buttonContainerPadding);
		buttonContainer.getChildren().addAll(play_button,score_button);
		
		theStage.setTitle( "The Mighty Rock!" );
		theStage.getIcons().add(titleScreen); //stage icon

		StackPane root = new StackPane();
		
		root.getChildren().addAll(flashScreen_node, buttonContainer); //add the title screen and button container to the stackpane
		Scene theScene = new Scene( root, CANVAS_WIDTH, CANVAS_HEIGHT, Color.CHOCOLATE );
		theStage.setScene( theScene );
		theStage.show(); 

	} 

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

}

By some unknown reason the color which is the last parameter inside the Scene constructure does not work after the Button object has been added.

OK if you run the above program here is what you get…

This is my new game
Two buttons on the title page

Hey dude if you feel high about the above program then don’t forget to share it with your friend. This gaming series will continue until I have finished the entire game!

Create a game start screen in JavaFx

In this tutorial I will show you how to create a game title screen in JavaFx, every game will need a start screen, either an introduction screen or just a simple menu screen and in this game I will use the 550 x 550 pixels title screen.

I assume you have already get familiar with eclipse and also know how to create a java project with eclipse so I will go straight into business. After you have created your project and a new java class file as well as uploaded a 550px x 550px png image into the project asset folder of the game project this is what your project folder looks like.

The tree structure of project folder
The tree structure of project folder

I call my new game project MightyRock! and therefore the class file also get the same name. Here is the entire code of the MightyRock.java file.

package mightyrock;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class MightyRock extends Application {

	@Override
	public void start(Stage theStage) throws Exception {
		
		final Image titleScreen = new Image( "asset/title.png" ); //title screen image

		final ImageView flashScreen_node = new ImageView();
		flashScreen_node.setImage(titleScreen); //set the image of the title screen
		
		theStage.setTitle( "The Mighty Rock!" );
		theStage.getIcons().add(titleScreen); //stage icon

		final double CANVAS_WIDTH = 550;
		final double CANVAS_HEIGHT = 550;

		Group root = new Group();
		root.getChildren().addAll(flashScreen_node); //add the title screen to the root
		
		Scene theScene = new Scene( root, CANVAS_WIDTH, CANVAS_HEIGHT, Color.BLACK );
		theStage.setScene( theScene );
		theStage.show(); 

	} 

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

}

Run the above program will create the below scene.

MightyRock!
MightyRock!

Hope you like this tutorial which is part of the JavaFx game project tutorial which I will present to you on this blog.

Create animated images with JavaFx

I have just started to learn JavaFx so I think it will be nice if I can share what I have learned on my blog with you all. Below is a simple example on how to create an animation with JavaFx. What the program below does is to animate a sprite sheet which consists of various images from one end to another and then back again. I am just using the images from the first row of the sprite sheet to do this simple JavaFx demo, in my next post I will show you how to make the game character moving around on the JavaFx scene. Enjoy!

import javafx.animation.AnimationTimer;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
 
public class SkyRocket extends Application 
{
 
    public void start(Stage theStage) 
    {
    	theStage.setTitle( "JavaFx Example!" );
    	 
        Group root = new Group();
        Scene theScene = new Scene( root );
        theStage.setScene( theScene );
        
        final double WIDTH = 64; // image width
        final double HEIGHT = 64; // image height
        
        final double CANVAS_WIDTH = 300;
        final double CANVAS_HEIGHT = 300;
     
        Canvas canvas = new Canvas( CANVAS_WIDTH, CANVAS_HEIGHT ); // Create new canvas
        root.getChildren().add( canvas );
     
        final GraphicsContext gc = canvas.getGraphicsContext2D();
     
        final Image monster = new Image( "asset/monster_main_1.png" );
     
        new AnimationTimer() //use AnimationTimer to continue the game loop
        {
        	double frame_number = 0;
        	double x = 0;
        	double y = 0;
        	boolean reverse = false;
        	
            public void handle(long currentNanoTime)
            {
            	
            	if(frame_number > 24) 
            	{
            		frame_number -= 2;
            		reverse = true;
            	} 
            	else if(frame_number < 0) 
            	{
            		frame_number += 2;
            		reverse = false;
            	}
            	
                x = frame_number * WIDTH;
               
                if(reverse == true)
                	frame_number--;
                else
                	frame_number++;
                
                // Clear the canvas
                gc.setFill( Color.BLACK );
                gc.fillRect(0,0, CANVAS_WIDTH, CANVAS_HEIGHT);
                
                // Draw next image
                gc.drawImage(monster, x, y, WIDTH, HEIGHT, CANVAS_WIDTH/2 - WIDTH/2, CANVAS_HEIGHT/2 - HEIGHT/2, WIDTH, HEIGHT);
                
            }
        }.start();
     
        theStage.show();
    }
    
    public static void main(String[] args) 
    {
        launch(args);
    }
}

I am using eclipse to write the entire program and here is the file structure…

image asset and file
image asset and file

Here is the sprite sheet and I am only using the first row…

monster_main_1
monster_main_1

If you run the above program you will get this outcome…

Javafx
Javafx

Hope you like it!