Style Element (Data)

Context: HL Kit … Kit Reference … Structural File Reference 

The "style" Element

All of the basic visual look and behaviors of portals is encapsulated in a collection of styles. Each distinct category of portal has its own type of style, and you can only associate styles with portals of the corresponding type. Each separate style is specified through the use of a "style" element. The complete list of attributes for this element is below.

id	Id – Specifies the unique id of the style. This id is used in all references to the style.
border	(Optional) Id – Identifies the border to used in conjunction with this style. All portals may have a border drawn around them, and the border is controlled via the style. You can specify the unique id of the border to use or "none" to indicate no border. Default: "none"

The "resource" element also possesses child elements that define the specifics of the resource. The list of these child elements is below and must appear in the order shown. Click on the link to access the details for each element.

IMPORTANT! With the exception of the "resource" element, exactly one of these child elements may be specified for each style. If multiple are given, a compiler error will be reported. The chosen child element dictates the type of style that is being defined. You may include as many "resource" elements as you wish after the single child element that specifies the style.

style_label	An optional "style_label" element may appear as defined by the given link. This element specifies the details of a style for use with label portals.
style_image	An optional "style_image" element may appear as defined by the given link. This element specifies the details of a style for use with image portals.
style_edit	An optional "style_edit" element may appear as defined by the given link. This element specifies the details of a style for use with edit portals.
style_checkbox	An optional "style_checkbox" element may appear as defined by the given link. This element specifies the details of a style for use with checkbox portals.
style_menu	An optional "style_menu" element may appear as defined by the given link. This element specifies the details of a style for use with menu portals.
style_action	An optional "style_action" element may appear as defined by the given link. This element specifies the details of a style for use with action portals.
style_incrementer	An optional "style_incrementer" element may appear as defined by the given link. This element specifies the details of a style for use with incrementer portals.
style_chooser	An optional "style_chooser" element may appear as defined by the given link. This element specifies the details of a style for use with chooser portals.
style_region	An optional "style_region" element may appear as defined by the given link. This element specifies the details of a style for use with region portals.
style_table	An optional "style_table" element may appear as defined by the given link. This element specifies the details of a style for use with table portals.
style_separator	An optional "style_separator" element may appear as defined by the given link. This element specifies the details of a style for use with separator portals.
style_special	An optional "style_special" element may appear as defined by the given link. This element specifies the details of a style for use with special portals.
style_output	An optional "style_output" element may appear as defined by the given link. This element specifies the details of a style for use with output portals.
resource	Zero or more "resource" elements may appear as defined by the given link. This element specifies new resources that are used in conjunction with the style.

The "color" Element

The "color" element defines the facets of a color resource. The complete list of attributes for this element is below.

color

Text – Color value to be used in the format "xxxxxx". The format for the color uses standard HTML color syntax, with each character representing a hexadecimal digit. The first two characters define the Red color value, the next two Green, and the last two Blue. For example, the color "ff0080" specifies a Red value of "ff", a Green value of "00", and a Blue value of "80". NOTE! For additional details on specifying colors via the HTML syntax, please refer to one of the many websites that provide this information, such as http://www.w3schools.com/Html/html_colors.asp.

The "font" Element

The "font" element defines the facets of a font resource. The complete list of attributes for this element is below.

face	(Optional) Text – Name of the font face to use. This font must exist on every user's computer, or your data files will not successfully load. Consequently, it is generally a good idea to restrict yourself to the fonts that are provided with every copy of Windows. For example, you might limit yourself to using either "Arial" or "Times New Roman" for guaranteed support of all HL users. Default: "Arial".
size	(Optiona) Integer – Point size of the font to be used. The size is specified in "quarter points", allowing for fractional font sizes to be defined. Each increment of one equates to 0.25 points of font height. For example, to specify a font size of 10, you would use a value of 40 (10 times 4). For a font size of 10.5, use a value of 42. NOTE! Smaller point sizes become indistinguishable from each other when rendered on the screen. For example, there is no visible difference between a size of 16 and 17 (4.0 vs. 4.25 points) on the screen.
style	(Optional) Text – Specifies the font styles to be used for the resource. The various styles available are "bold", "italics", and "underline". You can combine multiple styles by placing a '+' between them (e.g. "bold+italics"). If empty, the "normal" version of the font is utilized, with no special styles applied. Default: Empty.
rotation	(Optional) Set – Designates the rotation angle at which the text will be drawn in this font. Note that rotated text is not always supported in all situations. In addition, all default sizing of portals assumes no rotation is employed, so you'll need to perform your own proper sizing when you use rotated text. Must be one of the following: 0 – No rotation is applied. 45 – Text is rotated 45 degrees. 90 – Text is rotated 90 degrees. 135 – Text is rotated 135 degrees. 180 – Text is rotated 180 degrees. 225 – Text is rotated 225 degrees. 270 – Text is rotated 270 degrees. 315 – Text is rotated 315 degrees. Default: "0"

The "bitmap" Element

The "bitmap" element defines the facets of a bitmap resource. The complete list of attributes for this element is below.

