Thursday, November 18, 2010

LittleBigPlanet 2 - Cursor Based UI - Basic Menu Tutorial 2

 Check out the youtube video Here:

So you want to improve the technology of your menus and use some of that new-fangled point and click functionality? No problem!

Creating cursor based UIs is actually a little more intuitive than the digital counterparts. First thing we'll need is your cursor

- this can be any kind of visual, from a cross-hair, to an arrow, a finger, anything! The visual aspect is insignificant - it's the

HOTSPOT we care about!

The hotspot can be a small piece of invisible hologram material - perhaps a tiny circle - that will act as the user's cursor

position, and will interact with clickable objects. Be sure to scale the thickness of this to match the objects you want to test

against - it MUST intersect them!

Glue your hotspot to your cursor and place a microchip on it. If you'd like to keep your cursor level at all times, you could put a

gyroscope there to make sure it stays put. Also put an advanced mover there - set speed to your desired cursor speed. I also like

to set the acceleration to 100% just to keep it constant, and also the deceleration to 100% to make sure it stops when you want it

to. Alternatively, you can use a setup with some NOT gates on your desired analog input and hook those up to anti-gravity object tweaks

with dampening set to 100% - That makes absolute sure!

At this point you probably gathered we want to wire our movement input (eg, left analog stick) to the appropriate left/right and

up/down speed inputs of the advanced mover. That's great! we have a cursor that moves around! But it doesn't do anything...

What I like to do, as shown in the video, is put some tags down. Tags are an extremely powerful feature of LBP2 and should not be

taken for granted. For things like UI I like to use white tags, so put a white tag on your cursor hotspot's microchip and name it

MOUSEOVER. You guessed it - Anything that now intersects with the hotspot can detect this tag and perform a "OnMouseOver" style

function. For mouse click, put down another white tag but name it MOUSECLICK - you can activate this however you'd like to register

a click, eg. the output of X from the controllinator. Depending on your intentions, you could also implement an ON TAP (see the

blog post) function if you'd like to differentiate between rapid clicks and/or holding the mouse button down.

Now that we have a fully functional cursor, let's make something to click on! Everything clickable only needs to implement means to

read MOUSEOVER and/or MOUSECLICK. Implement? MOUSEOVER? This sounds like real programming! Shablago!

But it truly is. This is an object oriented style approach, where each object in the world has its own role and methods. But

anyway, all we care about is - YAY, BUTTONS. First you need to make sure your object - or your object's hitbox (an invisible piece

of hologram you can use to handle intersections) - contains the appropriate IMPACT SENSOR switches.

For MOUSEOVER, make sure your impact sensor is set to INCLUDE TOUCHING - YES, and REQUIRE TAG - YES - White, MOUSEOVER. Now this

can do whatever you'd like. Perhaps you have a sackbot, and you'd like to now loop an animation for "YAY PICK ME". Or maybe it's a

button and you want it to glow. YAY, BUTTONS.

That's great, but how about on mouse click? Same deal! Make an impact sensor set to INCLUDE TOUCHING - YES, REQUIRE TAG - YES -

White, MOUSECLICK. And now this can be wired to do amazing things. Like start a game. GNARLY.

There can be a lot more you can do with mouse cursors. For example, clicking and dragging objects. Maybe picking something up and rotating it with the SIXAXIS, differentiating between two types of cursor clicks, the sky's the limit. That all goes beyond the

scope of this tutorial and hopefully the basics have served you well.

No comments: