pluginiPlugin

Create Layouts

Overview

Layouts allow you to control the position of elements. A layout can have multiple elements, and each element can be configured with images, text, text backgrounds, or progress bars.

Configuration Path

All layout files are located in the Xerr/core/layout directory. You can create subdirectories under this directory to categorize them.

Configuration Rules

A configuration can have multiple layouts, and each layout can have multiple elements.

For example:

Layout1:
  Element1:
    ...
  Element2:
    ...
 
Layout2:
  Element1:
    ...
  Element2:
    ...
  Element3:
    ...

Element Positioning

Keep it simple!

You can control the position of elements, whether vertical or horizontal, including images, text, backgrounds, or progress bars. All these can be adjusted within the layout.

Basic Positioning

By default, elements are displayed at the center. You can select positions like top-left, top-right, bottom-left, bottom-right, etc., by setting the position attribute.

Layout:
  Element:
    position: LEFT_TOP
EnumPosition
LEFT_TOP left_topTop-left
LEFT_BOTTOM left_bottomBottom-left
RIGHT_TOP right_topTop-right
RIGHT_BOTTOM right_bottomBottom-right
CENTER centerCenter
CENTER_LEFT center_leftCenter-left
CENTER_RIGHT center_rightCenter-right
CENTER_TOP center_topCenter-top
CENTER_BOTTOM center_bottomCenter-bottom

Coordinate Positioning

The X coordinate controls the horizontal position, and the Y coordinate controls the vertical position.

For the X axis, you can use negative values to move left and positive values to move right.

For the Y axis, you can use negative values to move down and positive values to move up.

Layout:
  Element:
    position: LEFT_TOP
    x: -10
    y: 12

The value of the Y axis cannot exceed the image's height, or it will display incorrectly.

Adding Elements

You can add text, text backgrounds, graphics, and image progress bars as elements.

Adding Text

plugins/Xerr/core/layout/xxx.yaml
# Layout id
Layout1:
  # Element id
  Element1:
    # Text content
    value: "Test"
    # Font id to reference the font
    font: "hello"

The corresponding font file would be:

plugins/Xerr/font/config/pop.yaml
# Font id
hello:
  # Font file name (without extension)
  ttf: pop
  # Font size
  size: 8
  # Rendering resolution (higher values improve font clarity)
  oversample: 5.0

Adding Graphics

Layout1:
  Element1:
    image:
      # Graphic namespace
      namespace: xerr_ui
      # Graphic basename
      basename: hud
      # Graphic id
      id: health_bar

Header Settings

You may be thinking, "Do I need to write the same font, namespace, and basename for each element?"

Of course, it's tedious and redundant in most cases. That's why we provide header settings through the option.

Default Font Namespace

option: 
  # Set default font
  font: pixel
  # Set default image metadata
  image:
    namespace: xerr_ui
    basename: hud
 
Layout1:
  text_1:
    value: "Test"
  text_2:
    value: "Test2"
  img1:
    image:
      # Graphic id
      id: health_bar

Once you set the default font, the text in the elements will use this font by default. Likewise, the images and image progress bars will use the default graphic namespace and basename.

The layout id cannot use option as its name.

Overriding the Default Font

You can override the default font in an element.

option:
  font:
    # Default font namespace
    namespace: hello
 
Layout1:
  text_2:
    value: "Test"
    # This element uses the 'kawayi' font
    font: "kawayi"

Step-by-Step Tutorial

Adding a Graphic

A 256x128 image, named ui.png, is added to plugins/Xerr/core/assets/image/dialog_ui/dialog/textures/.

Configure the Graphic

plugins/Xerr/core/assets/image/dialog_ui/dialog/config.yml
img:
  fram_ui:
    path: ui
    height: 128
    width: 256

Create and Edit the Layout

Create a layout file plugins/Xerr/core/layout/test.yaml.

plugins/Xerr/core/layout/test.yaml
# Layout id
eee:
  # Element id
  a1:
    # Center position
    position: CENTER
    # Graphic settings
    image:
      namespace: dialog_ui
      basename: dialog
      id: fram_ui

