A Pixel Here a Pixel There...

by Gary Winnick
Sep 14, 2015

One of the things you'll find drawing in lower screen resolutions (individual non-scrolling screens in Thimbleweed Park are typically 128h x 320w or 172h x 428w) is that the placement of a single pixel here or there can make a real difference as to how an object, character or background may look.

In the good old days of pixel art working on C64 Maniac Mansion I first worked in character set, screens and objects made up of 4x8 pixel tiles where repetition was a necessity, brick walls were pretty easy, while organic animated characters were definitely more of a challenge.

Certainly, a reason for the larger heads in Maniac Mansion is that it allowed for much more nuance of personality. Working on the characters in Thimbleweed Park that are a throwback to that time presents us with a lot of the same basic problem solving.

For example if you're trying to create a five frame talking mouth in a 8x4 or 5 pixel grid there's only so many permutations that are going to look like they make sense. Aside from using various animation frame references it needs to look right to you when you actually plop down the closest bit pattern you can manage in that grid. Scanning doesn't really work at really limited pixel and color resolutions, it just comes down to noodling that tiny grid by hand.

Believe it or not, when I first started working on adventure games at Lucasfilm we didn't even have access to scanners. One of the the techniques I developed at the time was to first draw something, usually a character on regular bond paper, then I'd trace that onto a clear piece of plastic (acetate) with a sharpie, tape it to the front of my monitor and proceed to draw that in whatever paint program from behind the plastic overlay using that as a guide to plot each pixel into its somewhat appropriate position on the screen.

It was a haphazard way of getting the basic drawing done but actually worked pretty effectively for me at the time. Then of course, I'd touch everything up by hand, working on a face or even just the position of an eye I'd spend a good deal of time moving a single particular pixel around within a small grid trying to find the best possible location relative to its surroundings.

Although a lot has evolved relative to tools and platforms, it turns out not that much has changed relative to discerning the best bit pattern placement of individual pixels when working within a very limited pixel space.

Whether you're dealing with a face or a font, it comes down to the artist or designer looking at the overall graphic and hand placing that dot (or rectangle). On a level this can become very abstract, magnifying, zooming in and out, etc.

A lot of folks have said to me, given what I'm doing, why do I work on a 15" laptop screen instead of a bigger higher resolution display. In my case it's reasonably simple, I want to see the graphics and animation the way most of our end users will- that way I know it things will likely look their best to the greatest number of players in the audience.

- Gary



entropy - Sep 14, 2015 at 15:28
Again - great blog post, Gary!

Is that character David?

vegetaman - Sep 14, 2015 at 15:39
Okay, I have to know what the story is behind the Labyrinth drawing from Gary! That's too cool and it feels like it had a specific purpose or story that goes with it!

Also, excellent post Ron -- very neat and informative about pixel importance! I think a lot of people in general (developers, including) lose sight of the "big picture" of what most of their base will be using to play a game or use a product on.

vegetaman - Sep 14, 2015 at 15:40
And I can double down myself as an idiot for not noticing the post was by Gary before posting! D'oh!

David Fox - Sep 14, 2015 at 17:06
Those Labyrinth drawings were for the Labyrinth C64 game we did, based on the film. It was a Lucasfilm production, and became the first game we did based on a film. I was the project leader/designer on it, Gary the artist. Charlie Kellner was the technical lead and did a lot of cell animation code that would end up as the basis for our SCUMM games later on.

Gary Winnick - Sep 14, 2015 at 17:19
As David mentioned that drawing was done for the original Labyrinth game- which was the first animated 'graphic adventure style' project we did pre-dating Maniac Mansion. The particular drawing itself is to help demonstrate the point I was making relative to how I created character art in those days- this is an actual example of one of those drawings-  first done on a piece of tracing paper, which I then in turn copied onto a piece of  clear acetate then taped onto the front of my screen and copied onto the screen- at the time I believe I was probably working on the Atari 800 using a program Charlie wrote to move individual pixels on the screen with an Atari joystick- then plot it to the program by pressing the fire button. Truly amazing how far things have come...

