Adventure Game Studio

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.

(http://i192.photobucket.com/albums/z76/8orbg4/horus/themosaiqueplace.png)
This is what I've started with...

(http://i192.photobucket.com/albums/z76/8orbg4/horus/mosa2.png)
...and how it looked like after the automatic conversion

(http://i192.photobucket.com/albums/z76/8orbg4/horus/palette1.png)
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.

(http://i192.photobucket.com/albums/z76/8orbg4/horus/mosa3.png)
And it worked out.

(http://i192.photobucket.com/albums/z76/8orbg4/horus/palette2.png)
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 (http://i192.photobucket.com/albums/z76/8orbg4/horus/palette3.png)... and finally added the global colours on the indexes they belong to.

(http://i192.photobucket.com/albums/z76/8orbg4/horus/screen01.gif)
(not my own sprite)

(http://i192.photobucket.com/albums/z76/8orbg4/horus/palette-scheme.png)
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

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

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.

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.

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.

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 (http://fateofatlantis.amberfisharts.com/azores3.gif) 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).

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.

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.

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.

Quote from: Jens on Sun 16/12/2007 22:29:34
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.

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.

Hoooooly shit, that looks really good.

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.

Quote from: Layabout on Mon 17/12/2007 23:53:01
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.

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.

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

(http://i192.photobucket.com/albums/z76/8orbg4/horus/screen01to02compare.gif)

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.

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.

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

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?

Quote from: Snarky on Wed 19/12/2007 16:44:14
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.

Mh, I did not really like the result of the automatic conversion. So I tried to imitate the typical gradient-pattern-feeling of FoA. But you are right, it does not look that good. I have just changed this by adding more colours to the gradient and adding a gradient spatter to it which makes the pattern look more random. Also, I have added a few more cracks and put another color-gradient onto it by using the colourize- and translucency-function.

(http://i192.photobucket.com/albums/z76/8orbg4/horus/screen03to04compare.gif)
The pillars in the back and the cracks have been moved, too. With the foreground I'll deal later on.

And yes, there is the idea of an Indy-game that a guy from this forum and I are trying to design.

Wow, this looks so much better now!

I am much more impressed with this new version of the background. I know its low colour, but it just looks so much cleaner. Dithering gives me headaches.

It's a beautiful BG. Very much in the FoA style, and I love watching the whole process of tweaking and changing... :)
Just one little thing bothers the fubbery ruck out of me: of the four pillars supporting the roof lintel (?) in the back/right of the picture, the second one is broken and lacking its' center part. Which is fine. But what is keeping up both the lintel stones and the remaining top of the pillar? They're just hanging there! It looks a little... unnatural. Still; great BG!

Super glue my friend  ;)

Very nice bg.

lol, yea, right. But hmm.. perhaps the material is strong enough to carry itself under normal circumstances? Or perhaps it's a decorative distance between all the pillars, not a necessary one from the point of architecture (so that after one pillar falls away, the inner statics are still strong enough to carry the material)?  ???
Anyways, the whole was intended to look "dangerous". And maybe in a game-scene it will even collapse... ;)

(http://i192.photobucket.com/albums/z76/8orbg4/horus/addedcracks.png)

I have applied a few more cracks to that part of the wall/ceiling to underline the fragile status. Hopefully that helps, because I really like to have it there. If not I will have to think of something else.  ::)

And thx for the compliment. Glad you like it.

I think what Miez meant is that the top part wouldn't be there at all.

In old construction like this, if I'm not way off here, there was no mortar or nails or anything like that.  Weight and gravity did the trick.  So that top part of the support would have nothing to hold it up there like that!

I too thought it looked a bit off, but other than that I'm impressed with the background and really enjoyed this thread!

Oh ... and make the game! 

wikipedia says they did have mortar. but the longer i look at it, the weirder it looks to me, too.

so what about that quick alternative?

(http://i192.photobucket.com/albums/z76/8orbg4/horus/removedstuff.png)

It looks good to me, but then again, I didn't see anything wrong with the previous version.

In my modest opinion I think half pillar and the broken part lying on the floor would look much better than a whole pillar for a tiny rock.  ;D



Excellent background by the way.

maybe you let the piece of wall there and just remove the part of the pillar

cause otherwise we maybe don't have enough things to collapse after the explosion and I also liked that part of wall.



ps: before the question turns up. I'm that guy who's working with Jens.

That's an excellent result!

I really don't have any drawing skills and got very interesting in this process.
Jens, do you think it's possible even for those (like me) who don't have a tablet yet? Or should I give up this tecnique and try another one(s)?

The last edit is totally spot-on. The broken segment itself makes the structure "dangerous", because now you notice that there's been collapses already... I kneel. In the name of mighty Wayne and Garth: I am unworthy.  ;D

Oh, and best of luck with that game. Would do these eyes some good to see a traditional Indy again, because, yes, the 3D approach left some scar tissue.

Quote from: Jens on Thu 20/12/2007 19:38:50
wikipedia says they did have mortar. but the longer i look at it, the weirder it looks to me, too.

so what about that quick alternative?

(http://i192.photobucket.com/albums/z76/8orbg4/horus/removedstuff.png)

Looks perfect to me! :)

It just gets better and better. Although, if I was looking for reasons to nitpick, I'd ask where have all the fallen bits of pillar and stone gone? But I'm not, so I won't. :) Maybe tourists took them home as souvenirs or something...

If I may ask, you said you are using Deluxe Paint, right? What are your thoughts on the program? I'm a long-time Photoshop and Gimp user, but both applications have shortcomings when dealing with pixel art, particularly animation and palette work.

In terms of feedback, I really like what a bit of retouching has done to your low resolution version. It looks much more detailed now, while still retaining many of the qualities of the original. I think The woodsy area in the background, the broken pillar in the foreground, and the pile of rubble in particular look much better now. And that dirt-spattered column on the left looks top notch. One smapp gripe is that a few areas still look too soft and show the effects of the scaling.

I'm a fan of the new, more random dithering style. Did you say it started as a pattern dither, then was randomly scattered? Or is it a purely random pattern?

When you are new to Deluxe Paint, everything appears complicated and uncomfortable. You may get annoyed from the unfamiliar way of doing things. But when you get used to Deluxe Paint and know how to handle its advantages and disadvantages it is possible to get good pixel-results in a very short time. Personally, I am happy with it (also for doing animations [that in Deluxe Paint Animation]).

The random gradient dithering style is a function of Deluxe Paint. You can set up the degree of the "gradient spatter" individually. For this picture I have used a medium gradient spatter. After that, I have melt together a few pixels manually by using the smooth-tool.
Also, I have picked a different gradient (brown colours) and used Deluxe Paint's colourize-function to merge it into the pillar (moving the cursor randomly over it).

The foreground and the left part (rocks/dirt) is so blurry, because there wasn't more detail in the painting when I scaled it down. So I do not think that it is a scaling effect.

Personally, I would not be able to (or at least would not like to) do those paintings without my tablet. Drawing concept art with pencils, scanning that into the computer and colourize it there is so uncomfortable compared to all those fast possibilities of picture creation/correction with a tablet. That's also why I am of the opinion that you can learn the most about drawing when you use a tablet.

Scaffolding?

The biggest issue in the conversion from high-res to low-res is that the edges become very indistinct and blurry. I think if you could improve the contrast to the edges of those things which are meant to have strong edges, it would make it a long stronger looking, and fit the style a little better (and look less like you took a high-res image and down-sampled it).

I have more of a problem with ugly "scanned" dithering. Take BASS for example. Nice art but the dithering really sticks out. Not that this particularly suffers from it.

Quote from: Crazy on Thu 03/01/2008 21:23:52I have more of a problem with ugly "scanned" dithering. Take BASS for example. Nice art but the dithering really sticks out. Not that this particularly suffers from it.

This is an intriguing comment, as I always felt the "dirty" dithering quite made the essential "look" and "style" of BASS, adding in that little extra sense of decomposition, wear & tear. I feel the graphics retained, in this manner, something essential about the original Gibson backgrounds that more retouching might not have translated.

I do see what you mean, though, and I must admit I never really looked at BASS from this point of view.

I suppose it's somewhat ingrained into my mind after a "dirty dithered" background near the end of Simon the Sorcerer, when the rest of them were hand-pixeled.