Classic VGA/EGA Graphics...how do they do it?

Started by stuh505, Wed 09/03/2005 02:15:06

Previous topic - Next topic

stuh505

I have nothing to C&C but this is a topic for the artists.

I have always wondered how do they do the VGA or EGA graphics for the old games.

They often don't have the look of being hand-drawn.Ã,  So I wonder, how do they mask that?Ã,  People aren't perfect and I won't accept the explanatino that they are "just good"...there must be some techniques about their design process that helps them to get a professional look besides just being "good" at pixel art.

Looking at a game like QFG...I wonder, if perhaps someone has painted pictures IRL, then scanned them in and shrunk them down before converting to VGA?

A lot of times I see shading that is done with alternating pixel patterns and stuff like that also.Ã,  I don't believe someone went through the tedium of placing all those alternate pixels....because they often appear to have been done in a way that looks computer generated.

This makes me think that someone drew a cartoon, then colored it on the computer, then used some software to make an EGA rendition, which is capable of forming in-between colors by using pixel shading patterns.

Does anyone have any knowledge of these "professional" processes?

MrColossal

here's a tutorial by Björn Kahlenberg who worked on the V agi game:

http://sylpher.com/kafka/tutorials.shtml

I'm sure they used the same technique only with hand drawn images.

Download PicEdit for agistudio and see how it's done, brushes are specifically made to be dithered and such, you'll get a better understanding that way.

Eric
"This must be a good time to live in, since Eric bothers to stay here at all"-CJ also: ACHTUNG FRANZ!

DragonRose

#2
Step one- paint a painting with oil, acrylic or watercolour, like this one from QFG4


Step two- scan it into the computer in a limited number of colours (256 for VGA)
Step three- touch up in pixel art

This is the way games were made pretty much from Monkey Island 2 onward. Both Sierra and Lucasarts used this method.

It looks "computer generated" because of a limited number of colours available for VGA and the large pixel size.

TA-DA!!!!

For earlier art, they created the images on the computer, then used a process called "dithering," which creates the alternating pixel colours like you mentioned. This is best done with a program called "d-paint."
Sssshhhh!!! No sex please, we're British!!- Pumaman

stuh505

Thanks guys!

DragonRose, I LOVE seeing that pic.  The method you describe is what I was thinking of...still, I can't seem to get the VGA feel by converting it to 256 color.  Too many speckles everywhere.  Here I'll show you what it looks like when I convert it:



And here's converting one of mine:



Now, I'd really love to see what the in game picture used in QFG4 looks like so I could compare!  Can you dig that up from the same place?

BerserkerTails

Ask and you shall receive:



Here's that background as it appears in game. I had recently played through this game again, and being an avid Sierra player, I know that the more saved games you have, the better (Mmmm, walking deads!). So I was able to grab this for you in 5 minutes.

Interestingly enough, the whole creen shot is only 172 colours. Sierra reall had a way with palettes, that's for sure.
I make music.

MrColossal

I suppose I didn't understand what you ment, apologies

also, the backgrounds for CMI were colour reduced with a program called Debabelizer, I tried to get a demo of it but they never sent me the URL for downloading

What I would suggest is not just colour reduce your entire background, select certain parts of it that have the like colours and reduce them as much as possible and then combine all the parts, that stops things like green pixels in a perfect blue sky, i find.

Eric
"This must be a good time to live in, since Eric bothers to stay here at all"-CJ also: ACHTUNG FRANZ!

BerserkerTails

#6
Hmmm... I'm really interested in this now... I took a crack at making that painting look as much like the screenshot as possible, with minimal effort. He's the result:



What I did is first off I resized the thing to the resolution of the game. Then I lowered the brightness and upped the contrast. Then with the "Replace Colour" tool in Adobe Photoshop, I replaced the yellows with an orangish colour, to resemble the screenshot more. Then I finally brought it down to 256.

Obviously there's still a lot of the grainyness, but it looks rather close to the actual background. I'm guessing the artists working on these background probably did somehting like I did above, then went in a touched up all the grainyness by hand (Err, mouse).

My major gripe was the amount of JPG artifacting on that original painting, haha. You can really see it now that the picture has been blown up.
I make music.

InCreator

Ooh!  :o

If I could do such things with oil or watercolors - like this "originally handmade" scene was, I wouldn't never-ever bother to reduce colors or anything else.