Ron Gilbert - Sep 14, 2015 at 17:21
Yes, we have two fire buttons now.

Lennart - Sep 14, 2015 at 18:24
George probably never insisted on a second fire button...

Malcolm - Sep 14, 2015 at 19:52
But, being Lucas.. Which button fired first?

(And why don't I have a cool avatar?  *sulk*). :)

Lennart - Sep 15, 2015 at 09:57
You need to register at gravar.com. You have to supply the coolness yourself.

Michael Specht - Sep 15, 2015 at 11:33
And if that doesn't help, try gravatar.com! ;-)

TWfromSWD - Sep 17, 2015 at 12:24
Hmm, just trying if Gravatar works...

Soong - Sep 14, 2015 at 15:49
Again, a very informative and interesting post!  What's up with the Labyrinth drawing?  Was that for the game or the movie?

Natalija - Sep 14, 2015 at 15:54
That officer looks like David Fox.

Christopher Griffin - Sep 14, 2015 at 15:54
That's awesome -- I would have never thought to put paper on the screen and "trace" it there.  Ingenious!

Christopher Griffin - Sep 14, 2015 at 16:04
* of course, I meant clear acetate and not paper.  ... ahem ... cough ... cough ...

urielz - Sep 14, 2015 at 15:58
Thank for sharing this. Great post! Can you give us a bit of info about the character without spoilers? :)

Ron Gilbert - Sep 14, 2015 at 16:04
He is the Sheriff of Thimbleweed Park.

Jammet - Sep 18, 2015 at 11:25
Fester Shinetop the 18th? :]

Sergio - Sep 14, 2015 at 16:28
What are those arrows for?

entropy - Sep 14, 2015 at 16:32
I guess it marks the frames where the character is slightly elevated to make walking look a bit more real?

Sergio - Sep 14, 2015 at 16:34
Yeah, that makes sense.

Gary Winnick - Sep 14, 2015 at 17:22
You are correct- to help this type of simple animation look more convincing- it moves up by a single pixel for every other 2 frames- then back down, then back up, etc.

irma the warlock - Sep 14, 2015 at 16:36
African-american David Fox looks super cool. Almost as cool as regular Fox.

David Fox - Sep 14, 2015 at 17:09
Hah!! So, put a moustache and a hat on someone and you got someone that looks like me? Guess this proves Gary's point about limited pixel positions :-)

Lennart - Sep 14, 2015 at 18:34
While we're on topic. Since Ron is kidnapping Mikey Mouse on his Ghost Ship to get the rights to Monkey Island, couldn't you apply some mind bending techniques on them to get the rights to Zak McKracken?

David Fox - Sep 14, 2015 at 20:29
Been trying... maybe if I can just find that crystal it will work better.

Mister T - Sep 17, 2015 at 17:58
Sorry, but moustached people look all a like to us... but I always wondered whether this also means beardless people look all alike to you as well?

Farooq - Sep 14, 2015 at 16:46
I had to ask this, coudnt help. but is there going to be any character relating in someway to any of our favorite characters?

Tremendous Yak - Sep 14, 2015 at 17:08
That piece of Labyrinth art brought back som memories!

I know that David and the team went to England to brainstorm with Douglas Adams early on in that game's development - and I've seen the occasional comment from David about that - specifically the "text adventure transitioning to graphic adventure" idea.. Seeing as Douglas is no longer with us (still unfathomable) - could you indulge us in some other remeniscence about those meetings? What was it like?

David Fox - Sep 14, 2015 at 20:38
Douglas was awesome... I was totally intimidated by his brilliance (even though he was very down-to-earth and even made dinner for us all one night). The speed at which he came up with ideas and jokes was stunning.

Check out these interviews I did where I talk a bit about Labyrinth:

https://www.youtube.com/watch?v=jAmBtwwhKl8
http://www.ign.com/articles/2015/01/22/an-adventure-through-the-early-days-of-lucasarts-with-david-fox
http://www.c64.com/gt_display_interview.php?interview=32

T.M. - Sep 15, 2015 at 02:20
I only found out much later that Douglas Adams had any part in designing the Labyrinth, but I always felt his work had influence to Zak McKracken too, even if not directly but the certain atmosphere from Hitchhiker’s Guide was in Zak also. The humour was very generous and similarly silly in both masterpieces. Hmm, just to imagine what Zak could have done with the towel alone.

Helge Frisenette - Sep 15, 2015 at 18:13
I wonder if John Carpenters They Live, was any kind of inspiration for Zak (or the other way around)? They Came out within a month of each other.
Both are brilliant in their own way, but also share a common affection for SF camp and conspiracy theories and share certain plot elements and overall ideas and sensibilities.

Tremendous Yak - Sep 15, 2015 at 06:31
Thanks for the reply and the links! What an experience to have had.

I'm glad you, Gary, Ron and Mark are helping keep alive a tradition of clever wit and thoughtful silliness- thanks guys!

Helge Frisenette - Sep 15, 2015 at 18:04
Is the reason for the more detailed (and bigger?) characters in Labyrinth and Habitat the C64's 8 sprite limit (there was the possibility of more than 8 single sprites appearing per line)?
Obviously the characters are composed of more than one sprite vertically in MM and Zak (three, AFAIR). But how many are used for the two other games I mentioned?

Douglas Adams is one of my heroes, so I'm curious to hear what he made for you at the dinner, and of course any other curiosity or anecdote you can remember involving him.
I remember Ted Nelson talking in his autobiography about a dinner he had with DNA about the same time.
He is a big fan, so naturally he hoped for some kind of chemistry. Alas he came away with the impression that he was a very aggressive, almost angry person, very driven. For whatever reason they never met again.
A pity, because I think they would have had a lot to teach each other.

Brian S - Sep 16, 2015 at 23:36
David - I'm really enjoying reading the "Computer Animation Primer" (on the atariarchives.org website) you wrote, which was mentioned in one of the articles you linked to.  It's in parts really educational, and nostalgic, and humorous in it's dated references.  Mostly, I enjoy your writing style, and your interesting perspectives on animation.   I wish I could get it in a format I could read on a Kindle, it's hard to read in the browser.  I see I can buy it in book form on Amazon.  Perhaps I'll do that, if just to use the flip-book animations.  It's fun to look up the classic early animation demos on Youtube that you reference in the book.

Assaf - Sep 14, 2015 at 17:11
Hmm... I might've missed something... why do you say most end-users will see the game at 15"? I was guessing most end-users will play on a regular large monitor... Do you mean most will scale the resolution to 15"?

Gary Winnick - Sep 14, 2015 at 17:26
No, I just using a 15" screen to work on as it is a particular common laptop size-
and also let's me see my graphics on a somewhat typically sized screen.

Assaf - Sep 14, 2015 at 21:20
I see, thanks for answering.

Mattias Cedervall - Sep 14, 2015 at 17:54
I don't think that the sheriff looks like David Fox, but I think that David Fox looks like the sheriff.

Bogdan Barbu - Sep 14, 2015 at 18:48
In previous videos, agent Ray looks very funny when she walks away from the camera. I kind of liked it. Was that only temporary?

PS: I like the added detail. The characters look less flat. I've also noticed this in the video of agent Reyes talking (or having a head-bobbing seizure?) but didn't mention it.

Mario - Sep 15, 2015 at 02:24
Maybe Motion Capturing would be more simple than just drawing? i know its a 2D P&C Game but could look great if you had 3D Characters moving around. Play with that idea in the future.

