Mark McLawhorn

Toontastic - Prototyping and Process

It started with a phone call from Thushan Amarasiriwardena outside of Mellow Mushroom in Raleigh sometime in the Spring of 2010.

I think.

Thushan and co-founder Andy Russell had formed a digital toy company called Launchpad Toys. Sounded pretty rad to me, so I jumped right in.

Preliminary Explorations - toontastic character development

Starting from scratch, we looked at a couple of various shapes and directions of how a character could be standardized and systematized.

After research involving children at a local museum, it was suggested that the more proportional third row was the best starting point for our character templates. Tough luck, egg people and square faces.

Prototyping - undersea adventure

Frogman

Now a vector-based, gradient-shaded character, Frogman was the next evolutionary step from the initial character body types.

Mr. Squeeze

Our hero Frogman needed a friend (or foe?) to swim around with to test this prototype.

So Mr. Squeeze was born.

Davy Jones' Locker

Now the fellas needed a place to swim around in. Early on, it was thought that the environments would be full of motions, so a simple animation was created to test this idea.

It turned out that it was too complex (at the time) so ambitions were scaled down, so the idea was shelved for a less memory-hogging flat background.

The prototype

 The next phase - Toontastic begins to take shape

After initial testing of the prototype a couple of things became apparent.

1. The characters needed to become a bit more flat when it came to coloring. Because of the limitations at the time, in order for a user to change the color, the characters needed delineated boundaries within their body architecture.
2. The users found it easier to know what could be animated when the aesthetic was shifted slightly. So we went from a very soft character to a much more bold and almost "cut-out" figure style.
3. Kids had a blast making cartoons and telling stories with Toontastic.

A tale of two Beardes

But it was decided that Captain Angry Bearde was just too angry. Why was he angry? Who knows. He doesn't really seem that upset about the leg thing. Or the missing eye. Or the fact that he's only got thumbs.

So the result was...

Captain Crazy Bearde. Man he just turned that smile upside down, didn't he?

The further development of backgrounds

We knew that if there was something that worked right out of the box, it was the first swings at the backgrounds. That was a question that didn't take long to answer.

We wanted it to look like it had been put together with pieces of fabric, cardboard, found paper and maybe even a little bit of glue. The basic recipe was:

• texture mask
  shape based on color layer (texture file placed + clipping path on copy of color layer)

• color layer (usually not treated)

• shadow layer (if necessary)

  1. color (usually black)
     set to multiply  (between 5%-50%)

  2. Gaussian blur (between 10px-30px)

But it didn't stop there. Pretty much anything you could scan or take a photo of might end up incorporated into a background. Concrete stairs became lunar landscapes, shopping bag cords became ship rigging, hubcaps became the designs within the spire of the Chrysler Building i New York City.

Sample background process - The Barnacle

Sample background process - The Castle Gate

Additional assets - Exploration

Globe wrap

Button icons

Music Emoticons

A system of emoticons to aid in music selection was explored.

Toontastic Logo

Once again, this was an aspect of the App that felt like it came together seamlessly, Using the cut-paper feel that was becoming the trademark of the program, the craft of the logo shaped itself into place.

Toontastic - The First Run

The elements are coming together to form something that looks pretty dang close to what we see today.