In the previous entry we had looked at the game we are trying to implement including its previous implementation in JavaSE. The following is a step by step instruction how to build such a game.
Preparation
A fantastic thing about JavaFX is its official site JavaFX.com. This site is full of useful tutorials and for a change practical JavaFX example applications. Furthermore the example are updated to always run in the latest JavaFX runtime version. This is where you should go to find out more about JavaFX. When I program I like to keep the online API docs at: http://java.sun.com/javafx/1.2/docs/api/ open.
The first thing we need to do is to create a new JavaFX project. Do this by launching Netbeans and selecting File -> New Project. In the dialog select JavaFX on the left hand side and JavaFX Script Application on the right hand side. Press “Next” and give your project a name such as “MyBallGame”. Keep the default settings and press “Finish”.
Netbeans provides us with a Main.fx class, which is the entry point to our new application.
Creating the Background of our game
Unlike the original game I would like one area of our game to be the area of game play and I would like the score keeping to take place in a different area and not write the score onto the game area.
In JavaFX all graphics are set on a stage. This stage object requires a Scene object to be displayed. Let us change the Stage object Netbeans has provided us with to look like the following:
Stage {
title: "Ballgame"
scene: Scene {
fill: Color.CHOCOLATE;
width: 430, height: 400
content: Group {
content: [
]
}
}
}
This should give you something that looks like this:
The code “sets the stage” by defining a stage object. The “title” is the title of the window. The initial stage needs a scene object as “content” which we create. We set the background color and the width and height. The Scene itself has a Group object as content. Group objects in JavaFX are meant to bundle several objects at once, and this will be our intention, because we will add a playing field, scorefield etc.. The Stage, which has a Scene, which has a Group object might seem overly complicated, but this construction is something we need to accept. With the Stage, Scene and Group setup, we can now add the actual parts of the game.
We create a playing field i.e. the area where the balls will move by defining a simple rectangle like this:
var playingField: Rectangle = Rectangle {
arcWidth: 20 arcHeight: 20
width: 280, height: 380
fill: Color.ANTIQUEWHITE
stroke: Color.DARKORANGE
strokeWidth: 3
}
Stage { ... }
Notice how the variable is defined at script level outside of the Stage object. This is necessary because we need to access it later on in the code. You can look up the different Rectangle attributes in the API mentioned above. But here is a quick rundown of the attributes we have not yet encountered: arcWidth/arcHeight define the “roundness” of the rectangles corners. “stroke” and “strokeWidth” define the width and color of the surrounding border.
Now we add the “playingField” variable to the Group object we declared earlier. Because we want our playing field and all other objects to be at some distance to the windows edge we call add a “translate” transformation on the Group object, which will subsequently translate all its members in the same way.
var playingField: Rectangle = Rectangle { ... }
Stage {
...
scene: Scene {
...
content: Group {
translateX: 10, translateY:10
content: [
playingField
]
}
}
}
This gives us the following
Congratiulations we now have a smart looking playing field. One thing that becomes immediately clear is, that it is way easier creating shapes like rectangles in JavaFX than in standard Java. It is all very straight forward and a lot less boilerplate code. In the next part we will start adding the balls.
Tags: JavaFX