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…

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

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

Hope you like it!