Hi guys !
The last two weeks focused on developing a UI and a basic framework for the Cinematic Editor. For the UI,I started off with Swing but migrated to JavaFX 2.2 midway. I have created 3 new JavaFX controls namely TimelineControl(RHS of editor), LayerCotainerControl (LHS of editor; it’s a custom TreeTable as javaFX 2,2 does not provide a TreeTable) and CinematicEditorUI (combines the other two controls). I have maintained the code in this repo. The JavaFX related code is in the com.jme3.cinematic.gui.jfx package.Each of these controls has a FXML and a CSS file associated with it, so it can be opened up in the JavaFX Scene Builder for editing. As the back-end, I am maintaining a tree-like data structure. Classes related to this tree like data structure are in com.jme3.gde.cinematic.core package. The Cinematic Editor is capable of reading and interpreting data from this tree as well as modifying its nodes based on how a user interacts with the UI. The next major step in the project is to write some kind of interpreter to translate this tree to generate the conventional jME cinematic. I had coded a draft of it while developing the prototype.
Here’s a pic depicting the different UI components :
The current UI capabilities of the editor include : add/remove layers( i.e representation of objects in the cinematic) and events, renaming layers, changing duration,zooming in/out of timeline and while keeping components in sync, navigating through time/frames via time slider, going to a specific time/frame, displaying cinematic scene graph in layer container, showing/hiding child layers, show/hide Layer Container columns, proper horizontal and vertical scrolling of different components. These are demonstrated in this video :
[video]jMonkeyEngine Cinematic Editor GUI - YouTube
In the video, I first create the tree, and register it with the CinematicEditorManager. When I run the app, the editor initializes it according to the data in the tree. I then show how the editor can be used to edit the tree and highlight some gui features mentioned above.
Currently, I am integrating the editor into the SDK. Here’s how it looks as of now :
It’s taking longer than expected as the JfxPanel is not loading the CinematicEditor properly. Hopefully, I’ll nail it today so that you guys can check it out. Meanwhile, you can test the stand-alone editor here.
This week I aim to complete the leftover work from previous sprint and plan the next one with @nehon. The delay was caused mainly due to the fact that until 10 days ago all I knew about JavaFX was : “it makes some really cool UI’s”.