If you do any sort of animation for the web, you may have heard of a new tool that Adobe has been working on called Edge. We’ve mentioned it here on the Rain blog in the past, and even though it’s still a pre-release technology, we’re big fans already.
One of the biggest reasons right now is for a new game we recently released called The Adventures of Timmy: Run Kitty Run. (That’s a mouthful, so I’ll just call it RKR from here on out.) Around here we’re big fans of old-school platformer games like Super Mario Bros. and RKR is proof of that. There were two major goals for RKR during development; making a great game, and telling a good story. In RKR, we accomplished the first goal through blood, sweat, & mexi-Coke-flavored tears. (mmm… real sugar…) Adobe Edge helped out immensely with the second goal.
Our plan for telling the story of RKR was via animated cut-scenes placed between each chapter of the game. These would be simple animations, drawn in a sort of motion comic book style – display one panel of a scene, with a few simple animations here and there. As RKR is built using the Cocos2D framework, we had originally planned on coding all of the animations by hand and building them as scenes using Cocos2D. I was not looking forward to this. Ask anyone who’s ever coded a keyframe-style animation by hand if they want to do it again, and I’m sure they’ll run out the door screaming. Coding animation like that is the stuff of nightmares.
Then Edge came along.
One day, as I was thinking about how to best approach the animations for our game, I overheard someone here talking about this awesome new tool from Adobe, and how easy it was to use. The best part – the resulting animations were in HTML5, and could even run in a mobile browser. That was the lightbulb moment. We decided to give it a shot, and it worked great.
So… want to use Edge in your own iOS apps or games? It’s crazy-easy, and doesn’t take much time at all to do. Assuming you’ve got your animation ready to go, here’s what you need to do.
Import the Edge content into Xcode
Open up your Xcode project, and in the Project Navigator (the files and groups listing in the left panel) expand the “Resources” group. Now, you don’t need to copy the Edge stuff specifically into Resources, but it does help to keep things organized.
Navigate in Finder to the folder containing your Edge content, and make sure that it’s all contained within one folder. You should have the following stuff all in one place:
- mySweetAnimation.html
- mySweetAnimation.edge
- mySweetAnimation.js
- mySweetAnimation.css
- images (folder)
- edge_includes (folder)
- Edge in RKR
- Adobe Edge download
Drag the folder containing all of this into Xcode, adding it to the Resources group. Tell Xcode to copy items into the destination’s group folder. Also, make sure that you select the “Create folder references for any added folders” option is selected. Otherwise, the relative links used by the .html, javascript, and other Edge stuff will not work. Doing this will create the appropriate folder structure within your app or game’s resource bundle when it’s running on a user’s device. You’ll need to also check any build targets that you want to have this content included with.
Display the Animation
Now that you’ve added the content, it’s time to write some code. In RKR, I created a CutSceneViewController that extends UIViewController. In Interface Builder, I added a UIWebView to the CutSceneViewController view, and setup the appropriate outlets so I could access it via my code.
To load your animation you’ll need to tell the UIWebView where to find the content. First, you’ll grab the path to the HTML file for your animation. You’ll load the contents of that HTML into an NSString that you’ll instruct your UIWebView to load. Then you’ll use that same path as the baseURL parameter for the UIWebView. Setting the baseURL tells the view that it should treat this path as the “base” for any content it needs to load. Any relative links in the HTML, JavaScript, or CSS will use this location as a starting point.
In the code sample below, you’ll see that after I determine which scene I want to load, the appropriate URL is built, and after the content is loaded into an NSString, this content is then handed off to the UIWebView.
Since this does take some time to happen, and we didn’t want to leave our players wondering whether or not we’ve crashed or locked up, RKR displays a loading animation of Timmy’s silhouette running in place. Before loading the HTML content, this simple animation is created on a layer above the UIWebView, and is played using an image sequence and setAnimationImages: method of UIImageView.
Our CutSceneViewController implements the UIWebViewDelegate protocol, and when the webViewDidFinishLoad: method is called, we remove the loading animation from the screen to uncover the Edge animation, and start up our music. Ta da! You now have some HTML5-powered animations running in your application! Easy, right?
But… how do I know when the animation is done? Good question. That’s equally as easy, and still only takes a couple of steps.
In the folder containing your Edge stuff, find the mySweetProject.js file. You’ll need to make a slight adjustment to one of the methods generated by Edge.
In the sample below, you’ll see the code we added to the ready() function. This code adds an observer for the onStop event in Edge, which is triggered when the animation stops playing. At this point, we’ll tell the UIWebView to change it’s location to “cutsceneEnd”. This isn’t an actual location, just a keyword we want to watch for.
Back in CutSceneViewController, we’ve implemented the webView:shouldStartLoadWithRequest:navigationType: delegate method. This method basically tells us what URL the UIWebView wants to load, and we decide if that should be allowed or not. In this case, we’re checking for that cutsceneEnd keyword. If that comes through, we tell the UIWebView that it should not load that content, and instead we remove the view from the screen and advance on to our gameplay. Easy, right?
Using Edge this way was a huge time saver for our project. Instead of coding up these animations by hand, and tying up developer resources making them, the dev team was able to implement the code for loading in the animation, and get the animations back into the hands of Richard, our resident pro animator, where they belonged. He did some amazing work with these things.
However, in the end we did find a few limitations with Edge that you’ll want to be aware of. You will need to keep your animations relatively simple. Go too complex, and you’ll quickly overwhelm the little processor in your devices. You also won’t have the ability to play audio in sync with your animations. We opted to use a soundtrack for our animations that was mostly music, with very few sound effects, where having a frame-perfect sync isn’t critical.
Due to some of these limitations, we chose to use some video recordings of these animations playing for a few of our more complex cutscenes. For some of the others which ran great in the UIWebView, we kept those in the game as HTML5, since we could gain a huge file size savings by not using video for those ones. Using Edge in these cases meant that we could include 5MB of HTML and images, instead of 19MB of video.
To wrap up, if you’re thinking of including some animations in your next iOS app, or even WP7 or Android app, you’ll want to check out Edge. It’s still in prerelease, so you’ll likely find a few bugs, and there are going to be a few wrinkles, but it’s still worth checking out and seeing if it works for you.
More info: