Last week I posted a couple Casey’s Contraptions screenshots as intro to yet another Core Animation technical rambling. One of the images, my latest try at designing the “Level Completed” screen, got a few interesting comments from other designers, both in the here and on Twitter. These screens take a long time to get right, and although people playing the game usually spend just a few seconds on them, they make the difference between a seamless experience and one with harsh continuity bumps.

Today I wanted to review a few of my own “failed” designs for Casey’s Contraptions. And I quote failed because these are a normal byproduct of development; to know what works, you need to create, analyze, and finally discard lots of things that don’t. Discarding is hard, but is also going to help me explaining another pet peeve of mine: the widely accepted concept that design is all about the looks. You will notice that some of the discarded designs are prettier than the final ones, and I will try to explain why they were still a failure.

A final disclaimer: Casey’s Contraptions is still pretty much in development. Whenever I say “final”, read it as “current” :)

Theme

Noel and I started talking about collaborating back in August last year. After some iPhone tech prototypes Noel had decided to go iPad-only to start with, and had a specific setting for the game: a 10-year old kid making these crazy machines to do things kids care about; open the cookie jar, reach for the pie on the top shelf, break the piggie bank, etc. He had been asking a number of artists to try drawing a few of the game objects, but he was not entirely happy with the results. He wanted something very distinctive, that you could look at and say “Oh, that’s a screen from Casey’s Contraptions!”.

The moment I heard the theme I started thinking cartoony characters, but cartoons cover a wide range of styles. On one side of the spectrum we had the totally crazy Warner Bros. style, or the misshaped objects and expressionist perspectives of Maniac Mansion, Day of the Tentacle. On the other the more realistic looking Sunday strips, like Peanuts, or Calvin & Hobbes, with suburban landscapes and mostly realistic depictions of everyday objects.

We talked for a bit about this; the first style would give us more freedom to introduce weird objects; anything from TNT to shrinking ray guns would feel at home. But it also would have complicated gameplay by introducing cartoon physics, and way more unpredictability for the player when things started squishing and stretching, etc.

So we decided for the later; objects could still be slightly deformed, lines didn’t need to be totally straight, but we were not getting too crazy. Something like this image from Calvin and Hobbes was my goal.

Some advice for designers of any kind: the more you know about a project and what is expected of you, the better the result. Never start without enough information. If you are not sure about something, ask. Is not going to upset your client/partner that you show interest in their product. And all this going back and forth with Noel not only helped me create an appropriate theme for the game, it also helped him better define what he wanted to make.

Casey

This was my first try at a few game objects. At first I was just going to draw a few objects, but then decided to try sketching Casey too (at that time he didn’t even had a name).

The objects were solid (that soccer ball even appears in the final game almost untouched!), and the general style of colored outlines, flat colors, and simple shades was set. Casey didn’t feel right though. He looked too much like an anime character, and way too naive and lacking personality. I didn’t want a modern Japanese-style cartoon, but one more grounded in the 50s, the golden age of American animated cartoons.

After quite a few tries, I started getting into something I liked better, with more of a Hanna-Barbera style.


Notice my ridiculous annotations to remember how to draw it?

The more I draw him, the more of a personality it started to show. He was a hands-on smart geeky kid. And all those contraptions to get to cookie jars and pies had result in a bit of a belly.

I reused the pencil from a previous sketch there. Don’t trash anything!
Spent some time deciding if I wanted 6 or 8 fingers too. Is that his mom?

Fonts

One of the first things I got into after the character design was deciding on fonts. You see, I love typography. The difference between using the default fonts or the freely available ones in any platform, and using professional fonts is like… well, like this.


Arial to the left, Sqweash to the right. Difference? $20

Quality fonts are not expensive taking into account how much they influence the style of your game. You can find single-user licenses for as low as $20. Take into account that those licenses don’t allow you to include the font file as part of your binary, only to use it in textures or static images (yes, this includes texture atlases with all the glyphs at a certain size; but rendering non-monospaced fonts is not easy if you have to implement all the metrics from scratch). Although you should contact each foundry, you can assume a license to include a font in your binary and let UIFont render it for you, will be around 10 times as expensive as a normal one.

After choosing fonts, I worked a bit on a logo, then on the first drafts for a level selection screen. You will notice that all these pieces were of no relevance to getting content into the game itself. I attacked them first to build on the theme and get a better sense of where we were heading.

