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!