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)
                // 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);
    public static void main(String[] 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…


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


Hope you like it!

Leave a Reply

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