All objects capable of visibility (image, gif, button, skin_3d, text, etc.) have the same layout properties and capabilities.
Position
Object position (x, y) works in the same way as other image programs, like Paint, Figma, or Photoshop. Positions start from the top left corner (0, 0); x axis moves objects to the right; y axis moves objects down. A single Minecraft map/block is 128x128 pixels.
The origin position (0, 0) of child objects is the top left corner of the parent object.
Size
Object size dimensions (width, height) can be defined as:
Pixels (size: 256 128)
Percentage/max, computes the size based on the parent/scene size. (size: '50% 30%') (size: max max)
Auto (for images and gifs, where you can get the size from file dimensions) (size: auto auto)
Alignment
All objects have alignment properties, that allow you to set positioning relative to the parent object, or the scene.
text1:
type: text
## x and y values that are used to offset the object
## for alignment it is usually desired to set the aligned axis to 0
position: 0 0
## horizontal alignment value (left, center, right)
alignment: center
## vertical alignment value (top, center, right)
vertical-alignment: top
text: 'This text is centered'
image1:
type: image
size: 128 128
## x and y values that are used to offset the object
## for alignment it is usually desired to set the aligned axis to 0
position: 0 0
## horizontal alignment value (left, center, right)
alignment: center
## vertical alignment value (top, center, right)
vertical-alignment: center
image:
name: 'image.png'
Centered child object
button1:
type: button
position: 0 0
size: 128 64
children:
## This text object will be centered inside of the button
text1:
type: pixel_text
## horizontal alignment value (left, center, right)
alignment: center
## vertical alignment value (top, center, right)
vertical-alignment: center
text: 'Centered'
color: white
font-scale: 1
on-click:
sendmsg:
type: send_message
message: 'You clicked this button!'