Big Red Button - Sep 15, 2015 at 04:15
2D is more charming, I think.
Whereas creating detailed 3D graphics is much more laborious than creating detailed 2D graphics. Motion capturing would never compensate the additional expenses for 3D.

Mario - Sep 15, 2015 at 04:20
the motion movements for a character only needs to be done once. then you could adapt all characters to this motion. in TP all characters move the same way i guess. in the 2D you only have left, right, forward and backward animations. with the motion capturing the character could still stay in the 2D background scene but rotate within that. would that look odd? dont know, need to see that first.

MarcM - Sep 15, 2015 at 04:56
Great post!

I always wonder, wouldn't it be possible to create a 3D character and add some image filtering to it, so it can output similar pixel-based results? Maybe this process could be automatised somehow...

Do you think it is viable?

Geoff Paulsen - Sep 15, 2015 at 05:20
Yes, that's possible, but personally that's not the art style that I would want in a 2D point and click like this.

Big Red Button - Sep 15, 2015 at 06:23
I agree with Geoff. It would be a clashing with the style. Maybe it would actually look great, but 3D characters wouldn't be what I expect.

MarcM - Sep 15, 2015 at 06:49
Me neither. I agree with you that I  would not like to feel the characters are 3D.

I was just wondering if would be technically useful in a development like this to convert from 3D to pixel art.
Maybe you could force the 3D character to only appear on its lateral or front side, not in between and then apply processing to "render" the pixel-art model..

Bogdan Barbu - Sep 15, 2015 at 10:48
The nice thing about 2D art is that it doesn't have to play by the rules. The artist can make something look appealing even though it's actually somewhat wrong in principle.

By the way, a filter is an algorithm that suppresses components of a signal. I don't think that's what you meant.

Bogdan Barbu - Sep 15, 2015 at 10:49
Before you say anything, yes, an image is a signal, too.

Estranged2 - Sep 15, 2015 at 17:24
It can be done very well with voxels, which are actually 3d pixels. You can check Voxatron or Frederick Raynal's 2Dark.cc

Bogdan Barbu - Sep 15, 2015 at 18:39
It can be done with any primitive (voxels, triangles, NURBS, you name it). In a way, they're all equivalent. In fact, throw in enough resolution and computing power and they're exactly equivalent. The point is that what you'd get would be totally different because the 2D art is not necessarily an accurate representation of a 3D object.

Estranged2 - Sep 15, 2015 at 17:28
Actually what you suggest is shown here. http://2dark.fr/gloomy-voxel-editor-tutorial-2-modeling
I personally like it as a user, but it is an overkill if I look at it as a developer who doesn't want to waste time and money.

MarcM - Sep 16, 2015 at 10:42
Thanks for sharing, interesting!:)

tomimt - Sep 16, 2015 at 03:25
It's possible, but the results often are a tad unappealing. The art itself will always look off with filters, as it's just the program itself deciding what detail it removes and alters, not the artist, so the end result has somewhat messy or unclear look in it. You can check the new Gauntlet game for an example., as it has a retro mode, which pixelates the game and decreases color depth.

Christopher Griffin - Sep 16, 2015 at 09:31
Ultimately, this could be achieved using a shader that does "cel shading".  It was an over-used effect when 3D was becoming all the rage.  Think Mario 64 -- which may not be a perfect example, but is a close enough mainstream example for almost anyone to recognize.  It had limited use of textures, which resulted in a flattened appearance for most of the models.

Other examples would include Jet Set Radio (Dreamcast and Xbox), which 100% used the cel-shader effects.

Either way, as long as the output resolution is low and anti-aliasing is turned off or way down, you could still end up with something that is somewhat 2D looking -- but honestly, the amount of technical work you have to do to achieve good results with this technique probably takes WAY more time than the 2D artwork.

Geoff Paulsen - Sep 15, 2015 at 05:19
Yeah!  You rock!

I'm always amazed at how much of an ART it still is, even (perhaps especially) at really low res.  I've thought that I could hammer out a walk cycle, but it always look horrible.   Seems like it should be easy!  I mean, there are only so many pixels you can put his foot in!

