Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: xenogia on Tue 16/02/2010 01:45:35

Title: Interface Mock Up
Post by: xenogia on Tue 16/02/2010 01:45:35
Hi Guys,

For my game being a noir-sh esque game.  I'm am trying to figure what type of texture I would go for the interface.  As you can see below I am using a grungy type texture.  Is there anything else I could to spruce it up.

(http://pic.leech.it/i/b6506/853a913mockup.jpg)

As you can see this an FMV game, and I was thinking of going something like the Gabriel Knights 2 interface.

NOTE: This is just a mock up picture, it a 3rd-person game also.
Title: Re: Interface Mock Up
Post by: Shane 'ProgZmax' Stevens on Tue 16/02/2010 06:43:46
Well aside from incorporating the interface into area you could add cracks, a design that goes around the rectangle, and you can make it a bit more visually interesting by adding some color.  What I've done here are two quick photoshop examples using a foreground layer and adjusting the photo filter setting while tweaking the blending type between Normal and Multiply.

This keeps the relative brightness down while adding a bit of color to the design.

(http://i485.photobucket.com/albums/rr218/ProgZmax/testpanel.png)


This makes the image brighter but also more varied. 
(http://i485.photobucket.com/albums/rr218/ProgZmax/testpanel2.png)


The color could be anything you like but I would tend to stick to red or blue tones for a mystery.  The grey would actually work if the entire game were black and white, but as it stands the lack of color seems a bit out of place with the photo realistic backgrounds.
Title: Re: Interface Mock Up
Post by: xenogia on Tue 16/02/2010 07:22:30
Cheers ProgZ, i'll definetly take into consideration :)
Title: Re: Interface Mock Up
Post by: Ali on Tue 16/02/2010 11:19:02
I'd suggest you don't use a textured GUI. Just using black bars to create a letterbox effect will make your photographic backdrops nicely cinematic. I'd be wary of imitating GKII's visual style because I didn't find it to be very effective. As a player, I definitely would want to use a Sierra-style GUI in a game like this.

A sparse GUI with inventory items / menu options that appear when the cursor moves over them might work very nicely. I also think there's more you can do with the photographic source to create a noir-like mood. This is a quick mockup showing reduced saturation, colder colours, higher contrast, depth of field and some rough shading.

(http://www.2dadventure.com/ags/fmv_mockup.png)
Title: Re: Interface Mock Up
Post by: xenogia on Tue 16/02/2010 11:48:28
Wow that is truly impressive Ali, I definetly like that :)

I tried to do what you did, but nowhere near as good.  I'm not sure what settings you used.  But I definetly made the image a little moodier and darker.

(http://pic.leech.it/i/3939f/dadc3ca5mockup.png)

or there is this one.

(http://pic.leech.it/i/4d9fc/4877672mockup2.png)
Title: Re: Interface Mock Up
Post by: GarageGothic on Tue 16/02/2010 15:51:05
Love your edit, Ali. Reminds me of the X-Files game.

Xenogia, I think the first version has too little contrast - the second one is looking better, but you could adjust the saturation depending on the atmosphere you want to convey (for instance - is this the player's apartment and supposed to be a homey place, then the colors could be brighter, but if the player is rummaging through someone else's stuff, and should feel suspense, this is a good style).
Title: Re: Interface Mock Up
Post by: Jakerpot on Tue 16/02/2010 16:08:49
Ali edit is the best one, i think. Your 2 ones are too dark/black-white.
Title: Re: Interface Mock Up
Post by: Ali on Tue 16/02/2010 22:44:33
Your versions show definite improvements. The first is so desaturated that you might as well make it black and white - that way the reds wouldn't have that pinkish tone. The second has better tone, but as GG observes it may be too intense for some purposes.

I'm afraid I didn't save my version. I had a go at re-creating it to take you through the steps I used in case you want to try to retain a bit more colour, like I did. Here is the .PSD and an action set so you can take a look at the changes I made:

http://www.2dadventure.com/ags/Mockup.zip

I hope that's useful!
Title: Re: Interface Mock Up
Post by: xenogia on Tue 16/02/2010 22:55:33
Thanks Ali, I really appreciate your help.

EDIT: I thought maybe the action scripts might work in GIMP but they don't.  Tis a shame.
Title: Re: Interface Mock Up
Post by: Ali on Wed 17/02/2010 17:09:16
Well, here is a screenshot of the settings (possibly a bit useless to you):
(http://www.2dadventure.com/ags/mockup_notes.GIF)

As you can see, I dropped the saturation, then the gamma, and then I increased blue, green to a lesser extent and lowered red. I imagine you followed the same sequence, but I thought I'd post in case you were interested.
Title: Re: Interface Mock Up
Post by: Haddas on Wed 17/02/2010 21:17:28
Would it be possible to add some noise to the TV?
Title: Re: Interface Mock Up
Post by: xenogia on Wed 17/02/2010 22:27:10
Quote from: Haddas on Wed 17/02/2010 21:17:28
Would it be possible to add some noise to the TV?

Haddas already done that, I have some footage of 8mm film grain, which is over the top, though highly transparent.
Title: Re: Interface Mock Up
Post by: Haddas on Thu 18/02/2010 01:41:29
Goodie! what about something like this?

(http://img.photobucket.com/albums/v86/Haddas/crappydoo.gif)


Not like, for this particular scene but for something else that might work. Security cam related stuff.
Title: Re: Interface Mock Up
Post by: xenogia on Thu 18/02/2010 01:55:52
Quote from: Haddas on Thu 18/02/2010 01:41:29
Goodie! what about something like this?

(http://img.photobucket.com/albums/v86/Haddas/crappydoo.gif)


Not like, for this particular scene but for something else that might work. Security cam related stuff.

That's pretty grand could I get a copy of that animation?
Title: Re: Interface Mock Up
Post by: xenogia on Thu 18/02/2010 01:57:09
Actually quickly, just so you know this is how the scene actually looks.

(http://pic.leech.it/i/ebb57/c0a410escrnshot.png)
Title: Re: Interface Mock Up
Post by: Ryan Timothy B on Thu 18/02/2010 04:25:39
Haddas: The viewing of a tv screen camera effect is a great idea and simple to do.

Xenogia: Although I do like the new colors you have, I still prefer Ali's brighter colors.  They help separate everything making it easier to focus on individual things like the chair and tv for instance.  Perhaps a crossbreed between yours and Ali's if you really want to go for that faded noir look.
Title: Re: Interface Mock Up
Post by: Haddas on Sat 20/02/2010 11:22:22
The animation was made in photoshop.

I drew this, highlighted it and defined this as a pattern.
(http://img.photobucket.com/albums/v86/Haddas/partuno.gif)

(this one's enlarged for viewing ease though, and you can vary the width of the stripes and everything yourself. just experiment)


Then I created a new layer and filled it with the pattern.
(http://img.photobucket.com/albums/v86/Haddas/partdeux.gif)

Then I changed the hue and saturation (set it to colorize) and adjusted it to a greenish tint. Set the layer blend mode to whatever suits best for the particular picture.
(http://img.photobucket.com/albums/v86/Haddas/parttres.gif)


To animate, just move the layer around a little for each frame!