Photo-Realistic Sprites

[Wonkyth]

Recently I took up a(nother) Hobby, Photography!

Then I had a thought: could you use a Photo as a Sprite.
I tested it, and it seemed to work.

However, There were a few difficulties.
It took a long time to cut the sprite out from the picture,  but I decided that I could trim it once I'd shrunk it .
Shrinking was Difficult because (Say I'm making a Sprite of a Character) I had trouble fitting the whole thing on screen.

But as cutting it out is the most time consuming task, I was wondering if anyone had any tips on doing it, as I imagine that there are people out there who have more experience with image editing.

[MoodyBlues]

I don't have lots of experience with photo editing.  However, if you're having trouble with trimming sprites, I would recommend photographing characters against a "green screen."  Sierra did this with some of King's Quest 6's cutscenes.  As far as I can tell, they placed the actors in front of a blue screen, filmed the action, removed the blue areas, and touched up the sprites to give them a painted look.

Good luck!

Edit:  This probably isn't the right place to ask about art tips.  Try the Critic's Lounge for more help.

[Fee]

Yep, the good ols green screen trick works well. I use blue tho, i got a nice roll of blue plastic from work for it

[Ultra Magnus]

But as cutting it out is the most time consuming task, I was wondering if anyone had any tips on doing it, as I imagine that there are people out there who have more experience with image editing.

Well, how I did these...



...was thus...

(Keep in mind that you should have a solid colour bg layer, of a colour that doesn't show up within the sprite itself.)

1 - In full size, cut 'em out using the magic wand. It doesn't need to be clean, because the resize will screw with that anyway.
2 - Resize 'em.
3 - Magic wand the now-empty space around your sprite (I also expand the selection by 1px just to be sure there's no bleed) and delete it again. Be sure anti-aliasing is off this time, otherwise you'll get the glowing effect when you save.
4 - Scan the outline and smooth-off the edges, deleting any sore-thumb pixels.
5 - Stick a fork in it, it's done!

And obviously, when importing, set transparency to the top-left pixel colour.

These are right for a 640x480, 16-bit colour game.
The edges may look a bit funky as is, but when in an actual game they blend into the scenery well enough.
D/l my demo to see how well they do or don't work.

[Misj']

It's always advisable to have a high contrast between foreground and background. But in many cases that is not possible (hair to be a well known example). I would advise you - if you're using Photoshop - to look into the extract tool which is quite good and fast when it comes to extracting your image: http://www.youtube.com/watch?v=-SppdE4mduU (some dedicated tools are better, but many cases this is good enough and definatelly better than any selection tool).

Personally I would turn the extracted image into a layer mask for the original image which would allow me to add and remove areas without 'corrupting' the image. Also, feathering the borders is easier when using a layer mask (of course this should not include the background colour).

[Wonkyth]

if you're using Photoshop

Nah, Jus' got normal old paint.

but I might look into Photoshop, as it seems a useful tool.

thanks for all the tips.



P.S. I only just realized that this is the wrong section in the Forum, all I saw was the "Tips" bit.

[splat44]

if you're using Photoshop

Nah, Jus' got normal old paint.

but I might look into Photoshop, as it seems a useful tool.

thanks for all the tips.



P.S. I only just realized that this is the wrong section in the Forum, all I saw was the "Tips" bit.

Although you've realize this is in the wrong place, don't worry, I've just inform moderator!

[radiowaves]

When sprite has solid color bg that has enough contrast, you can turn it into a LaB format (in photoshop) and then its easier to handle color values. After everything is set, copy the LaB channels and level them to maximum contrast, then you can click 'make selection' button in CS2 and it automatically makes the selection, so it won't be so time consuming. Magnetic lasso is bad inaccurate and time consuming thing, at least use tablet and don't cut very detailed as you can just use the eraser afterwards. After you have cut it out, you can smudge edges, erase or paint where needed, which is better done with a tablet.

But to put raw photorealistic sprites into a game needs quite a lot of skill to get it good looking. Remember, photorealism has lot more details which start to catch eye really bad when light conditions change. At least smudge the sprites to as solid color as possible, loosing all the unneccesary pixels. The thing is also with the edges. You see, in photography, every color reacts to the surrounding enviornemnt, so when you put the sprite in different enviornment, it will look completely different and cut out. So you may also need to change the color of the edges a bit, or put a barely noticeable selective outline aka selout.

So, I don't think cutting it out is time consuming at all, it is actually the smallest part.

[Wonkyth]

So you may also need to change the color of the edges a bit

Yeah, thats not too difficult to do.

oh, and about sometimes not looking good, the main reason I was trying this is that as I'm not much of an artist, I need to get sprites from somewhere so I can get the feel of the editor.

[EldKatt]

oh, and about sometimes not looking good, the main reason I was trying this is that as I'm not much of an artist, I need to get sprites from somewhere so I can get the feel of the editor.

If you just want to make sprites in a simple way (as opposed to some kind of experimental artwork where the fact that you're using photos is relevant), making some kind of paintovers might be good. You might even learn something. Look at The Last Express; their way of working was rather more sophisticated, but the principle is the same. If you just use the plain photos, you will get the Terry Gilliam look. Which is awesome if that's what you want, but in many cases it might not be.

[Layabout]

Police Quest:open season used 'photographs' as sprites. Realistically, i think they filmed the actors walking, talking and whatever frames and converted them to sprites. It wouldn't be that hard to do, if that is the effect you are going for...

[Evil]

LGM used a video camera and a green screen and it worked really well for sprites, if you've got the time on your hands. You can photoshop the images too and get a consistent effect. Tim and Eric's "Tom Goes to the Mayor" is a good example. Just green screen a bunch of photos and batch process them in PS.

[InCreator]

Yeah, without chroma keying I wouldn't even bother: it's way too much work.

So first, aquire big blue (or green) wall, sheet of paper/cardboard to attach to a wall, or cheapest and most accessible version - a large sheet of cloth. Then, set up a place where is LOADS of light, using lamps (unless you get your hands to professional ones) won't give good results. Make sure your screen is 100% stretched and flat (for cloth), because shadows are hard to key out. Last thing to remember is that whatever color your screen is, the thing you're going to use as sprite should not contain this color at any tone -- for example, for green screen, don't wear a green shirt,  have green eyes or dye your hair green. From my video hobby, I prefer green over blue - it gives less jagged edges. Also, blue seems to be darker so it's harder to key out.

Also, for Photoshop, for example, you could seek for plugins for better selection/separation tools. There's some that work way better than default lasso/magic wand via some trick, such color grouping and posterizing.
Pity I don't remember any names.

[Wonkyth]

This is all getting hard to remember.
And I really need to get my hands on Photo-Shop.

[PixelPerfect]

Well I was doing this game for awhile and as I work alone I have to cut corners every now and then to save time. Also this game would have been dark in tones so the realistic style would be good. I used royalty free photographs, cutted them in photoshop, and did quick paintovers and I think I got pretty good results. It did take some time, but I'm sure it took less time then making them all by hand. Plus I suck at drawing so there you go    The background doesn't mesh as well as it should but this was just a WIP. Here's an example:



EDIT: Oh yeah, to answer the original question I just took photographs that suited. Cutted them with magnetic lasso, magic wand or quick selection. After that I resized and after that I painted over. Without the paintover they would've looked even more "resized" so that's a must. At some point you have to try the sprite to your BG and change hue and lighting values so that the sprite will fit in. So if you have a car photographed at sunset it will most likely not mesh as a car at daylight. So you have to tweak that by hand whatever is the situation.