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

Using a property block, multiple source images can be specified, which will then be composited together. Each keyvalue is a layer, with value a filename, and the name controlling how it behaves:

• img, image or layer: The image (with alpha) is composited onto the below layers.
• noalpha or stripalpha: The image is placed on top, with fully opaque alpha. All lower layers are therefore ignored.

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

"Image"
	{
	"layer" "<color>:FF05EE"
	"layer" "overlays/some_overlay.vtf"
	"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.