Tuesday, April 19, 2011

Methods to the Madness - User Interface

Part 2 of the "Methods to the Madness" series of posts will deal with User Interface. A good user interface is essential to any good gaming experience. It must be clear and concise to fit the purpose of the game. Of course the first thing you should do is decide if your game even needs one - sometimes the best UI is none at all! But when you do, everything should be clear and non-distracting.

Creating text in LBP is a bit of a chore. In Essence of Madness I created an entirely new curvy font set to replace the pixelated letters in Corridors. But how? 

Hamster Tubes. Yes, Hamster tubes!

They align to the big grid perfectly, and I just shaped all my letters out of hamster tubes and then stenciled them out with cardboard - making for perfectly aligned curves. To do that just overlap the shape with any solid material and it will embed the letter. You can then subtract this stencil from another slab of material to create a character in any material you desire! Everyone has their own methods and there are plenty of fonts available in the community, but you know me - I like to do everything myself. :)

After text, the symbols and colors are very important.  It's usually best to stick to a tight theme of colors within each user interface.  You'll find in Essence I like to stick to shades of blue and silver to fit the cold depths of space motif, but use green and red for the health display.

In Corridors of Madness I used the game's Counter to give a visual cue for the health, but in Essence I felt I had to go a step beyond. The health display became an EKG.

To create the effect I used a series of timers set to "Start count down" hooked up to cross sections of an EKG line display. With these timers on a looping sequencer, it means it will just fade between cross sections giving the effect of the moving line. 

Once the health drops beyond a certain threshold, I activate a different series of these to turn the line red and flash the word DANGER.  The sequencer is also faster in this mode.

 One key thing to keep in mind when designing UIs is that holographic material works by adding its color to what's behind it.  That means if you put a black sticker on it, it will be invisble. This means you can create sprites by using the color black as a mask. All the cursor graphics use this in Essence. 

Another big element of a UI is being able to move through different gameplay and/or menu screen. I personally like to achieve this by using multiple controllinators and activating them on demand.

If you put a wireless controllinator on a microchip and then deactivate the chip the controllinator will not respond to input. So you can use to separate all your submenus and gameplay types instead of using millions of AND gates! I just wire the outputs of a selector into these.

I hope this helps give people some ideas for constructing the UIs in their LBP2 games!

1 comment:

Nick9001 said...

Very helpful! Thanks very much. :)