Month: September, 2010

How to get out of your art comfort zone and do game art by yourself

 

In my #iDevBlogADay posts I will write on how I’m getting out of my “art comfort zone”. Inside the zone and while working with web development I always used to outsource web design or buy templates (Theme Forest has some good quality templates). But I was never completely satisfied with the final result or quality, while not having the knowledge and expertise to do something visually better.

Now that I’m a full time game and app indie developer, I almost stayed in the zone, but I decided that it’s time to challenge myself, to learn, practice and turn myself into a better artist.

There are three routes for game art needs: doing everything by ourselves, having an artist partner or outsourcing an artist (and there are lots of places to look for one). For now, I’m choosing the first route, because I like doing everything by myself until I get tired.

First point: to do a good game art we need to know how to draw with pencil and paper. That means we also need to know traditional drawing. And I never studied nor practiced that.

So how to draw (or how to be a game artist)? The answer is that one you are tired of hearing: practice, practice, practice, study, practice and a bit more study (and not about talent)!

I started studying art 2 months ago. Before that I couldn’t draw at all. Every time I tried to draw something, I just gave up after the first strokes, because everything I put on the paper was terrible: no perspective, chicken scratch lines and so on. I am still not a professional artist, but I’ve been improving a lot since I decided to start studying art (and I still need a lot of practice and study, but hey, I’m already better than the old days).

It is possible to learn how to draw and how to be an artist. Art is not about talent as everyone says (at least on most cases), it’s about patience – as everything in life (from the book Drawing on the right side of the brain):

Drawing on the right side of the Brain

I’ll tell you what I’m doing, it’s simple, just requires a lot of effort in a short time span:

Traditional Drawing

Cat just with a PencilI really couldn’t complain about my terrible art side, because I never studied art nor “how to draw”. I always tried to draw without any kind of study nor reference. After watching this video cast from Broken Platypus Games – an #iDevBlogADay entry – Drawing a creature for Dungeon Delver, I really got interested in leveling up my art skills. By the way, the cast shows a drawing using Flash free drawing mechanism, which is very simple, even for shading and coloring – well, watch the cast!

First, I looked for traditional drawing lessons, courses and books. I found a complete and amazing site: Drawing-Tutorials-Online – it charges only $1 for a 10-day trial with access to all contents and they even ship you for free a complete and extensive DVD called Portrait Drawing – A Layered Approach (I received it already). And if you don’t like the lessons you can cancel anytime and don’t have to continue on the subscriptions. The site is composed of video lessons (about 400 hours of video?) and PDF homeworks. * Lessons goes from anatomy, perspective, foreshortening to digital drawing and painting, all these subjects are essential for any kind of drawing you will do.

Also I’m doing lessons from the following free site, again with lots of lessons and resources (following the logic of “everyday one different lesson”): Draw Space - http://www.drawspace.com/.

Yeah, Traditional Drawing is the first step, even if you are just going to do pixel art. With traditional drawing we learn perspective, shading, foreshortening and improve our eyes skills.

Digital Drawing and Flash

Drawing in FlashFrom my excitement after watching Broken Platypus Games’s cast, I decided to grab a copy of Flash CS5 trial to try some drawings. Well, it was not easy as it looked on the cast and I almost gave up.

After googling for flash video tutorials, I was hooked to Cartoon Smart tutorials (aff *). You can watch lots of free videos there, but I recommend especially the “Flash Drawing Tutorial” which convinced me to buy two courses from them: Cartoonist Package and Ultimate Actionscript 3 (yeah, I’m into Flash dev too :). They even have an iPhone and iPad 18h video course (but I don’t know if it is as good as their Flash videos).

The result? Totally hooked. If I knew Flash was so intuitive to draw I surely would have tried before. I recommend that you grab the trial and give it a try. The way it deals with vector lines is very intuitive and flexible – draw a line and then you can morph, move, delete, expand any piece of this line – as opposed from drawing with the pencil tool on Ilustrator or Inkscape. .

Pixel Art

Boogerman!Now to the most lovely part: pixel art! Pixel Art is about pixel counting, color balance and references. Play old games (or even pixelated new ones) and pay great attention to their graphics. Then grab game sprites for reference on Game Sprite Archives, NES Snes Sprites and others and start “pixeling”.

You will need to learn about palettes, pixel lines, when to anti-alias and when not, and so on. I think the first tutorial you have to read should be this:  Game Sprites: Sprite Art 101: Brick Wall. It deals with pixel shading pretty straightforward.

