Mechanical Reptile

Welcome to the homepage of Mechanical Reptile, the platform game which I have developed recently. Before you start please continue reading the game manual below.

This game concept is really simple, move the game character up, down, left, right with the up, down, left and right arrow key to the door side and proceed to the next level. During the game you will collect mana which will then be used to destroy the enemy so you can safely arrive at your destination. Sometime you will also need to jump to reach the bottom platform if the door location is at the lower platform. This game is still at it’s beta stage so lots of changes will be made before it has fully developed.

The game page will take a while to load but once you have loaded it for the first time then it will be fast the next time you play the game again!

Java Collection and Iterator program

Recently just create a simple Java program which involves collection and iterator object and would like to share with you as follow.

package com.codingdirectional.www;

import java.util.ArrayList;
import java.util.Iterator;

public class CollectionDemo {

	public static void main(String[] args) {
		ArrayList<String> hello = new ArrayList<String>();
		hello.add("hello");
		hello.add("world");
		
		for (int i = 0; i < hello.size(); i++) {
		    String word = hello.get(i);
		    System.out.println(word);
		}
		
		hello.remove(0);
		
		for (int i = 0; i < hello.size(); i++) {
		    String word = hello.get(i);
		    System.out.println(word);
		}
		
		ArrayList<String> hi = new ArrayList<String>();
		hi.add("hello");
		hi.add("world");
		
		hi.removeAll(hello);
		
		for (int i = 0; i < hi.size(); i++) {
		    String word = hi.get(i);
		    System.out.println(word);
		}
		
		Iterator<String> hi_ = hi.iterator();
		while(hi_.hasNext())
			System.out.println(hi_.next());

	}

}

The outcome is as follows :

hello
world
world
hello
hello

MightBeIt! Main Page

MightBeIt! is a really fun game to play, the goal of this game is to move your vehicle from left to right by crossing various obstacles. It does not really matter whether you roll or jump your vehicle as long as you get to the other end then you will proceed to the next round.

If this is your first time playing this game then you will need to wait for a while for the game assets to load, then click on play to start the game.

It will be nice if you can provide your feedback on this game through the comment part of this page.

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.

A fun chrome browser game for you and me!

Welcome to the homepage of Monster Academy. The Game which I have developed a few years ago and put online for people to enjoy. If you are the old user of this game then you can just skip the following introduction and go directly to the what is new part.

How to play the Game 

You will use the left right up and down arrow key to move the player around the board and collect the bouncing rocks, once you have collected all the rocks on the board you will proceed to the next level. There are 11 levels in total. Actually you do not need to collect all the rocks by your own because you have a helper, duck robot is willing to help you out by collecting those rocks but be careful because once the rock deference’s between you and the robot duck has exceeded 2 then it will be game over. Make sure you don’t get hit by the monster or else it will be game over as well.

What is new

Nothing is new in this version but I have fixed the bug which I found in the game, this time I have rewritten some old code and made the game user interface more compact than the previous one. Hope you like it!

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!

Insert keyframe for the light in Cycles Render

I have just discovered this very nice method to insert keyframe to a light when we are in the Cycles Render mode so that the lamp will change color from one frame to the next. Here is how to insert a keyframe to the light.

i) In cycles render select the light by left clicking on it.

ii) Before you do anything make sure you are at frame 1 by looking at the timeline editor.

current frame
current time frame

iii) Select the object data tab of the lamp.

object data
object data

 

 

 

Under Nodes click on the Use Nodes button then change the color of the lamp to any color, next press ‘i’ when the cursor is on the color box to insert a keyframe. After you have inserted a keyframe to the lamp the color box will get a border which indicates that you have successfully inserted a keyframe.

iv) You can now move to frame number two under the timeline editor and insert the next keyframe using the same method.

v) It is simple to change the color of a mesh by just changing the color of the lamp as mentioned above!

Now switch to the Rendered viewport and press Alt-A to render the animation and see how the lamp changes color through time.