© Wallace Jackson 2017 211
W. Jackson, Pro Java 9 Games Development, https://doi.org/10.1007/978-1-4842-0973-8_9
CHAPTER 9
JavaFX 9 User Interface
Design: The Front End for
Java 9 Game Design
Let’s build upon the top-level Scene Graph architecture that you built during Chapter 8 by continuing to
design the front-end user interface infrastructure of your i3D BoardGame. This will be done inside of your
StackPane branch Node, using three primary nodes underneath that Node. The VBox branch Node holds
the Button leaf Nodes, the ImageView leaf Node displays different Image objects, and the TextFlow leaf Node
displays (flows) different text descriptions that are overlaid on top of the ImageView Node. These seven leaf
nodes will work together to form your game’s top-level user interface design. The StackPane Node will serve
as the background image plate (holder), and the ImageView leaf node will hold five different Image objects
that reference your digital image section assets for each of the five buttons. The StartGame background
image asset will be what’s considered to be the splash screen. On top of the ImageView in the StackPane
hierarchy will be the TextFlow leaf node, which will serve as the foreground text information holder and will
reference different text data based on which Button Control object has been clicked. On top of the TextFlow
layer will be the VBox branch Node layer, which will hold five Button leaf nodes. This will hold, align, and
position your five Button Control objects, which will eventually use event handlers to swap different Image
objects into your ImageView object, as well as different text data into your TextFlow object.
The first thing that I will cover since you have already declared your five background Image objects
(as well as your ImageView and TextFlow objects for use at the top of the JavaFXGame.java class) is how
you’re going to finish implementing your user interface design using your Scene Graph hierarchy that you
started building during Chapter 8.
The next thing that we will need to cover are the four new JavaFX classes from the javafx.scene.image
and javafx.scene.text packages, which you are going to be instantiating and configuring for use in your Java
game during this chapter. These will include the Image class, the ImageView class, the Te xt class, and the
TextFlow class.
The next thing that you will need to do is to create the background imagery that will be loaded in the
Image objects so that you have something to test your Java code with later so you can make sure it is working
properly.
After that, you will learn a cool trick to add another compositing layer to your compositing pipeline
without adding another Node object to your Scene Graph hierarchy. This will involve learning about how
to utilize your JavaFX Background class (object) along with the JavaFX BackgroundImage class (object) to
utilize the Background attribute of Node subclasses as another Image object holding layer within your pro
Java game digital image compositing pipeline.