UI Images

Image definitions

Several places in the BEE configuration allow specifying images to load for use in the UI. These have a variety of special options for generating and combining images. Images may contain transparent components - when rendered in the UI, they are overlaid on top of the PeTI palette background color ().

Source locations

Files are checked relative to the following paths:

• resources/BEE2/ (use this for UI-specific resources)
• resources/materials/ (VTFs also used ingame)
• resources/materials/models/props_map_editor/ (so that palette icons can be found)

Note that depending on where you specify images, an additional subfolder may be added to help organise images - item icons are found in BEE2/items, styles in BEE2/styles, etc.

From files

The simplest definition is the path to a PNG or VTF resource in the package. If no extension is specified, PNGs are looked for. To read a file from another package, the form PACK_ID:path/to/file should be used, though the app will fall back to checking every package to allow old packages to still function. To allow for easy theming, a file.light.png/file.dark.png file will be used instead of file.png if specified and that theme is being used.

Compound images

More complex definitions can be produced by defining a keyvalues block, containing different image types. Each child keyvalue forms a layer, which gets composited together. Using a keyvalues block, multiple source images can be specified, which will then be composited together. Depending on the name, different behaviour applies.

• img, image or layer: The image (with alpha) is composited onto the below layers. The contents should either be a filename, or another block of sub-layers.
• noalpha or stripalpha: The image is placed on top, with fully opaque alpha. All lower layers are therefore ignored. The contents should either be a filename, or another block of sub-layers.
• transform: This takes an image (defined under the child key), then applies one of many transforms to the image (defined by orient):
  • 0, none: No change
  • 90, cw: Rotate 90° clockwise.
  • 180: Rotate 180°.
  • 270, ccw: Rotate 90° counter-clockwise.
  • flip_vert: Flip vertically, so the top/bottom sides swap.
  • flip_horiz: Flip horizontally, so the left/right sides swap.

As an example, this would merge a translucent image onto a backdrop, add a sideways sign, then add a number:

"Image"
	{
	"layer" "<color>:FF05EE"
	"layer" "overlays/some_overlay.vtf"
	"transform"
		{
		"orient" "90"
		"child" "signage/signage_exit"
		}
	"layer" "num_01"
	}

Special filenames

The following names load builtin resources:

• <special>:blank: Loads a zero-alpha image.
• <special>:bg: Loads an image with the PeTI palette background.
• <special>:error: The icon used for missing/bad images.
• <special>:load: Loading spinner.
• <special>:none: The black X icon used for 'no selection' in some pickers.
• <bee>:filename or <bee2>:filename: UI icons included in the app.

Colors

<rgb>, <color> or <colour> allows using a single-colour image. After the colon, a RGB or RRGGBB hex value may be specified, a r, g, b decimal value, or finally a colour name from TK's list. For instance <color>:#0E0, <color>:#00EE00 and <rgb>:0, 238,0 are all equivalent.

Image creation tips

• The background in Puzzlemaker is RGB (229, 233, 233) = #E5E8E9.
• The shadow corresponds to a 50% blend of (113, 115, 115) = #717373.