Work / Archive
Level Up: one UI flow, built twice
Context
UI animation for a mobile game based on Dragons: Rise of Berk, originally released by Ludia in 2014. The task was an animated sequence showing the user flow from the roster screen through to the character sheet, in After Effects or in Unity.
The problem
- 01The same user flow had to exist twice: once in After Effects as the reference, once in Unity as the thing that ships.
- 02Briefed assets arrived in a state built for design, not for animation.
- 03Making a multi-screen flow legible as a single continuous idea rather than a sequence of screens.
What I did
01
Prep the assets before animating anything
I organised and prepared the briefed assets in Photoshop first so they were genuinely ready for After Effects. Most of the pain in UI motion is layer structure, and it is cheaper to fix before the first keyframe.
02
Animate the flow, then the effects
The user flow came first and effects animation second, so the sequence stayed understandable as a flow rather than becoming a showcase of transitions.
03
Rebuild it in the engine
With the reference complete, I moved into Unity and learned UI Animator from the Asset Store to recreate the flow there. Doing the engine build myself is the difference between a video about an animation and an animation that ships.
More footage
Result
- 01A user flow that existed in the engine, not only as a reference render.
- 02A repeatable route from After Effects reference to Unity implementation.
- 03Working knowledge of engine-side UI animation that fed directly into later product motion work.
