Asset Layers

Asset layers are the things that display textures or text. They combine together to create assets.

Alignment

Whether the layer should align on the right, left, or center. The default alignment is right.

Alignment Types
Right
Left
Center

align: center

Outlined

This is either true or false if you want to have the layers outlined. This option only works on 1.19+.

outlined: true

Offset

If you would like to move a layer around relative to the other layers you would set the offset. Offset works through pixel perfect adjustments.

offset:
    x: -5
    y: 2

In this example, the layer would be moved to the left 5 pixels and up 2 pixels.

Texture Layer

This layer is used when you have a texture that you want to display.

Texture

Put the texture you would want to use in the HappyHud/textures directory and then input the path.

Scale

This is a decimal number determining the scale you would like to display. The default scale is 1.

scale: 1.5 #Scales the image up 1.5 times.

scale:
 x: 1.2 #Scales the x axis by 1.2 times.
 y: 0.5 #Scales the y axis by 0.5 times.

Color

You can use a named color such as "white" which will not change the color at all or use any hex code, such as "#ffbb00". You can find hex codes via a color picker found here.

color: "#ffbb00"

Static Texture Layer

This layer is used when you just want to place an unchanging texture. The only parameters are the texture path, color, and the offset.

Layer Example

outline:
  texture:
    path: assets/vanilla/exp_bar_short_outline.png
  align: right
  outlined: false
  color: white
  offset:
    x: 0
    y: 0

Functional Texture Layer

This layer is used when you would like to display a segmented texture that is linked to a listener, such as a progress bar.

Listener

Listeners control what stage of increment this layer will display at the time being. You can read more about Listeners here.

function:
    listener: health

Increment

The increment is the amount of sections your layer should split into.

function:
    increment: 13

Orientation

The way the layer should deplete from. Can either be Horizontal or Vertical.

function:
    orientation: horizontal

Reversed

Whether or not the layer should deplete the other way. This option defaults to false.

function:
    reversed: true

Layer Example

fill:
  texture:
    path: assets/vanilla/exp_bar_short_fill.png
  align: right
  outlined: false
  color: "#f23a3a"
  offset:
    x: 0
    y: 0
  function:
    listener: health
    increment: 13
    orientation: horizontal
    reversed: false

Text Layer

Text

The text that you want to display. This supports PlaceholderAPI placeholders as well as custom ones shown below.

Placeholder	Description
%{layer-key}-value%	The value of the defined layer's listener.
%{layer-key}-max%	The max of the defined layer's listener.
%{layer-key}-percent%	The percent of the defined layer's listener.

Font

The font that the text should be rendered in. You can read more about fonts here.

font: "default-unicode"

Layer Example

text:
  text: "%fill-value%/%fill-max%"
  font: "default"
  align: center
  outlined: true
  offset:
    x: 10
    y: 2