UI Animations framework for Coherent UI (Part 2)
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 one of the most widely-spread libraries 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 will 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 complex.
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 give us your ideas and what you believe would be most convenient for your game.
