In our previous blog post, we explained how the Coherent Exporter enables designers to create complex UI compositions with vector graphics, advanced animation, and stunning effects. In Part 2, we will give you a glimpse of the Exporter’s features that “augment” the standard Animate workflow with functionalities unique to HTML, Coherent GT and Hummingbird.

Flash with Flexbox

One of the biggest limitations of the standard Animate environment is that it has no concept of a layout. Everything is absolutely positioned, making it very hard to create responsive UI for different screen sizes and devices. The Coherent Exporter changes that by adding the most modern layout model of HTML – Flexbox. Using this function you can center UI elements, organize the wrapping of dynamically generated inventory items, setup ordering and much more.

Flexbox is especially useful for alignment of items in inventory screens

Apart from the Flexbox model, all UI elements are exported in viewport units, which scale automatically depending on the size of the screen. Furthermore, the shapes are exported as vector images in SVG format. The Exporter also supports the unique Hummingbird feature – Simple layout. It uses faster layout algorithm, which is especially useful for UI elements that need a high performance like nameplates on HUD screens.

Having such powerful layout options enables the UI Designer to focus on creating and refining the actual content, instead of recreating it in several different versions for various screen resolutions.

Visual data-binding

We have the advanced visuals and responsive layout, but how do we connect the Game UI to the actual game? Typically in other flash-based solutions, this part requires heavy developer involvement. After the designer finishes the iteration of the design, the UI developer needs to add ActionScript to the Flash composition. Then, a C++ developer needs to add the corresponding code. However, the worst is in the testing of the binding, which cannot effectively be done without the actual game. So, if any changes are needed, the whole process needs to be repeated going through all stages and reducing the iteration speed immensely.

Data-binding attributes can be added using visual GUI

The Coherent Exporter, on the other hand, uses the Declarative data-binding system of Coherent GT and Hummingbird. It allows you to assign data-binding attributes to UI elements that directly reference a data-model defined in the C++. The data-binding attributes are added via visual GUI in the Exporter panel. That way the entire UI developer/ActionScript steps is skipped!

Furthermore, the data model can be passed from JavaScript, meaning one can test the data-binding without the game. However, the best part of it all – there will be a visual tool that generates the mocked JavaScript models! That way the data-binding can be set up by a single team member without coding and the actual game!

Of course, UI developers are not forgotten. The Exporter has built-in JavaScript Editor, Custom CSS styles, and GT Components support, which makes it very easy for developers to collaborate with designers.

Design. Game Design

Last but not least, the Coherent Exporter gives you the ability to actually design the behavior of the UI using a powerful actions system. Every UI element has a set of event listeners for various events (e.g. click, hover, scroll etc.). Whenever the event occurs, a set of actions can be executed on a specific target element. There is a great variety of options for tasks like hiding/showing, location, and animation playback control. By using them, one can create single page applications, navigation between screens and effectively control the state machine of any UI element. The best part is that all this can be done without writing a single line of code!

The state of the UI can be controlled via powerful actions system

The Coherent HTML Exporter is currently in closed Beta. If you would like to try it out now please contact our sales team at sales@coherent-labs.com.

We would love to hear your thoughts on this blog post and the new features of the Exporter! Tweet us or leave a comment below!