View Full Version : Dynamic Menu, Grid, Gameboard Tutorial

03-15-2011, 07:36 PM
Dynamic Menu, Grid, Gameboard Tutorial (http://lbp.me/v/x35cyn)

I made this a few weeks ago but put off writing up a tutorial because of no good reason. If you have any problems with the level, let me know and I'll get it fixed.

As with most anything in LBP, there are a dozen ways to accomplish a given task and navigating a menu or grid is the same way. As one alternative, I've found a method using Anchors and a two-stage process to have quite a few advantages and wanted to share. It may not be ideal for all situations, but I think it's pretty easy to adapt to just about anything with a minimum of tweaking but is robust enough that once the setup is done it works pretty reliably.


I'm using some custom terms here which hopefully make following this a little more clear. This uses an "anchor" system which is to say there's a common tag at each potential grid location such that the cursor is always at the right spot for a given grid location. In keeping the number of labels to a minimum, the Anchor tag is commonly shared with every location so it's very easy to build your grid with copy/paste. Obviously, every grid is intended to do something or represent some menu choice so that would have to be dealt with by hand. But the actual construction of the grid is intended to be as painless as possible.


The "Cursor" is the visible hologram that the player controls around the grid. Wherever possible, the mechanics involved in error correction and advanced features are hidden from the player. The Cursor defaults to follow the nearest Anchor so that it stays in the proper location and doesn't drift out of position.


The next custom term is the use of a "Seeker". This is using a two-stage process which uses an invisible "Seeker" to determine if there's an available anchor for the visible Cursor to move toward. As a two stage process, this is helpful because it means the cursor won't move beyond the borders of the map and won't "bounce" off the edge in a very un-menu like way.

The Seeker's operation is fairly simple. It is emitted by the Cursor in the direction the player presses. At this point, it attempts to Follow an available Anchor within a grid-sized radius. If it detects an Anchor, it raises a tag which causes the Cursor to stop following its' current Anchor and instead follows the Seeker. Once the Seeker evaporates (due to a limited lifetime from the Emitter), the Cursor resumes following, only this time it follows the new Anchor.

If the Seeker fails to find an Anchor, it never raises the Tag so the Cursor doesn't move. This prevents the Cursor from making invalid moves and is done invisibly so the mechanism behind it all is transparent to the player. The response of the Cursor is satisfying and quick.


Because you're using a Seeker you can do some interesting things. You can make a hexagonal grid very easily as well as a reasonably effective circular menu. This is more complex as you need a Cursor which knows how to reorient itself but is still quite reasonable.


The Two Stage Anchor/Seeker method can be expanded to provide some additional behavior which is very useful. In a Zelda-style inventory menu, specific items have specific slots and until you have that item the slot is empty. Using the Anchor/Seeker approach you can skip over blank or otherwise unselectable sections by putting velocity to the emitted Seekers. As you fling the Seeker in the intended direction, the follow behavior will cause it to stop at the first available anchor in that direction. A blank space, provided either by not having an Anchor tag or by disabling the current Anchor, is skipped over automatically. If no anchors exist in that direction the Seeker will evaporate as it normally would. Enabling this new behavior is very easy as the Seeker is identical to what it was before and the only variation is in adding velocity to the Emitter.


In the kind of dynamic and irregular menu you'll find in a Zelda-style inventory, diagonals can be difficult because the next slot might not be at a direct 45 angle. If you provide a specialized Seeker set to follow in a 90 arc diagonally it can find any available anchor in the entire arc and react to a very dynamic menu.

Finally, by increasing the complexity slightly you can provide Wraparound capability, where moving the Cursor to a border will make it appear on the opposite side of the grid. This is accomplished by creating specialized Border chips in the same column and rows as your normal Anchors. If the Seeker lands on a Border, the Border will coordinate with the companion Border on the opposite side to Emit a new Seeker. This new Seeker will stop at the next available Anchor and the Cursor will move to the new location.


There are some notes and tweaks which are useful to know:
- Because it uses Anchors persistently, the Cursor is very sturdy and resistant to motion of the menu. As a demonstration of this I included The Most Chaotic Grid in History. I also added a gyroscope which helps to keep the Cursor oriented properly.
- For using velocity-driven Seekers, you will want to tweak the lifetime to ensure that the Seeker can stay active to fly the maximum width/length and remain long enough for the Cursor to arrive.
- Because of the sample window LBP provides, very high velocity Seekers can skip over a Tag before they can detect it so you'll want to balance the grid interval size, grid dimension, Seeker velocity, and Seeker Lifetime to make sure it can find Anchors where it needs to. If you have a very large grid with narrow intervals that require high lifetime relatively low, you may want to create a Destroyer so the delay in movement is only felt with large gaps but otherwise you have quick response.
- To make actions like Wraparound a little more clean you can temporarily make the Cursor invisible while traveling across the grid

The level is both copyable and includes Bubbles with useable examples. The only real tweakings required are targeting your Emitters to match your grid dimensions and, with the Wraparound Borders, targeting the opposing sides properly. Hopefully you may find this easy enough to apply so you spend less time worrying about making your grid work and more on making your creative stuff work. This is even strong enough to resist motion and other dynamics that I made The Most Chaotic Grid Imaginable. Enjoy!


03-15-2011, 07:48 PM
Very Useful. Thanks for the post