Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: creatorlars on Fri 21/11/2008 15:15:35

Title: Pixel Background Attempt
Post by: creatorlars on Fri 21/11/2008 15:15:35
I'm still trying to settle into a manageable background art style for my game, and finally decided to try classic 320x200 res and see if it worked.  Here's where I'm at right now...

(http://www.larsattacks.com/rgrs-1.png)
(http://www.larsattacks.com/rgrs-1_hi.png)

Obviously this is unfinished, but I've put several hours into it so far and it would be great to have some feedback.  I'm having a hard time conceptualizing certain easy things, like how to draw the horizon and make the road look right.  Also I'm looking for general critique on the buildings/objects.  Does it (the finished parts anyway) look sloppy?  How can I improve? 

Thank you,
Lars
Title: Re: Pixel Background Attempt
Post by: Dualnames on Fri 21/11/2008 21:55:22
This does look AWESOME. A little bit more shade to the left building it feels like there's too shade on the one to the left concerning the fact that the angle isn't but about 20 degrees and less, different. And that surgery sign looks like the letters have been cut off.

Either ways, I definetely like the style. I'd love to see a tut on that..
Title: Re: Pixel Background Attempt
Post by: creatorlars on Fri 21/11/2008 23:02:12
Thanks for the encouragement.  I'll definitely save my progress at different stages on the next one.  Mainly I'm following the advice I've seen several places for doing this kind of stuff with Photoshop.  And while my Photoshop skills are great, my general art skills art, so this is still really new for me. 
Title: Re: Pixel Background Attempt
Post by: Ryan Timothy B on Fri 21/11/2008 23:04:52
Hey, I like your new style.
For some reason I get this 'separate' images feeling.  Like the two buildings don't have anything holding them together on the same image.
I've tried flipping the one building horizontally but I still can't figure out what it is.

(http://www.bryvis.com/images/other/agsf/creatorlars.png)

It still gives me the feeling.  Perhaps it's just the pavement being incomplete that is doing it... hmm
Maybe someone else will get the same feeling I do and have an explanation for it.

It's still quite excellent though, don't get me wrong.  Just can't put my finger on it yet..
Title: Re: Pixel Background Attempt
Post by: on Fri 21/11/2008 23:16:47
Quote from: Ryan Timothy on Fri 21/11/2008 23:04:52
It's still quite excellent though, don't get me wrong.  Just can't put my finger on it yet..

I think the missing pavement does that- plus, the right building seems to show a much steeper angle (the car stressesthat), as if there's a bumb in the ground... It works, though, if you draw some perspective lines and then imagine a structured ground.

Personally, I like the style a lot, I'm just not so fond of the background- that red/black gradient looks a bit too photo-shoppish and also quite dark- but that's just me, and it might look very different in the final picture. Keep it up!
Title: Re: Pixel Background Attempt
Post by: Dualnames on Fri 21/11/2008 23:28:59
We all got that thing Ryan, but well, he said it's unfinished so that's why it's a little bit difficult to post..and critic about it.
Title: Re: Pixel Background Attempt
Post by: pslim on Sat 22/11/2008 01:33:05
I like the look, too, but I think there are some scale issues. The car seems to be 70% as wide as the right hand building, which makes you wonder what could possibly go on in there in so little room. That impression is compounded by the fact that the dumpster seems to be wider than the building is deep. Assuming there's a flight of stairs or elevator inside the green building, there doesn't seem to be much room left for anything else, let alone a surgical gurney.

That said, the rendering is atmospheric and very cool.
Title: Re: Pixel Background Attempt
Post by: creatorlars on Sat 22/11/2008 01:51:59
Thanks again for the feedback.  Yeah, I think the car might be a little bit too small.  The "surgical clinic" will be very cramped and a bit nonsensical, yes. :)  It's an even more exaggerated version of a very tiny little rehearsal studio tower around here that I always thought was very odd.  I may try to remove the car and add some exterior stairs to the tower in its place.  The car is not necessary, just filling up space. 

Ryan, I wouldn't have thought of flipping the building.  I'd probably have to redraw it, but that angle sure is interesting.

Here's a new version with a bit of texturing on the sky and horizon (and corrected 320px width).  Maybe it helps a little.  Still not sure how to handle the road/parking area.  guess I need to dig up some reference photos.

(http://www.larsattacks.com/rgrs-2.png)
Title: Re: Pixel Background Attempt
Post by: creatorlars on Sat 22/11/2008 01:58:44
here's the original sketch...
(http://www.larsattacks.com/rgrs.jpg)
Title: Re: Pixel Background Attempt
Post by: ZaphodB on Sat 22/11/2008 04:23:56
I'm confused about the perspective here. You seem to have two vanishing points far to the left and right of the image and then one inetbween the buildings? How are they supposed to look from the top down? Because I can't work out if they're supposed to be in a line on the same street or on a corner or what.
Title: Re: Pixel Background Attempt
Post by: creatorlars on Sat 22/11/2008 04:38:54
you're right, there are three vanishing points (but it's 3-point perspective).  the two buildings are angled to each other and the road is curved.  maybe that's why the two buildings don't seem to occupy the same environment too much.  originally i tried to draw this scene in one-point perspective but it was very bland, and using the same two vanishing points wasn't giving me interesting angles composition-wise.  so adding the third vanishing point was just an attempt at cheating to give something more interesting to look at... i'm not sure how correct that is.
Title: Re: Pixel Background Attempt
Post by: ZaphodB on Sat 22/11/2008 05:00:01
Yeah I think it's making them look like they don't exist in the same space.

Imagine trying to draw a cube smack bang in the middle of that road near the center of the image, do you follow the one point perspective that the road does or the two point that everything else does? It doesnt really make sense.

I'm not too good at perspective myself though so I'd wait for someone with more skill to give their thoughts on it before trying anything drastic ;).
Title: Re: Pixel Background Attempt
Post by: Ionias on Sat 22/11/2008 22:56:04
In my opinion the only problem with this image/background stems not from the vanishing points but from the size variation in your objects. For example the road is much too narrow for the car to drive on and the doors and building size are out of proportion with the dumpster. I think if you downsize the dumpster, modify the road and zoom in a touch on the camera you’ll be where you need to be.
Title: Re: Pixel Background Attempt
Post by: creatorlars on Sun 23/11/2008 06:21:25
I ditched the car -- it was just in the original sketch to fill up some space.  You're right, it looked wonky.  Around here we have tons of different sized dumpsters, and this size is correct for the ones you see in apartment complexes or commercial areas.   

Here it is, "finished"...

(http://www.larsattacks.com/rgrs-3.png)

I think it still feels very lifeless.  It's supposed to be dusty and apocalyptic, but I think some more details and background or foreground objects would do a lot -- but what?  Maybe power lines stringing along behind the buildings to break up the monotony of the sky?  I tried that but couldn't get it to look right.  The location's close to some railroad tracks, but I didn't have room to suggest that.   The texture on the road helps but the road also still feels incomplete to me for some reason.  Any suggestions much appreciated. :)

Photoshop file is here if anyone wants to peek/paint... http://www.larsattacks.com/rgrs-1.psd
Title: Re: Pixel Background Attempt
Post by: Miez on Sun 23/11/2008 16:31:14
Good looking background - nice subdued colours. :) One thing that bothers me a little is that the rightmost building (the one with the "surgery" banner) is incredibly small. It has the floor space you'd normally find in an elevator. I'd suggest widening it either to the right or making it deeper...

And one thing to make the ground look more like a road is to add some of those painted lines (you know: curb delineation, pedestrian crossing, lane indicators) or by adding something like a sewer lid.
Title: Re: Pixel Background Attempt
Post by: Ryan Timothy B on Sun 23/11/2008 19:33:23
What is this RGRS building?
To me it looks like a radio broadcasting facility.  All you need is a large broadcast tower and some satellites, and that building would great.
Title: Re: Pixel Background Attempt
Post by: PixelPerfect on Sun 23/11/2008 20:35:14
(http://www.2dadventure.com/ags/rgrspaintover.png)
(http://www.2dadventure.com/ags/rgrspaintover.png)

Just tried a few things to make it more interesting. Everything is more or less just doodles. Take out of it what you want.  :)
Title: Re: Pixel Background Attempt
Post by: Stefano on Sun 23/11/2008 20:26:12
Hum...
What Ryan Timothy said about the separation makes a lot of sense, because currently there are 3 vanishing points (as it was already said), but they're being used in pairs!! The left building uses VP 1 and 2. The right one uses 2 and 3 as if they were in completely separated scenes.

My bet is that what you're trying to do is to use a modified version of a 5 points perspective, such as:
(http://www.2d-digital-art-guide.com/images/fivepointperspective.gif)
(this site has some cool diagrams for drawing "fish eye" perspectives such as this one. Check them here: http://www.2d-digital-art-guide.com/perspective-diagrams.html)

And here's what the perspective would look like using this technique:
(http://img224.imageshack.us/img224/6062/perspectivediagrams5copam8.jpg)
In your case you could just get rid of the top and bottom vanishing points, thus still using only 3 of them.
Title: Re: Pixel Background Attempt
Post by: Ryan Timothy B on Sun 23/11/2008 21:16:15
Nice fish eye perspective grid Stefano.  I'll definitely be taking a look at that site.

Perhaps it's just as simple as this:
(http://www.bryvis.com/images/other/agsf/creatorlarsp.png)

Edit:  Deleted my comment.
Snarky, you are absolutely right.  I have no clue why my brain accepted that the vanishing points for the two offset angled buildings Should meet at the same point.  When of course they shouldn't.
Well that makes perfect sense why the image looks a little wanky.  (Obviously depending on how angled the buildings are from one another) The vanishing point for the right building should be to the left of the vanishing point for the left building (meaning they cross each other).

I'll toss another reply in after Snarky just to bump the thread and explain myself in picture format :P
Title: Re: Pixel Background Attempt
Post by: Snarky on Sun 23/11/2008 23:59:13
I don't understand what you're saying, Ryan. The buildings do not need to have the same vanishing point, since--as you say--they aren't necessarily parallel. So no, two separate vanishing point dots is not something to avoid when sketching. However, both vanishing points should lie on the horizon. (The horizon is the line formed by all possible vanishing points for horizontal lines.)
Title: Re: Pixel Background Attempt
Post by: cat on Mon 24/11/2008 03:44:05
Stefano, thanks for that link! Here http://www.scottmcdaniel.net/drawing/perspective/perspective.html (http://www.scottmcdaniel.net/drawing/perspective/perspective.html) is also some information about this perspectives and the usage is well described, but I didn't understand 5 point perspective until I read the article from your link.
Title: Re: Pixel Background Attempt
Post by: abstauber on Mon 24/11/2008 05:27:08
@Stefano & Cat:
Awesome links, thanks a lot!

Maybe someone could add these to the tutorial sticky?
Title: Re: Pixel Background Attempt
Post by: creatorlars on Mon 24/11/2008 10:47:50
Some great info & replies, thanks a lot!

I'm going to widen and deepen the building on the right, so that the doors appears in the middle of the building.  Making it this small was originally an intentional exaggeration of the size of this building, but after seeing it in this style, I realize the proportions should probably be more realistic to work. 

The RGRS building is a bar.  In real life, it's called Rubber Gloves Rehearsal Studios and is a bar/venue/rehearsal studio here in town.  I've gigged there countless times over the past few years and always have thought it's a really weird space.  The building on the right is part of it (there is a rehearsal room upstairs and downstairs, so that's why they're small.)  Anyway, more on the actual game another time... :)  I don't see why I couldn't add some radio towers and satellite dishes, it would enhance the idea of the scene being in an industrial district on the outskirts of town, and any such structures and details I can add will enhance the post-apocalyptic mood of the scene, which is good.

Stefano, great links for perspective, I've bookmarked them.  I've got a great book, "Perspective for Comics" that goes through all of this too, and has some great troubleshoot-the-perspective-in-this-scene parts.  I had thought about doing curvilinear for this scene, but decided against it.  Maybe I'll try it for the next one... those are definitely some awesome template diagrams.

Ryan, the two buildings initially shared a common vanishing point in the center -- the reason they don't match up in your sketch is because I cheated the building on the left over a little bit.  When I was outlining everything, I remarked the vanishing points and drew every single line from the vanishing points out in photoshop.

pixelperfect: thanks for the paintover! :)  this definitely gives me some good ideas.  I do need to make the RGRS sign glow a bit, and the little blue light would be perfect for an animated flickering lightbulb kind of effect.  I like the moon too... just needs some cloudy haze over it to fit in with the sky I think.

I'm going to try adding some features that will bridge the space between the two buildings, like some cables running from roof to roof, and flesh out the road a bit. 
Title: Re: Pixel Background Attempt
Post by: Ryan Timothy B on Tue 25/11/2008 01:03:40
I'm a little late on this.  Snarky helped push me in the right direction.  I for some reason yesterday thought two buildings on different angles shared the same vanishing point.

Here's a little sketch to show lesser and greater angled buildings.  (This is also assuming the camera is Exactly in the center of the two buildings with them on the same angle)

(http://www.bryvis.com/images/other/agsf/perspab.png)

If the vanishing point meets in the center, the buildings are parallel.  If the vanishing points cross over each other, the rear of the buildings are aiming slightly towards each other.

Vanishing point is level with the horizon (if the buildings are of course level as well).

The green dot is the line where the base of the buildings intercept one another.

Thanks for slapping me back in the game Snarky. :P
Title: Re: Pixel Background Attempt
Post by: creatorlars on Tue 25/11/2008 10:19:11
Those sketches are really helpful illustrations, Ryan -- thanks!
Title: Re: Pixel Background Attempt
Post by: cat on Tue 25/11/2008 10:25:35
Ryan: I still don't quite understand. So, if I have two objects with different angles - how do I find the correct vanishing point for each object?
Title: Re: Pixel Background Attempt
Post by: Ryan Timothy B on Tue 25/11/2008 17:34:37
You make a line from the base on the side -- then to the horizon on the picture.  (I didn't draw a horizon in my diagram but I did mention that it stopped at the horizon.)

I believe I'm correct 'this' time.  Smack me with a rubber mallet if I'm not.  :-\
Title: Re: Pixel Background Attempt
Post by: Trent R on Tue 25/11/2008 21:18:54
Quote from: Ryan Timothy on Tue 25/11/2008 01:03:40
If the vanishing point meets in the center, the buildings are parallel reflections of each other.

But otherwise, looks good Ryan :)

~Trent
Title: Re: Pixel Background Attempt
Post by: Snarky on Wed 26/11/2008 07:00:08
Not true in general, Trent. (And in Ryan's examples the buildings are always reflections of each other, whether the vanishing points coincide or not.)

1. All lines that (in 3D reality) are parallel to each other share the same vanishing point.
2. If a line is horizontal in 3D reality, its vanishing point always lies somewhere on the horizon. (Unless you're looking at it directly from the side, in which case its vanishing point is at infinity, and you draw it as a line parallel to the horizon.)
Title: Re: Pixel Background Attempt
Post by: cat on Wed 26/11/2008 10:03:35
Thanks Ryan, now I got it! :D