Do you need a layout algorithm with a percentage positions and sizes support for your UI? Do you want to use more SVG elements at less memory and performance cost? Or you are a designer and you do not want to rely on JavaScript to modify values in the UI? The new release of Hummingbird, Hummingbird 1.3, enables fast UI creation with its improved workflow. The 1.3 version comes with a lot of improvements like declarative data-binding and multiple Gamepads support.

Update: Read about the latest release – check Hummingbird 1.9!.

New CSS layout algorithm

We have reworked the layout algorithm that powers Hummingbird. It is now closer to the FlexBox standard and most importantly it supports percentage (%) positions and sizes.
This makes it much easier for designers to implement responsive user interfaces and reuse UI elements across screens. Elements can have their sizes and position relative with respect to their parents.
For instance, a health-bar can be created with all its children elements (text, the color bar of the player’s health, the background), and they will be sized in % according to the whole bar itself. When using it in the final game HUD, you can set the whole size of the health bar, and it’ll correctly calculate and position all elements within. It’s now much easier to make responsive UIs and achieve resolution and aspect ratio independence.

New SVG rendering algorithm

Hummingbird’s SVG renderer has been completely revamped. In comparison with HB 1.2 or previous versions of HB, now you can use a lot more SVG elements at a fraction of the memory and performance cost. The case of rapidly scaling SVGs has been the center of our efforts and it now works up-to 50 times faster. The internal format used for the SVG rendering data has also been slimmed down, and the GPU memory used is up-to 3 times less. We have also changed the anti-aliasing and tessellation code, which makes SVG paths look flawless on any zoom level.
We encourage developers to make use of more vector graphics and to rely more on SVG as a stepping stone of their user interfaces.

Declarative data-binding in UI creation

Declarative data-binding has arrived in Hummingbird! The feature allows designers to work faster and not to rely on JavaScript to modify values in the UI when they change in the game.
The goal of the feature is to make the usage of MVC and MVVM patterns easy and convenient, while developing game user interfaces. The “model” of the data is the game engine and can easily be exported to the UI through our binding classes.
When changing the model, designers just have to declare which property in the UI should be modified and how. Unit health-bars in strategy games are a natural example. The bars have to move with the units on-screen. To animate them, the designer just has to declare:

<div data-bind-style-left=”{{myUnitModel.xPos}}”></div>

The engine developer has to expose the “myUnitModel” from C++. When the “x” coordinate of the unit changes, it will be reflected in the UI automatically, without any additional code, JavaScript or hassle. The declarative data-binding in UI creation dramatically reduces complexity and improves iteration time during development. It’s also more efficient than changing styles through JavaScript because the Hummingbird runtime handles the changes in the native code through a fast path.
In the next versions of Hummingbird, we will expand the available data-binding properties and introduce additional convenience constructs.

Gamepad support

Gamepads are now a first-class input device in Hummingbird. The new release supports multiple Gamepads and all the variances they include (analog sticks, digital, buttons etc.). The feature allows developers to integrate much more quickly gamepad support in their titles without the need to translate them to touch/keyboard or mouse events.

 Example of Skill Tree navigation – MOBA Kit

What’s next?

Hummingbird’s workflow enables fast UI creation! Version 1.4 is also coming soon with additional major features, including:

• Structural data-binding, which will allow the data model to be used as a template for the generation of dynamic UIs.
• A lot of improvements on the Hummingbird threading model, which will give developers more control over it.
• A BIG surprise.. Look carefully at the new features in 1.3. A hint is hidden there, can you guess what’s coming?

If you would like to try our Hummingbird product and enjoy fast UI creation, you can Request a Demo or contact our sales team at sales@coherent-labs.com for more information.

Follow Stoyan on Twitter: @stoyannk