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!