Rigonix Game UI Builder

Panels and icons

Boxes behind your content, small pictures, and grouping them.

Panels are the boxes behind your content: cards, windows, backgrounds for a group of buttons. Icons are small pictures like a heart, a coin or a gear.

Panels

Add a Panel from the library under Panels. Then, in Properties:

  • Colors: the Background and Border Color. Lower the opacity for a see-through glass look.
  • Dimensions: Border Width, Border Radius (round corners) and Padding.
  • Settings: overall Opacity, Backdrop Blur (blurs whatever is behind the panel) and Drop Shadow.

Tip: Put the panel behind its buttons. Add it first, or right-click it in Layers and choose Send to Back.

Icons

Add an Icon from the library under Icons, then click Choose icon… in Properties and pick one. You can change its colour and size.

Icons can also sit inside other components: buttons, toggles, bars and labels all have an Icon section.

The icon list comes from Rigonix's icon library. To use your own picture instead, upload it under Images (see Your own images and skins).

Image frame

An Image Frame shows a picture inside layered outlines: a profile picture, a hero portrait, a reward icon.

  • Picture: one of your images, or an icon from the library, with Fit (fill or fit inside), Picture Padding and Picture Tint.
  • Shape: rounded (with Corner Radius), circle or square.
  • Outlines: an outer Outline, a Frame with a top-to-bottom gradient, and a thin Inner Ring. Set any width to 0 to leave it out.
  • Background, Gloss (a shine over the picture), Glow and Frame Art (your own frame picture on top).

Player card

A Player Card (under Panels) shows the player's avatar, name, level badge and XP bar on a game panel. Every part has its own settings: the avatar's outline and frame, the name's font and outline, the star badge or your own badge icon, the bar's colours and the panel's colours, depth and gloss. Bind Player Name, Level and XP to variables to show the real player.

Grouping a panel with its content

A card made of a panel, a title and two buttons is easier to handle as one piece. Select them all, then click Group Selected in the Layers panel. Now you can move, show or hide them together, or turn the group into a popup.