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 {

	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.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY))); //this is to make the button background transparent
		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);
		Insets buttonContainerPadding = new Insets(220, 1, 1, 1);
		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 );; 


	public static void main(String[] 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!

Leave a Reply

Your email address will not be published. Required fields are marked *