Cinematic Editor: Devlog#3

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 :
cinematic editor 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 :

SDK integration first look

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”. :stuck_out_tongue:

8 Likes

That looks amazing. Good job so far, Still needs some work but it’s an epic start.

Hi,

Looking forward to this plugin.

One thing, is the performance of the program impacted by that JavaFX UI?? :slight_smile: Acording to what I know so far JavaFX will try to find a hardware accelerated graphics pipeline if it can. So don’t know if the rendering pipeline of the JMESceneApp and JavaFX got any conflict?? Or you don’t try them together yet?

@atomix said: Hi,

Looking forward to this plugin.

One thing, is the performance of the program impacted by that JavaFX UI?? :slight_smile: Acording to what I know so far JavaFX will try to find a hardware accelerated graphics pipeline if it can. So don’t know if the rendering pipeline of the JMESceneApp and JavaFX got any conflict?? Or you don’t try them together yet?

The use of OpenGL is disabled for swing by the default SDK settings. JavaFX basically is swing/awt so that should be true for JavaFX as well.

3 Likes

Thank, the clarification clean the mist… Really want to try out the tool as soon as possible

This is coming alone very nicely. Kudos.