Chapter 17 ■ i3D Game Square SeleCtion: uSinG the piCkreSult ClaSS with 3D moDelS
Notice that TranslateY is -512; this places the 3D spinner UI at the top of the screen, out of the way of
the game board view, and in the upper-left corner of the screen once the spinner animates out to the -150 X
position.
Next, let’s recode our createAnimationAssets() method body so that it only instantiates and configures
our Animation objects and does not trigger them, which will now be done during gameplay by the user with
mouse clicks (or screen touches, as these will also generate MouseEvents, widening our target consumer
electronics devices).
Remove the .play() method call off of the rotGameBoard, rotSpinner, and spinnerAnim Animation
object constructs, and then change the moveSpinnerOn TranslateTransition object’s .setByX() method call
to reference 150 units. This will move your 3D spinner UI into the upper-left corner of the screen from its
new -350 location off-screen. The logical place to trigger this animation, bringing the spinner on-screen for
the first time, would be in the Start Game Button UI event handling method, which we’ll be doing soon. We’ll
also create your rotSpinner Animation object later during this chapter, which will spin the 3D spinner UI
when it is clicked so that it also spins when the player initiates each random spin for the 3D game board.
Besides bringing this i3D spinner on-screen in the Start Game Button event handling, we will bring it
on-screen at the end of each player’s turn (in Chapter 21 ) so that the next player knows to randomly spin
the game board to select a new educational question category (quadrant). We will animate it off-screen
in Chapter 20 , when the game board finishes its camera rotation Animation object. There is a lot more to
learn about in this chapter regarding how to integrate your interactivity (event handling) with your different
Animation objects in JavaFX so that you can achieve a seamless and responsive gameplay result.
Your new createAnimationAssets() Java method body should now look like the following, which is also
highlighted in light blue and yellow in Figure 17-6:
RotateTransition rotGameBoard, rotSpinner;
TranslateTransition moveSpinnerOn;
ParallelTransition spinnerAnim;
...
private void createAnimationAssets() {
rotGameBoard = new RotateTransition(Duration.seconds(5), gameBoard);
rotGameBoard.setAxis(Rotate.Y_AXIS);
rotGameBoard.setCycleCount(1);
rotGameBoard.setRate(0.5);
rotGameBoard.setInterpolator(Interpolator.LINEAR);
rotGameBoard.setFromAngle(45);
rotGameBoard.setToAngle(1125);
// .play() removed
rotSpinner = new RotateTransition(Duration.seconds(5), spinner);
rotSpinner.setAxis(Rotate.Y_AXIS);
rotSpinner.setCycleCount(1);
rotSpinner.setRate(0.5);
rotSpinner.setInterpolator(Interpolator.LINEAR);
rotSpinner.setFromAngle(30);
rotSpinner.setToAngle(-1110); // .play() removed
moveSpinnerOn = new TranslateTransition(Duration.seconds(5), spinner);
moveSpinnerOn.setByX( 150 );
moveSpinnerOn.setCycleCount(1);
spinnerAnim = new ParallelTransition(moveSpinnerOn, rotSpinner);
// .play() removed
}