MarcM - Sep 15, 2015 at 06:52
For anyone interested, a similar post about background creation in low res from the author of the game Gemini Rue (also an independent creator, who is not me, of course), which I enjoyed a lot:
http://gamecareerguide.com/features/946/postmortem_joshua_nuernbergers_.php

Mattias Cedervall - Sep 15, 2015 at 16:28
Thank you for the link.

Mister T - Sep 15, 2015 at 07:32
There is at least one more possible mouth-version: the one doing the german Ü, internationally also known as "duckface".
It got into fashion on social networks and reached its peak with the selfie-craze.

Big Red Button - Sep 15, 2015 at 10:21
If there won't be lip-sync, or at least no german vocals, there might not be any need for an "ü", I think.

Mister T - Sep 17, 2015 at 17:54
True, but what if the character wants to make a selfie?

Bogdan Barbu - Sep 15, 2015 at 12:02
Even if they added voices to the German version of the game, consider that:

(a) it doesn't have to be perfect, just believable, that
(b) there are many other phonemes missing (e.g., see http://www.garycmartin.com/phoneme_examples.html ), and that
(c) they have a big resolution constraint so getting everything to look right may be difficult or even impossible.

Herbert - Sep 15, 2015 at 13:13
German Ü produces the same mouth as German U or English “oo” (as in “moo”). And yes, I agree that this might be missing as the mouth has to be narrower than with the O. Gary could check it by animating a real sentence.

Anyway: Good work, guys. I like what I see.

Zombocast - Sep 16, 2015 at 01:29
This just in! - A Thimbleweed Park announcement...

In Indie News,
Developer Gary Winnick just released this article simply called, "A Pixel Here a Pixel There..."showcasing our very own Sheriff of Thimbleweed Park live on duty. A nearby witnesses gave this statement: "Watching him call for backup was HOT, but watching him backup. Well these pictures speak for themselves, bravo!" Reports have also shown a new fashion trend sweeping the country, spawned by the popularity of his recent story. It's being called the "Winnick Walk", and it seems everyone is doing it! Here are some exclusive images of this new fad:  http://bit.ly/1OuYWOk , http://bit.ly/1MaCYxH , http://bit.ly/1OuYYpD
Remember to tune in next week when we cover: "15 inch monitors, has technology gone too far?"  -Ransom the clown, executive press for the Thimbleweed Times

Mattias Cedervall - Sep 16, 2015 at 06:00
Funny. :-)

Martin Wendt - Sep 16, 2015 at 04:37
For our C64 point-and-click adventure I wrote a tool to help Oliver reduce chars.
It shows the most commonly used chars and their frequency.
I ran it over two rooms of C64 Zak McKracken here in case people are interessted:
http://martinwendt.de/2015/usedchars/
It nicely reveals how 'costly' diagonal lines are in block-based graphics.
You did stunning work (already) back then!

Ron Gilbert - Sep 16, 2015 at 10:38
The way we did the character set at in Maniac Mansion and Zak as as follows: Gary would draw the rooms in the C64's bitmap mode where he didn't have to worry about character sets. We then ran a program on the image and it converted it to 256 characters. If the image need more then 256 characters, it would go though and find a character that was a close match and use that one instead. The result was a image done in 256 characters, but with lots of odd graphical glitches. The tool then took the new image built from characters and converted it back to a bitmap image and Gary would go in and fix any glitches that bothered him. The program would then get re-run and then he's re-touch up the image. The whole system worked very well and saved Gary from having to built the rooms in character sets, or even thinking about them much at all.

Martin Wendt - Sep 16, 2015 at 11:05
An iterative pain, I can imagine. Its nice how i.e. the left tap knob in the living room now shares a char with the three oven switches.
Or the shadow beneath the fridge being identical to the edge of the TV (why is it such a whopper, btw? I always wondered)

