Rigonix Game UI Builder

Buttons

Change a button's text, icon, colours and shape, and make it do something.

Buttons are the heart of every menu. This page covers how to change a button's words, icon, colours and shape, and how to make it do something.

There are two kinds of button in the library, under Buttons:

  • Glossy Game Button: a ready-styled button with a shiny gradient, border and icon. Change it entirely with settings.
  • Image Button: a button made from your own artwork. See Your own images and skins.

Change the text

The quickest way: double-click the button on the canvas, type, and press Enter.

Or select it and use Properties → Text → Button Text. Under the text box you can make it bold, change its size and font, set the colour, and choose ALL CAPS.

Add or change the icon

  1. Select the button.
  2. In Properties, scroll to Icon and click Choose icon… (or Change icon… if it already has one).
  3. Search for an icon or pick one, for example play, cart or gear.

Below the icon you can set its colour, size, which side of the text it sits on, the gap from the text, and fine-tune its position. To remove an icon, open the picker and choose the empty first tile.

Change colours and shape

Scroll to Colors:

  • Background: the main colour.
  • Bottom Color: the bottom of the shiny gradient. Make it a darker shade of the background for a 3D look.
  • Border Color: the outline.

Under Dimensions, Border Radius makes the corners rounder (a high number gives a pill shape) and Border Width makes the outline thicker.

Tip: To give every button in the project the same corners or font, set them once in the Project theme instead of changing each button.

Make it do something

Buttons do nothing until you give them an action.

  1. Select the button and open the Actions tab.
  2. Click Add Interaction. The trigger is On Click.
  3. Choose what happens, for example Navigate to another screen, Open Popup, or Set Variable.

Press Play to try it. Actions explains every option.

Hover and pressed looks

Buttons already grow a little on hover and shrink when pressed. To see or change these looks, open the States tab. See Hover, pressed and disabled looks.

A disabled button

Turn on Disabled under Settings to grey the button out and stop it from being clicked, for example a "Buy" button the player can't afford yet. Actions can enable and disable buttons while the game runs.

Sounds

The top of the Actions tab sets the button's Click, Hover, Press and Release sounds. Leave them on Default to use the project's sounds. See UI sounds.