[JAVA][Beginning Java 8 Games Development]

Chapter 6 ■ The Foundation of Game Design: The JavaFX Scene Graph and the InvinciBagel Game Infrastructure
JavaFX Scene Graph Design: Minimizing UI Nodes
The trick to minimizing the Scene Graph is to use as few nodes as possible to implement a complete design, and,
as you can see in Figure 6-3, this can be accomplished with one StackPane root node, one VBox branch (parent)
node, and seven leaf (children) nodes (one TableView, two ImageView, and four Button UI controls). When you
get into coding the Scene Graph next (finally!), you will use only 14 objects, and import only 12 classes, to make the
entire top level for your InvinciBagel game, which you designed in the previous section, a reality. The TableView will
overlay the ImageView composite, which contains the information screen layers of the design. This TableView object
will be added in later stages of your game design. An ImageView backplate will contain the InvinciBagel artwork;
an ImageView compositing layer will contain three different transparent images, which will seamlessly overlay the
backplate image, based on the ActionEvents (clicks of the Button controls); and a VBox Parent UI layout container
will contain the four Button controls. You will also create an Insets object to hold the padding values to fine-tune the
button bank alignment.
Figure 6-3. Primary splash screen Scene Graph node hierarchy, the objects it contains, and the assets it references
Because a Button object cannot be positioned individually, I had to use the HBox class, along with an Insets class
and a Pos class, to contain and position the Button controls. I will be going over the classes you will be using for this
high-level design in this chapter so that you have an overview of every class that you are going to be adding to your
InvinciBagel class to create this top-level UI design.
The way I optimized the Scene Graph use for the four different screens needed to match the four different
buttons was to use one ImageView as a backplate to contain the InvinciBagel splash screen artwork and then one
more ImageView to contain different composite images (overlays) that use transparency (alpha channel). In this way,
you can simulate four different screens, using only two ImageView Scene Graph Node objects.
Finally, a TableView Scene Graph node will contain the table structure for the high scores table. This will
be created via the score engine, which you will be creating last, after you finish your entire game design and
programming. For now, you will leave the High Scores and Play Game button code unimplemented.
126
www.it-ebooks.info