Thursday, November 18, 2010

LittleBigPlanet 2 - Basic Menu Tutorial 1.

(Check out the youtube video here)
(On Tap Function, Signal Inverter)

So let's make some fancy menus for custom options and other doodads! I've designed multiple methods for this and I'm going to

present what I think are easiest to visualize.

To make a menu you pretty much just need 4 basic components:

1) Visual cue to the items you can select
2) Some sort of selection indicator. Either a little dot or overlay, or even something that follows triggered magnetic keys.
3) A selector or series of selectors
4) A way to cycle through the inputs.

First, draw up your menu's layout. Also include what will be the indicators that can either light up, become emitted, etc.

Experiment! Use physical lights in LBP, use sackbot animations, the sky's the limit.

Typically people use a controllinator to handle UIs. To perform a simple, single column UI list you can use a single selector set

the number of options in the list, and wire each selector output to your indicators in order.

You can wire a directional output (such as the left analog stick or D-Pad) to the cycle of the selector. A positive value will

cycle forwards, a negative value will cycle backwards. If you feel the input isn't cooperating in the order you'd like, you can

invert the signal (See SIGNAL INVERTER blog post).

Using a series of AND gates, fed by selector outputs and your method of selection (For example, wiring the X output of the

controllinator into the other part) you can then fire off functions for each individual option. Maybe begin a cut scene, change

your sackbot's animation, play a fart sound - anything!

If you feel single column menus are too simple, try out one with multiple columns! A method I find that's easy to follow is to use

one selector for the rows, and one for the columns - So if you have 4 rows by 2 columns :

SELECTOR A is set to 4 slots - Cycle through this with your UP/DOWN methods
SELECTOR B is set to 2 slots - Cycle through this with your LEFT/RIGHT methods.

I also use a grid of AND gates to combine them, so in this case we'd have a grid of 8 AND gates and just go in lines adding the

selector outputs to the AND gate inputs.

It is these AND gates that indicate your selection. From here on you can continue the single column menu's approach, use AND gates

with your grid AND gates, and your confirmation method, to fire off your "Do Option" function for each choice.

Simple... but complicated. Enjoy and make your own UIs! Remember there are multiple methods to doing anything in engineering, you

might find methods of doing this that you find easier or more efficient - Good! I can't wait to see what you all do.

No comments: