Layout

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.

Centered text

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'

Horizontally and vertically centered image

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

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!'