One-Point perspective backgrounds: Characters, Lighting, Shadows

Started by LostTrainDude, Wed 07/09/2011 20:51:22

Previous topic - Next topic

LostTrainDude

Hi there!
I'm here to ask a simple question.

I have to say: if you take a look to Dreamagine, you can easily figure how little is my expertise in drawing backgrounds at all.
But this time I want to challenge myself!

I began studying a little one-point perspective drawing and the best result I've achieved, at the moment, is this:


Now, if I place a non-perspective character on a perspective background, for example:


Do you think it could work? Or have I to draw a perspective-ready character?

Thanks in advance!

P.S.: No, I'm not developing a Monkey Island spin-off :)
"We do not stop playing because we grow old, we grow old because we stop playing."

Babar

#1
This is always something that has bothered me a bit, because almost all sprites are drawn the way your example was, and most BGs are drawin in perspective. I had the idea to map out my BGs in 3D, and then place a basic model to figure out exactly how the pose should be, but that would be very dynamic and variable, never mind from screen to screen, but sometimes even within one screen.

As it is, I think you're mock-up looks fine, and designing your sprites straight on shouldn't be a problem.

Some suggestions so that you don't run into problems in future BGs (and perhaps can use to remove problems in this BG):
- Try keeping the vanishing point and horizon as low as possible on your backgrounds, while still having them look good.
- Try designing your backgrounds in such a way so that the characters forward and backward movement (away from and towards the screen) is as minimal as possible. While AGS supports scaling, and it can even be done smoothly, the results are not usually nice.
However, the major problem (more important than scaling if you ask me), is the front and back walkcycles. Almost all walkcycle templates you'll find here (and probably many examples), have the bottoms of the characters feet very visible when walking towards the screen. Since the feet are almost always below the horizon, they really shouldn't be so visible (I think), so it kinda looks wrong. If you don't have the bottoms of the feet visible, and instead opt for a "straight on, towards the screen" forward walk-cycle, it still looks very odd, especially if the character is going (vertically) down on the background while coming towards the screen.

You can somewhat prevent this from coming up by putting in some background objects (shelves, cabinets, etc.) and foreground objects strategically, so that the player character doesn't come too close, or go too far away from the screen.
The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone

LostTrainDude

Thanks for your tips, Babar!
Can you post me an example for what you think is a "low vanishing point"? I've understand what you mean, but I'd like to see your point of view :)

Anyway I'll treasure these tips and, in the meantime, I'll try to keep track of my achievements :)
"We do not stop playing because we grow old, we grow old because we stop playing."

AnasAbdin

100% agree with Babar, shoe bottom is a no no.. unless it's intended, the walk cycle is cartoonish, or the camera is located in a specific angle.

I am drawing 640x480 BGs, my character is kinda tiny so it helped me alot:


I dunno if you can manage using smaller sprites but with the one you're using now; it will force you to narrow down your walkable areas... not really recommended :S

The shape, behavior, and the size of the character is also affected by the style and atmosphere of the game.

LostTrainDude

#4
I've made a few tests, changing position to the vanishing point.
They're less detailed than the first two I've posted, just to make it quick to test.

In this one the vanishing point is placed on the very top of the screen:


In this one, as you can see, is placed near the bottom edge:


Don't mind about the Guybrushes, they always want to put their hands on everything :P
Jokes away, I placed them to test their perspective. Still my favourite test is the first one I posted in this thread.

I didn't find anything that could teach me how to draw a room with the vanishing point in a different position from the center, so I tried to manage it on my own.
"We do not stop playing because we grow old, we grow old because we stop playing."

Anian

In that second one you moved the lines of the room that connect to the lower edge of the screen...well they don't connect, so the room seems a lot deeper and thus scaling is missing, but in the first one it looks ok without scaling.
Basically in that second one the character would never be able to reach the bottom of the screen, so the whole thing looks off when comapred to the other examples you posted.
I don't want the world, I just want your half

gameboy

Actually I think the first image (with the vanishing point in the centre) looks the best. It looks natural because the viewpoint is aproximately on the same level as standing human's eyes, therefore this is how we actually see rooms in real life. With the vp too high it seems as we were crawling on the floor and with low vp it's just odd.

Yet, low vanishing point means that the walkable area is instantly a narrow horizontal strip, therefore no scaling nor up/down movement will be necessary. Which is good.

I suggest you leave the vanishing point as it is and try to think through the background and its walkable areas the right way to avoid scaling, as Babar mentioned. Keep in mind that the whole floor doesn't necessarily have to be walkable area.

Babar

#7
Both the new images you posted make it look a bit weird, because in those (as opposed to the original), you've shrunk down the sprite in relation to the size of the background.

As anian said, in the 2nd image, Guybrush really shouldn't be able to have come that low. But if you restrict his movement to where he's standing on the right (and fill the rest of the ground so it is not walkable), I think it would look fine.

In the first image, with the high-up horizon, the scaling of the room is not yet so much so as to make him look odd, but again, it might look a bit strange when you have him animated walking from up to down or down to up.

To give you examples from where you got the sprite:
Largo Bridge
Bone Tree
Fortress

You'll notice the actual walkable areas are quite small. Of course, Monkey Island also had character scaling (and loads of backgrounds to make use of it), but in that, I believe each gradated level of scaling was manually drawn, while AGS does this automatically. Of course, you DO have the option of doing it manually as well, but that'll just really increase your workload.
The ultimate Professional Amateur

Now, with his very own game: Alien Time Zone

LostTrainDude

Thanks, guys!
I'll treasure these tips for my following work.

I'll definitely choose the first one I've posted (vanishing point in the centre), since I find that is the one that fits best to my concept. Anyway I'll keep trying, since I'd like to create backgrounds from different points of view with a perspective approach.

For instance, where do you think one should place the vanishing point to obtain something like this?


(Thumbs up for Gemini Rue!)
"We do not stop playing because we grow old, we grow old because we stop playing."

Dualnames

The vanishing point is at that camera's base, or a bit higher or so.
Worked on Strangeland, Primordia, Hob's Barrow, The Cat Lady, Mage's Initiation, Until I Have You, Downfall, Hunie Pop, and every game in the Wadjet Eye Games catalogue (porting)

cat

Perspective is faked here, as you can see on the lamps(?) on the left and right wall.

Monsieur OUXX

Quote from: cat on Fri 09/09/2011 15:08:04
Perspective is faked here, as you can see on the lamps(?) on the left and right wall.

Indeed!
I had already posted the picutre below so time ago, but it also fits in this thread:
- The picture from Gemini Rue is a mix between 2 and 3.
- "Pure" one-point perspective (1) is rarely used because it causes the character's exagerated scaling that LostTrainDude is struggling with.




I'd say that the image below is getting closer to Babar's recommendation ("low vanishing point") expect for the fact that, if you do that, then you have to truncate the lower part of the scene. The scene should "end" where the walls'lower edges touch the edges of the image. Dudepen shouldn't be able to go so low.

 

LostTrainDude

Quote from: cat on Fri 09/09/2011 15:08:04
Perspective is faked here, as you can see on the lamps(?) on the left and right wall.

My eyes fail me! You're right :)

Quote from: Monsieur OUXX on Fri 09/09/2011 15:46:16
I'd say that the image below is getting closer to Babar's recommendation ("low vanishing point") expect for the fact that, if you do that, then you have to truncate the lower part of the scene. The scene should "end" where the walls'lower edges touch the edges of the image. Dudepen shouldn't be able to go so low.

Like this, you mean?


Anyway, taking a look on your perspective examples, I figure again that I've no technique at all, since I wouldn't even know where to start, if I would try to draw the third figure. I don't know how much I have to be "precise" in drawing lines and how much this precision can affect the generic player's feeling. Not much, maybe, since I didn't feel anything unnatural when played that room of Gemini Rue. But it could be just my own perception :)
By the way, I have to say that I'm having some bad time with Photoshop, since I'm new to this use of the software and I'm trying to get familiar with all the features.

My goal, is not to make state of art backgrounds or characters, but surely I'd like to make them comfortable for the player's eyes and, anyway, "emotionally inspiring" in a realistic way :)
"We do not stop playing because we grow old, we grow old because we stop playing."

Anian

Just move the Guybrush that's facing the camera/viewer/us up until he's fully in the picture, that's it. Now you see how small the walkable are is - well it's the same size but items on the side walls are much more condensed (you can't see it now, but if you try drawing pictures on teh wall or you'll notice how "strong" perspective is and how much harder it gets to draw when you're doing stuff at this lower resolutions).

I would stick with the very first background you showed in this topic. When you get used to working in that enviroment and space realtions between objects when in perspective, then try other things.
I don't want the world, I just want your half

LostTrainDude

Quote from: anian on Fri 09/09/2011 17:15:13
Just move the Guybrush that's facing the camera/viewer/us up until he's fully in the picture, that's it.
Yep, sorry :) I simply drawn a black rectangle over Guybrush, just to ask if I understood what Monsieur OUXX meant.

Quote from: anian on Fri 09/09/2011 17:15:13
(...)if you try drawing pictures on teh wall or you'll notice how "strong" perspective is and how much harder it gets to draw when you're doing stuff at this lower resolutions.

Yeah, I've already noticed it. I've to work hard to get used to it :)

Quote from: anian on Fri 09/09/2011 17:15:13
I would stick with the very first background you showed in this topic. When you get used to working in that enviroment and space realtions between objects when in perspective, then try other things.

I'll definitely do it, I'm ready to puke blood in drawing items :)

Thanks!
"We do not stop playing because we grow old, we grow old because we stop playing."

LostTrainDude

I've changed the thread title, since I'm going a bit off topic and I don't want to make multiple posts :) If I did wrong, tell me!

I've shifted to a higher resolution. The former one was 320x200, now it's 640x480 and seems a little better to work with. I made a room similar to the first one I did (one-point centered perspective) and I began playing with shadows:


I'm not quite sure about the far left and far right window. I sense some shadows are missing but I don't know how to fix it.

This is the "structure" I drawn to make the shadows:


All those lines at the windows edge converge on the red lines intersection.
The last two windows don't have the crossing lines, to make it quick to prototype.
"We do not stop playing because we grow old, we grow old because we stop playing."

Dualnames

I like the image on the right :P

Shadows aren't forced on the point. Which means that the light could be a very different thing to your perspective. If however you have chose to use your perpective point as a way to cast your shadows, then i believe that you are correct.
Worked on Strangeland, Primordia, Hob's Barrow, The Cat Lady, Mage's Initiation, Until I Have You, Downfall, Hunie Pop, and every game in the Wadjet Eye Games catalogue (porting)

Anian

Yeah, you later might try the light source from some other direction.
But the problem with what you drew is that, while the perspective is basically correct, the chadows don't follow the room, as in the shadows have to fall on something (floor and ceiling) while your shadows cast out like rays from walls. You should draw lines from the windows to the ceiling/floor line where they meet, almost straight down, and then determine where they fall on the surfaces (following the perspective as you did here).

Also, decide now if you want to have gradients or pixel shadows, because when styles mix it looks weird.
I don't want the world, I just want your half

LostTrainDude

Quote from: Dualnames on Sat 10/09/2011 14:39:41
I like the image on the right :P
It really ties the room togheter :P

Quote from: anian on Sat 10/09/2011 14:56:35
Also, decide now if you want to have gradients or pixel shadows, because when styles mix it looks weird.

To make the shadows I've simply overplaced a layer with 50% transparency and painted it black (no Rolling Stones were harmed). I really don't know how to make a similar effect with gradients at the moment  ::)

I'll try to draw lines from windows to ceiling\floor, as you suggested. Let's see what I'll get :)
"We do not stop playing because we grow old, we grow old because we stop playing."

Anian

Quote from: LostTrainDude on Sat 10/09/2011 15:26:12
To make the shadows I've simply overplaced a layer with 50% transparency and painted it black (no Rolling Stones were harmed). I really don't know how to make a similar effect with gradients at the moment  ::)
I meant the table.
I don't want the world, I just want your half

SMF spam blocked by CleanTalk