28.04.2019 Views

[JAVA][Beginning Java 8 Games Development]

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Chapter 5 ■ An Introduction to Game Design: Concepts, Multimedia, and Using Scene Builder<br />

that out ,using first 16-bit and then 12-bit resolution. Next, reopen the original 48kHz data, downsample to 22kHz<br />

sample frequency, and export that, using 16-bit and 12-bit resolution, and so on. You will be performing this work<br />

process later on, when you add digital audio assets to the <strong>Java</strong> 8 game, so you will see the entire process<br />

(see Chapter 15).<br />

Next, let’s take a look at <strong>Java</strong>FX Scene Builder and how it uses FXML to allow designers to design <strong>Java</strong> FX<br />

applications visually. I am not going to be using Scene Builder or FXML (just <strong>Java</strong> 8 code and <strong>Java</strong>FX classes) over the<br />

course of this book, so pay attention!<br />

<strong>Java</strong>FX Scene Builder: Using FXML for UI Design<br />

<strong>Java</strong>FX Scene Builder is a visual design tool that generates an FXML (<strong>Java</strong>FX markup language) UI Scene Graph<br />

construct to define your <strong>Java</strong>FX application’s front-end design. This FXML UI definition can then be “inflated”<br />

in <strong>Java</strong> 8 to create your application’s <strong>Java</strong>FX Scene Graph, nodes, groups, and SubScene objects filled with javafx.<br />

scene.control package classes (objects) defining your UI design. Oracle’s intention in offering both a Scene Builder<br />

visual development tool and FXML is to allow nonprogrammers, ostensibly UI designers, to design the front-end UIs<br />

for their <strong>Java</strong> 8 applications so that the <strong>Java</strong> programmers can then focus on back-end functional application task<br />

processing logic.<br />

Because FXML and Scene Builder are optimized for UI design (arranging controls, such as buttons, text entry<br />

fields, radio buttons, check boxes, and so on), I am not going to use Scene Builder and FXML over the course of this<br />

book. I am, however, going to cover it in this chapter so that you know how to use it if you want to for your other<br />

<strong>Java</strong>FX applications. My reasoning is that, other than the initial game splash screen, which contains a few UI Button<br />

objects, which show game instructions, list the contributors, track the high scores, save a current game state, and start<br />

game play, UI design will not be a major focus of this book.<br />

To use FXML, and soon after use of the Scene Builder visual UI design tool, you must create a special kind of<br />

FXML application, as you learned in Chapter 2 (see Figure 2-4), when you created the <strong>Java</strong>FX game. Creating an FXML<br />

application imports the javafx.fxml package and classes. This allows the <strong>Java</strong> 8 code to inflate FXML constructs<br />

created by the UI designers so that they can be used by the programmers to attach <strong>Java</strong> logic to the various UI controls.<br />

The Android OS does this as well, using basic XML, but in Android this approach is not optional; it is part of the way<br />

things are done. In <strong>Java</strong>FX 8 (as you saw in Figure 2-4), it is simply one option. If you want to research XML-based UI<br />

design further for Android, check out my book Pro Android UI (Apress, 2014).<br />

The Scene Builder visual layout tool that writes FXML UI design constructs for you is a WYSIWYG drag and<br />

drop interface design tool. All a designer has to do is drag and drop any of the <strong>Java</strong>FX UI controls onto the editing<br />

screen from a UI Control panel that contains every Control class (object) in the javafx.scene.control package (see<br />

Chapter 4). This Scene Builder is integrated into NetBeans 8.0 for easy access and integration with <strong>Java</strong>FX, in case<br />

programmers also need to use it to quickly prototype UI designs for their clients. There is also a stand-alone version of<br />

the Scene Builder tool, at version 2.0, for designers who do not want to work inside the NetBeans IDE.<br />

You can switch back and forth from FXML editing and previewing in real time and see UI design and layout<br />

changes without having to compile the <strong>Java</strong> application. You can also apply all CSS styles to the Scene Builder<br />

tool and FXML structure in real time and see the results of those coding changes as well, again, without any <strong>Java</strong><br />

compilation! In addition, you can add custom UI controls to the UI Control panel library, using third-party JAR files or<br />

FXML definitions.<br />

The Scene Builder Kit API is open source. This lets you customize your own integrations of Scene Builder’s UI<br />

panels and controls, allowing you to integrate Scene Builder into other IDEs, such as Eclipse or IntelliJ IDEA. A rich<br />

text TextFlow container has recently been added into the GUI component (Control) library, affording rich text–<br />

editing capabilities. With these new capabilities, you can build multiple-node, rich text constructs that can integrate<br />

other UI elements, or new media element types, with the TextFlow elements.<br />

For you 3D “aficionados,” 3D is also fully supported in the Scene Builder visual design editor and in FXML. A 3D<br />

object can be loaded and even saved out using the Scene Builder tool, and all of the object’s properties can be edited<br />

(and viewed) in real time, using the Inspector panel. It is not yet possible to create from scratch 3D objects using<br />

Scene Builder, and you cannot yet assign or edit complex Mesh or Materials properties at this time, but I am sure that<br />

these features will come, along with the advanced 3D OpenGL ES power that is scheduled to be added into <strong>Java</strong>FX 8.<br />

120<br />

www.it-ebooks.info

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!