2

We are creating a game with Unity engine. And we want to make UI buttons to animate when idle and on click. Which program should make the most sense to use when creating animations. Is it worth using Adobe After Effects or there a better and more optimization friendly software or methods?

As an e.g. outer circles would rotate around the play button. Simple animation, nothing too complicated.

P.S. Icons will be created using illustrator

enter image description here

Link to large image

2 Answers 2

5

Unity 3D imports SVG quite nicely, so if you are developing your sprite UI element in a vector art program like Illustrator or Affinity Designer or Inkscape, you can output your elements as pure vector SVGs, import them into Unity either using the new Vector Graphics workflow native to Unity 2018+, or using the legacy add-on SVG Importer, and then using Timeline and the standard Unity 2D tools, you can then animate those elements natively in Unity.

This will give you far more control and re-usability of those elements.

When you bring in the SVG elements, they will have the relevant meshes autogenerated, and you will need to set anti-aliasing quality per build target, and allow MSAA in the camera used for your 2D UI elements.

You might want to look through the Questions and Answers on GameDev SE, and I'd also recommend looking this Unity forum posting over too:

https://answers.unity.com/questions/1535326/png-svg-vector-graphics-sprites-quality.html

1
  • 2
    To add, Unity's UI system has functionality to support custom animations while idling or on click directly built in.
    – THiebert
    Commented Jan 3, 2019 at 23:05
3

For simple transform animations, Photoshop Video Timeline is enough.

Video Timeline

Saved as a .gif file and reopen it in Photoshop, you can manipulate the animation frames:

animation

animation frames

6
  • 1
    And if we would like to make separate parts to move, how should we execute that then?
    – Tadas
    Commented Jan 3, 2019 at 16:17
  • 3
    A layer for each part, as simple as the one I made on the whole object, but by layers.
    – user120647
    Commented Jan 3, 2019 at 16:19
  • Also note: you can save as SVG vector art from Illustrator and bring into Unity as SVG, and use Timeline in Unity to animate there. Commented Jan 3, 2019 at 17:46
  • 2
    @GerardFalla This in my mind is the correct answer. Would you mind writing it up
    – joojaa
    Commented Jan 3, 2019 at 18:43
  • 1
    To make it completely smooth, remove the very last frame from the animation, as both first and last frames are rotated 0 (=360) degrees. Commented Jan 3, 2019 at 21:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.