When working between After Effects and Unity, there are several ways of importing motion design assets, using formats such as video and image sequence. Particularly with HoloLens, I found myself designing and animating 2D assets that require alpha channel in output. Unity is infamous for not accepting videos with alpha channel by default. There are paid plugins that solve this but another alternative solution is to output your animations from After Effects as sprite sheet PNG image.

An amazingly helpful and free plugin which does the job is Sheetah. It automatically renders and organizes each frame into a single sprite sheet in PNG, which can be imported into Unity and played back as a sprite animation with alpha channel. For more step by step instructions on how to work with sprite animation, refer to Unity's manual.

Some general notes when using this workflow:

  • A sprite sheet is a square grid collection of sprite frames that plays linearly as a sprite animation when imported into Unity
  • Each sprite frame resolution is equivalent to your comp size in After Effects. 1024 x 1024 pixels is usually good enough for a single UI animation. So a 1 second animation at 25 fps would result in a sprite sheet of 5120 x 5120 pixels.
  • Keep your animation short, to reduce the resolution of the sprite sheet. Anything above 10k x 10k pixels may not be read by Unity. If you have a long animation, consider trading off with a lower comp size, say 512 x 512 pixels. I usually keep things below 20 seconds at 30fps.
  • For best results, try to keep your sprite sheet resolution at a square ratio. This means restricting your animation to 25fps if you only have 1 second, or 1 second and 6 frames if you need it at 30fps. I have encountered sprite animations that jitter in Unity when the sprite sheet is not in square ratio.
  • As a motion designer I'm used to not worrying about the afterlife of an animation. Traditionally it either cuts to a new frame, camera moves away or a new asset animates in to hide the previous one. However in HoloLens, since everything can be seen, things that appear have to disappear or loop logically (unless it is suppose to remain static forever). With this in mind, every time I animate something I'll also have to design its outro or loop.

Fyn Ng (@fyn.ng) is a Motion Designer for the SapientRazorfish Emerging Experiences team, based out of our New York office.