Many of you have been asking about our new SDK for mobile game UI. We have decided that it is about time to reveal more spicy details about our new technology – Hummingbird.

 

For the last 3 years we have been working with PC and console game developers and have been able to learn a lot about their needs for game UI. We have also discovered that although mobile game developers have very similar needs to their PC colleagues, they experience specific problems which should be addressed in a unique way.

 

User experience and first impression are even more important for mobile games than for PC titles. It takes only a few minutes for a user to decide whether to play a game or to delete it. The market is so highly competitive that any mistake can come to a huge cost. Developers try to minimize the risk by constantly testing and changing parts of the game UI. However, currently available UI solutions offer such a workflow that even small iterations of the GUI could take a lot of time and efforts.

 

Although the mobile devices are getting more powerful, they still cannot compare to PC. Mobile developers focus a lot of efforts on optimizing the performance so the game can run smoothly on a large number of mobile devices. Still, the UI solutions available most often are not designed specifically for mobile and cannot meet the performance needs of mobile game developers. This makes teams compromise with the user flow by substituting elements, adding loading screens, and removing animations.

 

What is Hummingbird?

 

Hummingbird was born from our experience with our UI solutions for Desktop and Consoles. We found that in order to support the performance requirements of mobile devices we had to completely rethink the way HTML is rendered. Our SDK is created from the ground-up with games and real time applications in mind, and is based on proprietary technology.

 

Hummingbird is an HTML5 rendering library. The runtime (code library) can be embedded in any application on the supported platform and it will render user interfaces authored with standard HTML, CSS, and JavaScript. Iteration time is substantially reduced due to the fast work-flow with HTML/CSS/JavaScript.

 

What is the easiest way to create professional mobile game UI?

Fast iteration through WYSIWYG Editor

Hummingbird comes with our visual editor which allows designers to create the entire game user interface without coding.

Some of its key features:

• WYSIWYG visual editing that provides smooth workflow and fast iterations
• Live editing functionality that enables users to make changes to the user interface and instantly see them in the game. This significantly reduces iteration time and helps teams discover the best user flow faster than before.
• Powerful animation options through visual timeline
• Widget system that provides an easy way to apply the same visual style to multiple UI elements
• Easy data binding that enables quick communication between the game and the UI
• Fast asset import from Adobe Photoshop – The editor has a functionality which allows direct import from Photoshop. Designers can export all assets at once as an HTML page, import them in the SDK, and tweak them through the visual editor.

 

Extremely fast and lightweight UI – how do we do it?

 

Hummingbird is extremely fast as it performs updates only to the parts of the UI texture that have been changed. The developer should not draw anything on the UI texture except the Hummingbirdoutput. Internally, Hummingbird uses the Coherent Labs Renoir graphics library which is specifically optimized for game user interface.

Asynchronous resource loading

All resources in Hummingbird are loaded in work threads in order for the main UI thread to stay free. The SDK records asynchronously rendering commands that are later on executed in the render thread. This method draws the new frame if one was recorded or returns immediately if nothing in the UI has changed which significantly improves the UI performance.

Battery-friendly architecture

Hummingbird is battery-friendly. Its task-based architecture makes the best use of all cores and computational power of the device while saving battery life.

Direct DOM access from the native language

The SDK enables developers to use C++ to create all performance-heavy UI elements. This feature helps them design UI that runs smoothly at any point of the game.

Full developer control

The developers have full control over memory allocations, file loading, logging, and rendering which allows them to achieve optimal UI performance.

Multithreading

Key to scalability and performance of Hummingbird is its multithreaded architecture. At the moment, the users interact with two threads – Main or UI thread and render thread. The Main thread is where the user has to interact with the UI logic – send events, input and execute JavaScript. The render thread is the one that submits commands to the GPU.

What is the trick for perfect UI on any resolution and screen size?

Automatic scaling system and powerful layout

Creating scalable UI for different screen sizes, especially on Android, is an Achilles’ heel for mobile game developers. The powerful CSS layout rules in Hummingbird help teams create user interface that looks great on any resolution and aspect ratio.

Vector-based elements

Hummingbird enables designers to use SVG assets so that the UI can look great on any resolution.

How to create stunning mobile game UI?

CSS animations

All details in a mobile title should look and feel polished in order for a title to attract and keep players’ attention. Including cool UI animations is a great way for a user interface to stand out. Complex animations, however, impact negatively the UI performance. To solve this problem, our SDK supports CSS animations which are very fast and help teams achieve their targeted performance without the need to compromising with the interactivity of the UI.

Support for third-party JS libraries and frameworks

Apart from the visual editor the Coherent Editor has also build-in code editor and has support for third-party libraries. Developers can use the most popular JS libraries and frameworks to enhance the functionality of their mobile game UI even further.

We hope that our new product will empower and inspire mobile game developers to create impressive, interactive mobile UI! If you are interested to try out Hummingbird, sign up for Beta here.