bitmap	Text – Name of the file containing the bitmap image to be used. This file must be placed in the same folder where all of the data files for the game system reside.
istransparent	(Optional) Boolean – Indicates whether the bitmap should be treated as having built-in transparency. Enabling transparency allows you to have bitmaps that appear to be non-rectangular in shape (see below). Default: "no"

NOTE! Transparent bitmaps must be created appropriately so that they will behave transparently. Within the bitmap image, the pixel in the top left corner (position 0,0) is always considered to be transparent. All other pixels within the bitmap that possess the same color are also treated as transparent. The result is a bitmap that defines its own transparency.

The "solid" Element

The "solid" element defines the facets of a solid-color border resource. The complete list of attributes for this element is below.

color

Text – Color value to be used in the format "xxxxxx". The format for the color uses standard HTML color syntax, with each character representing a hexadecimal digit. The first two characters define the Red color value, the next two Green, and the last two Blue. For example, the color "ff0080" specifies a Red value of "ff", a Green value of "00", and a Blue value of "80". NOTE! For additional details on specifying colors via the HTML syntax, please refer to one of the many websites that provide this information, such as http://www.w3schools.com/Html/html_colors.asp.

thickness

(Optional) Integer – Specifies the thickness of the border in terms of pixels. Default: "1"

The "border" Element

The "border" element defines the facets of a bitmap-based border resource. Bitmap-based borders are comprised of eight bitmaps. There is one bitmap in each of the four corners around the visual element, plus four additional bitmaps that are used as a repeating pattern along each edge. Each bitmap may also be specified with a mask that is used to draw non-rectangular portions of the bitmap appropriately. Masks must always be monochrome bitmaps, since they identify which pixels of the primary bitmap are and are not drawn.

Unlike most elements, this element possesses no attributes. However, it does have eight child elements that specify the different pieces of the border. The complete list of child elements is below.

topleft	Exactly one "topleft" child element must appear, specifying the upper left corner.
topright	Exactly one "topright" child element must appear, specifying the upper right corner.
bottomleft	Exactly one "bottomleft" child element must appear, specifying the lower left corner.
bottomright	Exactly one "bottomright" child element must appear, specifying the lower right corner.
left	Exactly one "left" child element must appear, specifying the left edge.
top	Exactly one "top" child element must appear, specifying the top edge.
right	Exactly one "right" child element must appear, specifying the right edge.
bottom	Exactly one "bottom" child element must appear, specifying the bottom edge.

IMPORTANT! The bitmaps comprising a border must be symmetric. This means that six of the bitmaps must possess the same height and another six must possess the same width. Specifically, all bitmaps used across the top and bottom edges must have the same height, which includes: topleft, top, topright, bottomleft, bottom, and bottomright. In addition, all bitmaps used across the left and right edges must have the same width, which includes: topleft, left, bottomleft, topright, right, and bottomright.

Corner Elements

There are four different corners within a border, resulting in four different child elements: "topleft", "topright", "bottomleft", and "bottomright". Each of these elements has the identical set of attributes, so they are all defined here in one place. The complete list of attributes for these elements is below.

bitmap	Text – Name of the file containing the bitmap image to be used. This file must be placed in the same folder where all of the data files for the game system reside.
mask	(Optional) Text – Name of the file containing the monochromatic mask image to be used. This file must have the same dimensions as the bitmap above and must be placed in the same folder where all of the data files for the game system reside. If empty, the bitmap is assumed to be a solid rectangular region with no transparency. Default: Empty.
xoffset	Reserved for future use. Do not specify.
yoffset	Reserved for future use. Do not specify.

Edge Elements

There are four different edges within a border, resulting in four different child elements: "left", "top", "bottom", and "right". Each of these elements has the identical set of attributes, so they are all defined here in one place. The complete list of attributes for these elements is below.

bitmap	Text – Name of the file containing the bitmap image to be used. This file must be placed in the same folder where all of the data files for the game system reside.
mask	(Optional) Text – Name of the file containing the monochromatic mask image to be used. This file must have the same dimensions as the bitmap above and must be placed in the same folder where all of the data files for the game system reside. If empty, the bitmap is assumed to be a solid rectangular region with no transparency. Default: Empty.

Example

The following example demonstrates what various "resource" elements might look like. All default values are assumed for optional attributes.

<resource id="color">
  <color color="ff0080"/>
  </resource>

<resource id="font">
  <font face="Arial" size="40" style="bold"/>
  </resource>

<resource id="bitmap">
  <bitmap bitmap="image.bmp"/>
  </resource>

<resource id="solid">
  <solid color="00ff00" thickness="2"/>
  </resource>

<resource id="border">
  <border>
    <topleft bitmap="topleft.bmp"/>
    <topright bitmap="topright.bmp"/>
    <bottomleft bitmap="bottomleft.bmp"/>
    <bottomright bitmap="bottomright.bmp"/>
    <left bitmap="left.bmp"/>
    <top bitmap="top.bmp"/>
    <right bitmap="right.bmp"/>
    <bottom bitmap="bottom.bmp"/>
    </border>
  </resource>