FoA-style production process

[Jens]

Hello there.

I would like to hear your opinion and some constructive criticism on my approach of creating background images in the style of Indiana Jones and the Fate of Atlantis. It is also meant to share my experiences with the people who are interested in doing the same (it seems to me, that there are a few on this board) and to discuss the whole topic.

So, when I started pixeling, I had absolutely NO painting skills at all. I thought it would be enough to run an old fashioned DOS-pixel-proggy on my computer and draw a few lines and areas using gradients and get a FoA-like image.
The result was crap, of course.
The images that followed were not any good either. Of course, I learned much about the specialties of working with palettes, gradients and such, but my images still looked in no way as interesting, catchy, moody, athmospheric, realistic... as the famous LucasArts-backgrounds.
Then I found out that all those cool The Dig-, Monkey Island 2 and Fate of Atlantis-backgrounds existed as REAL paintings before they were pixeled (transposing the original almost 1 by 1). So I realised that I was just lacking painting skills and wanted to give up on pixeling and painting.
However, I bought a tablet and did some painting practice via speed-paintings of landscapes and portraits and did no pixel work for quite a while.

A few days ago I decided to start pixeling again, but now by using a self-painted reference. Imitating the LucasArts-approach, I started with a digital high-res-/high-colour-painting that I scaled down to the FoA-typical 320x144-style (it's a bit wider though) and converted it to 256 colours.


This is what I've started with...


...and how it looked like after the automatic conversion


No order in here.

The palette was completely messed up, so that it was not possible to do further pixel-work on the picture. Therefore I picked the basic colours of the converted painting: a few bright, medium and dark browns, a few greens etc. and created gradients from them which I have put into a new, clean palette. Then I told my pixelprogram to adopt the converted picture to the new palette.


And it worked out.


The new palette was much more comfortable to work with.

With this palette, it was possible to work on the details in the picture that were lost during the automatic conversion. I completely repainted big areas (the pillars, the floor, the building etc.) by using the gradients of the new palette. While doing this, I also adjusted a few of the colours, extended some gradients, added a few tones here and there... and finally added the global colours on the indexes they belong to.


(not my own sprite)


the semi-final palette

So this is where I am now. The whole conversation-step took just a very few hours. Some details (e.g. a floor mosaic) are missing yet, I will add them later on. For now, I would like to hear your opinion on that approach. Compared to the "old" way of "pixeling-on-the-fly" (with no concept), I REALLY like it. It is very comfortable to work on a background in high-color and a big resolution with a modern digital painting program. There are so much possibilities to design, adjust and tweak your image and finally get an acceptable result in the end. With VGA pixel programs and all their restrictions, this is much less comfortable.
But did the conversion turn out ok in your eyes? Does it look like it could be used for a LucasArts-style game? Or is it too blurry and need more sharp, clean edges (especially in the foreground)? Do you see any flaws? Any ideas to improve the picture and/or the production progress? What are your experiences with emulating LucasArts-styles? I will also try to answer any question concerning the topic.

Looking forward to hearing your opinions.

Jens

[Grundislav]

That looks really nice.  What dimensions were your original painting in?

[Evil]

Wow, this looks great. When I saw the first two conversions I thought, oh these suck, just stick with the painted, then I saw the final and it looks great. The pile of stones next to Indy and the pile of rubble in the bottom left corner aren't detailed enough and look blurry, but other than that the background is awesome.

[Ghost]

This once again reminds me how much I suck at palette manipulati-on/setup/usage.

The last version looks very true to the original Indy pics; I couldn't point out a flaw in them. I wonder, though, if your process will also work in backgrounds with a greater amount of colours; then again, since you are the (very skilled!) creator of your original paintings, you can of course take care that there'll never be a clash.

A good technique. All I could wish for is a more detailed explanation how you are "converting". As I said, I suck at palette manipulation.

[GarageGothic]

Looks great. Comparing your painted background to the final result, I would say this technique could even be used to convert photographic backgrounds to pixel-art.

[Jens]

Thank you for your positive comments.

You are right about the pile of stones, Evil. I will clean them up later, as well as the foreground.

I don't know the original size of the pre-painting anymore because I accidentially saved the working-file in a downgraded resolution  : It must have been about 1500 pixels wide or something.

For the VGA-conversion I have used an old fashioned painting program (from 1994) that I am used to, but you can also do it with photoshop (change image size to 320x144 and mode to indexed color, 256 colours). Using photographs as references would work as well (see this FoA-picture).

The quality of the result depends of course on how many colours (and color-tones and dark and bright variations of it) there are on the reference. The more there are, the rougher the palette will turn out (-> stronger contrasts and harder color transitions within a gradient [that's where the pattern-painting function of an old fashioned pixel program like DeluxePaint comes in handy]).
So it's useful to have a clear color-key in your picture (as a sideeffect that also adds to the atmosphere of the scene). You only have 160 indexes for the background after all. However, with some experience/practice one can learn to manage it quite well, I think (in this picture I am currently only using about 90 out of 160 colours - in the final image about <120, I guess... so it's not such a good management as too many indexes (= graphical potential) stay unused).

edit: Ghost, I can put together a more detailed, illustrated walkthrough for how I create and edit a palette with this method. But that could take some time (as christmas lies ahead and I also have two examens next week) and will be adjusted to Deluxe Paint (as this is my pixel program of choice).

[Layabout]

I must say personally, there is no reason to degrade your images. Why convert them to 150ish colour images when there is no need to. I know nostalgia comes into play in this field, but if you have access to 16+ million colours, then why the hell not use them???

The minority ( and that would be the 1 user who cant play your game, if at all) might be a bit shirty, but why force the other ***number of people to play in an obsolete number of colours with pixelation. Personally i hate it.

[Oddysseus]

It's not about performance or nostalgia.  Pixelation is a legitimate style choice that forces the artist to do more with less (often leading to better results).  Personally, I love it.

[Jens]

Pixelart in games is not only doing more with less, but also seeing more with less.

In the FoA-ish background-resolution of 320x144 pixels you have 46080 pixels for a screen. A character has about 20 pixels and very restricted colours for his/her face. Yet, I have always seen/imagined a detailed Sophia Hapgood. I could somehow see her face and attitude while playing as if it was high-res. The same goes for Indiana Jones, Guybrush Threepwood and other characters. They all appeared individual and unique to me. I did not see a bunch of pixels, but a whole person. And what made this possible is my subconscious fantasy - I have projected my fantasies onto those pixels and interpreted them in my very individual way (although I was not aware of that until I started drawing pixelart).

It is like comparing a book to a movie (e.g. Lord of the Rings). The movie might appear more colourful and impressive - but it's in no way personal/individual. The characters, the landscapes... everything looks (at least slightly) different than you have imagined them when reading the book.
To come back to Sophia Hapgood here - I am trying to completely ignore how she was presented in The Infernal Machine because I do not feel comfortable with how the artists designed her. It's just not Sophia for me.

With backgrounds it is the same - take the full screen view of Mêlée Island, the first game-screen of Monkey Island 2. It had so much atmosphere. Many years ago, when I've seen it the first time, I was completely taken away by the dreamy landscape with all those small flickering firelights in it. Everything was alive and detailed just because of a few coloured points (squares actually) that were interpreted by my fantasy.

Now if I compare this to Monkey Island 4, all this got lost. Although in MI4 I can effectively see much more of the environment, it appears empty to me (lacking details). And even with a few million polygons more and small decorational objects and detailed textures, it will never be the same experience that a good VGA MI4 could have offered. Because it is the detailed fantasy of others with no room for personal fantasies.
And the more detail there is, the more the personal fantasy dies. Good pixelart like that of Fate of Atlantis succeeds to simulate detail, but does not really give it away to the player. It perfectly activates the subconscious fantasy and the backgrounds appear full and interesting, although there sometimes just are a few pixels that represent a house in the distance.

So good pixelart visually gives oneself the possibility to delve into the own fantasy and (visually) experience an individual adventure. Without having to spend a few thousands of dollars for realistic textures and motion capturing...

And yes - it also is nostalgy that's driving me. I want to see a game in the old style and want to make it possible to experience all that again. Because I am missing this feeling among all the super modern games of our time like Crysis or Assassin.

[Ghost]

edit: Ghost, I can put together a more detailed, illustrated walkthrough for how I create and edit a palette with this method. But that could take some time (as christmas lies ahead and I also have two examens next week) and will be adjusted to Deluxe Paint (as this is my pixel program of choice).

That's highly appreciated! By all means take your time, and enjoy christmas. Whenever you're ready I'll happily add it to my growing list of tipsricks 

I agree on the "pixelart" approach. There is something... something about a well-done, lo-res, 256pal image. It's eye-friendly nostalgy on your screen. Old CRT monitors actually purr like a cat when they notice such art being displayed on them.

[Buckethead]

I think the conversion turned out lovely. It just could use some cleaning up in some places.  I prefere pixels also, but usually because of the great the detail there can be put into it.

[ambientcoffeecup]

Hoooooly shit, that looks really good.

[Layabout]

I just don't understand why you drew such a lovely background, then resized it, losing alot of detail, then reducing the colours and losing even more details.

It's just me, i know it is a style I don't really like.

What is the phallic shaped white thing in the background to the mid-left supposed to be? It looks like a giant, white, erect cock and balls.

[Supersheep]

I just don't understand why you drew such a lovely background, then resized it, losing alot of detail, then reducing the colours and losing even more details.

It's just me, i know it is a style I don't really like.

What is the phallic shaped white thing in the background to the mid-left supposed to be? It looks like a giant, white, erect cock and balls.

i only see an erect cock and calls to the mid right. You must really need some counciling if your seeing cock and balls everywhere  

And by the way, the backgrounds look bloody amazing! A alot of people would kill for your skills for making a game.

[Uhfgood]

While the background looks nice there are a few things that I don't care for.  (Not that anyone would listen to me anyway).  The backgrounds color scheme looks a bit too drab.  Obviously it's all stone work and so forth, but I Think you could push it to be more orangish, and the red pillars to be a bit more saturated, not necesserily lighter, but more of a purer red.

Personally I don't care for the dithering.  While some of it's inevitable, I think you could do with choosing more carefully what's dithered and what isn't.  Play around removing the stray pixels, so when you look at it you see more of what you intended in the original high-res painting.  There's a certain point where the fall-off is minimal and instead you could just fill in with a solid color.

Just some thoughts to heap on those others have mentioned.

[Jens]

Hey again - here is the current status (in comparison to the last one):



I have tried to clean everything (but the foreground [will do that later]) up and tried to increase the saturation. In my opinion that has indeed enhanced the pic a bit. So thanks for the nice comments and the criticism.

[Supersheep]

It looks alot nicer. Got some brighter colours and more detail on the trees and hills in the background of the background. Great stuff tho.

[Uhfgood]

Yep that's more of what I was talking about.  Looking good :-)

As far as the comments are concerned about a certain portion of your pic looking like a male part of the anatomy, I'd say they need to get their eyes checked.  As far as what you did to that piece, it does clarify what we're supposed to be looking at.

Keith

[Snarky]

This is certainly very good, Jens. I could do without the dithering, though, especially the pattern style used here. The random dithering of the original (automatic) conversion looks a lot better to me, especially on the columns.

Another couple of nitpicks: In either version, I think it's a bit unfortunate composition-wise that the background column/arch continues the line of the broken column. In the new one particularly, since the widths match almost perfectly, too. I would offset it a bit to the right, to get rid of the "optical illusion" that they're part of the same shape.

Also, some of the rocks on the foreground left look a bit blurry to me. The one in the corner is fine, but some of the others don't have the same sharpness.

Finally, shouldn't the crack under the broken column follow the contours of the steps? Currently it's drawn like a straight line, which doesn't make sense for the perspective. This also applies to the other two, but isn't as obvious.

Very cool. Are you working on an Indy game?

[tube]

This is certainly very good, Jens. I could do without the dithering, though, especially the pattern style used here. The random dithering of the original (automatic) conversion looks a lot better to me, especially on the columns.

I was too lazy (and in awe of Jens' talent) to point this out earlier but I have to agree about the dithering patterns. Not a big deal of course.