Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: IndieBoy on Mon 04/05/2009 12:49:16

Title: Wizard's Tower BG
Post by: IndieBoy on Mon 04/05/2009 12:49:16
I really hate doing backgrounds. They are very time consuming and I find difficult to get everything right. But I really need to work on them so I decided to enter the Bg Blitz and force myself to make a background. So here it is:

(http://www.2dadventure.com/ags/wizbgibcomp.png)

So what can I do better? I really want to improve.

I don't normally use gradients but I thought I would try it out with the sky, although it does seem out of place. Also this is the first time where I haven't used construction lines or vanishing points.
Maybe I tried to do many new things.  :-\

Any suggestions welcome ;D
Title: Re: Wizard's Tower BG
Post by: Matti on Mon 04/05/2009 14:49:09
I think you should add some darker colors to the borders/corners of the tower's segments. I'd also work a bit on the ground's shading.

I made a really quick edit, hope it will be somehow useful for you. I'm not too happy with the tones of the grass/dirt, but I didn't have the time to play around with the colors now.

Also, the water needs some more shading I think. Perhaps I'll add a second edit later...

(http://www.2dadventure.com/ags/wizbgibcomp_quick_edit.png)
Title: Re: Wizard's Tower BG
Post by: Mr Flibble on Mon 04/05/2009 15:17:35
Quick edit.
1. Changed some of the shading so that the tower casts shadows both on itself and the grass, using the moon as a light source. I also started removing some of the "pillow shading" at the top and on the roof, to give you an idea of what would look a bit more like light. The pillow shading makes the tower look very round, as if it's made out of marshmallows or something, but this may have been what you were going for given the fantasy style.
2. Flipped all of the windows and the door horizontally to make them fit the perspective.
3. Shrunk the town and added lights.
4. Thickened the railings on the balcony and added shading (the shading you did on the wooden strut is the sort of shading you might want to apply to the whole image). I also added a second support strut behind the first one.
(http://www.2dadventure.com/ags/Wizzin.png)

And I think the sky gradient looks great, and I like the background in general.
Edit: I also added a darker purple colour and a darker blue colour in various places, particularly to make the top doorway more visible. Oh, and I added some grass around the edge of the cliff.
Title: Re: Wizard's Tower BG
Post by: Misj' on Mon 04/05/2009 20:39:36
Quote from: IndieBoy on Mon 04/05/2009 12:49:16Any suggestions welcome ;D

I'll try to keep my remarks general and independent of the style used. Most of what I'll say should work for any style. So before I start I would advise you to take a look at this post for the use of colour and contrast (http://www.adventuregamestudio.co.uk/yabb/index.php?topic=37391.msg492337#msg492337), and most of Loominous's comments and edits in that thread.

The main problem is that the use of colour and contrast in this piece doesn't provide focus to the viewer, and - hence - fails to tell the story in the best way.

Ok, so there's a few things I had to consider when looking at this piece:
1. It's a night-scene. This both creates a number of opportunities and challenges.
2. The main element of the scene is the wizard's tower...although not necessarily the entire tower.
3. There are two layers in the image.

ad1. The advantage of a night-scene is of course that we can use local areas that are lit more than others to direct the viewer. The disadvantage of a night-scene is that the moon itself is very bright and will distract the viewer. To solve this one can either choose not to show the moon at all (as done in many of the night-scenes in Monkey Island 3), alternatively, the moon can be positioned such that it directs the viewer to the area of interest (done is most of the Monkey Island 3 night-scenes where the moon is actually present).

ad2. In this piece I imagined the wizard to be working in the highest room of the tower. To present this idea to the viewer (and to take advantage of the night) one can choose to add shadows and highlight - thus darkening the overall image - and add some lights behind the door and window of the highest room of the tower. Because this adds an extra source of light the eye of the viewer is drawn to this area.

ad3. Since the front-layer is more important than the back-layer (where the village is) you might want to increase the contrast between those layers to direct the viewer towards the area of the tower. Also, a third layer (and possibly fourth in the back) might be added to add some additional depth.

I did a very quick shading-and-highlighting (I didn't change any of the flat colours with the exception of the moon and the clouds (http://www.2dadventure.com/ags/wizbgibcomp_Clouds2.png), which I felt didn't fully work in the original piece):
(http://www.2dadventure.com/ags/wizbgibcomp_recoloured.png)

There are several things wrong in this edit, and I could have made the focus better, but it gives an overall impression of where one might go. Of course I coloured it in a different-than-the-original style, but it was just to give a quick impression.

Misj'
Title: Re: Wizard's Tower BG
Post by: matt on Tue 05/05/2009 11:14:27
I am rubbish at backgrounds but i love it. It is great if you want a cartoony effect. The only thing that can really be improved is the shadowing
Title: Re: Wizard's Tower BG
Post by: IndieBoy on Wed 06/05/2009 00:44:08
Thanks, Mr Matti, Mr Flibble, Misj' and Matt.

I'm still working on it, but here is where I am tonight:

(http://www.2dadventure.com/ags/wizbg2.png)

Totally re-done the shading on the tower, which I think is a bit more correct. I'm planning to add some sort of texture to the walls as they are just flat colours at the moment. I sorted the windows and doors (thanks MrFibble, I knew they didn't look right for some reason), added some new styled windows to mix it up a little. Also worked on the ground a little. What you guys think of some of the dithering-esk things? Normally I steer clear of dithering but I quite like the effect. Unless you think I shouldn't mix and match shading techniques.

Still to do is the foreground and trying to make the whole subject a little less flat.

Also thanks Misj' for the link. I understand what you are saying but I'm not totally convinced that having to do a spotlight esk effect whenever I want the play to go somewhere is the right thing to do. Although I understand that I need to make the tower a little more detached from the foreground. However I thought I was giving that impression already with the contrast in the amount of detail.

Stilll, I've got a lot to learn and to play around with.

Keep the suggestions coming guys! I really apprieciate them ;D

(I wonder if I will get a comment by someone that doesn't have an "M" at the start of thier name)
Title: Re: Wizard's Tower BG
Post by: Sephiroth on Wed 06/05/2009 16:07:32
I think nobody mentioned this, but it could be intresting to place the tower a bit more on the left, and have the door face right to have a larger walkable area in front of it because there isn't much space to play arround. Would be neat if you're going to use it in a game.

I like the cartoony feel and the twisted tower style, made me think of that old cartoon The Sword in the Stone (http://img2.listal.com/image/5119/600full-the-sword-in-the-stone-poster.jpg) :)
Title: Re: Wizard's Tower BG
Post by: Mr Flibble on Wed 06/05/2009 17:48:25
Already this is a lot better, the fixed shading alone really does a lot for it. I particularly like the roof. And the erratic window shapes are a nice touch too. The dithering looks good too! I like what you've done with this.
Title: Re: Wizard's Tower BG
Post by: Misj' on Wed 06/05/2009 21:30:32
Quote from: IndieBoy on Wed 06/05/2009 00:44:08Although I understand that I need to make the tower a little more detached from the foreground. However I thought I was giving that impression already with the contrast in the amount of detail.
While contrast is not the only way to direct the eye (detail by the way isn't a major player in directing the eye...colour (cool, warm), contrast, saturation (and even to a degree overall shapes) play a much bigger role), it's certainly an important factor to consider. Also, it's relatively easy to check...simply by making a greyscale version of the image. And if you analyse the grey versions below you will easily see a number of problem area's:
1. In the original image the clouds have a high contrast to the background (much higher than that of the tower as you can see in the greyscale image below). Consequently, they compete for our attention, and direct the viewer towards the 'empty' sky which is not the major point of the story here. Because they are far brighter than the tower, the tower itself looses.
2. The contrast between the grass in the front and the hills in the back is nice.
3. The contrast between the tower and the sky - even without the clouds - is quite low.

(http://www.2dadventure.com/ags/wizbg2-Grey.png)

(http://www.2dadventure.com/ags/wizbg2-Grey-noClouds.png)

(http://www.2dadventure.com/ags/wizbg2-Grey-noClouds-moreContrast.png)

You can easily see that in the third version where I've removed the clouds (merely to exemplify their effect on the image) and made the tower itself brighter, the eye shifts towards the area of interest. Of course this contrast is not realistic by any means, but it is in service of the story.

Misj'

Ps. I like this image by Loominous (http://www.adventuregamestudio.co.uk/yabb/index.php?topic=35447.msg466124#msg466124) as a nice example of a night-scene where contrast and warm/cold-colours are used to direct the viewer to interesting/important parts of the story.

Pps. Of course I didn't intent the previous post to convince you to use spotlights (particularly not in the quick, dirty, and terrible way I did it ;) ), but just to give a possible suggestion as to how to direct the viewer. In the end it doesn't matter how you do it, but the goal is to take the viewer by the hand and present the story to him (by directing him through the image).
Title: Re: Wizard's Tower BG
Post by: IndieBoy on Tue 12/05/2009 21:51:11
Ok well I think I've been playing around with this background enough, I need to move on and work on something else. So here is where I'm going to leave it at.
(http://www.2dadventure.com/ags/wizbg3.png)

The changes made:

Title: Re: Wizard's Tower BG
Post by: Anian on Tue 12/05/2009 22:27:52
I'm aware that the land on the left is in the background, but isn't it a bit too dark (or at least could be more light in some spots) in contrast to how the tower and the grass beneath it is bright?
Those are some cool clouds but I think the two lower ones are a bit too in-line, they aren't exactly on the same horizontal line but they are close enough to seem that way, thus looking less random than they should be IMO.

All other things that I noticed are more style connected and I would do maybe some other way, but that's not of any technical nature, just different styles. Sorry, to pick those things when you're done. Even without corrections I like this bg and the bird wizard.
Title: Re: Wizard's Tower BG
Post by: Snake on Tue 12/05/2009 22:44:10
Indie, boy, I love it!

Personally, on an un-technical side, I liked the clouds better the original way. They looked golden and I don't know... it made me want to get lost in there and stare at the image all day. Maybe if you just moved them a little further away from the castle and eliminated the cloud that is most hidden. I really don't believe they take anything way from the scene. They definately added to the atmosphere, and atmosphere is what I like best.

And don't forget to make the grass on the right-most part of the area more "grassy". It's still a flat line.

Great work!