We are thinking about how to help developers using Coherent UI to create better animations easier. We have many ideas that we would like to share with you and get 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”, really make a difference 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 has. 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.
![]( "- YouTube")
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 be even easier to create UI animations in Coherent UI.
Give us your thoughts on this, what do you think is the best way to optimize the UX?
The first step will be the creation of a JavaScript-based animation framework based on the GSAP library.
The framework will make it easy to define element animations, effects, easings, timing etc. We chose a JS-based design instead of a CSS3-based, because JS allows easier control on what is going on. There is also a draft for standardizing such animations - http://dev.w3.org/fxtf/web-animations/.
Before choosing GSAP we experimented with 4 JS libraries: web-animations, web-animations-next, GSAP, jQuery. All libraries have roughly the same features. We compared mostly the performance and stability of the libraries.
The experiments were both artificial and ‘real’ by using an actual game HUD kindly provided by one of our clients.
Web-animations and web-animations-next are libraries by Google that try to emulate the new Web Animations standard. The original one proved to work correctly but had relatively low performance. The “next” version was much faster but is still in active development and somewhat unstable. Both libraries severely lack documentation, which we suppose should be the standard itself. jQuery has the advantage of being almost ubiquitous in every HTML page but proved to be the slowest by far.
GSAP claims to be the fastest JS animation library and from our experiments we can confirm that - at least compared to the other 3 libraries. It is also very well documented and has all animation features imaginable.
The framework will provide a declarative syntax for animations and easy ways to control them. Standard actions like play, stop, rewind, do-something-after etc. will be supported.
All developers using Coherent UI in UE4, Unity or proprietary engines will be able to use the framework in their projects. We’ll distribute it for free in the Coherent UI package.
UI Animations in UE4 with Coherent UI
We understand that most designers in UE4 work with Blueprints so we plan a tight integration with them. All animations will be controllable through BP and will be integrated with the UI scripting. As a first development tier, we’ll expose all the animation controls and ways to define them to BP. Developers at that point will be able to create animations, apply them to elements, control them and execute BP logic on animation events.
After the initial integration we’ll go even further with possibly a timeline exposed directly in UE4. The difficulties there lie in the fact that the animation framework will be much more powerful and feature-rich than Slate. Covering all cases will be more involved.
Another idea is to try a deeper integration with some external tool - possibly Edge Animate.
As Coherent UI is as powerful as a web browser, we could also create a tool completely inside it with JavaScript that runs inside/outside UE4.
We want to create a workflow that is powerful, yet easy to use without the need of special tools outside the Coherent UI and UE4 ecosystem.
We are looking for feedback from our community to develop the best way to do this. Please write us your ideas and what you believe would be most convenient for your game.
