In Depth Tutorials and Information

Animating Nodes in the Scene (Creating a User Interface in JavaFX) Part 3

The Behavior of the MetronomePathTransition Program

Go ahead and run the program, performing once again the same steps that you did in the "Examining the Behavior of the Metronome1 Program" exercise. Everything should function the same as it did in the MetronomeTransition example, except that the node is an ellipse instead of a circle, and the node moves along the path of an arc.

Understanding the MetronomePathTransition Program

Listing 2-7 contains code snippets from the MetronomePathTransition program that highlight the differences from the preceding (MetronomeTransition) program. Take a look at the code, and we point out relevant concepts.

Listing2-7. Portions of MetronomePathTransitionMain.java

Using the PathTransition Class

As shown in Listing 2-7, defining a PathTransition includes supplying an instance of type Path to the path property that represents the geometric path that the node is to travel. Here we’re creating a Path instance that defines an arc beginning at 100 pixels on the x axis and 50 pixels on the y axis, ending at 300 pixels on the x axis and 50 pixels on the y axis, with 350 pixel horizontal and vertical radii. This is accomplished by using the PathBuilder to create elements in the Path that contain the MoveTo and ArcTo path elements shown previously. Take a look at the javafx.scene.shapes package in the JavaFX API docs for more information on the PathElement class and its subclasses, which are used for creating a path.

■ Tip The properties in the ArcTo class are fairly intuitive except for sweepFlag. If sweepFlag is true, the line joining the center of the arc to the arc itself sweeps through increasing angles. Otherwise, it sweeps through decreasing angles.

Another property of the PathTransition class is orientation, which controls whether the node’s orientation remains unchanged or stays perpendicular to the path’s tangent as it moves along the path. Listing 2-7 uses the OrientationType.ORTHOGONAL_TO_TANGENT constant to accomplish the latter, as the former is the default.

Drawing an Ellipse

As shown in Listing 2-7, drawing an Ellipse is similar to drawing a Circle, the difference being that an additional radius is required (radiusX and radiusY instead of just radius).

Now that you’ve learned how to animate nodes by creating a timeline and by creating transitions, we create a very simple Pong-style game that requires animating a ping-pong ball. In the process, you learn how to detect when the ball has hit a paddle or wall in the game.

The Zen of Node Collision Detection

When animating a node, you sometimes need to know when the node has collided with another node. To demonstrate this capability, our colleague Chris Wright developed a simple version of the Pong-style game that we call ZenPong. Originally we asked him to build the game with only one paddle, which brought the famous Zen koan (philosophical riddle), "What is the sound of one hand clapping," to mind. Chris had so much fun developing the game that he snuck a second paddle in, but we’re still calling this example ZenPong. Figure 2-11 shows this very simple form of the game when first invoked.

Figure 2-11. The initial state of the ZenPong game

Try out the game by following the instructions in the upcoming exercise, remembering that you control both paddles (unless you can get a colleague to share your keyboard and play).

EXAMINING THE BEHAVIOR OF THE ZENPONG GAME

When the program starts, its appearance should be similar to the screenshot in Figure 2-11. To fully examine its behavior, perform the following steps.

1. Before clicking the Start button, drag each of the paddles vertically to other positions. One game cheat is to drag the left paddle up and the right paddle down, which will put them in good positions to respond to the ball after being served.

2. Practice using the A key to move the left paddle up, the Z key to move the left paddle down, the L key to move the right paddle up, and the comma (,) key to move the right paddle down.

3. Click the Start button to begin playing the game. Notice that the Start button disappears and the ball begins moving at a 45° angle, bouncing off paddles and the top and bottom walls. The screen should look similar to Figure 2-12.

Figure 2-12. The ZenPong game in action

4. If the ball hits the left or right wall, one of your hands has lost the game. Notice that the game resets, looking again like the screenshot in Figure 2-11.

Now that you’ve experienced the behavior of the ZenPong program, we walk through the code behind it.