Adventure Game Studio

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?

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

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

(http://img.photobucket.com/albums/v175/dragonrose_1/26_1_b.jpg)
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."

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:

(http://www.2dadventure.com/ags/kqvga.jpg)

And here's converting one of mine:

(http://www.2dadventure.com/ags/myvga.jpg)

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?

Ask and you shall receive:

(http://www.2dadventure.com/ags/qfg4vga.gif)

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 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

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:

(http://www.2dadventure.com/ags/qfg4vgb.gif)

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.

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.

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. (http://cgi.ebay.co.uk/ws/eBayISAPI.dll?ViewItem&category=1532&item=6156982372&rd=1&ssPageName=WD2V") 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.

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:
(http://img.photobucket.com/albums/v175/dragonrose_1/26_1_b.jpg)

My edit of original:

(http://www.2dadventure.com/ags/agsperf.jpg)

Official edit of original:
(http://www.2dadventure.com/ags/qfg4vga.gif)

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)

Not possible, you say?

Dude... you're good.

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

?

Stuh, wow. That's amazing.

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

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.

(http://www.2dadventure.com/ags/farmhut_50colors.gif)

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 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:

(http://sylpher.com/kafka/junk/edits/farmhut_43.gif)

Eric

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 :)

(http://www.sylpher.com/helm/ptngvshlm046.png)

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,
(http://www.sylpher.com/helm/egabackground.gif)

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.

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.

(http://www.2dadventure.com/ags/screen2.jpg)

The stlye of the cottage picture looks a lot like that of a Thomas Kinkade painting.

Nice looking game! what is it?

Quote from: big brother on Fri 11/03/2005 18:51:02
The stlye of the cottage picture looks a lot like that of a Thomas Kinkade painting.

Hey, it's not that bad!  ;D

well so far, Thomas Kinkade is more famous than any of us...

my mom even got suckered into buying some of his shit, and she hasn't bought anything of mine lol

Quote from: stuh505 on Sat 12/03/2005 17:52:34
well so far, Thomas Kinkade is more famous than any of us...

And so is Martha Stewart, doesn't stop me from wanting to turn her skin into a beautiful couch-cover.

I think part of the problem with the 'Grainyness' in the early pictures is Photoshop.  It really doesn't give you many options.  I use Paint Shop Pro 7 and there's a setting or two to reduce those speckles and color bleeding.

Although I managed to get very close results by using posterize, I now believe that it is more likely that they simply did not apply any method of dithering when converting to Indexed Color, because that produces similar results without the blatant intentional loss of color information.

Automatic dithering was used, as part of their colour reduction scemes, sierra might have had inhouse software built exactly to that intent, as LEC made debabelizer to do the same to the drawn then reduced backgrounds of games like MI2. Obviously, after reduction, a pixel artist would go in and fix blatant errors and jarring dither patterns.


EDIT:

and so we're clear:

QuoteThey 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.

Besides automatic dither patterns, all the rest is skill in pixel art. Sorry to break it to you, but most EGA and early VGA games were not based on scans. But because there's different sorts, here's a rundown:

Sierra AGI:  used inhouse tool, picedit. Vector-ish program, where you can use the basic 16 colour palette to great effect if you're patient. The advantage was, that picedit saved the room in vectors, not in bitmap, so you could have lots and lots of rooms compress down to small space.

Early Sierra SCI: see http://www.bripro.com/scistudio/tutorial/chapter6.html

Also vectored images, now with 1:1 pixel ratio. Again, automatic dithering if you needed it, but that's that. Otherwise all skill with pixels/drawing. Tracing images could have been the case, but I doubt a lot of this was going on. For more on tracing images, look at eric's first post.

Late Sierra SCI: Gabriel Knight era and forth: Scanned in backgrounds, reduced colours, touched up. This thread has this covered completely.

Early SCUMM: pixel art, ega, rock awesome.

Middle Period SCUMM: MI, Dott, etc: These were all made in Deluxe Paint, Ppaint or other clones. these are programs that operate closely to what photoshop can do, but with indexed palettes. This mean you get a semblance of automatic anti alias, several dither patterns, gradient paterns, noise, blurring etc etc. Just download a demo of pro motion by cosmigo software and see what this is all about

Late SCUMM: all based on scanned drawings, either pixelled over (Full Throttle) or colour-reduced like MI2. Again, this thread has this covered so far.

QuoteLooking 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?

QFG 1 and 2 were EGA, using the SCI interpreter. No scanned pictures were used, and pics were made starting from zero in an in-engine drawing program storing the information as vectors, like I said. QFG3 and 4 are yes, scanned pics, colour reduced and tweaked as dragonrose explained.

QuoteA 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.

Dithering is made simply by having a series of patterened brush edges like:
xoxo
oxox
xoxo

saved, of differing sizes. Nothing overly automatic about it. Colour reduction scemes are however, automatic, although you can adjust the amount of dithering, if it's ordered or not, etc, similarly to photoshop.

QuoteThis 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.

As far as EGA goes, no.

QuoteQFG 1 and 2 were EGA, using the SCI interpreter. No scanned pictures were used, and pics were made starting from zero in an in-engine drawing program storing the information as vectors, like I said. QFG3 and 4 are yes, scanned pics, colour reduced and tweaked as dragonrose explained.

I forgot QFG was originally in an EGA version.  When I played QFG back seems like 10 years ago, it was the VGA version that I played so that's what I was talking about.  That's gotta be scanned, right?

When I said "no dithering" I was referring to a specific setting on Photoshop which isn't really like classic dithering.  If you convert it to indexed color in photoshop and try turing the dithering option on and off you'll see what I mean.

QuoteWhen I said "no dithering" I was referring to a specific setting on Photoshop which isn't really like classic dithering.  If you convert it to indexed color in photoshop and try turing the dithering option on and off you'll see what I mean.

If you think they colour-reduced with no dithering, and then added all the diffusion manually, I think I have to dissagree. Seeing how much the nuances of the art carry over to the indexed versions, a computer certainly had a part in this. I believe Sierra reduced with a homebrewed limited diffusion utility, and then cleaned up minimally afterwards. It's improbable that they posterize-reduced and then added the grain themselves, as I see it, as it would take too much time for too little benefit.

You could just colour reduce to all 4 different dithering patterns in photoshop and then cut it up and stick the best looking parts together and see if you saved more colours...

Well, I was talking about QFG VGA...in which I recall there is no dithering of any sort.

Well if the palette is set properly (or if a conversion has good colour reduction and optimal palette generating mechanism), 256 colour backgrounds can be good without "dithering". That's it.

Ok, I have a question. How in the world did SIERRA do this style of dithering?

(http://img178.exs.cx/img178/3393/wilcobdrm6zw.th.gif) (http://img178.exs.cx/my.php?loc=img178&image=wilcobdrm6zw.gif)

This is a screenshot from SIERRA's Space Quest 6. I love the style! Did the artists truly do this pixel by pixel?

Yes indeed, this is done in deluxe paint or some similar program. There's some automated dithering here and there, based on some gradiental patterns, and this just might be a trace of some concept image done on paper, but the real work is all pixel art indeed.

Actually SQVI was one of the major reasons I started doing pixel art.  The backgrounds were just amazing and inspiring.

You know ... it always amazed me (in Space Quest VI) how meticulously constructed, and beautiful, the background art was yet Roger's character sprite looks like shit.

aaaand the answer to that one is simple: animation

roger was meticulously animated hand-drawn frame by hand-drawn frame. so they could achieve smooth animations without spending an eternity,  roger is generally flat-shaded or cel-shaded. It's the same reason most cookie-cutter animation is like that, over painted backgrounds.

Still, that doesn't mean they couldn't draw him a bit better from what I see on that screen.

Also, I really do not suggest people sit down and start handpixelling 640x480 backgrounds, unless they have lots of time and patience, or an art team. Too much work.

Quote from: Darth Mandarb on Sat 19/03/2005 14:28:32
yet Roger's character sprite looks like shit.

You said it Darth!
And no, it's not because it's animated. Post that sprite in Critics' lounge (err, right here I guess) and we've got plenty of people who could make it much better without increasing the shading detail.

Must agree here.. Roger in SQVI is a perfect example of bad character design.. very generic and boring to look at.
I don't see non shaded sprites as a shortcoming.. on contrary, they can be quite a challenge and make everything look more stylish and intersting.. *if* done right.
CMI (and Broken Sword too- if i remember correctly?) actually had non shaded sprites and with a few minor exceptions, they were perfect.

Helm - I can see your point about adding complex shading to the character would make it difficult to animate properly.

However, I think the contrast between the style of the characters and the style of the backgrounds is cool.  I think they should have spent a little more time on the characters.  The BGs look mega-professional, while the characters (and not just Roger) look amatuerish.

It's almost like they had deadlines to meet and had their programmer whip up some characters for the game. 

Quote from: Darth Mandarb on Sat 19/03/2005 15:47:35
It's almost like they had deadlines to meet and had their programmer whip up some characters for the game. 

I do seem to remember Roger looking different from this in the SQ6 demo, if that means anything.

This happened with KQVII as well- only more so, in my opinion. Some of the cutscenes where they show characters close up are almost frightening, they're so badly drawn.

And even weirder was that these boring and unengaging sprites were billed as "beautiful."

Quote from: Fuzzpilz on Sat 19/03/2005 15:51:07

Quote from: Darth Mandarb on Sat 19/03/2005 15:47:35
It's almost like they had deadlines to meet and had their programmer whip up some characters for the game.Ã, 

I do seem to remember Roger looking different from this in the SQ6 demo, if that means anything.

(http://sylpher.com/kafka/junk/rogerwilco.png)

Sorry Fuzz, just wishful thinking.

Maybe he's thinking of this.

(http://www.abo.fi/~andslott/sq6.png)

I think the other graphics methods were much nicer.  Those SQ BG's look very hand-drawn.

Depends on what you're trying to do, stuh. Meticulously done pixel art will always be more detailed and sharp than any reduction sceme, so for the inside of a spaceship, good. For more organic environs, probably not.

Hmmm, outdoor scenes in SQ6 don't look that bad to me...

(http://www.geocities.com/Area51/Zone/6260/Media/sq6d.jpg)

--Erwin

Isn't it a bit too naturalistically sharp and neat than the outdoors should be? Of course, it's very nice, but I still think the style applies better to technological environments. Organic stuff could stand with a bit more noise and randomization.

DeBabilizer. (http://www.equilibrium.com/Internet/Equil/Products/DeBabelizer/Store/Order.htm)

That was actually in the holo deck, not actually outdoors If I remember correctly

That would explain the glowing disc and computer terminal floating off to the left.

Ah, that's one of my favourite games all time. I still dream about those backgrounds. The characters were a bit too flat, yes, especially the female protagonist, who kept looking old and ugly because they used lines in her face instead of shades, or something like that.

QuoteAh, that's one of my favourite games all time. I still dream about those backgrounds. The characters were a bit too flat, yes, especially the female protagonist, who kept looking old and ugly because they used lines in her face instead of shades, or something like that.

I loved Space Quest 6, still do. Indeed, those backgrounds are true works of art. The characters are god awful! I mean honestly, despite how much animation needs to be done for an adventure game. They could have done better. Far better! Especially considering the quality of the backgrounds.

I know that this topic is dead and all...but I couldn't help but answer the complaint that sometimes when you imported screenshots for a game or picture to import into a game, that they came out grainy or speckled...

An innocent, but quite possibly, a stupid question: Does Photoshop have an option such as "despeckle" or "soften"?

I've used these features on my picture program (Microsoft Photo Editor) and they work WONDERS!

Do you inport 32bit image in to 256 col. game ?
Or try to save image in different format and then import it to AGS.


Or you have problem capturing a good picture ??