Hey guys! It’s Will again back with another semi-tutorial/discussion of a piece of Crystal Companies. This time I’ll be focusing on adding some flare to the UI using Affect Effects. I’ll be explaining my process for setting up and exporting sprite sheets directly from After Effects and then a quick look at how to set up those animations for use in the Unity UI system.
The main reason I use this workflow for the UI is that Unity doesn’t natively support particle effects in a screen space overlay canvas. Even with the other canvas modes using the built in particle system is clunky, especially with varying resolutions. This method avoids those problems by being prerendered. Of course, that means it comes with its own set of drawbacks. There is a fair bit of setup involved and you can’t easily edit the effects without rendering out an entirely new sprite sheet. That said it does offer a lot of flexibility about the sort of animation you can render out. There is nothing limiting this technique to just particle effects. You can also use it to make animated logos, loading icons or really anything that moves.
With that said lets get into the details. For this example, I will be using this frankly ridiculous electric blue glow as a button highlight. I won’t go into how to actually create the effect in After Effects, as there are lots of really excellent tutorials that exist for it already. I will note there are few things you should have set up in your effect if its a particle effect.
- It should be transparent so it layers over UI elements
- If its a highlight or loading icon where you don’t know how long it might be playing it should loop seamlessly.
- It should be fairly short. Sprite sheets can get large quite fast and often the effects don’t need to be very long. In this example I’ve rendered 30 frames.
- Depending on the effect it’s not likely it needs to be very large. If a button or icon is a very small you don’t need 5000 pixels for the prerendered effect.
Once you have your effect finished, it’s time to export it. While there are lots of different utilities you can use to create a sprite sheet by exporting it as an image sequence, you can also write some expressions in AE to do simple layout work for you.
Make a new composition the size you want your final sprite sheet to be. In this case, I’m using a 4k texture. My effect is a 500px square (huge, but will work for this example). Add the composition with your effect as a new layer and alt+click on the position to add a new expression. This simple code will tile the effect:
Also, we’ll add a freeze frame effect to the comp with its own short expression. This just sets the freeze frame to the index of the layer. Then all you need to do is make as many copies as your as your animation has frames. In this case my animation has 30 frames, so I need 30 copies.
It’s as easy as that! Now just go to the composition menu and Save as… to save the frame as a file. You’ll need to change your render settings to an image sequence. Make sure you also change the video output for include RGB + Alpha so that AE will render with transparency.
Now we take that sprite sheet and start working with it in Unity. The setup is actually pretty easy. First take the sprite sheet and choose the import settings. In this case we are using it for the UI so we need to set it to Sprite (2D and UI) . It’s also a sprite sheet, so we change sprite mode to multiple.
Then in this case, we know we have 500 px squares so we can go to slice → grid by cell size and type in our size of 500 x 500. Unity cuts up our sprite sheet back into a 30 images numbered 0-29.
Go to the animation tab on the image and a create a new clip. Under samples, I changed this to 30 because my animation has 30 frames, and a duration of 1 second. Then just simply select all the sprites from our sheet and drag them into the animation. It will automatically assign the frames.
That’s it! Depending on how you’re using it you have to play with the anchor settings, and you probably don’t want it set to be a raycast target, but those modifications are application specific!
You can checkout the sample scene with this sprite sheet and set up yourself: