It should perhaps be glass glass glass, but anyway:
I'm having trouble making the large windows in my backgrounds look like they have glass in them. I think I've cracked the 'background windows', but this one scene has glass in the foreground. What do you reckon?
Background glass:
(http://longevitygene.webs.com/windows2.png)
Foreground glass:
(http://longevitygene.webs.com/14x2.png)
They are both x2 resized. The second background is unfinished, in fact, the foreground for that one I'm having trouble with in general. It is supposed to be from outside the building, looking in. The building is VERY high up, and a bit shabby, so it's going to need more detail and some sort of fog layer.
Two questions in one thread, I know, but it's getting close to the end for backgrounds in TLG and these are my last few issues.
Thanks, everyone!
Interesting challenge.
I must say I have no smart workaround to make the foreground window visible without having to mess with the character when he walks behind the reflections.
if its a 32-bit game just make some glass streaks and put them infront of the character at half opacity
Yes, sorry. I should clarify: I plan on using a semi-transparent layer. It's what to put on it that is troubling me.
How do the background windows look?
What Calin said.
(http://i52.tinypic.com/2h6hfn9.png)
Quote from: Jim Reed on Tue 14/12/2010 15:40:53
(http://i52.tinypic.com/2h6hfn9.png)
+1. Exactly the same diagonal stripes as on your first picture.
?
(http://longevitygene.webs.com/windows14.png)
I#d recommend 2 things :
1/ Not to make all stripes the same width. usually, I draw a large one and a thinner one next to it.
2/ To use the same stripes to go accross all windows. This is not the way it is in real life, but it makes the drawing less messy and in the end you end up with something better.
In any case, draw all stripes perfectly parallel. Here again, it might not be like that in real life, but in your drawing it's necessary if you don't want it to make it look weird.
(http://fc07.deviantart.net/fs70/f/2010/348/d/d/glass_reflection_effects_by_monsieurouxx-d34v4wc.png)
OK, I'll have a crack at that. They are all parallel, though and all the same stripes copied and pasted. I think it's just an optical illusion that make a couple of the them look 'off'.
(http://longevitygene.webs.com/windows14.1.png)
Have a look at the picture I posted in my previous post, to see how to apply the perspective to your stripes in your first background.
The stripes need to continue across several windows; they are reflections after all, with the windows being the mirror. Since the windows are all on one plane, we should be looking at one big reflection interrupted by the columns.
All taken into account:
(http://longevitygene.webs.com/windows6mk2.png)
and
(http://longevitygene.webs.com/windows14.2.png)
I don't think the semi-transparent stripes should affected by the perspective in the same way as the sloping ceiling in the first image. The way they lean towards us looks wrong to me. If the stripe that's being reflected was coming from the floor, the bottom would be larger than the top.
My other observation would be that the stripes are much more effective on the exterior. Not because of your drawing, but because it is an exterior. Inside, reflections of the neon lights would be a pain to draw but would be more convincing.
I'm sorry, a bit unrelated, but why the windows so high up (I'm talking about the second background)? The view is so strange, even the character on the right gets its head cut off, and more than 50% of the background is basically empty (I know you said it wasn't finished, but I'm talking about the top and bottom part) and couldn't be used to show any action, unless a spaceship blows through the wall or something...I am not complaining or anything, just wondering about design decision process, cause it seems so different from the first background. :)
@anain
I just wanted to break things up a bit. There is another corridor-type room on the other side of the map, and I drew that from the inside, looking outside. I didn't want to basically copy the background, that would be boring. I hoping, if there is enough detail on the outside of the building it won't look empty.
Also, there are only a couple of vital interactions in this room, so the utility isn't so much of a problem. Oh, and the people's heads are only cut off because that's looking through a door into the next room. There are a few characters and object in this room, I've just posted the raw imagine, rather than an in-game screenshot as with the first.
@Ali
So you reckon the stripes on the sloped windows should be like the others? - i.e. "parallel".
Yeah, I may up the opacity on the outside reflections, as these would be more pronounced, because the reflection is bouncing "back into the viewers eye", so to speak.
It's a tricky one, but what Monsieur OUXX suggested doesn't seem quite right to me. If the ceiling is sloping at 45 degrees then the window should be reflecting the floor, and there are no light sources on the floor.
I see that the light coming into the room is casting shadows, if that's the case it's unlikely that we'd see any reflections. Inside, reflections tend only to be visible at night time.
This may be a fiddly point that's not worth you bothering about though!
There are only two sloping windows in the game - the rest are totally vertical. So it might be wise to keep the reflections there for consistency. I made turn them down a bit though, and try and add some reflections from inside, like of the neon lights.
Most importantly, though, is sorting out some detail on the other background.
If I can be a bit nitpicky, I'd say that the shadows on the back wall aren't consitent. It's hard to explain, and harder for me to draw it accurately.
Any ideas what's up with them? As far as I know they are technically correct.
Well with what Jim mentioned about the light source (2nd background), the only reason I feel it looks odd is because the shadows follow perspective. For the shadows to follow perspective the sun would have to directly behind the camera. It makes things pretty boring and simple, not to mention the crazy odds considering it would have to be the perfect time of the day for the sun to cast shadows in that direction.
You also shouldn't be able to see the shadow from the center column. Nor should you see the left and right sides of it, unless those edges are on an angle.
The window itself would have to be at least 30 feet high. Also being about 3 or more feet off the ground. The background as a whole is a touch zoomed out and awkwardly shaped, to be blunt.
As for the window streaks on the last image you posted, perhaps using a gradient where you can see the streak at the bottom but not at the top. Unless you don't have gradients with any of your other backgrounds. I wouldn't want one background to have a different technique.
Here's my take on putting glass in there:
(http://img6.imageshack.us/img6/5233/explmar.png)
(Constructed reflections using guesstimated vanishing points. The picture looks fine but the perspective isn't 100% correct.)
Btw, the picture you posted was resized to something like 197%; not sure what you did there. Just take the 320 original and resize it by putting "width=640" into the IMG tag.
Regarding the second picture:
You're using a straight one point-perspective. If the people are on the same height level as the doorway base, the doorway is too low.
(http://img152.imageshack.us/img152/4264/expldw.png)
As you can see, only a doorway above or below the horizon can obscure the head or the feet.
@Ali, @Markbilly : As I wrote, the way I recommended to draw the stripes does not reflect reality. It's just a set of cheap tricks that always help glass looking good. But you might have exagerated the perspective a little bit, Markbilly, that's why the stripes on the ceiling windows look a bit weird. I think a perspective between that you draw and no perspective at all would look good
However, if you want to go realistic, then you must do it the way Khris described. It's more work though. It's up to you.
@Markbilly: There's something you can easily fix on the picture with the vertical windows :
If you assume the sun is up in the sky (which would make sense, lol), then it's casting its light down, and therefore the small horizontal plane at the bottom of each window should have a lighter color than :
- the wall
- the vertical planes on each sides of the windows*
VERTICAL PLANES --> WALL ---> HORIZONTAL PLANES
DARKER --> MEDIUM --> LIGHTER
* The fact that those planes are darker than the rest is a personal choice, not necessarily realistic, but that looks good 90% of the time.
I've tried to incorporate what everyone has said:
(http://longevitygene.webs.com/windows14.3.png)
I really HATE this background. At least with the other one it still looks pretty good, regardless how 'wrong' it is.
P.S. @Khris it is an in-game screenshot and I was playing at 3x nearest-neighbour - so I just resized it 66% in PSP, which cocks it up a little.
Why don't you try drawing it from a complete different perspective? Something more revealing and dynamic?
For instance, you could try angling the visibility of the room to focus on the entrance, like this:
(http://i485.photobucket.com/albums/rr218/ProgZmax/altperspective.gif)
I made this edit rather quickly and it's certainly not optimal but it gives you an idea of the things you can do to spice up the presentation of a room even before you add details. You could, for example, give the hall a gradual curve as it moves away from the viewer, or you could remove the section of the wall where the windows are for a clear look at the hallway, or you could angle it in the opposite direction with the player looking on the windows from the inside; the possibilities are as endless as your imagination. Two-point perspective could even provide ADDITIONAL shape and value to what is otherwise a plain hall, so don't be afraid to play around a bit with perspective lines and angles until you settle on a room presentation that really brings out the details you want to present.
Even 'filler' rooms like this can have some personality injected just by using a clever angle to present them!
I think the problem is that all the other rooms in the game are based on one-point perspective. It would be odd for one room to suddenly be in two-point.
I'm going to sit down and sketch some ideas, though. Thanks, everyone.
To be honest I like you simple perspectives, color schemes and compositions.
But if you don't fix that lighting effect on the horizontal part of the windws, I'll spill petrol on myself and light a match.
incredibly sloppy edit (cannot draw on laptop) but here's 2 techniques I use
(http://www.indrek.org/i/critshelp/windows2x.png)
1) Reflection. I basically copied whole room into new layer, flipped upside down (or not), then using skew transform in photoshop, fitted to glass area. Finally, Reduced layer opacity to around 15-10%.
It doesn't really matter what's reflected really if the opacity is low enough. Also, you can go over reflection layer and play with hue & saturation - for tinted glass, for example.
And despite book of perspective written into this thread, my version is very unrealistic. Important is that if used properly, it simply looks good!
What I couldn't do properly was to remove reflections from between window.
2) Dim - although you're strictly not using soft brushes, here's also what works: I cover glass area with pure white, lower opacity to 3-10%, and using soft eraser, erase most of the white layer, leaving only glass edges.
Good technique to imitate old or dirty glass. Some monochromatic noise doubles the effect.
As for current image, those are only ideas and I'm not sure if neither of them does any good.
I'm sorry but I have to say how very wrong I think it is to do a reflection that way. Even if it's barely visible, the lighter parts still show pretty clearly and it simply looks horribly off.
The world of advertising is full with wrong reflections, please lets not teach methods that contribute to this sad state even more.
Also, why on earth would you skew the layer to fit the glass area? That doesn't make any sense even within the generous limits of that sloppy method.
While we're at it though, there are a couple of things wrong with the picture:
-the shading of the right wall doesn't make sense at all
-the beams are leaning to the right (their vp is further to the left than the one of the doorway)
-the structure to the left is pretty close to the angled back wall, yet they don't seem to meet at the top
Don't get me wrong, I really like the background. It has so much potential, and getting it to look good will take some work but the end result will well be worth it.
There are a lot of minor inconsistencies and slight errors with the perspective in the background, but development on TLG is so far down the line now that I'll never be able to improve the art enough to be completely satisfied, without pushing it back a year or so.
I'm using the last few months of development to brush up on some of the major problems, like any background that is dull, or doesn't do its job. I'm also using the time to improve the storytelling and dialogue - which is frankly more important.
I'm having a go at re-drawing the corridor background to mirror the other corridor better, but I will have to leave the first background how it is.
I'll post up what I have when I've one a bit more on it. Thanks again! :)
(http://i54.tinypic.com/iodmqs.png)
I tried my hand at this gordian problem of light. I'm not 100% sure if it's mathematically correct, but it looks more realistic to me. Ah, well, the only sure way would be to draw it in 3d and raycast the light...but that would be too much bother.
On that note : THIS is what I meant about the horiontal plane below the glasses. Simple and big enhancement. (takes exactly 2 seconds to fix)
(http://fc08.deviantart.net/fs71/f/2010/350/d/8/glass_shadowing_by_monsieurouxx-d34zga2.png)
Firstly @Monsieur OUXX I will definitely be adding that when I do the galss again, don't worry! :) You are completely right about it.
@Jim I like that, I was getting stuck in a rut of having the windows indefinitely high. Which was silly.
Right, an explanation of the limitations I have in the design of this room can only be explained with another screenshot, so I hope not too many people read this thread - I'm revealing more and more of the game! ;)
OK, so this is the corridor on the other side of the building, which mirrors this background.
(http://longevitygene.webs.com/otherside.png)
In this vein, I've drawn the background again, taking into account some of the features:
(http://longevitygene.webs.com/option1.png)
And this is it with the foreground windows (which may not be necessary, in fact).
(http://longevitygene.webs.com/option2.png)
What do you reckon then, people? Is this latest design nicer to look at?
Well, it looks okay to me. You could maybe add some texture to the outside walls, and make that bench look less like it's painted on the wall.
So, a nice low opacity noise on the walls, and a shadow beneath that bench would make it look more real. Ofcourse, I can keep finding flaws, and you'll never finish the game that way =).
Oh, actually there's something I hadn't noticed on the benches - I've covered the edges over with the walls. A shadow, and the ability to see the edges should stop the "painted on" illusion.
Thanks Jim.
This is a fantastic looking game, dude.
Fav'd, bookmarked and cataloged.
Happy 2011, markbilly. :)
Sparky.
@subspark
Aw, cheers! That brightened up my day, especially after staring at these same few backgrounds for weeks! :)
Happy New Year, everyone!