Don’t use fonts in your logo you use anywhere else, it cheapens it.

Every piece you add changes how you perceive the game, even if is not gameplay related, and every part has to pull in the same direction. Some people like to leave this for last, add it as the last layer of cream on the pie, because having final art too soon kills opportunities for experimentation. On the other side, having all these can strengthen your initial concept, let you discover what is important and focus on it.

Location Screen

From the beginning we wanted levels separated into different locations. This was the first try at creating a level selection menu (click the screenshots to see them full size). You can see there is not much worth saving there: the colors are kind of depressing, and my first idea of having all the locations in the same screen scrolling vertically, with rows of levels that scrolled individually in the horizontal was pretty confusing.

I did like the outlined titles though, and the thumbnails with details of the levels, and you will see I maintained both in later designs.

Second try was more in line with the theme, with brighter colors. Each location got its own screen, and I decided to style them as a page in a sticker book that you complete as you solve the levels (in this screen all the stickers are the same piggy bank image just because I was lazy). You can see here we were already working on having stars representing degrees of success for each level. The blue info buttons didn’t pass the first beta tests: nobody ever understood they were actual 2 things you could touch, the center of the sticker to enter the level, and the “i” to get info about the level without entering. It was confusing cause of the overlapping hot-areas, but also because of something that has haunted me for the whole process: making interface elements stand on their own without blending with their surroundings. You will see more of this later.

This was the level info screen that the “i” button opened (it was supposed to be the back of the level stamp, and we were going to transition to it with a fancy animation from the previous screen). The plan was to have all this information about goals, how your friends had done in that level, and if they had shared any solutions, that you could check before loading the level itself.

When we got rid of the blue “i”, we had to put this info in different places inside the level itself. My assumption was that it was better to check all this info before deciding if you wanted to play the level, but tests showed that people just liked to see the level at full size, and since it opens instantly (no “loading” progress bars) and you can exit at any moment, there was no catch.

There are other interesting things in this screen I decided to reuse later: the white outlines that appear around different elements, the first use of a normal looking capsule button, the green background colors, the tape and shadows in the thumbnail pics… You can also see something we didn’t changed until way later: three different goals for each level, each giving different amounts of stars.

Level Intro

That simple thing, three goals per level, gave me lots of trouble. When you first start a level, you were supposed to get a short blurb by Casey of what to do, but also the level title, and what extra goals you can complete to get 2 and 3 stars. I hated this screen because it was so plain, so I tried to make it more interesting.

To the right is one I particularly liked. But you see, I was trying to solve the wrong problem. I tried to add more stuff to it (the item rewarded for the sandbox if you finished the level, your current star rating…), and make elements bigger and more attractive. But people would either dismiss this screen as fast as possible so they could see the level, then wondered what they were supposed to do, or get confused about the multiple goals, or always try to go for the quite complicated 3-star goal without even considering the simpler ones.

What we needed here was not to get fancy, but being straightforward. To the left is the final iteration: title, goal, and you can see almost the whole level, without even the translucent yellow overlay.

That of course also pushed the two other goal descriptions some other place. We figured we could have a menu inside the level with a screen showing these, and that of course caused more trouble. But since this post is already running long, you will have to wait for part 2 to know how we solved that one :)

As always, feel free to ask any questions in the comments below or on Twitter!

Other articles in this series:

  1. Designing Casey’s Contraptions, Part 2
  2. Designing Casey’s Contraptions, Part 3: iPad to iPhone

4 Responses

  1. Great read! I’ve iterated on so many parts of my current project it’s pretty ridiculous. Almost always I’ve found that simplicity wins.

    Great write up, I look forward to the next post! Darn teaser! ;)

    David McGraw; January 26, 2011, 11:55 PM

  2. I was floored by the artwork here. Incredible! Can’t wait to play the game.

    Gavin Miller; January 27, 2011, 8:55 AM

  3. It’s looking really good, I can’t wait to read the second part and see the app finished. I always thought that sketches or a wireframe would do, but I like how you change your mind once you get beta feedback. Keep up the hard work!

    AppFreak; January 27, 2011, 9:18 AM

  4. It’s always great fu to follow the design process from start to finish. I think in general we pay too much attention to final products, and not the experiments and mis-steps along the way.

    Nice article, could have used a few more elephants though, I think…

    George Sealy; January 27, 2011, 1:44 PM

Leave a Reply

Your email address will not be published. Required fields are marked *

eighteen − 7 =