Following with last week’s post on designing the interface for Casey’s Contraptions, and since I get lots of questions about it lately, I am going to continue with how I create the game assets themselves. Yes, this means there is going to be a part 3 with the rest of my UI misadventures next week. Sorry about that.

Tools

All the drawings you have seen, from the first sketch I sent Noel to the later interface designs, were created in Adobe Illustrator. Vector graphics allow me to scale assets without losing quality, adjust shapes, and change colors easily. I know plenty of iOS artists use Flash, but I am way more used to the Illustrator tools.

From time to time people ask on Twitter if there are cheaper alternatives to Illustrator. The truth is there is nothing out there that comes even close to the power and flexibility of Adobe’s tools. Since I have to be cheap (life of the indie :P) what I do is not buy every release (I am still using CS3 right now). If you have an old version of their products the upgrade price is usually more affordable. Educational discounts are also really nice if you are a student.

I also use a Wacom tablet, a 6×11″ Intuos 3 I got a while ago and had not seen much use until recently. The usual question I get about buying one of these is how big it needs to be. I feel more comfortable with something around letter size, that allows for some arm movement. There is a world of difference between even the smaller tablets and using the mouse though.


That’s not my arm. My arm is way hairier.
But my Wacom is like that one.

Some people like to sketch first on paper, scan, and then clean up and color with Illustrator or Photoshop. I did that at the beginning, but the more used I get to the Wacom, the easier it is to just start from scratch directly on a blank document on the screen. I still draw doodles on paper any time I can; even if you don’t think you have any artistic abilities, all you really need to get better is lots of practice, and drawing a variety of subjects so you expand your visual vocabulary (by the way, Aaron Diaz’s blog is worth its word count in gold for any aspiring illustrator, bookmark it!).

In Illustrator I use both the Brush and the Pen tools extensively. I have a variety of brushes I created for Casey’s look, but they are all basic calligraphic brushes of different sizes, with size dependent upon how much pressure I exert with the Wacom’s pen.

Normally I use the Brush to draw the outlines, then the Pen to both simplify lines that got too many points and create color areas. I will get to coloring in a bit.

Necessary and Unnecessary Detail

I will show you how I created a RC monster truck this past week. The idea was simple: we needed both a truck and a controller with a button. The 2 objects can be placed separately on the screen. When something hits the button, the truck moves forward.

When creating objects for the game the first thing I usually do, even for the simplest objects, is get some documentation. In the past illustrators used to collect photographs and magazine clippings to use as reference in what they called their morgue file, but as you can imagine Google Images is the way to go nowadays. I try to look for real-world photos of the object in question and select the ones that seem more representative, the ones closer to the “ideal” of the object.

A couple RC monster trucks found with Google Images.

After that I try to divide the object features into 3 groups: the parts that are fundamental to make it recognizable, the parts that are necessary details that make it believable, and the parts that are mere noise. In the case above is clear the giant wheels are the most important part, plus the general shape of the chassis and bed. The door, windows, decals on the side, and the lights add some necessary detail. At first I thought that I could also include the springs used for the suspension, and the motor and cables underneath, but all that ended up being unnecessary.

Yep, that looks like the bare minimum for a truck.
Soccer ball is there for size comparison.

When I have difficulties deciding what parts of the object are important and what ones are not, I look for how other illustrators have drawn the object in question. I am looking for a stereotyped version of the object in this case, so the most simplified the style the better. That way I can see what is the minimum needed to make something still recognizable.

As you can see above I do a really quick sketch to begin with. I am only looking for the right shapes and sizes. I try to make the drawing as close to the size is going to show in the game as possible. The scale is by no means exact; if it was, our tennis ball would be almost half the size, and lets not talk about the pinball or the scissors! They would be way too small for any practical use. So, as happens in comics, I am just looking for close enough to be believable.

Then I start adding some of the details. You can see below I try to use thiner lines for the interior of the object and a thicker outline for the outside. This makes shapes less jumbled.

After showing Noel this draft we decided the bed needed to be bigger so we could put stuff inside, not on top. The truck should also be able to tow stuff, so it was missing an attachment point in the back. I made some changes to the shape to get a bigger bed, open on the back so it was easier to insert objects there; I figured I could add a rope hook later for the attachment point.

Truck detail n pig2

Wheels, Step by Step

Wheel1As the wheels seem the most important part of the object, I started with those. Nothing fancy, just a couple circles, taking a bit more care of line widths this time. I draw the circles by hand, so they didn’t look too perfect. Since this object is going to rotate in the game, big differences from a perfect circle are quite obvious, but I think small ones give it a bit more character.

Then, looking at my sample photos, I saw how important the tire tread pattern was to the overall feeling, so I draw a simple shape for it and duplicated it a few times. I kept looking at this at 100%; I didn’t wanted too many lines making it a confusing mess. I think I got just enough there to convey the shape without it looking too messy.

The pattern is three dimensional, so I added some extra shapes to obscure parts of the white circle creating that effect. At 100% this is only a couple pixel difference, so you can say it is unnecessary. However without it the wheel looked way too perfect, so they stayed. This is the kind of little detail I like to add to make shapes more realistic, but I try not to overdo it.

Next I added the center of the wheel. I liked the yellow wheels of the toy truck on this photo I found, so I decided to go with a similar color motive. Notice though that what I draw as a dark blue line is going to be light yellow color, and the space in between the lines is going to be the darker holes; it was just easier to draw the separating lines than to draw the pizza shapes in between.

Color

That was looking pretty good, so I started adding color. If you have ever painted miniatures, this is basically the same.

