Super Selector lets you easily create menus and selection screens for inventories, levels, and characters.
I. Choosing a Selector
The system has three different types of selectors to choose from: Linear, Radial, and Grid. The Linear Selector allows you to select items in a straight line, and the Radial Selector allows you to select items in a circle or a sphere. The Grid Selector lets you select in a table or grid-like pattern. Each of these selectors is a game object with a selector script attached to it, and each one has a set of customization options which can be easily adjusted using the Inspector window. Many examples are included with the system which can serve as starting points for your own projects. If you wish to start “from scratch”, there are also prefabs available in the Selectors folder which you can drag and drop into your scene.
II. Adding Items
Linear and Radial selector game objects have a child object called Items. All items (buttons, sprites, models, etc.) should be children of the Items object, so simply drag and drop the items onto the Items object in the Hierarchy window. The Grid Selector game object does not have an Items child, so drop the items directly on the selector game object in the Hierarchy.
III. Customizing the Selector
There are some minor variations in the customization options for each selector, but they all have the same four basic options: Input Options, Selector Options, Selected Item Attributes, and Events.
A. Input Options — This section contains the available inputs. The selector can be controlled with a mouse, finger (touch), and/or controller/keyboard. Simply check the appropriate box within the script component in the Inspector.
B. Selector Options — This is the primary section where most of the customization options are found.
- 2D (Linear and Radial only) — Check this box if you are using the selector in a 2D scene, particularly if you are using a Canvas. The Grid Selector always uses a Canvas.
- Selection Axis (Linear and Radial only) — Choose the axis (Horizontal or Vertical) on which items are selected. Horizontal means selecting items with left and right input, and Vertical means selecting items with up and down input.
- Flipped Controls — By default, the selector will select items in the same direction of your selection. Check this box to select items in the opposite direction.
- Spacing — Set the spacing between items (in degrees for Radial Selector).
- Selector Speed —Choose how fast the selector will slide to the next item.
- Loop Items — Check this box to select items in a loop.
- Loop to Next Row (Grid only) — If this box is checked, the selector will select the first item in the next row after the selector reaches the end of the current row. Note: This requires Loop Items to be true (checked) and Slide Items to be false (unchecked).
- Loop to Next Column (Grid only) —If this box is checked, the selector will select the first item in the next column after the selector reaches the end of the current column. Note: This requires Loop Items to be true (checked) and Slide Items to be false (unchecked).
- Slide Items — Check this box to select the next item by sliding through the items. This must be checked for visibility settings to take effect.
- Scroll On Hold — Check this box to scroll the items when input is held down.
- Visibility (Linear and Radial only) — Set the number of items in addition to the selected item that should be visible on the screen. The selected item will always be visible. Note: Slide Items must be true (checked).
- Horizontal Visibility (Grid only) — Set the number of items in addition to the selected item that should be visible on the horizontal axis. Note: Slide Items must be true (checked).
- Vertical Visibility (Grid only) — Set the number of items in addition to the selected item that should be visible on the vertical axis. Note: Slide Items must be true (checked).
- Visibility Anchor (Linear and Radial only) — Set the direction of item visibility starting from the selected item. For example, the Left anchor will only display items to the left of the selected item. Note: Slide Items must be true (checked).
- Horizontal Visibility Anchor (Grid only) — Set the direction of item visibility on the horizontal axis starting from the selected item. Note: Slide Items must be true (checked).
- Vertical Visibility Anchor (Grid only) — Set the direction of item visibility on the vertical axis starting from the selected item. Note: Slide Items must be true (checked).
- Rotate Horizontally (Linear and Radial only) — Sets the yaw angle of the selector in degrees. Note: Does not change the rotation of the individual items.
- Rotate Vertically (Linear and Radial only) — Sets the pitch angle of the selector in degrees. Note: Does not change the rotation of the individual items.
C. Selected Item Attributes —These options are related to selected items.
- Selected Item Index — Set the index of the item that should be the starting selected item. If Slide Items is true (checked), selected items will slide to the position of this item.
- Max Scale — Set the maximum scale for selected items.
- Min Scale — Set the minimum scale for unselected items.
D. Events — Events allow you to add custom functionality to the selector with your own scripts. See examples for the Grid Selector to see how events work with the system.
- On Select — Add methods here that will get called whenever an item is selected. This event is useful for playing animations or setting component variables.
- On Deselect — Add methods here that will get called whenever an item is deselected. This event is useful for stopping animations or resetting component variables.
III. Selector Methods
The selector scripts contain public methods which may be called from your own scripts. To use these methods, make sure to use the namespace SuperSelector. See examples for the Grid Selector.
- GetItemCount — Returns the number of items in the selector.
- GetSelectedItem — Returns the currently selected item game object.
- GetPriorSelectedItem — Returns the previously selected item game object.
- MoveTo — Moves the selector to the specified item or index.
- MoveToBeginning — Moves the selector to the first item.
- MoveToEnd — Moves the selector to the last item.