Skip to content

Intro to Option Groups

An option group is a type of multiple option widget that shows the relevant option next to a sprite, typically a circle. These can be thought of as the equivalent to checkboxes but with multiple options, and are commonly used in UIs.

Constructor

The constructor is UIOptionGroup and its signature is the following:

UIOptionGroup(_id, _x, _y, _option_array, _sprite, _initial_idx=-1, _relative_to=UI_DEFAULT_ANCHOR_POINT)
  • id is the string ID.
  • x and y are the offsets with respect to the anchor point. Note that, as directed in the Fundamentals page, your sprites should have its origin point set to top left, to allow for correct positioning in gooey.
  • option_array is the array of strings containing the possible values to choose from.
  • sprite is the sprite to use for rendering next to each option. By default, gooey assumes a single sprite with two (or more) frames - it will set the "unselected" state to frame 0 and the "selected" state to frame 1.
  • initial_idx is the initially selected index. If -1 or omitted, the widget will not have any option selected when created.
  • relative_to is the anchor point, as usual from the UI_RELATIVE_TO enum.

Getting the index

You can get the currently selected index with getIndex (or set it with the corresponding setter). Also, you can get or set the option string arrays at runtime (e.g. setOptionArrayUnselected).

Changing the orientation

The option group is rendered vertically by default - this is, there will be options displayed one below the other. You can change this to horizontal by using the setVertical method.

Changing the sprites and images

You can use the setters to change sprites and images for selected, unselected and mouseover. In the case of this widget, these represent the image depicted to the left of each option.

Example

Let's create a simple option group, to select a difficulty level in a game. Let's define four difficulty levels: Easy, Medium, Hard and Nightmare. We can set up this quickly using the included Kenney's UI pack. I added one frame to the circle sprite and created a new, lighter one, to showcase mouseover, and I'm using setImageMouseover to set it up. I set up a vertical instance variable that defines if the group is vertical or not.

1
2
3
4
5
6
var _panel = new UIPanel("TestPanel", 0, 0, 400, 300, blue_panel, UI_RELATIVE_TO.MIDDLE_CENTER);
_panel.setTitle("Choose your difficulty").setImageAlpha(0.7);
var _opts = new UIOptionGroup("OptionGroup", 0, 0, ["Easy", "Medium", "Hard", "Nightmare"], grey_circle,,UI_RELATIVE_TO.MIDDLE_CENTER);
_opts.setSpriteSelected(blue_boxTick).setImageMouseover(1);
_opts.setVertical(self.vertical);
_panel.add(_opts);

You can take a look at the resulting interactive example here. Use Space to toggle between horizontal and vertical option group, where I'm changing the vertical property with setVertical on press:

Not working?

If interaction is not working, click on the black bar just above the game canvas, to activate the iframe element - otherwise keys are processed by the site itself.