Integrating Graphic Assets Into Your JavaFX Application

This tutorial requires the following technologies. See the Release Notes for version requirements and links to downloads.

• J2SE Development Kit (JDK)
  
  
• NetBeans IDE 6.1 With JavaFX
  
  
• Project Nile (download)

The following application is not required to run the tutorial but helpful to view the layers in the original graphic:

• Adobe Illustrator CS3

This tutorial also requires the following skills:

• Familiarity with JavaFX script
  
  
• Basic ability to work with a JavaFX project in the NetBeans IDE

In this tutorial, you compile and run a JavaFX Invaders game, which is animated by using graphic elements that are exported from Adobe Illustrator to FXD format. All of the layers for the graphic that are used for this game were created in a single Adobe Illustrator file.

Figure 1. Compiled JavaFX Invaders Game

All files required for the JavaFX Invaders sample are contained a zip file in the Project Nile installation folder. Follow these steps to unzip the folder into your NetBeans projects directory and try out the application:

1. Go to the appropriate folder in the Project Nile installation.
   
   
   • For a default Windows installation, the path is C:\Program Files\Sun\Project Nile\samples\invaders
     
     
   • For a default Mac OS X installation, the path is Macintosh HD/Applications/Project Nile/Samples/invaders
     
     
2. Unzip invaders.zip into your NetBeans project directory.
   
   
   • For a default Windows installation. The NetBeans project folder is located in My Documents\NetBeansProjects
     
     
   • For a default Mac OS X installation. The NetBeans project folder is located in Macintosh Users/user-name/NetBeansProjects
   
   Note: With a new NetBeans installation, you must open or create a project before the NetBeansProjects folder is created.
   
   
3. In the IDE, choose File > Open Project from the main menu.
   
   
4. In the Open Project dialog box, select JavaFXInvaders and open the project.
   
   
5. From the Run menu, select Run Main Project.
   
   When the game starts, move the gun left or right using the left and right cursor keys on the keyboard. Push the spacebar to fire the gun.

The NetBeans Projects window is shown in Figure 2.

Figure 2. Source Files in Projects Window

Three source files are included in the project:

• JavaFXInvaders.fx - JavaFX script code, which contains the business logic
  
  
• JavaFXInvaders.fxd - The exported graphic as an FXD resource file, exported from Adobe Illustrator
  
  
• JavaFXInvadersUI.fx - JavaFX Script code automatically generated during the FXD export. This code enables developers to access the data defined in the FXD file

Exploring the JavaFXInvaders.fxd File
If you have Adobe Illustrator installed, you can open the original artwork and see how the defined layers map to groups in the FXD file. The file is located in NetBeansProjects/JavaFXInvaders/art. If you do not have Adobe Illustrator installed, you can read the description of layers and then examine the FXD file to see how this information is translated into groups.

The original Adobe Illustrator file has the following layers:

Layer Type	Layer Name	Description
Group	background	Graphics that form the background of the scene.
Group	foreground	Graphics for the score value plus the sublayers scoreText and clouds.
Text	scoreText	The "Score:" text.
Group	clouds	Group with individual shapes for each cloud in the foreground.
Group	gun	Graphic for the gun at the bottom of the scene.
Group	beam	Group that contains a beam graphic, which will be fired from the gun.
Group	enemyLifespaces[0]	Group where enemies of type 0 are created at the beginning of the game.
Group	enemyLifespaces[1]	Group where enemies of type 1 are created at the beginning of the game.
Group	templates	Contains the helper graphics layers enemies and enemySpots.
Group	enemies[0]	Graphics for enemy type 0. These graphics are cloned to create type 0 enemies.
Group	enemies[1]	Graphics for enemy type 1. These graphics are cloned to create type 1 enemies.
Group	enemySpots[0]	Group with individual yellow rectangles that define the location in the scene where enemies of type 0 are created.
Group	enemySpots[1]	Group with individual yellow rectangles that define the location in the scene where enemies of type 1 are created.

Now open the JavaFXInvaders.fxd file in the NetBeans IDE. You can see that each layer from the Adobe Illustrator file has a corresponding Group definition in the FXD file. The ID value for each group is the name of the layer. Note that the conversion from .ai to .fxd file renames the names of the graphics elements in case they contains non-Java characters. Additionally the Project Nile export plugin in Adobe Illustrator recognizes indexes (which are in square brackets in the group names) and converts them into a sequence of elements. The order is defined by the numbers. For example, enemyLifespaces[0] and enemyLifespaces[1] are converted to the following IDs:

id: "enemyLifespaces_0_"

id: "enemyLifespaces_1_"

The FXD file is treated as a resource file and is not compiled. This is particularly an advantage for large graphics.

Exploring the JavaFXInvadersUI.fx File
The JavaFXInvadersUI.fx file was created during export from Adobe Illustrator. The file extends the UIStub class and exposes the group IDs as attributes.

Note that a single attribute is used for each array, for example:

public attribute enemies: Group[];

The update function in the UiStub class loads the enemies parameter, which creates an array sorted by the order declared in the enemies_n_ IDs. This type of array functionality enables the designer and developer to define an order for objects independent of the structure of the graphics on the scene.

Exploring the JavaFXIinvaders.fx File
The JavaFXInvaders.fx file contains the business logic to animate the game. Here are some of the pertinent features of the code:

• The game: Timeline variable is an infinite loop. It calls the updateGame function every 50 milliseconds to check the state of the game and progress it by a step.
  
  
• The initGame function is called at the beginning of the game.
  
  
• The generateAtSpots function is called at the beginning of the game to perform the following tasks:
  
  
  • Clone enemies objects
    
    
  • Place enemies objects at the center of the yellow rectangles from the enemiesSpots group
    
    
  • Add enemies objects to an enemiesLifespaces group
  
  
• The ui._root group has a key-events listener for tracking the key-pressed and key-released states of the left, right and spacebar keys, which are used by the updateGame function.
  
  
• At the top of the file, a cache attribute is set to true for various graphics elements. This setting is recommended for speeding up performance of a static element on a scene.
  
  
• The templates group is hidden at the beginning of the game so the helping graphics are not visible. These graphics include the enemies group (those graphics are cloned) and the enemySpots group (the yellow rectangles that are used to place the enemies on the screen).
  
  
• The beam is fired by placing the beam graphic at the center of the gun. The updateGame function moves the beam vertically. to the top of the scene. The beam is hidden when it collides with the enemy or when it moves beyond the north boundary of the background.

Here are some ways that you can change the code and view how the game changes.

• Speed up or slow down the game by changing the number of milliseconds in the game: Timeline variable.
  
  
• Add more enemies by adding rectangles to the enemiesSpots_n_ groups.
  
  
• Add more types of enemies by defining new enemies_2_, enemyLifescapes_2_, and enemySpots_2_ groups.
  
  
• Add more levels with different settings and enemies.
  
  
• Change the trajectory or descent patterns of invader ships.
  
  
• Add your own ship
  
  
• Add an explosion when the enemy ship is hit
  
  
• Animate the clouds

In this tutorial, you explored how graphics are exported into a project with business logic that is called from within the application. This distinction between the graphics description and business logic enables designers and developers to own separate pieces of the application. By facilitating the collaboration between designers and developers, Project Nile enables rich graphic assets to be used in JavaFX Script.

• Project Nile Release Notes
• Installing Project Nile
• JavaFX Technology Downloads
• JavaFX.com
• JavaFX Developer home page