The <box> object draws a coloured rectangle. It saves you from creating an image for a plain fill, a banner or a gradient, and stays crisp at every resolution.
<box>was introduced in Recalbox 10.
This object has no predefined name: pick your own and add extra="true".
| Property | Type | Purpose |
|---|---|---|
pos |
Pair | Object position. See common properties. |
size |
Pair | Object size. |
origin |
Pair | Point of the object that pos refers to. |
rotation |
Float | Rotation angle in degrees, clockwise when positive. |
rotationOrigin |
Pair | Point the rotation happens around. Defaults to 0.5 0.5. |
color |
Colour | Colour applied to the object. |
colorTop |
Colour | Top edge colour, for a gradient. |
colorBottom |
Colour | Bottom edge colour, for a gradient. |
colorLeft |
Colour | Left edge colour, for a gradient. |
colorRight |
Colour | Right edge colour, for a gradient. |
colorTopLeft |
Colour | Top left corner colour, for a gradient. |
colorTopRight |
Colour | Top right corner colour, for a gradient. |
colorBottomLeft |
Colour | Bottom left corner colour, for a gradient. |
colorBottomRight |
Colour | Bottom right corner colour, for a gradient. |
zIndex |
Float | Drawing order, from lowest to highest. |
disabled |
Boolean | Hides the object entirely. |
<box name="bottomBanner" extra="true" pos="0 0.85" size="1 0.15" color="000000A0" zIndex="8" />
<box name="gradient" extra="true" pos="0 0" size="1 0.3" colorTop="000000FF" colorBottom="00000000" zIndex="6" />
If you only set color, the rectangle is a plain fill. The other colour properties build a gradient: colorTop and colorBottom for a vertical gradient, colorLeft and colorRight for a horizontal one, and the four corner colorXXX for a free-form gradient.
As everywhere, the alpha channel lives in the last two characters: 000000A0 is a two-thirds opaque black, 00000000 is fully transparent — which lets a gradient fade out smoothly.