Citadel Game Design Club
Lesson 3: Introduction to Animation
1.) Moving Ball
To make an animation in JavaFX, we need to have 3 basic components.
1. A KeyValue that tracks an object's location or some other property of the scene.
2. A KeyFrame that specifies how long the animation will run.
3. A Timeline that makes the whole thing into an animation sequence.
The code below moves a blue circle 250 units to the right over the course of 3 seconds. This
worksheet is on our club website if you want to copy and paste it, rather than typing everything.
macs.citadel.edu/wittman/gameclub
import
import
import
import
import
import
import
import
javafx.application.Application;
javafx.scene.Scene;
javafx.scene.paint.Color;
javafx.stage.Stage;
javafx.scene.shape.*;
javafx.util.Duration;
javafx.animation.*;
javafx.scene.layout.Pane;
public class YOUR_PROJECT_NAME extends Application {
public static void main(String[] args) {
Application.launch(args);
}
@Override
public void start (Stage stage) {
stage.setTitle ("My first animation!");
Pane root = new Pane();
Scene scene = new Scene(root, 800, 600, Color.WHITE);
stage.setScene(scene);
stage.show();
Circle circle = new Circle(15, Color.BLUE);
circle.relocate(100, 100);
root.getChildren().add(circle);
KeyValue xCoord = new KeyValue (circle.centerXProperty(), 250);
KeyFrame f = new KeyFrame (Duration.seconds(3), xCoord);
Timeline animation = new Timeline(f);
animation.play();
}
}
Here are some things to experiment with:
• Can you make the animation run faster?
• How would you move the ball to the left instead of right?
• How would you move the ball downwards?
2.) Bouncing Ball
Within the Timeline, we need to create an EventHandler to watch for special things like when two
objects collide or the user makes an action. The code below will animate a ball that bounces off the
bottom wall. Your job is to figure out how to make the code bounce off the other 3 walls of the
scene.
import
import
import
import
import
import
import
import
import
import
import
import
javafx.animation.KeyFrame;
javafx.animation.Timeline;
javafx.application.Application;
javafx.event.ActionEvent;
javafx.event.EventHandler;
javafx.geometry.Bounds;
javafx.scene.Scene;
javafx.scene.layout.Pane;
javafx.scene.paint.Color;
javafx.scene.shape.*;
javafx.stage.Stage;
javafx.util.Duration;
public class YOUR_PROJECT_NAME extends Application {
public static void main(final String[] args) {
launch(args);
}
public static Circle circle;
public static Pane canvas;
@Override
public void start(final Stage primaryStage) {
canvas = new Pane();
final Scene scene = new Scene(canvas, 800, 600);
primaryStage.setTitle("Bouncing Ball");
primaryStage.setScene(scene);
primaryStage.show();
circle = new Circle(15, Color.BLUE);
circle.relocate(100, 100);
canvas.getChildren().add(circle);
final Timeline loop = new Timeline(new KeyFrame(Duration.millis(10), new
EventHandler<ActionEvent>() {
double dx = 3;
double dy = 3;
@Override
public void handle(final ActionEvent t) {
circle.setLayoutX(circle.getLayoutX() + dx);
circle.setLayoutY(circle.getLayoutY() + dy);
final Bounds bounds = canvas.getBoundsInLocal();
if ( circle.getLayoutY() >= bounds.getMaxY() - circle.getRadius() )
dy = -dy;
/**** ADD CODE HERE TO BOUNCE OFF OTHER 3 WALLS *****/
}
}));
loop.setCycleCount(Timeline.INDEFINITE);
loop.play();
}
}