“I have never been more ready in my entire life to do this right now.”
– Beastie Boys, Alive
Dust Bunnies: Secret Agents is out on the app store, and we just released our 1.2 version update. It seems like a good time to reflect on the last two years of development, and tell the tale of how Dust Bunnies went from an idea to an real app.
First a little background: I’m Jeff Kramer, and my company, Polycot Labs produced Dust Bunnies. Polycot has been around in different forms since 2001. Our specialty was custom web development in PHP and then Ruby on Rails. We thought about developing products, but never crossed that bridge. My focus at Polycot has historically been systems integration, server administration and project management. I love stories, though, and am a big fan of story telling games and the new technologies that are enabling mass personalization of products.
The Idea
The ideas for Dust Bunnies started coalescing in May of 2010. For context, the top end iPhone at the time was the iPhone 3GS. The iPad had just been released, but no one knew if it would be a hit, or how many Apple would sell.
The initial concept for Dust Bunnies was to blend Role Playing Game style character customization with a children’s storybook. There were lots of apps in the App Store that had taken existing storybooks and digitized them, but here the limitations of print media were showing. The character was set, it was ‘Alice in Wonderland’ not ‘Your Name in Wonderland’. The thought was that the iPhone gave us an opportunity to create something new, a storybook that starred you.
I’ve known Deanna Roy for a while, we met through a mutual friend, and I’ve always admired her creativity and willingness to throw a lot of energy toward new, unproven things. Deanna has been a writer for a long time, and as the parent of two girls was the perfect person to create a compelling story for the app. Thankfully she was also excited about the possibilities, and agreed to collaborate on the app. At that point I was thinking we would be producing and releasing these apps quickly, so we were going to come up with ideas for 4-5 more stories that would be well suited for character personalization. In the end, it took a lot more time and energy than we thought just to finish Dust Bunnies.
Deanna brainstormed the idea of the dust bunnies as main characters and the initial elements of the story with her girls on May 6th, 2010. Her email the next day:
The girls and Kurt and I brainstormed stories tonight, starting with an improbable sidekick. Since we didn’t want a human or an ordinary animal, that left us with story worlds involving aliens, time travel, exotic or little-known animals, a new life form, a science experiment, a dream, or an invisible world. We decided we liked the invisible world idea, a la Monsters Inc, and for now we’ve been playing with the idea of “AnyChild and the Secret Agent Dust Bunny” as a story of a child who is pulled into the invisible world of dust bunnies to save something or another.
And an example of how stories ideas come from real life:
When we were getting ready for bed and couldn’t find a missing sock, Elizabeth said, “I think the secret agent dust bunny must have needed it for a mission.” Brilliant. We’ll brainstorm other things the dust bunnies might have to resort to in order to crack a case.
Bringing the Dust Bunnies to Life
Even before they hear the entire story, the art in a story book is the thing that most people see first. Lisa Merry is a friend of mine that I’ve worked with on projects before. She’s an excellent illustrator, and offered her skills on Dust Bunnies. Lisa, Deanna and I sat down in the middle of May to brainstorm the first few scenes and character concepts.
First Pass at a Scene UI Mockup
We went through a few revisions of the Dust Bunnies character look. The first concept was very Secret Agent, and gradually became rounder and more like the Dust Bunnies we have today. Once we had the look for the bunnies down, the other characters organically developed.
Character Design Progression
Lisa did mockups for the first 10 scenes with a great illustrated feel. A few weeks after we started Dust Bunnies Lisa got hired full time at a design firm, which meant a lot less time for side projects. Good for her, tricky for Dust Bunnies. Lucky for us I found Jojo San Miguel. Jojo’s a great artist who’s worked on a lot of animated shows, and was available for contract work. Jojo lives in the Philippines, so we weren’t able to meet, but he quickly got the idea and started working on storyboards. Since Jojo was going to do the art for the entire app, we used Lisa’s look for characters and her take on the first few scenes but had Jojo recreate them with side profiles for design consistency. That’s when the characters went from textured to flat. Lisa’s favored toolset is Illustrator and Photoshop, Jojo’s favored toolset is Flash, since that’s what a lot of animation is built in these days.
Here’s an example of how the first scene changed through production.
Deanna’s Original Storyboard
Lisa’s Version
Jeff’s Dev Version
Jojo’s Storyboard
Final In-App Version
Jojo did the rest of the application based on Deanna’s revised script. Before we brought Jojo on our original plan was for the app to only have 17 scenes. The story was shorter, each scene was more text heavy, more like a picture book. Jojo’s experience is more in the world of animated productions, where you have a new scene every few lines. The fact that Dust Bunnies is 55 scenes long is a direct result of the skill set Jojo brought to the table. The end result is that the app took a lot longer to complete, and was a lot more expensive to produce, but feels more like a TV episode than a book.
Moving Pictures
While Deanna was working on story and Lisa was working on initial art I was starting to explore technical options. The most widely available iOS devices when we started working on the app were the original iPhone and the iPhone 3g. Neither are particularly fast. The idea of using HTML5 to build apps was hot at the time, so I did some initial experiments using HTML elements to build an engine to play story scenes. Obviously, I’m no artist.
The problem I quickly discovered with HTML5 elements and trying to use CSS animations was that the iPhone, in order to optimize for performance would often skip from the beginning of an animation to the end. It would work fine in the simulator on my Mac, but terrible on the iPhone itself. That’s a problem when you want to move an element across the screen. Layering multiple elements on top of each other quickly became slow.
We’d been experimenting with Appcelerator’s Titanium at a company I was doing consulting for, and it seemed like a potential option for platform. Titanium applications are written in Javascript and then transformed into Objective-C, the language of iPhone apps. I wanted the app to be written in a language I knew, so if I needed to make a minor tweak I wouldn’t have to go back to the developer, but I didn’t want to write the whole thing myself.
I made an initial pass at building the animations in Titanium. Here’s a little video that shows the progress I made during May, 2010, just to show that Titanium could animate the graphics on top of each other smoothly on an iPhone.
As you can see, the test version of Dust Bunnies had a lot more in-scene animation in it. Due to the number of scenes we ended up with, we cut the animation a lot and only ended up having a handful of scenes pan instead of having in-scene animation. The first few scenes are obviously setup for having elements move. The sock being pulled, for instance.
Proving that the animations could work one was one thing, but I wasn’t interested in writing the entire framework around how scenes worked, paging back and forth between them or creating new profiles. Thankfully I found a great developer who laid a lot of the groundwork.
I’d been using oDesk, a company that enables easy global subcontracting, for a while, mainly for data collection projects (I needed the specifications for every popular TV sold in the US, for instance). Thankfully there were some good Titanium developers on oDesk (also where I found Jojo), and I lucked on Dan Tamas, a Titanium developer in Romania (who eventually moved to Spain) who was very active in the Titanium community.
Dan built the initial user profile screens and created a framework for how the scenes progress. I didn’t have any art for the menus yet, so we just used placeholder graphics. The menus the app has now didn’t come till later, but here’s how they looked then:
I had an idea around this time that maybe what the Dust Bunnies story engine needed (not necessarily for Dust Bunnies, but for future projects) was the ability to branch, so you would come to a scene and be able to make a choice, which would take you down a different path. We built that functionality into the Dust Bunnies code, but quickly realized that actually writing branching stories while doing all the other things we’d committed to, is really, really hard. Maybe in the future.
Since the project had expanded from 17 scenes to what would end up being 55, and Jojo had other commitments (and a typhoon), art production became the big schedule blocker, and we stopping development work on the Dust Bunnies code after August of 2010.
The Long Hard Slog
Art ended up taking a lot longer than we had expected, and I had some personal things happen in the fall of 2010, so Dust Bunnies started to slip. The iPad also became popular, and the Titanium platform added support for universal (both iPad and iPhone in the same app) apps. I asked Jojo to re-do all the scenes in 1024×768 resolution for the iPad, which probably added an extra month to the timeline. Eventually in May of 2011 we had most of the art in both iPhone and iPad resolutions, and were ready to start putting it all together.
By this time Dan had moved to Spain, Titanium got popular and his hourly rate went up, which meant I needed to find someone to get us over the hump with the Universal version and a prettier UI. Fortunately I found Alpesh Patel, a great experienced Titanium developer in India. I whipped up some user interface examples in Photoshop (mostly what is in the final app), and Alpesh and I got Dust Bunnies working seamlessly on the iPhone and iPad. Alpesh also helped out a lot taking Jojo’s Photoshop files and separating the elements out into individual layers, so the app could put them back together.
The Sound of Silence
My original plan was to have a voice actress do the voiceovers, but I had put off finding one since doing the recording was really the last step in the process. Deanna had some leads, but we hadn’t pursued them heavily. We didn’t want to record all the lines and then have the story change due to an art tweak, or lose the voice actress due to a conflict when we needed to add more names.
Our original plan was to record 500 names with the story, taking the most popular names from the Social Security’s names database as our initial list. We ended up recording the top 450, plus some names of friends that weren’t in the lists, for 475 total.
We eventually decided that Deanna could just record all the audio. Having authors record audio is a popular approach, and we didn’t need another thing to slip. Deanna ended up recording the audio for Dust Bunnies at home, all 475 names of it.
I ended up enlisting RJ Basilio, another person I’d worked with from oDesk in the past, to do the cleanup, slicing and normalization of Deanna’s audio. RJ, aka DJ Brixx, is a DJ and audio/video editor in Manila, Philippines. During early 2012 he edited and sliced Deanna’s audio up into the individual files that eventually found their way into the app.
Around March of 2012 we had an app that worked, with complete audio, name selection, and had a nice look and feel. I submitted the first version to the app store on March 25th, 2012. Apple rejected it due to a UI issue (they don’t like it when you use the picker element full screen), but our revised version, the 1.1 release that some of you early adopters may have used, was accepted and passed review on April 16th.
Our features trailer, which is slightly out of date now
Our awesomely dramatic story trailer
Post Script
Every software product has bugs, and Dust Bunnies was no different. Dust Bunnies is made up of 1,497 audio files and 1,450 images (725 for the iPhone, 725 for the iPad). We had some character color mixups, and a few typos in the subtitles, but thankfully no crashing bugs. We submitted our 1.2 update with fixes for a lot of these issues, and I think Dust Bunnies is in a good place. A lot of people worked really hard on it, as you can see, and I’m really proud of what we put together. It’s really exciting to see people using it and seeing Deanna show it to classes of Kindergarteners.
Thanks for reading, and I hope you’ve enjoyed Dust Bunnies! If you have any questions or would like to know more about it, let me know!
