Breaking out with JavaFX Redux: An Exploration of Project Nile

Note that while the artwork itself was drawn in Adobe Illustrator, the style was heavily inspired by my 4 year old daughter who served as Art Director for this project.

If you’re not familiar with Illustrator, it’s a program for producing Scalable Vector art. The advantage to using Vector art natively over raster images is that it can scale to any resolution needed without loss of quality or intent.

Illustrator has the concept of “layers”, which is a convenient way of grouping related items in a scene. For example, in the above image, each brick, the ball, and the paddle are each in their own layer along with the end of game messages (”you won”, “you lost”, etc.).  Layers can also be hierarchical. In this example, all of the bricks belong to a common layer so that they can be manipulated as a group.

So what makes this approach different from more conventional games, is that instead of each graphical element being represented by a separate image and manipulated as a sprite, the entire game is one Illustrator file. The game’s logic simply manipulates the layers of the file by translating, rotating and/or hiding them.

The enabler of this cool bit of technology is the collection of tools called Project Nile. Project Nile is a separate download from the core JavaFX preview SDK, and basically amounts to an exporter for Illustrator/Photoshop and a jar file that needs to be part of the JavaFX project in order to work with the exported format (fxd).

Once installed, “Java FX Data” becomes an export option for Illustrator/Photoshop. Two files are exported: a JavaFX data file (.fxd) and a UI stub file (.fx) which allows convenient access to the data from the language. Once imported into your JavaFX project, the UI.fx file can be used to get a reference to any layer in the Illustrator file by name.  Each layer is a public attribute of type javafx.scene.Group (which can be injected right into any JavaFX scene graph).

Once in the scene graph, it can be treated just like any other Group or Node (complete with Bounding Volumes) by e.g. having effects and transforms applied to them. For example, note that in the above image that the “Paddle” and “Ball” layers have reflections applied to it suggesting the presence of a floor polished with Turtle Wax.

As I already bemoaned in my previous breakout post, some things are just more difficult in JavaFX than I think they should be (no API support for collision detection). Additionally, each layer’s rotational axis (its so called “AnchorX/Y”) is set at the top left corner of the entire file, not the center of the bounding volume as maybe I would expect.  So in other words, “out of the box” the ball will orbit about the top left corner of the screen when a rotation is applied to it, not its own center.

But overall, I think the process works surprisingly well. I am resistant to using the term “workflow”, but I imagine that Project Nile would produce a positive one of those (workflows, that is) between designer and programmer.

I mentioned in yet another previous post that it seems that this feature (Project Nile) was done to compete directly with Flash. Indeed, it was easy enough to bring all of the art assets into FX that one could imagine competing with most Flash-based games out there.

JavaFX, however, isn’t going to win the RIA wars by writing a better “Punch the Monkey and Win”. Rather, it needs to make strides in User Interfaces, and this, I think is the more interesting application of importing Illustrator assets into FX.

Jim Weaver has been running a series of posts on creating slick looking UIs with FX. These UIs don’t themselves come from Illustrator (I believe they are static images), but they just as easily could have. I’ve found the series of posts on the fictitious Sound Beans application to be particularly compelling for how JavaFX can be used to create an intuitive and sharp looking User Interface.

Overall I think Project Nile is a smart move to position JavaFX directly against Flash/Flex. While a bit rough around the edges (like much of the preview SDK), it shows a lot of promise.

I’m starting to get a bit concerned though that “showing promise” isn’t enough.  Silverlight and Flex/Flash are real development environments with real market share (i.e. they exist). When it comes out of Preview release, JavaFX needs to be a real differentiator to make up for lost ground and not simply rest on its “but I run on the Java Platform” laurels.

Incidentally, if you’re interested in learning more about Adobe Illustrator, then you could sign up for 2D Digital Illustration at North Park University taught by my wife. That is you could sign up were it not too late, which it is.  She’ll also, however, be teaching a Digital Imaging class (Photoshop) in the Spring.