Main Menu

Making Sprites and Backgrounds in VGA games

Started by Lambonius, August 31, 2010, 11:07:09 AM

Previous topic - Next topic

Lambonius

Quote from: kindofdoon on August 31, 2010, 10:14:10 AM
Can you explain how you make backgrounds and sprites?

Sure, though this takes us a bit off topic--mods feel free to split this into some kind of Sierra-style art tips thread if you like.  :)

In terms of process, creating backgrounds is a lot less complicated than sprites (though by no means simple  ;)).  I personally like to do all of my drawing digitally in Photoshop, using a standard Wacom tablet (mine has a 6" by 8" or so drawable area, though any size would work--just a matter of how much money you want to spend on it.)

I start with a blank 320x200 pixel canvas (you always want to work in the native resolution of the game—NEVER start bigger and then shrink it down after you finish—that's a surefire way to have your painting end up looking distorted or blurry because it scaled down in a way you didn't expect it to.  It also allows you to make the most of the pixelated aesthetic—a lot of times you can achieve cool effects just by juxtaposing the right colors of pixels next to each other—a good example of this would be creating the illusion of fluting on Classical-styled columns by alternating vertical rows of light-dark-gray pixels.)  Next, I'll do an initial line drawing in black and white, which I typically sketch from scratch in photoshop, then I add base colors on a separate layer underneath the line drawing, kind of like coloring a coloring book.  For the line drawing itself, I'll typically use a 1 point brush, and then for the base colors I'll go larger up to 5 or 8 points to save time.

Once I've got my color sketch, I'll start a new layer and begin refining and detailing—basically you build up the image in subsequent layers, adding detail as you go.  I work almost exclusively with a 1 pixel brush—I find that it is the best way to add texture to objects and surfaces, and it keeps everything looking fairly crisp.  I'll also use the eraser at 100% opacity a lot to help refine edges and things.  Exclusively using the 1 pixel brush isn't a necessity, but as a rule you'll want to start with a larger brush and turn down the size as you continue to refine the drawing.  Blurry digital art is a hallmark of amateur quality work—if your painting looks fuzzy in spots, you haven't refined it enough.  ;)

From a stylistic standpoint, capturing the Sierra aesthetic is really a matter of practice and painting ability.  You have to remember that the original games' artwork was hand-painted and scanned in, so it's essential to get your digital painting to look as painterly and textured as possible—you want to try and avoid the slick "digital" look as much as humanly possible.

Another technique that helps is applying subtle highlights and shadows on separate layers.  You'll start with the base color of an object, then on a separate layer, using a low opacity brush, add highlights first within that same hue (I try to avoid using pure white for highlights unless I'm trying to capture the look of specific materials, like wax or metal.)  Then, on another layer, select pure black and turn the opacity down to around 10 or 20%--this way, you can add shadows gradually by going over and over the same spot with the brush.  Adding highlights and shadows is also one of the only places where I like to enlarge my brush—the bigger the brush (within reason, of course), the softer and more natural your shadows are going to look.

Really though, it helps to take a look at your favorite VGA Sierra backgrounds for inspiration.   You'll want to pay close attention to the way in which the artist captures different textures in the low resolution, as well as the way the highlights and shadows are applied—that is often key when depicting different materials and making them look realistic in the low res.  Small details also really help a background visually come together.  You can pretty easily add these late in the painting process—things like pebbles or leaves on the ground are often just the matter of a few strokes of color, highlight, and shadow and can often make a particular scene.

Basic compositional rules of good drawing also apply--you want to make sure you have a consistent light source that falls on every object from the same direction, for example.  Adding little details like subtle reflective lighting in your shadows can help give objects mass and volume within the scene.  Another hallmark of Sierra style backgrounds was foreground objects.  In a lot of screens (though not in the example I posted here), I'll define a distinct foreground frame, which will use a limited darker color palette of primarily blacks, blues, and dark colors.

Here are a few WIPs and the final version of one of the previously released KOS screens so you can kind of get an idea of the process.  The first is the color line drawing, and the next is after a few layers of detail have been added.






KatieHal

Quote from: Lambonius on August 31, 2010, 11:07:09 AM
Sure, though this takes us a bit off topic--mods feel free to split this into some kind of Sierra-style art tips thread if you like.  :)

I think I will. :)

Katie Hallahan
~Designer, PR Director~

"Change is the constant, the signal for rebirth, the egg of the phoenix." Christina Baldwin

I have a blog!

kindofdoon

