7 Replies Latest reply on Dec 2, 2014 11:49 PM by filwag

    Export AE Animation into iOS


      I'm working with an illustrator to take After Effects animations and put them into iOS code (SpriteKit specifically).


      We would like an automated system that takes a complicated After Effects animation (like the one below) and turns it into something iOS/Objective-C/SpriteKit can understand. Or, if this is not the correct process, how do others usually create AE animations in iOS?


      Here are a list of resources that I've explored, but none of them actually solve my problem:

      Work with Adobe after effects. Possible or impossible? - Cocos2D Forum


      After effects for game development? | BP | I make video games and fun software by fractional distillation.

      Thanks in advance!

      - Rhys

        • 1. Re: Export AE Animation into iOS
          Mylenium Most Valuable Participant

          You could write some scripts that extract the animation data, but it seems to me long before doing that you need to understand the limitations of your APIs. PSD files? What for, if they are not supported natively on the system? Wouldn't it make much more sense to use SVGs or PNGs in the hopes that those files could be re-used natively within the iOS UI kit? I really feel you are completely starting off on the wrong foot here...



          • 2. Re: Export AE Animation into iOS
            rhyslindmark Level 1

            I'm not sure where I said that I'd like to use PSD files, but to be clear, I definitely do not want to use PSD files. As you said, a series of PNG files is what the SpriteKit API takes as input to produce a given animation.


            Given this new clarity, do you still think I'm starting off on the wrong foot?


            Also, to be even more clear, the illustrator and I currently have a physical system for transferring AE data to iOS SpriteKit. For a given animation, she writes down the key frames and the rotation/translation between key frames. Then I hard code in her data into iOS SpriteKit. It feels inefficient/clunky and also feels like a problem that many developer/illustrator teams should have. An inefficient solution that many teams have? Seems like it should've been "solved" by someone on the internet. That solution is what I'm searching for.

            • 3. Re: Export AE Animation into iOS

              Hi rhyslindmark,


              I'm currently trying to solve the same workflow issue. Have you found anything matching your needs in the end?

              Have you thought of giving up AE advantages in producing animations and using Flash (with something like DragonBones or Flump) instead?

              • 4. Re: Export AE Animation into iOS
                rhyslindmark Level 1

                I haven't found anything yet. I've done enough research that I don't think anything of this kind exists for AE - iOS integration.


                I hadn't even considered giving up AE for Flash. After doing some research into Flash with Flump (with Sterling, right?), I don't think it quite justifies switching our entire project over from AE - SpriteKit to Flash-Flump-Sterling.


                What are your thoughts?

                • 5. Re: Export AE Animation into iOS
                  filwag Level 1

                  As for AE, I haven't found anything additional to the links you have provided in your initial post. By the way, have you tried the GibsonXML + Shade Dogs scripts approach from bp.io? Is it worth using and adapting to SpriteKit?


                  Here's some kind of a summary of the options that use Flash or other design environments:

                  • Flash > Flump (open-source) > Starling (cross-platform) or Sparrow (open-source Objective-C 2D game engine)
                  • Flash > Flump (open-source) > Build a custom SpriteKit runtime for Flump's JSON output
                  • Flash > DragonBones plugin (open-source) > zrong/dragonbones-for-cocos2d-x · GitHub for cocos2d-x
                  • Flash > DragonBones plugin (open-source) > Build a custom SpriteKit runtime for DragonBones JSON format
                  • Flash > open-source converters/players such as musictheory/SwiffCore · GitHub (looks like a plain Flash player on iOS) or gree/lwf · GitHub (includes UIKit runtime); they do not support SpriteKit out of the box.
                  • Spine (license required) > one of the official runtimes for cocos2d-iphone/cocos2d-x/Unity/libGDX/Starling/etc. There are also two unofficial runtimes for SpriteKit, see this tutorial: http://www.raywenderlich.com/59535/integrating-spine-spritekit-tutorial
                  • Level Helper 2 (free trial) supports SpriteKit
                  • SpriteBuilder (a.k.a CocosBuilder) > cocos2d; they've also had SpriteKit support but abandoned it. See apportable/SpriteBuilder-SK · GitHub
                  • Flash > GAFMedia extension (license required) > cocos2d-iphone/cocos2d-x/Starling/etc.; no SpriteKit support


                  It would be great to use SpriteKit but it looks like it is required to build your own custom runtime first to support animations produced in Flash or AE.


                  Have you considered exporting AE projects into Flash?

                  • 6. Re: Export AE Animation into iOS
                    rhyslindmark Level 1

                    Woah! Detailed breakdown of the options currently out there! Very helpful actually. The Flump paths seem to be the most promising. However, the project I'm currently working on has few enough animations and not enough time that I feel like I'm just going to manually input the correct coordinates. I'm going to do this manual process with a relatively big animation this week, so I'll let you know how that goes.


                    I HAVE looked into the ShadeDogs scripts approach! Here's my comment: After effects for game development? | BP | I make video games. Then he gave my his scripts! Quite generous. You should look at them and tell me what you think. I'd be down to create some sort of open-source converter based on his scripts. What do you think? I haven't actually worked on anything open-source before...it just seems like it should exist. (We could even get Learn Cocos 2D to help us! User LearnCocos2D - Stack Overflow)


                    And no, I haven't looked into exporting from AE to Flash, though an initial google search makes it seem surprisingly not trivial.

                    • 7. Re: Export AE Animation into iOS
                      filwag Level 1

                      Hi. How's it going with the manual animations process?


                      Looks like the overall chain with the ShadeDogs approach has more elements in it: XML Gibson script -> Converter based on SD scripts (to be created) -> Parser + SpriteKit runtime for the output of this converter (also to be created). And finally, I'm not quite sure, but it seems that XML Gibson output contains just basic transformations and no effects like custom math expressions for easing, motion blur etc. So it turns out for me that there's not much advantage in using AE instead of Flash in this case.

                      I'm currently experimenting with the LWF by GREE library. You create .fla files in Flash, convert them to lwf format and then load them on iOS using provided cocos2d-x, Unity3D or UIKit runtimes. Unfortunately, the don't have SpriteKit support out of the box.