Resource Element (Data): Difference between revisions
(9 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
{{ | {{contextmulti|Kit Reference}} | ||
==The "resource" Element== | ==The "resource" Element== | ||
Everything associated with fonts, colors, bitmaps and borders is [[Using Visual Resources|managed via resources]]. Each visual attribute used within your data files is specified through the use of a "resource" element. The complete list of attributes for this element is below. | Everything associated with fonts, colors, bitmaps and borders is [[Using Visual Resources|managed via resources]]. Resources can be defined as top-level elements within structural files. However, they can also be defined as child elements within styles. This latter technique will be more commonly used for bitmaps, since those bitmaps can be defined in conjunction with the style that uses the bitmap (e.g. portals used as buttons and icons). | ||
Each visual attribute used within your data files is specified through the use of a "resource" element. The complete list of attributes for this element is below. | |||
:{| class="infotable" | :{| class="infotable" | ||
Line 68: | Line 70: | ||
|rotation | |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: | |(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. | <ul class="sets"> | ||
45 – Text is rotated 45 degrees. | <li>0 – No rotation is applied.</li> | ||
90 – Text is rotated 90 degrees. | <li>45 – Text is rotated 45 degrees.</li> | ||
135 – Text is rotated 135 degrees. | <li>90 – Text is rotated 90 degrees.</li> | ||
180 – Text is rotated 180 degrees. | <li>135 – Text is rotated 135 degrees.</li> | ||
225 – Text is rotated 225 degrees. | <li>180 – Text is rotated 180 degrees.</li> | ||
270 – Text is rotated 270 degrees. | <li>225 – Text is rotated 225 degrees.</li> | ||
315 – Text is rotated 315 degrees. | <li>270 – Text is rotated 270 degrees.</li> | ||
Default: "0" | <li>315 – Text is rotated 315 degrees.</li> | ||
<li>Default: "0"</li> | |||
</ul> | |||
|- | |- | ||
|} | |} | ||
Line 101: | Line 105: | ||
:{| class="infotable" | :{| class="infotable" | ||
|class="leftnormal"|color | |class="leftnormal"|color | ||
|Text – Color value to be used in the format " | |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 | {{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 http://www.w3schools.com/Html/html_colors.asp]. | [http://www.w3schools.com/Html/html_colors.asp http://www.w3schools.com/Html/html_colors.asp]. | ||
Line 112: | Line 116: | ||
==The "border" Element{{anchor|border}}== | ==The "border" Element{{anchor|border}}== | ||
The "border" element defines the facets of a bitmap-based border resource. The complete list of | 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. | |||
:{| class="infotable" | :{| class="infotable" | ||
|class="leftnormal"| | |class="leftnormal"|[[#corner|topleft]] | ||
| | |Exactly one "topleft" child element must appear, specifying the upper left corner. | ||
|- | |||
|[[#corner|topright]] | |||
|Exactly one "topright" child element must appear, specifying the upper right corner. | |||
|- | |||
|[[#corner|bottomleft]] | |||
|Exactly one "bottomleft" child element must appear, specifying the lower left corner. | |||
|- | |||
|[[#corner|bottomright]] | |||
|Exactly one "bottomright" child element must appear, specifying the lower right corner. | |||
|- | |||
|[[#edge|left]] | |||
|Exactly one "left" child element must appear, specifying the left edge. | |||
|- | |||
|[[#edge|top]] | |||
|Exactly one "top" child element must appear, specifying the top edge. | |||
|- | |- | ||
| | |[[#edge|right]] | ||
| | |Exactly one "right" child element must appear, specifying the right edge. | ||
|- | |- | ||
| | |[[#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{{anchor|corner}}=== | |||
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. | |||
:{| class="infotable" | |||
|class="leftnormal"|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{{anchor|edge}}=== | |||
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. | |||
:{| class="infotable" | |||
|class="leftnormal"|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. | |||
|- | |- | ||
|} | |} | ||
Line 131: | Line 186: | ||
<pre> | <pre> | ||
<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> | |||
</pre> | </pre> |
Latest revision as of 09:09, 4 December 2008
Context: HL Kit … Kit Reference … Multiple Sources
The "resource" Element
Everything associated with fonts, colors, bitmaps and borders is managed via resources. Resources can be defined as top-level elements within structural files. However, they can also be defined as child elements within styles. This latter technique will be more commonly used for bitmaps, since those bitmaps can be defined in conjunction with the style that uses the bitmap (e.g. portals used as buttons and icons).
Each visual attribute used within your data files is specified through the use of a "resource" element. The complete list of attributes for this element is below.
id Id – Specifies the unique id of the resource. This id is used in all references to the resource. isbuiltin (Optional) Boolean – Indicates whether the resource is a "built-in" resource provided by HL for easy re-use. Only bitmaps and borders can be built-in resources, since fonts and colors can be freely defined at any time. Default: "no". issystem (Optional) Boolean – Indicates whether the resource is intended to replace a "system" resource utilized by HL. When you want to completely change the visual look of your data files and have that new look integrated into HL's own forms, you will need to specify system resources. Only specific resource ids can be replaced as system resources. Default: "no".
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! Exactly one of these child elements may be specified for each resource. If multiple are given, a compiler error will be reported.
color An optional "color" element may appear as defined by the given link. This element specifies the details of a color resource. font An optional "font" element may appear as defined by the given link. This element specifies the details of a font resource. bitmap An optional "bitmap" element may appear as defined by the given link. This element specifies the details of a bitmap resource. solid An optional "solid" element may appear as defined by the given link. This element specifies the details of a solid-color border resource. border An optional "border" element may appear as defined by the given link. This element specifies the details of a bitmap-based border resource.
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>