Study and practice the resources below! And let’s try to make some cool-and-sexy-retro-looking-games!

Pixel art resources to get you glued

And if you don’t have time or still want to outsource your art needs

You can read How to bootstrap your indie art needs and How I got art for my game to see how to get or do game art without needing to learn everything I pointed. Also, if you want to outsource, you can find quality freelancer artists on DeviantArt, Concept Art, Pixelation, Pixel Joint. And for cheap ones: Elance.

Coming next

Next week I will write on how to do pixel art with GIMP (setup, shortcuts and tips) and how to stop hating it.

This post is part of iDevBlogADay, a group of indie iOS development blogs featuring two posts per day. You can keep up with iDevBlogADay through the web site, RSS feed, Twitter or delicious.

* Note about Drawing-Tutorials-Online.com: I’m telling about it like this because it really is that good. I really improved my skills within just two months of lessons and I still haven’t done half of the lessons.

* Note 2: links which I mark with (aff) means affiliate. I see no problem linking with my affiliate account: the price for the buyer stills the same and if I’m recommending some good material and generating more sales, why not taking a bit of it? As a 100% indie, every penny helps pay the bills :).

Images credits: onlypencil – flickr - Cartoon Smart and Game Sprite Archives.

13 Comments by Alfred R. Baudisch on September 30, 2010
Share | filed in Design and Art | tagged , , , , , , , ,

Learning Diary #11: Memory management, iPad and Box2D

 

Wow! It’s been a long time (2 months and 2 days) since I posted and a lot of things happened meanwhile. I can’t exactly cite all the stuff I learned – following the method from earlier diary entries – so I’ll write just some points, since I didn’t keep track of everything learned on these last 62 days. Also, I’m already on the first position of #iDevBlogADay waiting list, so the next posts will be “real” posts.

And how is the game programming going? I’m working on 3 prototypes (less talk, more rock, huh?), which I plan to announce here soon! :)

Learning Diary #11 entries?

Objective-C

  • Programming in Objective-C 2.0I’ve finally understood everything about Objective-C memory management, thanks to the book Programming in Objective-C (2nd ed.). If you want to dive into iOS and/or Mac development I recommend that you read this book first. It explains everything about the core Objective-C in a clean and simple way – ok, sometimes it is too simple (it is a book for non programmers too), but once you get deep into it, it’s all about Objective-C in its roots. It also has the best coverage I’ve seen on Copying and Archiving objects. Check its Table of Contents.
  • [origin release]: if no one else is using the origin, the release will end up invoking the dealloc method on the origin anyway to free up its space.
  • Static Typing: the variable is always used to store objects from the particular class as opposed to id, example (a dull one): 
    // id
id number;
Fraction *myFraction;
myFraction = (Fraction *)number;
  • @class identifier: Informs that identifier being used in the is a class. If there is a need to use these class’ methods, use #import instead.
  • Categories: can’t add instance variables, have access to instance variables of the original class, affects all subclasses of the class which is being added a category. Example: if we want to add a method to NSString, just declare a NSString category! NSString (CategoryName).
  • Auto retain and arrays: storing an element in an array creates an automatic increase in the reference count, while assigning it to another variable does not, so we must retain by hand.
  • Notes about nil-ing out pointers: http://wilddogcow.tumblr.com/post/1117200379/nil-ing-out-pointers

iPad

  • Finally got an iPad and learned what the iOs SDK brings exclusively to the iPad. Also at the moment I’m working on a nice client contract work, doing a magazine iPad App :). It’s something exciting and lovely to work with.

Flash and Flex

  • This is something I’d been delaying forever too, so I’m into ActionScript, finally! Thanks to the amazing Cartoon Smart tutorials.

Box2D

  • These notes are from Ray’s tutorial: How To Use Box2D For Just Collision Detection with Cocos2D iPhone: when defining Box2D custom shapes, make sure that your polygon is convex and have at max (default) 8 vertices.
  • Also, when setting up the vertices: “it’s better to use the “Initialization” style and the b2PolygonShape::Set method rather than the “Assignment” style so that Box2D can automatically compute the centroid and the normals for the shape for us” (source).

Art Side

I’ve been studying art and I started drawing, “pixeling” and so on and I have a lot to say about this subject. You can wait some posts around these subjects around here now and not just programming. I have some tips on how to go from a terrible artist to start doing something reasonable and they will be published on the next article.

6 Comments by Alfred R. Baudisch on September 15, 2010
Share | filed in Learning Diary | tagged , , ,