I'd just make a kickass game with kickass graphics and high resolution. We have done some progress in technology to make this possible, right?

Yea, that's what I would do.

DragonRose

Stuh: It isn't possible to get the same effect from that jpg I posted. The original painting would be much much bigger and wouldn't have the artifacts that always show up in jpgs.

If anyone's curious, that pic is from an e-bay auction. The painting went for US $1,183.00.  The starting bid was thirty bucks.

And at the time, the scans had to be reduced. Computers couldn't yet handle high colour, high resolution images.
Sssshhhh!!! No sex please, we're British!!- Pumaman

stuh505

#9
BerserkerTrails,

Thank you very much...that image has allowed me to make a nearly pixel perfect replica...and I made that into a Photoshop action so I can make the conversion easily now :)

Original:


My edit of original:



Official edit of original:


Conversion notes:
1) Ã,  -53 Brightness
2) Ã,  -8 Contrast
3) Ã,  Convert to Indexed Color
Ã,  Ã,  Ã, -172 Colors
Ã,  Ã,  Ã, -Local Palette (this means every room uses a different pallette)
4) Ã, Posterize: 20 levels. Ã, This is the exact number of levels they used.
5) Ã, Changes to the Hue in Magenta, Cyan, Blue, Green, and Yellow (cant tell you the numbers though)

stuh505


DragonRose

Sssshhhh!!! No sex please, we're British!!- Pumaman

InCreator

Stuh, you house picture looks very similar to something I've seen already... hmm... I recall snowy version of this house....

?

BerserkerTails

Stuh, wow. That's amazing.

Now if only I could draw/paint that good to begin with, haha.
I make music.

stuh505

InCreator,

I'm not sure.  Although most of my work is completely original...in this particular one, I was basically just copying a painting for fun...which allowed me to do it in about 30 min as opposed to doing it from scratch which takes much longer.  However, the painting was not in winter, so I don't know what to tell you!

Well, here I tried another attempt at VGA-ing it.  I tried running the action from the previous file...heh...didn't exactly work.  The brightness and contrast and color balance definitely needs to be done differently for each image.

This image has only 50 colors.


BerserkerTails

Still, with a few more tweaks, it definitely would look like an old Sierra background, for sure! Kinda makes me want to play Conquests of the Longbow again...
I make music.

MrColossal

I think Increator means this by Dart:

http://www.adventuregamestudio.co.uk/yabb/index.php?topic=18483.msg224891#msg224891

That's very nice for 50 colours, but the gradient in the sky really kills the depth I think, and I believe it would help to really design backgrounds for colour reduction in the first place, as in, use limited colours to begin with.

here's an edit:

it appears the background is actually 43 colours, bringing it into photoshop tells me this, am I wrong?

however, I made a new gradient and used pattern instead of diffusion to reduce the colour and this is what I got:



Eric
"This must be a good time to live in, since Eric bothers to stay here at all"-CJ also: ACHTUNG FRANZ!

Simonsez128

Hi there,

just wanted to contribute something that came to mind when people complained about the color reduction making the picture grainy. In Paintshop Pro you always have the choices of "Error Diffusion" and "Nearest Color" when doing a color reduction. The first option results in a sort of dithered picture and is especially good for gradients, the second option makes a color reduced version of the painting look more like the original picture in the actual game (I tried it out). If you look closely, it produces wider areas of the same color. Sometimes this looks good, sometimes it doesn't. I would decide about that for each screen individually.

Hope this makes sense :)

I've given a million ladies a million footmassages - and they all meant something! - Vincent Vega

Pod



That picture was done by two artists, Helm [posts on here] and "ptoing" [doesn't post on here, I don't think].

The picture was painted, pixel by pixel, with each artist taking it in turn to do a square. Look at what they've done so far, the picture is still unfished, and it's fantastic.

Look at this thread here http://web1.t43.greatnet.de/viewtopic.php?t=8638
EGA games use only 16 colours. Take this picture for example,


It has the same colour and resolution as ALL the early EGA/CGA sierra and lucas art games. This too, was painted pixel by pixel.

danclarkenotloggedin

personally, i draw the BGs at the resolution they will be in game with a WACOM, then when im done i add a subtle 'paint daubs' filter in photoshop, to give it a crisper edge, and it also gives the impression that the image has been rescaled.


SMF spam blocked by CleanTalk