The panel component allows you to add configurable panels to your user interface. It typically serves as a container for other components, providing them with a background and border.
Name | Set the name of the Panel. Naming components is recommended: it helps you to identify the different inputs and outputs that appear on the UI node |
Copy/Paste Style | Copy the current properties to the UI Editor clipboard or paste the properties currently saved in the clipboard to this panel |
Color | Set the color of the panel. Select a color with an alpha smaller than 100 for transparent panels |
Shape | Set the shape of the panel from a list of preset shapes. In addition to a rectangular shape, you can turn the panel into an arrow, a hand with different gestures, or a phone. |
Roundness | Set the roundness of the panel's corners. Roundness value 0.0 results in sharp corners. *Only visible with shape set to Round Corners |
Border Width | Set the width of the panel's border *Only visible with shape set to Round Corners |
Border Color | Set the color of the panel's border *Only visible with shape set to Round Corners |
Image | Set an image to be the texture of the shape *Only visible with shape set to Round Corners |
Use Content Width or Height | Automatically set the width or height of the panel based on the size of components embedded within it |
Inputs and Outputs | Open the Inputs and Outputs menu to select the inputs that will be available in the User Interface Node for this panel. See below for details |
Auto Alignment | Automatically update the panel's alignment as it is moved around the canvas to the nearest alignment point |
Alignment | Set the screen region to align the panel with |
Width/Height | Set the Width & Height of the panel |
X/Y | Set the X & Y screen position relative to the set alignment point |
Visible | Set the panel's visibility * Note that invisible images will not be visible during gameplay but will remain visible in the UI Editor canvas |
Transition | Set how the panel should appear/disappear when it is made visible or invisible |
Rotation | Set the rotation of the panel |
Block Touches | Allow the panel to block touches of components or objects behind it |
Clip to Screen Bounds | Do not allow the panel to be clipped by the edge of the screen |
Panels only have inputs available - no outputs. Inputs can be used for sending data to the panel.
Edit which inputs are enabled by tapping the Inputs & Outputs image in the Properties menu.
Position X & Y | Input values to adjust the X or Y position of the panel |
Rotation | Input values to adjust the rotation of the panel |
↳ As Degrees | Use input value as degrees |
Scale | Input values to adjust the scale of the panel |
Opacity | Input values to adjust the opacity of the panel |
Colors | Input colors to change the colors of different parts of the panel |
Visible | Input values to adjust the visibility of the panel |
Collapsed | Make the panel invisible and adjust the position of the surrounding components to fill the empty space *Note: Only works if the panel is embedded in a vertical or horizontal layout |
Position from World Vector | Input a position vector to set the position of the panel in the game world |
Border Width | Input a value to set the width of the panel border |
Border Color | Input an index or color to set the color of the panel border |
Add Widget | Input for adding a widget to the panel |
Remove Widget | Input for removing a widget from the panle |
Widgets are collections of components that can be added or removed from panels and other layouts while your game is running.