Wow...this is very intimidating...It seems painting/drawing on paper, then scanning the image(s) would be more efficient, versus manually drawing everything with a 1px brush.

Daniel Dichter, Production/PR
daniel.dichter@postudios.com

Lambonius

Quote from: kindofdoon on August 31, 2010, 11:15:21 AM
Wow...this is very intimidating...It seems painting/drawing on paper, then scanning the image(s) would be more efficient, versus manually drawing everything with a 1px brush.

Well I suppose it depends on your personal style and preference--but as a rule, working in 320x200 resolution is almost always MUCH faster than hand-painting with paints and then scanning it in.  And even if you did that, you'd still have to edit the background digitally, not to mention having to scale everything down, which as I mentioned, can distort your image if you're not careful.  Working from scratch in the program really does save a lot of time.  Sometimes hand-drawn line sketches can be easy to scan in and paint over, though--a few of the other guys will do that a lot of the time.

kindofdoon

How long does a background typically take to make?

Daniel Dichter, Production/PR
daniel.dichter@postudios.com

Lambonius

#5
Quote from: kindofdoon on August 31, 2010, 11:27:52 AM
How long does a background typically take to make?

Depends on the artist and the background.  And the amount of free time you have.  ;)  Usually, I'll work on one in a few different sittings of 2 or 3 hours or so at a time.  My best guess would be around 6-10 hours total per individual screen.  Depending on the amount of detail in the screen, it can take a lot more or less time.

kindofdoon

*jaw drops* My hopes of creating something in AGS are pretty much dead now.

Daniel Dichter, Production/PR
daniel.dichter@postudios.com

Lambonius

Quote from: kindofdoon on August 31, 2010, 11:38:53 AM
*jaw drops* My hopes of creating something in AGS are pretty much dead now.

Heh--well, that's why these groups have individual artists whose sole focus is on producing backgrounds and sprites and such.  :)

Besides, you don't have to do full-fledged digital paintings to make backgrounds for an AGS project.  My suggestion would be to start with a really simple aesthetic that makes it easy to produce the game's art quickly, and then go from there. 

Mysteria

My thing is coming up with the ideas of a new game/how the game play will turn out....what do you call that?

Rosella

Game design would be my guess (As opposed to development, which is actually making it happen). :)
I'm a princess even if my kingdom is pixelated.

Official Comfort Counselor of the TSL Asylum © ;D

It's funny how you find you enjoy your life when you're happy to be alive.

Mysteria

Quote from: Rosella on September 05, 2010, 02:52:06 PM
Game design would be my guess (As opposed to development, which is actually making it happen). :)

What kind of schooling goes with that?
Yeah, I'm not game-developer material...lol

Rosella

Well, I'm majoring in Game Design and Development, actually. :P

The thing is that design is in charge of a project, and you're not going to head a project just starting out. If you want to try to create your own fangame, as long as you plan on delegating the development to other team members, you don't really need much training (though writing might help), since it's mostly creativity. You will probably need management skills though.

If you want to get a job doing game design though, you can't just jump to the head of a project. You have to work your way up there through having other game development skills such as art or programming. :)
I'm a princess even if my kingdom is pixelated.

Official Comfort Counselor of the TSL Asylum © ;D

It's funny how you find you enjoy your life when you're happy to be alive.

Mysteria

Quote from: Rosella on September 05, 2010, 04:44:27 PM
Well, I'm majoring in Game Design and Development, actually. :P

The thing is that design is in charge of a project, and you're not going to head a project just starting out. If you want to try to create your own fangame, as long as you plan on delegating the development to other team members, you don't really need much training (though writing might help), since it's mostly creativity. You will probably need management skills though.

If you want to get a job doing game design though, you can't just jump to the head of a project. You have to work your way up there through having other game development skills such as art or programming. :)


Ugh, that sux. I'm really good with writing, and business management classes are easy...but.lol...that still really bites.

Fierce Deity

Also, rarely do people on a team just work on the storyboard. Usually, the people that work on the storyboard also work as programmers or artists on the side (or rather work on the storyboard on the side). Being a good writer could help you out, but like Rosella said, writers don't jump to the head of the line. They have to prove their worth like everybody else.

I'm a good writer too, and English was one of my favorite classes, but English is probably one of the hardest majors to actually utilize when leaving college. Having an English major can open up opportunities, like being a screenwriter, a playwright, or an author. But it's a "dog eat dog" world. Experience means everything. So starting off as a programmer could help you reach your goal as a creative writer for games, and then you could build up from there.
Freudian Slip - "When you say one thing, but mean your mother."