Robert Megone - Sep 16, 2015 at 11:35
This is a really important question.

Arto - Sep 16, 2015 at 16:49
TV is big because the game takes place in the future, 1997. And in future TVs are always bigger.
But the real explanation is that the player needed to see the broadcast on TV, so it had to be big. Otherwise the TV would have needed an extra close-up view.
What has always bothered me was the placement of the couch. One can't sit on it and view the TV at the same time. But because of before mentioned matter with TV, I guess alternative placement was not possible.

Zak Phoenix McKracken - Sep 17, 2015 at 03:00
Zak McKracken had a very large mirror on the wall (the one hidden to the view of the player). So, he could lay over the couch and comfortably watch the TV, even with the couch in that odd position.
"Elementary, my dear Watson!"™

Robert Megone - Sep 17, 2015 at 04:56
Great answer, I'd imagine that's exactly the reason!

Martin Wendt - Sep 17, 2015 at 05:38
Indeed. Zak's whole body is mirrored in real time on the C64, so maybe his vision is as well ;-)

Helge Frisenette - Sep 17, 2015 at 17:32
It's kind of like the 4x4 quantizaton PowerVR use, only 8x8 of course.
I bet you could actually use it to good effect in iOS that actually uses that architecthure.

Helge Frisenette - Sep 18, 2015 at 06:29
Actually that should be 4x8 since it's high color on the 64. And of course with a strong manual component instead of being completely automatic.

Robert Megone - Sep 16, 2015 at 10:30
Martin, nice work with the tool. It looks like this sort of thing  is so overlooked in modern development. I guess the constraints of older hardware produced a necessity to solve problems in another way.  It's really cool to see this applied to Zak McK.

Bogdan Barbu - Sep 18, 2015 at 19:39
It's not overlooked, it's unnecessary. And that's a good thing.

Dan - Sep 16, 2015 at 14:59
Have you already tried out a version with teeth - at least the upper teeth?

Bogdan Barbu - Sep 17, 2015 at 10:17
That idea is a nightmare. When they talk, people show very little of their teeth (if any amount at all) since they don't retract their upper lip. It certainly doesn't occupy 1/3 of their mouth, which is what a single pixel row would result in. Not to mention that we probably wouldn't be able to tell they're teeth.

Dan - Sep 17, 2015 at 12:57
Regarding the standard case you may be right, but at least it could work as a stylistic device. A smiling beauty could show her shiny upper teeth whereas a cynic (such as Dirty Harry) could show his lower teeth everytime he talks.

Brian S - Sep 18, 2015 at 14:23
Nice.

criskywalker - Sep 17, 2015 at 21:05
What is Sulley from Monster Inc. doing in Labyrinth?!?

The game is looking great BTW!

Grafekovic - Sep 18, 2015 at 07:24
Ron, are you a pastafarian? All pirates seem to be pastafarians, so what about Guybrush?

Bogdan Barbu - Sep 19, 2015 at 00:13
Gary, give the Sheriff a soul patch. Can't you see he's begging for one?

Natalija - Sep 19, 2015 at 04:54
Where's the podcast? Shouldnt it be on on Friday?

ac - Sep 23, 2015 at 07:56
Mouths 3-5 don't look convincing. I think the animation should be something between the 1-2. Quick look at some old adventure games in youtube confirms that the mouths for this head size don't open that much - the mouth animations tend to be more subtle (no large amounts of extreme black).

Btw did you know there's Maniac Mansion Deluxe? playthrough in youtube. Pretty decent looking fan made deluxe version.

ac - Sep 23, 2015 at 08:05
I found one scene where the character is facing the camera and talking.
https://www.youtube.com/watch?v=ONrZcuCz1k0&t=815s

Pablo - Sep 30, 2015 at 02:22
Gary, this may be an stupid question, but...
did you had a mouse back then?
Did you ever had to rely just on the keyboard?
what is three + two + two?