Welcome, Guest

Author Topic: UI animations framework for Coherent UI (PART 1)  (Read 1718 times)


  • Administrator
  • *****
  • Posts: 41
    • View Profile
UI animations framework for Coherent UI (PART 1)
« on: October 23, 2014, 02:01:49 AM »
We are thinking of how to help developers using Coherent UI create better animations easier. We have many ideas that we would like to share with you and get your feedback on them.


Animation in UI

Game user interface (UI) is rapidly evolving along with all other aspects of game development. If we look at the UI of the current trend-setting games, we see slick, stylish, animated elements. Animation is what makes an interface “come to life” and grab the attention of the player.

Game user interface is much more than the standard buttons, drop-downs and menus we see in OSes. Many UI systems (Slate for UE4, Unity GUI, CEGUI) can handle reasonably well these widgets but they are used mostly for editors. Modern in-game HUDs or 3D in-world UI elements must be very dynamic and their widgets don’t fall in any standard category.
The need for creating such rich and animated user interfaces brings new requirements to authoring tools. Animations should be easy to create, edit and experiment with.

Animations in Coherent UI now

At Coherent Labs we firmly believe that HTML5 is the future of game UI exactly because it allows developers to create rich animations and content. It is easy to develop compelling interfaces with Coherent UI thanks to the freedom provided by HTML5 and the performance of the SDK itself.

Coherent UI moves game interfaces away from standard controls (although they are supported as well) through the animation possibilities it gives. Developers can use CSS3 animations for their interfaces with their declarative syntax or use JavaScript libraries for finer control.

Interfaces can be authored with visual editors like Adobe Edge Animate, Sencha Animator, Google Web Designer. In them designers feel most comfortable as no code is required and work iterations are much shorter. Coherent UI supports all HTML5 animations, effects, easing, transitions in a high-performance way.

In this short video you can see an animated inventory widget authored in Edge and run through Coherent UI.

Integrated animations framework for Coherent UI

Our integrations in UE4 and Unity3D try to make things as easy as possible for UI designers but we want to provide a more integrated workflow for animations too. Our goal is to make it even easier for developers and designers to create UI animations in Coherent UI.

What do you think is the best way to optimize the UX?