You start with a base color. My advice is to always use the HSB (hue, saturation, brightness) selector in the color palette, and not go crazy with saturated colors. Everybody’s first impulse is to use nice bright saturated colors for everything. But then nothing can be made to stand out, because everything is visually yelling at you! There are so many nice colors with low saturations that you are missing out if you don’t use them. The color of the tire here is a mere 14% saturation, and even the bright yellow is 70%; it just looks brighter cause of the surrounding color.

Something I have found really useful when choosing colors is sampling them from real photographs. Just get them in Photoshop and sample the wide variety of colors that make up the image. Even on the parts where you only notice bright saturated reds, you will find multitude of less intrusive colors.

Why isn’t the tire black instead of this weird violet? Same reason. Black and white are the most powerful colors. Their intensity is stronger than even the most saturated reds, so you need to reserve them for when you really need them. I could have used a gray for the wheel instead, but the lack of color would still draw too much attention when staged with everything else in the game.

After the base color, I add shadows to the parts of the wheel that recede, so we gain a bit of depth. This are drawn normally with the Pen so I can control better the position of each point, and moved behind the outlines but in front of the base color. In this particular case I was not too worried about the direction the light comes from, since the wheel is going to be moving pretty fast most of the time.

Usually I just decrement the brightness of the base color (not too much!), and maybe adjust the hue a little bit so the colors mix harmoniously (e.g., here I moved the darker yellow a bit more towards the orange).

Finally I add the highlights. Although I try to keep things logical, I don’t really worry too much about shadows or highlights not being in the correct place for a specific light source. You will notice that even in the truck body they are mere approximations. You have to play with it and see how you like it, but the secret again is not to overdo it. The moment that something looks good enough, I stop.

Other details (or lack thereof)

The process for creating the truck body was more or less the same. You can see the steps I went through in the animated GIF below.

I did try to draw more detail under the chassis and have those cables, the motor, and the springs as shown in some of the photographs, but it soon became apparent that at 100% it was just becoming a mess of lines that didn’t add anything to the design. At the end I just added some simple shadows and call it good.

For the highlights I used white this time to get that metallic shine look, and I even add a few darker lines to the brake lights, and some translucency to the window. At that point I considered it done and I posted it to Twitter in case I had forgotten something (the more eyes the better). Just a couple minutes passed before Craig from Little White Bear reminded me I was missing the antenna! And of course, I was also missing the hook for tying the rope so I added both. All in all, a pretty simple design, that looks pretty good in game.

Bye bye piggy“Bye, bye, piggy”, she said

That’s basically how I do it for Casey’s Contraptions. As you can see, is not that complicated. Different games and graphics styles will need a different approach, but I hope this helps you in your own process. As always, feel free to ask if you have any questions!

Other articles in this series:

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

8 Responses

  1. HOW freaking awesome is that!? I want to see more cartoony games from Mystery Coconut.

    RR Anderson; February 2, 2011, 4:25 PM

  2. Damnit I wish I had those skills. As you say, practice is the important part. Time to put some effort in maybe !

    Loving the Casey’s Contraptions blogs, especially as you named the game after me :)

    Lazrhog; February 2, 2011, 4:27 PM

  3. Thanks man for doing this blog!
    I was planning to peep into your house next time you something like thta. So, you saved your privacy and I should be able to save hours. :)
    Right now I’m just into sketching ellipses for bouncing balls using photoshop.
    How good do you consider Photoshop as a drawing tool?

    sid; February 2, 2011, 4:29 PM

  4. Wow! Absolutely awesome post! Right detail. I’ve enjoyed it a lot. I would be glad to see more posts like this, showing the artistic thoughts and execution process.

    Congratulations

    Toni Sala; February 3, 2011, 12:02 PM

  5. Another amazing post, as always. I love your drawing and coloring style (not only Casey’s). That’s a style I want to accomplish in one of my games, but I lack every talent.

    Even tho you cited: “even if you don’t think you have any artistic abilities, all you really need to get better is lots of practice, and drawing a variety of subjects “. Believe, I try and I can’t go past bad children lines.

    Looking *really* forward to play Casey’s.

    Alfred R. Baudisch; February 3, 2011, 12:13 PM

  6. Hello! Great post, thanks!

    May I ask you what you use for animation of your vector art since you are working in Illustrator and not in Flash?

    Thanks!

    Charles; February 7, 2011, 12:04 AM

  7. Sorry I didn’t answer to you guys sooner!

    @sid: I use Illustrator for Casey because of the style I am trying to achieve with flat colors, and because easily changing size without affecting resolution is nice, especially now that I need to create graphics that work both for iPad and iPhone. For a different style, say more realistic, or with a more natural hand drawn style, I would probably use Photoshop, and just draw my originals at x2 or x4 size just in case.

    @Alfred: lots of people swear they cannot draw, but what I think is that is more important to know what to draw than the actual execution, and once you know that execution is just practice.

    I recently found this video, “How to Illustrate a Children’s Book” by Will Terry, that has a “What’s a cat” exercise (around 6:14 in Lecture #3) that is in line with what I mean. Check it out: http://willterry.com/coursesamples.html

    @Charles: I use Illustrator for animation too! I know, crazy :) I would probably be way more productive with Flash, but the times I try I always feel I am losing control/precision on what I am doing. But yes, I really need to get with the times.

    Miguel A. Friginal; February 16, 2011, 4:06 PM

  8. Looking for your app on iTunes for iPhone (we don’t have an iPad), but don’t see it…I’m guessing things are taking longer than anticipated? It says in the August article that it would be ready in a few weeks and its now Dec 2011. Just wondering if you know when it will be available? Would love to review it!

    Tina Smith; December 22, 2011, 2:21 PM

Leave a Reply

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

14 + 11 =