According to the configuration in plugins/Xerr/core/assets/image/dialog_ui/dialog/config.yml:

  • dialog_ui is the graphic namespace
  • dialog is the graphic configuration file name
  • fram_ui is the graphic id

Preview the Effect

You can add the following content to the BossBar layout display configuration:

plugins/Xerr/core/display/bossbar/layout.yml
layout:
  - id: eee

Run the following command to reload the configuration and generate the resource pack. After loading, you can preview the effect:

/xerr pack

1

Moving the Position

You can move the graphic position by adjusting the x and y properties.

To center it, calculate width / 2, which means 256 / 2 = 128.

plugins/Xerr/core/layout/test.yaml
# Layout id
eee:
  # Element id
  a1:
    # Center position
    position: CENTER
    # Horizontal position
    x: -128
    # Graphic settings
    image:
      namespace: dialog_ui
      basename: dialog
      id: fram_ui

2

Create Custom Progress Bar Layouts

Highly customizable progress bars for any shape.

Add Graphics

  • Multiple progress bar graphics
  • Example namespace: hud
  • Example basename: exp

Place all graphics in plugins/Xerrcore/assets/image/hud/exp/textures/

1

Configure Graphics

img:
  exp_bar_0:
    path: exp_bar_0
    height: 48
    width: 17
  exp_bar_1:
    path: exp_bar_1
    height: 48
    width: 17
  exp_bar_2:
    path: exp_bar_2
    height: 48
    width: 17
  exp_bar_3:
    path: exp_bar_3
    height: 48
    width: 17
  exp_bar_4:
    path: exp_bar_4
    height: 48
    width: 17
  exp_bar_5:
    path: exp_bar_5
    height: 48
    width: 17
  exp_bar_6:
    path: exp_bar_6
    height: 48
    width: 17
  exp_bar_7:
    path: exp_bar_7
    height: 48
    width: 17
  exp_bar_8:
    path: exp_bar_8
    height: 48
    width: 17
  exp_icon:
    path: xp
    height: 10
    width: 10

Create and Edit Layout

plugins/Xerr/core/layout/exp_hud.yaml
option:
  # Set default image metadata
  image:
    namespace: hud
    basename: exp
 
# Unique layout identifier
exp_hud:
  # Element identifier
  exp_bar:
    progress:
      list:
        - exp_bar_0
        - exp_bar_1
        - exp_bar_2
        - exp_bar_3
        - exp_bar_4
        - exp_bar_5
        - exp_bar_6
        - exp_bar_7
        - exp_bar_8
      # Variables
      variable:
        # Total value (using Kether script expressions)
        total: "1"
        # Current value (using Kether script expressions)
        current: "player exp"

Display in Bossbar

Xerr/core/display/bossbar/layout.yml
layout:
  - id: exp_hud
    # Refresh interval (20 ticks = 1 second)
    refresh: 5

Create Standard Progress Bar Layout

Add Graphics

  • 16x16 full icon named full_icon.png
  • 16x16 empty icon named empty_icon.png
  • Example namespace: hud
  • Example basename: health

Place all graphics in plugins/Xerrcore/assets/image/hud/health/textures/

Configure Graphics

plugins/Xerr/core/assets/image/hud/health/config.yml
img:
  hp_full:
    path: full_icon
    height: 16
    width: 16
  hp_empty:
    path: empty_icon
    height: 16
    width: 16

Create and Edit Layout

plugins/Xerr/core/layout/health_hud.yaml
# Unique layout identifier
health_bar:
  # Element identifier
  hp:
    # Progress bar
    progress:
      # Graphic namespace
      namespace: hud
      # Graphic basename
      basename: health
      image:
        # Empty state graphic identifier
        empty: hp_empty
        # Full state graphic identifier
        full: hp_full
      # Variables
      variable:
        # Maximum displayed units
        units: 10
        # Total value (using Kether script)
        total: "player max health"
        # Current value (using Kether script)
        current: "player health"

Display in Bossbar

Xerr/core/display/bossbar/layout.yml
layout:
  - id: health_bar
    # Refresh interval (20 ticks = 1 second)
    refresh: 20

Previous

Add GIF Animations

Next

BossBar Hud

On this page