The Making of Princess Birthday Party Puzzles

making-of

Hello Gamasutra Community!

Scott Adelman and I just released our newest and best app to date, Princess Birthday Party Puzzles (our sixth collaboration!)

Princess Birthday Party Puzzles App for Girls Ad Banner

Normally I just launch an app and start straight on the next one, but since I spent so long on the art and animations for this app- seven months!- I thought I’d pull back the curtain and show you some of the work that went into creating this app.  FYI, this blog post has a lot of images- but here we go!

icon-progression

Progression of the icon design

Art Style

test-ptg

I’ve been doing a lot of my app art completely digitally but for this one I wanted a really nice, hand-drawn picture book feel. I did some research and settled on a pretty watercolor and pencil look. The only catch is that you can’t really animate a watercolor painting, so I had to do the pencil drawings then bring them into the computer to paint them up. I got to use my brand new Cintiq for the painting, which was super fun to play with and really fast once it came time to get to work and charge through the art at lightning speed.

PBPP-cintiq-setup

My sweet digital painting/app dev/kitchen table studio setup

Sketches

char-designs

I always sketch out the whole project first- both to make sure it’ll look good before I start on any one image, and to make sure Scott gives it a thumbs-up. First thing was to create the characters- I wanted a nice mix of kids. I always put too many girls in, so the attendees of the party are four girls, three boys, two kittens and one unicorn. When you’re doing a sequential project like this with recurring characters, you want to iron out all the details at the beginning so they stay consistent- don’t want anyone’s outfit to change midway through!

all-sketches-lg

Then onto the most creative part of the app- drawing out the scenes. This is the most fun part, but it never lasts long. The sketches took about a week, and then it took the next seven months to paint and animate them. While sketching I tried to keep in mind what animations I was going to apply to which drawings- which is harder than I thought. So I didn’t do that for a bunch of them. For the most part I was able to wing it, but I had to re-work a few drawings.

puzzle_1_sketch

I thought this first image would be good- everyone arriving on unicorns, how cool! What I didn’t think of while drawing it was how many articulations a horse takes- it needs a minimum of a head, neck, and then three parts of each leg times four legs, and a tail. So that’s 15 little pieces to animate a horse- never mind the rider!

puzzle_1_sketch3

Anyway I got rid of the horses and put them in a carriage, which solved one problem but then I remembered carriages were still drawn by horses. Drat! A google search confirmed that not even magic princesses get horseless carriages, so I had to put a horse back in.

puzzle_1_sketch2

Anyway, one less horse in the end that I had to animate. Score!

puzzle_01-full_image

Here are a few more of my favorite sketches. It’s weird how even when you trace lines exactly, the finished pieces never have as much spirit as the original sketches. HB Staedtler pencils with RoseArt erasers (don’t laugh, they work great and are in festive colors) and 9x12 Strathmore 300 Sketch paper, my tools of the trade for 10+ years.

puzzle_5_sketch

puzzle_6_sketch

puzzle_11_sketch

Colors

colors-bg

After all the sketches were done, I lined them all up in a grid and roughly blocked in the background colors. I always do this with larger projects, I have a tendency to repeat the same color schemes so this keeps repetition at bay. It’s not permanent, I end up tweaking them as I go along if they need fixing but this keeps the colors on target so the app has a steady but varied overall feel. Am I getting artsy fartsy? I’ll move along. Color comps. Love ‘em.

Final Art

So I bring in all the art into Photoshop and begin the coloring process. It takes the bulk of the time, but since the sketches are already done, you’re not doing any new creative work- just filling in the lines, like a coloring book, for hours a day, every day. I usually had Netflix going in the background though and listened to some really cool documentaries (anything with Werner Herzog’s narration can stand alone as an audio track anyway).  I also listened to roughly eleventy billion hours of podcasts.

puzzle_05_framed4x

puzzle_06_framed4x

puzzle_11_framed4x

Animation

bunny2

I made this project so huge and expansive for the animations- I wanted to be an animator for a long time, and figured this would be a great opportunity to try out some of the skills I’d learned in this sweet app animation software.

spine-skeletons

All of the characters are articulated, most of them fully articulated (although towards the end I’d only articulate what I was going to use). I had a rough idea what I wanted the animation to do, so I’d set the main poses throughout the sequence, then go in and tweak every little action.

PBPP-timeline

The cruel twist to animating is how much work it takes for a short amount of animation to happen. Each scene has about 100-150 little bits to create, polish, export, place, animate and optimize. I became a Photoshop batch-processing ninja. I’d spend 5-10+ hours on each animation- by the end I could get a simple scene animated in a few hours, but the majority of the time it took a couple days to get everything timed out right and layered correctly and no one breaking the laws of physics.

flying-horse-leg

It’s a lot easier to break the laws of physics than to follow them.

All the hard work pays off though in the end- seeing the puzzle come to life is pretty amazing after it's been only a pencil sketch and a loose collection of parts for so long.

animated_scene_400

The Extra App

Mid-way through the puzzles, I was getting really discouraged- I had done such a hugely incredible amount of work and there was no end in sight. I messaged my dev parter Scott and told him it was way too much work, I had no idea it would take as long as it had been taking and it was way too complex. I told him the next app should be just like, shapes. Like animated square, circle, triangles, and they dance around. AND THEN IT WOULD BE DONE IN MUCH LESS TIME THAN THIS EPIC, NEVER-ENDING PRINCESS APP. I said it as a joke but Scott replied that he had been thinking of a simpler app for younger children, and shapes might just work… So we finished the puzzles in about a day, finished up the app in a week- we were excited to be working on something different with such a shorter deadline.

612x299

Having a launch in the middle of the long princess road really helped with morale! Downloads were flagging all over because I was sinking so much time into this app, so we were both really relieved to have a new app out the door, whether it was a blockbuster or not. It’s a cute and funky little app and I’m proud of it. I did the paintings with real paint, so it’s got a really rich, wet painted feel, esp. with the retina images.

shapes-painting

Making the art- it was refreshing to get off the computer and splash color around IRL!

The Crunch Time

With this long process that had to be repeated twelve times, and then another round of work for user interfaces/titles/icons/etc, the schedule stretched way out. We tried to shorten it several times- finally, mid-May, we had a serious talk to get it out in the next month. It would be tight but we’d shoot for it.

PBPP-PIC-HKPTITLE

Good enough!

Everything went great until a week beforehand. We still had one last puzzle, all the UI and metadata work and the video to do, it was looking bleak but we both had desperately-needed vacations coming up and didn’t want it hanging over our heads.

finnish-title

No time to check! Looks good to me!

cross-eyed-princess

For the next week it was just waking up, coffee, apps, lunch, apps, dinner, apps, sleep, rinse and repeat. We even managed to stay up extra late and ship a day early.

We finished at 4am, but I stayed up for another hour to look at the Manhattan skyline and catch my breath and realize that this crazy app, this hugely complex magnum opus app that had haunted me for seven long months through an impossibly long winter, well through the spring and into summer, was DONE.

magician-cat

Vacation was awesome! I’m writing this on launch day, we both just got back and are back at work launching this thing. It feels surreal to have it up on the app store! You crazy neverending app you, I thought you were never going to leave my kitchen table and go off into the world!

And hey! If you’re still reading down here, please wish us luck :) It was a huge project but Scott and I are both so pleased it’s finished, polished up to a sparkle, shipped out and live.

If you’d like to check out the app for yourself, you can download it for free here!

pbpp-android-promo-small

And here is a cute promo video I made: http://www.youtube.com/watch?v=v7ZpQEY6H-U

Thanks for reading!

animated-cake