Programming Games in JavaFX - Part 2

The result of this lesson will be a ship that pivots when the left and right arrow keys are pressed.  But there's a little more to it than that;  we'll also be building our game engine so that it can handle animation.  To do this, we'll be creating a Timeline that refreshes the game board 25 times per second (the instance of the Timeline object is called 'gameLoop' and we'll be refering to it quite a bit throughout the tutorial). We'll also be adding some very important functions that are called each time the gameLoop rereshes.  This is the heart of animated game programming: using some sort of a timer that updates all the pieces on the game board.

I'll jump right into the code.  From now on, I'll use bold text to highlight the changes we are making from the previous lesson.

First, we'll add two new constants to our Config.fx class:

package blasteroids;

public def SCREEN_HEIGHT:Integer = 800;
public def SCREEN_WIDTH:Integer = 1200;
public def SHIP_ROTATION_VELOCITY = 10;
public def REFRESH_RATE = .04s;
 

The SHIP_ROTATION_VELOCITY variable controls the amount of degrees that the ship pivots each time the game loop refreshes (if the left or right arrow key is being pressed).  The REFRESH_RATE controls how fast the gameLoop cycles (in this case every 4 one-hundreths of a second).

Now we'll make quite a few additions to the game engine, Container.fx. After looking at the code, you might want to re-read this section just to make sure my explanation makes sense. Note that we'll add 'turnLeft' and 'turnRight' boolean variables; these variables will change when the left and right arrow keys are pressed and released.  You'll see that we've added event listeners for keyboard events in our gameBoard group, just after the content property.

We'll also add the heart of our game engine, the gameLoop Timeline. Each time the gameLoop Timeline refreshes, it calls the gameUpdate() function, which will call functions that update the position and settings for each object on the game board. For now, the gameUpdate() calls just one function, updateShip().  The updateShip() function checks to see if turnLeft and or turnRight are true.  If so, it rotates the ship by the amount that was specified for SHIP_ROTATION_VELOCITY in Config.fx.  We've also added a startGame() function that gets called when the 'Enter' key is pressed.  This will start the game by playing the gameLoop Timeline.

Here is the Container.fx class with the updates highlighted in bold:

package blasteroids;
import blasteroids.Config;
import blasteroids.Ship;
import java.lang.Math;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.scene.CustomNode;
import javafx.scene.Group;
import javafx.scene.input.KeyCode;
import javafx.scene.input.KeyEvent;
import javafx.scene.Node;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import java.util.Random;

public class Container extends CustomNode {
  
    public var turnLeft:Boolean = false;
    public var turnRight:Boolean = false;
   
    public var ship: Ship = Ship{
        posX: Config.SCREEN_WIDTH / 2
        posY: Config.SCREEN_HEIGHT /2
    }
    public var txtInfo:Text = Text{
        x:10
        y:20
        wrappingWidth: Config.SCREEN_WIDTH - 20
        font: Font { size: 18 }
        fill: Color.WHITE
        //Just changing the text that was set in the last lesson...
        content:"Use the left and right arrow keys to turn the ship.\n" 
        "Press ENTER to start..."
    }
    public var gameBoard: Group = Group{
        content: [
            //backgroud rectangle...
            Rectangle{
                width: Config.SCREEN_WIDTH;
                height: Config.SCREEN_HEIGHT;
                fill: Color.BLACK
            }
            //add the info text to the scene...
            txtInfo,
            //add the ship to the scene...
            ship
        ]
        focusTraversable:true  
        //setting focusTraversable to true allows us to
        //listen for keyboard events
        onKeyPressed: function(e:KeyEvent):Void{
            if(e.code == KeyCode.VK_ENTER){
                if(not gameLoop.running or gameLoop.paused){
                    startGame();
                }
            }
            if(e.code == KeyCode.VK_LEFT){
                turnLeft = true;
            }
            if(e.code == KeyCode.VK_RIGHT){
                turnRight = true;
            }
        }
        onKeyReleased:function(e:KeyEvent):Void{
           if(e.code == KeyCode.VK_LEFT){
                turnLeft = false;
            }
            if(e.code == KeyCode.VK_RIGHT){
                turnRight = false;
            }
        }
    }
    override public function create():Node{
        return gameBoard;
    }
   
    def gameLoop:Timeline = Timeline{
        repeatCount: Timeline.INDEFINITE
        keyFrames: [
            KeyFrame{
                time: Config.REFRESH_RATE
                action: function(){
                    gameUpdate();
                }
            }
        ]
    }
    public function startGame():Void{
        txtInfo.visible = false;
        gameLoop.play();
    }
    public function gameUpdate():Void{
        updateShip();
    }
    public function updateShip():Void{
        if(turnLeft){
            ship.faceAngle -=Config.SHIP_ROTATION_VELOCITY;
        }
        if(turnRight){
            ship.faceAngle +=Config.SHIP_ROTATION_VELOCITY;
        }
    }
   
}
 

Now we'll turn our attention to the Ship class. Note that we added a transform property to the ImageView and assigned it a Rotate object that is bound to the newly created faceAngle property. So, when our game engine updates the faceAngle property of the ship, the ImageView will pivot accordingly. Make sure to import the Rotate object if you haven't already done so.

Here's the the Ship.fx class with the additions we made since the first lesson highlighted in bold:

package blasteroids;

import javafx.scene.CustomNode;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Node;
import javafx.scene.transform.Rotate;

public class Ship extends CustomNode {
    public var posX:Number = 0;
    public var posY:Number = 0;
    var offsetX:Number = bind posX - img.width/2;
    var offsetY:Number = bind posY - img.height/2;
    public var faceAngle: Number=0;
   

    var img = Image{
        url: "{__DIR__}ship.png"
    }

    var imgView = ImageView{
        image: img
        x: bind offsetX
        y: bind offsetY
        transforms: Rotate {
            angle: bind faceAngle
            pivotX: bind posX
            pivotY: bind posY
        }
    }

    override public function create():Node{
        return imgView
    }
}

That's all there is to this lesson!  In the next lesson, we'll get our ship to move all over the game board. If you'd like to continue, go to Programming Games in JavaFX - Part 3.