What program should I use to make UI sprite animations for unity3D












1














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






adobe-illustrator svg animation adobe-after-effects sprite







share|improve this question









New contributor




Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

























    1














    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






    adobe-illustrator svg animation adobe-after-effects sprite







    share|improve this question









    New contributor




    Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
    Check out our Code of Conduct.























      1












      1








      1







      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






      adobe-illustrator svg animation adobe-after-effects sprite







      share|improve this question









      New contributor




      Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      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






      adobe-illustrator svg animation adobe-after-effects sprite




      adobe-illustrator svg animation adobe-after-effects sprite






      share|improve this question









      New contributor




      Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.











      share|improve this question









      New contributor




      Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      share|improve this question




      share|improve this question








      edited 3 hours ago









      Danielillo

      19.9k12970




      19.9k12970






      New contributor




      Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.









      asked 3 hours ago









      Tadas

      254




      254




      New contributor




      Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.





      New contributor





      Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






      Tadas is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
      Check out our Code of Conduct.






















          2 Answers
          2






          active

          oldest

          votes


















          2














          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






          share|improve this answer



















          • 1




            And if we would like to make separate parts to move, how should we execute that then?
            – Tadas
            3 hours ago






          • 2




            A layer for each part, as simple as the one I made on the whole object, but by layers.
            – Danielillo
            3 hours ago










          • 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.
            – GerardFalla
            1 hour ago






          • 1




            @GerardFalla This in my mind is the correct answer. Would you mind writing it up
            – joojaa
            40 mins ago










          • @joojaa - per your request sir - I added a brief, but accurate answer. I think it's beyond the scope to add much more detail here on GDSE.
            – GerardFalla
            24 mins ago



















          1














          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






          share|improve this answer





















            Your Answer








            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "174"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: false,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: null,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });






            Tadas is a new contributor. Be nice, and check out our Code of Conduct.










            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgraphicdesign.stackexchange.com%2fquestions%2f118697%2fwhat-program-should-i-use-to-make-ui-sprite-animations-for-unity3d%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            2














            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






            share|improve this answer



















            • 1




              And if we would like to make separate parts to move, how should we execute that then?
              – Tadas
              3 hours ago






            • 2




              A layer for each part, as simple as the one I made on the whole object, but by layers.
              – Danielillo
              3 hours ago










            • 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.
              – GerardFalla
              1 hour ago






            • 1




              @GerardFalla This in my mind is the correct answer. Would you mind writing it up
              – joojaa
              40 mins ago










            • @joojaa - per your request sir - I added a brief, but accurate answer. I think it's beyond the scope to add much more detail here on GDSE.
              – GerardFalla
              24 mins ago
















            2














            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






            share|improve this answer



















            • 1




              And if we would like to make separate parts to move, how should we execute that then?
              – Tadas
              3 hours ago






            • 2




              A layer for each part, as simple as the one I made on the whole object, but by layers.
              – Danielillo
              3 hours ago










            • 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.
              – GerardFalla
              1 hour ago






            • 1




              @GerardFalla This in my mind is the correct answer. Would you mind writing it up
              – joojaa
              40 mins ago










            • @joojaa - per your request sir - I added a brief, but accurate answer. I think it's beyond the scope to add much more detail here on GDSE.
              – GerardFalla
              24 mins ago














            2












            2








            2






            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






            share|improve this answer














            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







            share|improve this answer














            share|improve this answer



            share|improve this answer








            edited 3 hours ago

























            answered 3 hours ago









            Danielillo

            19.9k12970




            19.9k12970








            • 1




              And if we would like to make separate parts to move, how should we execute that then?
              – Tadas
              3 hours ago






            • 2




              A layer for each part, as simple as the one I made on the whole object, but by layers.
              – Danielillo
              3 hours ago










            • 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.
              – GerardFalla
              1 hour ago






            • 1




              @GerardFalla This in my mind is the correct answer. Would you mind writing it up
              – joojaa
              40 mins ago










            • @joojaa - per your request sir - I added a brief, but accurate answer. I think it's beyond the scope to add much more detail here on GDSE.
              – GerardFalla
              24 mins ago














            • 1




              And if we would like to make separate parts to move, how should we execute that then?
              – Tadas
              3 hours ago






            • 2




              A layer for each part, as simple as the one I made on the whole object, but by layers.
              – Danielillo
              3 hours ago










            • 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.
              – GerardFalla
              1 hour ago






            • 1




              @GerardFalla This in my mind is the correct answer. Would you mind writing it up
              – joojaa
              40 mins ago










            • @joojaa - per your request sir - I added a brief, but accurate answer. I think it's beyond the scope to add much more detail here on GDSE.
              – GerardFalla
              24 mins ago








            1




            1




            And if we would like to make separate parts to move, how should we execute that then?
            – Tadas
            3 hours ago




            And if we would like to make separate parts to move, how should we execute that then?
            – Tadas
            3 hours ago




            2




            2




            A layer for each part, as simple as the one I made on the whole object, but by layers.
            – Danielillo
            3 hours ago




            A layer for each part, as simple as the one I made on the whole object, but by layers.
            – Danielillo
            3 hours ago












            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.
            – GerardFalla
            1 hour ago




            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.
            – GerardFalla
            1 hour ago




            1




            1




            @GerardFalla This in my mind is the correct answer. Would you mind writing it up
            – joojaa
            40 mins ago




            @GerardFalla This in my mind is the correct answer. Would you mind writing it up
            – joojaa
            40 mins ago












            @joojaa - per your request sir - I added a brief, but accurate answer. I think it's beyond the scope to add much more detail here on GDSE.
            – GerardFalla
            24 mins ago




            @joojaa - per your request sir - I added a brief, but accurate answer. I think it's beyond the scope to add much more detail here on GDSE.
            – GerardFalla
            24 mins ago











            1














            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






            share|improve this answer


























              1














              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






              share|improve this answer
























                1












                1








                1






                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






                share|improve this answer












                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







                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered 25 mins ago









                GerardFalla

                2,742215




                2,742215






















                    Tadas is a new contributor. Be nice, and check out our Code of Conduct.










                    draft saved

                    draft discarded


















                    Tadas is a new contributor. Be nice, and check out our Code of Conduct.













                    Tadas is a new contributor. Be nice, and check out our Code of Conduct.












                    Tadas is a new contributor. Be nice, and check out our Code of Conduct.
















                    Thanks for contributing an answer to Graphic Design Stack Exchange!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid …



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fgraphicdesign.stackexchange.com%2fquestions%2f118697%2fwhat-program-should-i-use-to-make-ui-sprite-animations-for-unity3d%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    -

                    Popular posts from this blog

                    Eastern Orthodox Church

                    Image
                    Not to be confused with Oriental Orthodoxy, Eastern Christianity, or Eastern Catholic Churches. "Eastern Orthodoxy", "Orthodox Church", "Orthodox Catholic Church", and "Orthodox Christian Church" redirect here. For other uses, see Orthodox (disambiguation). This article may be too long to read and navigate comfortably . The readable prose size is 132 kilobytes. Please consider splitting content into sub-articles, condensing it, or adding or removing subheadings. ( January 2018 ) Part of a series on the Eastern Orthodox Church Mosaic of Christ Pantocrator, Hagia Sophia Overview Structure Theology (History of theology) Liturgy Church history Holy Mysteries View of salvation View of Mary View of icons Background Crucifixion / Resurrection / Ascension of Jesus Christianity Christian Church Apostolic succession Four Marks of the Church Orthodoxy Organization Autocephaly Patriarchate ...
                    Read more

                    Zagreb

                    Image
                    This article is about the Croatian capital city. For other uses, see Zagreb (disambiguation). City in City of Zagreb, Croatia Zagreb City Grad Zagreb City of Zagreb Clockwise, from top: St. Mark's Square, Croatian State Archives, Zagreb Tram, Art Pavilion, Cibona & HOTO towers and Croatian National Theatre. Flag Coat of arms Zagreb Location of Zagreb in Croatia Show map of Croatia Zagreb Zagreb (Europe) Show map of Europe Coordinates: 45°49′N 15°59′E  /  45.817°N 15.983°E  / 45.817; 15.983 Coordinates: 45°49′N 15°59′E  /  45.817°N 15.983°E  / 45.817; 15.983 Country   Croatia County City of Zagreb RC diocese 1094 Free royal city 1242 Unified 1850 Subdivisions 17 city districts 218 local committees (70 settlements) Government  • Type Mayor-Council  • Mayor Milan Bandić (BM 365)  • City Assembly 51 members BM 365, ZL, NS-R (14) SDP, GLAS, HNS, HSS, NH-PS (13) ...
                    Read more

                    Understanding the information contained in the Deep Space Network XML data?

                    Image
                    up vote 1 down vote favorite NASA's Deep Space Network activity can be viewed conveniently at https://eyes.nasa.gov/dsn/dsn.html but if you would like data in a more raw XML form, it can be accessed as described in this answer Below is a small Python script that reads the XML into a list of dictionaries, and saves it to disk as a JSON. The dictionaries are organized at the higher level by dish, then by spacecraft per dish. Question: What are the most-likely meanings of all the data field contained in the Deep Space Network XML data? This is the example url from the other answer, used in the script below: https://eyes.nasa.gov/dsn/data/1365107113.xml def dictify(r,root=True): # https://stackoverflow.com/questions/2148119/how-to-convert-an-xml-string-to-a-dictionary-in-python/30923963#30923963 if root: ret...
                    Read more