The Day After Dev Report #12 – A Handhold

This year my eye has been on the prize. And that prize is a functioning GUI. So instead of the usual discussion…

I have something. Finally. It’s terrifically unexciting for everyone but it means things are working. Kinda. Here it is:

An inauspicious start.

Yep. That plain-ish box in the top-left. All that work… for that?

The important thing is that things work. The mouse moves. Images are loaded and positioned. Not quite the right ones or in the right places (and there’s some funny dual operating system mouse pointer/game mouse pointer weirdness) but it’s something to work with.

Here I’m using a default look and feel that comes with CEGUI. It’s no good for what I want to do, but working on what I want is a lot of work. Invisible work, which is a step back from your perspective. But to help you, dear reader, I’ll talk about the design work I’ve been doing parallel to fixing small errors with this GUI milestone.

Design

At some point in the last year or so I decided that I want The Day After to look like a graphic novel. I don’t have to do any animation I don’t want to, so that makes my job easier. It means I have to put work into everything else, but that’s okay.

So to capture the graphic novel look, I have to do some searching around as to what that means. Firstly I was examining the concept art Alice drew for me. That’ll be my main style guide. If you look at something like the picture of The Cop, The Spy and The Hacker there’s a bunch of little stylistic flourishes.

Grunge texture, up close.
To vignette the scene a little, there’s grunge both on the edges and as a surface texture throughout. The detail here is greater than the line art, and usually greater than the shading and texture of the world, so it’s part of the artifact of the presentation than the scene itself, if that makes sense.

Implementing this grunge isn’t too hard – apply a general overlay to the entire scene. You have to worry about whether it’ll be applied to control elements like buttons and text (probably not), but you do these things in layers.

gui-2This next picture has a lot of elements to look at. The first thing to notice is line widths and straightness. On The Spy most of the lines are strong and taper based on the character’s shape. Background elements like the monitor and the poster have lines with varying thickness and shape. I figure Alice spent a lot of time on the characters and less on the background elements, but that’s fine. More detail and care on the characters brings the focus to them. Simplifying and being looser with the background elements keeps them there.

The lighting is interesting. In general the lighting is done with flat colours with careful choice on the colours. Apart from the monitor glow, you don’t get soft transitions in lighting, but there are are subtle colour choices in the light between, say, her chest and her arm. And her leg. Palettes are desaturated a little which gives them a more realistic look (compare with the same image, but with the saturation boosted – this looks a little more Golden Age explosion of primary colours). Shadows are rarely full-dark, even though you could certainly play with that for different scenes.

hushSo I’ve been looking very carefully at Alice’s work (both for me and some stuff she’s done for others). I’ve also had the chance to read one of my favourite Batman graphic novels again – Hush. The Day After has a very different style to it – it’s meant to be more realistic and introspective. Hush is fantastically stylized and the art is incredible. Ironically The Day After will be less detailed, whereas Hush pops with Jim Lee and Scott Williams’ detailed art. Then again, since The Day After is more subdued, there won’t be the body contortions like the infamous “Escher-spine to show off boobs and butts“.

What I’ll borrow is the little stylistic elements like how radio has its own speech bubble, Batman’s inner monologue is shaded blue and how they bookend episodes with a great full-page shot. The Day After would be too dark and moody if I don’t punch it up a little (maybe a 3 on the comic book scale). Something that’s probably very close to how I’d like it to look is the great webcomic My So-Called Secret Life. I’ll probably heavily borrow cues of how they do text and colouring. And try to make my own choices as well.

Of course these are all made by superb artists, and although Alice has done a superb job, I need to make the game look good with my own limited skills. I think I have an okay eye, but the implementation is tough. So now that the tools are starting to fall into place, I need to up my game in other areas. I’ll keep you posted on how I go.

The Short and Sweet

Recently completed tasks:

  • Ripped out some bad GUI data and used the new CEGUI styles.
  • Learnt how the Falagard system works.
  • Invested in a texture packer to begin getting my own GUI style working.
  • Read all of my graphic novels. Maybe fell in love with Catwoman. 😉

I’m currently working on:

  • Getting some basic design work done.
  • Fix certain UI programming.
  • Get a basic splash screen, main menu demo running.