Images

Supported Formats

The engine supports the following image formats:

BMP (.bmp): Requires a separate mask file for transparency if needed (e.g. my_image_mask.bmp).
PNG (.png): Supports embedded alpha transparency. Optional external masks can override it.
SVG (.svg): Supports basic SVGs with paths, fills, strokes, and gradients. Text and filters are not supported. SVGs scale automatically with zoom.
GIF (.gif) and JPEG (.jpg) are also supported. Animation in GIF is not supported.

Updating image files

Note that in Plug'n Script, if you update an image file while editing the .kuiml for your script, you need to fully reload the skin (not just .kuiml) to ensure the new version of the image is loaded from disk.

Paths to images

To specify the correct image path relative to the current script in Plug'n Script, you can use pre-defined variables such as $SCRIPT_DATA_PATH$ or (LM Skin only) $KUIML_DIR$.

Attributes brief detailed show all inherited

	Name	Description	Default
	image_scaling	Scaling of the image1 is 100%, 0.5 is 50%	1
	image_mouse_mask	Path to the image file used to define the 'active' (clickable) zone of the imagethis is the zone of the image where the mouse is detected for clicks and movements. If we want the mouse to be active only on the round part of the knob in the previous example, we can add a sample_mouse_mask.bmp file which defines where the mouse is active. The white parts is active area, black parts - inactive. There is also image_focus_mouse_mask and image_hover_mouse_mask for very specific cases.	empty
	opaque_mouse_mask	When set to 'true' makes the entire area of the widget clickable (if mouse sensitive)Note that image_mouse_mask="" and opaque_mouse_mask="true" seem to do the same. The slight difference is that opaque_mouse_mask entirely bypasses the whole image finding algorithm, so it is faster than having the equivalent such as image_mouse_mask="", image_focus_mouse_mask="", image_hover_mouse_mask="".	false
	ignore_mask_file	When set to "true" mask file is not used
	ignore_mouse_mask_file	When set to "true" mouse mask file is not used
	ignore_mask_files	When set to "true" mask files are not used	false
Common attributes
	id	Identifier of the elementThe id of an element has to be globally unique. Don't start with a digit for AngelScript compatibility.	empty

	Name	Value type	Default	Description	Comment
	image_scaling	float	1	Scaling of the image	1 is 100%, 0.5 is 50%
	image_mouse_mask	image file path	empty	Path to the image file used to define the 'active' (clickable) zone of the image	this is the zone of the image where the mouse is detected for clicks and movements. If we want the mouse to be active only on the round part of the knob in the previous example, we can add a sample_mouse_mask.bmp file which defines where the mouse is active. The white parts is active area, black parts - inactive. There is also image_focus_mouse_mask and image_hover_mouse_mask for very specific cases.
	opaque_mouse_mask	boolean	false	When set to 'true' makes the entire area of the widget clickable (if mouse sensitive)	Note that image_mouse_mask="" and opaque_mouse_mask="true" seem to do the same. The slight difference is that opaque_mouse_mask entirely bypasses the whole image finding algorithm, so it is faster than having the equivalent such as image_mouse_mask="", image_focus_mouse_mask="", image_hover_mouse_mask="".
	ignore_mask_file			When set to "true" mask file is not used
	ignore_mouse_mask_file			When set to "true" mouse mask file is not used
	ignore_mask_files	boolean	false	When set to "true" mask files are not used
Common attributes
	id	identifier	empty	Identifier of the element	The id of an element has to be globally unique. Don't start with a digit for AngelScript compatibility.

Mouse Mask

Another file can be used to define the 'active' zone of the image: this is the zone of the image where the mouse is detected for clicks and movements. If we want the mouse to be active only on the round part of the knob in the previous example, we can add a sample_mouse_mask.bmp file which defines where the mouse is active:

Note: if this file does not exist, the system will choose by default the mask file (or the transparency layer for a transparent image). If you want the entire rectangle of the widget to be active, just set the image_mouse_mask attribute to “” (empty string).

Naming Conventions

By default, the engine looks for:

_mask suffix for transparency mask (e.g. my_img_mask.bmp)
_mouse_mask suffix for mouse interaction mask (e.g. my_img_mouse_mask.bmp)

If the mouse mask is not found, the mask file is used instead. You can override defaults using the image_mask and image_mouse_mask attributes. You can also make them empty ("") if you don't want to use them.

The same convention is recursively applied to other attributes for widgets that require multiple images. For example, for an IMAGE_PARAM_KNOB that requires image and image_hover attributes, the resolution of files for image_hover is done the following way:

if the “image_hover” attribute is set, use the file name.
else look for a file which name corresponds to “image” attribute suffixed with “hover”.
if not found, use the same file as for “image”

For the mask and mouse_mask, it works the same way. That means that you can use the same mask and mouse_mask file for all your widget states if they have the same shape. It avoids you to use copies of the same image and waste memory and disk space and also avoids you to have to fill all the attributes.

Opaque Mouse Mask

Use opaque_mouse_mask="true" to make the entire image area clickable, regardless of transparency. It is very handy for widgets that use transparent images and should be clickable in the entire area.

Note that image_mouse_mask="" and opaque_mouse_mask="true" seem to do the same. The slight difference is that opaque_mouse_mask entirely bypasses the whole image finding algorithm, so it is faster than having the equivalent such as image_mouse_mask="", image_focus_mouse_mask="", image_hover_mouse_mask="".

Image Scaling

Use image_scaling attribute that represents the scaling factor to be used to load images. With this attribute, images will be scaled by the engine upon load.

Descendent elements

Images

Comments

Please, authorize to view and post comments.