| 80 | | * value: bool |
| 81 | | |
| 82 | | If set to ''true'', the texture's area is surrounded by a border in ''bordercolor'', starting at the edge of the image. As the object's ''buffer_zone'' increases, the border thickens inwards from the edge. |
| 83 | | |
| 84 | | If ''false'', no border is displayed. |
| | 80 | * value: bool string "(true|false)" |
| | 81 | |
| | 82 | If set to {{{"true"}}}, the texture's area is surrounded by a border in {{{bordercolor}}}, starting at the edge of the image. As the object's {{{buffer_zone}}} increases, the border thickens inwards from the edge. |
| | 83 | |
| | 84 | If {{{"false"}}}, no border is displayed. |
| 94 | | ==== [wiki:cell_size] ==== |
| 95 | | |
| 96 | | It�s often more efficient to put multiple sprites of the same size in a grid, rather than storing each as a separate texture (for example, a series of unit portraits). Although we can reference different areas of a texture and store it in a sprite, each element in a sheet of icons would have to be assigned its own sprite, which would be highly repetitive. |
| 97 | | |
| 98 | | With this method, we can keep all 64x64 Celtic entity portraits in one sprite, for example, and reference the individual cells. |
| 99 | | |
| 100 | | To activate this feature, just add ''cell_size="<cell_width> <cell_height>" (with appropriate numbers for the width and length of each cell) to the <image> attributes to tell the sprite parser the size of the individual cells: |
| | 94 | ==== cell_size ==== |
| | 95 | |
| | 96 | It's often more efficient to put multiple sprites of the same size in a grid, rather than storing each as a separate texture (for example, a series of unit portraits). Although we can reference different areas of a texture and store it in a sprite, each element in a sheet of icons would have to be assigned its own sprite, which would be highly repetitive. |
| | 97 | |
| | 98 | With this method, we can keep multiple identically-sized icons in one sprite, for example, and reference the individual cells. |
| | 99 | |
| | 100 | To activate this feature, just add {{{cell_size="<cell_width> <cell_height>"}}} (with appropriate numbers for the width and length of each cell) to the <image> attributes to tell the sprite parser the size of the individual cells: |
| 162 | | Where the texture should be placed within the image; outside this size it will tile. If set to a percentage (eg "0 0 100% 100%"), it will stretch beyond this size instead of tile. |
| 163 | | |
| 164 | | Note that "0 0 100% 100%" is the default, so if you need a sprite that simply stretches to fit its control object, you don't need to specify ''texture_size''. |
| 165 | | |
| 166 | | ==== <font color="green">z_level</font> ==== |
| | 162 | Where the texture should be placed within the image; outside this size it will tile. If set to a percentage (eg {{{"0 0 100% 100%"}}}), it will stretch beyond this size instead of tile. |
| | 163 | |
| | 164 | Note that {{{"0 0 100% 100%"}}} is the default, so if you need a sprite that simply stretches to fit its control object, you don't need to specify {{{texture_size}}}. |
| | 165 | |
| | 166 | ==== z_level ==== |
| 174 | | When using sprites it�s very important to know the difference between the sprite name and the texture name. You can�t just go ''sprite="example_texture.jpg'' and expect that to work. You have to setup a sprite with that texture first. |
| 175 | | |
| 176 | | Because a 100%-stretched single texture sprite is such a regular occurrence, however, there's a template to skip that step and directly reference the texture. You can do that by using ''stretched:'' in the object's ''string='' property: |
| | 174 | ==== Single Texture ==== |
| | 175 | |
| | 176 | When using sprites it's very important to know the difference between the sprite name and the texture name. You can't just go {{{sprite="example_texture.jpg"}}} and expect that to work. You have to setup a sprite with that texture first. |
| | 177 | |
| | 178 | Because a 100%-stretched single texture sprite is such a regular occurrence, however, there's a template to skip that step and directly reference the texture. You can do that by using {{{stretched:}}} in the object's {{{sprite}}} property: |
| | 195 | ==== Single Texture, Grayscale ==== |
| | 196 | |
| | 197 | The above can be extended further with the addition of {{{grayscale:}}} after {{{stretched:}}} but before the texture's name. For instance: |
| | 198 | |
| | 199 | {{{ |
| | 200 | sprite="stretched:grayscale:example_texture.jpg" |
| | 201 | }}} |
| | 202 | |
| | 203 | Is the equivalent of: |
| | 204 | |
| | 205 | {{{ |
| | 206 | <sprite name="grayscale_single_texture"> |
| | 207 | <effect grayscale=""/> |
| | 208 | |
| | 209 | <image texture="texture-from-texture-database" |
| | 210 | size="0 0 100% 100%" |
| | 211 | texture_size="0 0 100% 100%" |
| | 212 | /> |
| | 213 | </sprite> |
| | 214 | }}} |
| | 215 | |
| | 216 | ==== Block Colour ==== |
| | 217 | |
| | 218 | Under certain circumstances, you might want a sprite to just be a single block colour, such as a unit's health or capture bars. This can most easily be achieved by using {{{color:}}} at the start of an object's {{{sprite}}} property, and following it up with a colour specified using the same syntax as the {{{backcolor}}} sprite syntax above: |
| | 219 | |
| | 220 | {{{ |
| | 221 | sprite="color: 255 0 0" |
| | 222 | }}} |
| | 223 | |
| | 224 | The above is perfectly valid and creates an entirely red, opaque block, the equivalent of: |
| | 225 | |
| | 226 | {{{ |
| | 227 | <sprite name="block_colour"> |
| | 228 | <image |
| | 229 | backcolor="255 0 0" |
| | 230 | /> |
| | 231 | </sprite> |
| | 232 | }}} |
| | 233 | |
| | 234 | '''Scripting Tip''': In JS, you can use {{{rgbToGuiColor()}}} (found in common/functions_utility.js) to translate from a {{{{"r":64, "g":64, "b":64} }}} type object to a {{{"64 64 64"}}} string. |
| | 235 | |
| 195 | | Effects are special features that can be added to a sprite when it is first created. For example, the brightness of all images in a sprite can be altered from their base image so they appear lit (to create an illuminated hover version of a button, for example, without having to create a duplicate texture and alter its brightness in PhotoShop). |
| 196 | | |
| 197 | | Effects are specified in the <effect/> tag, which must always appear before any <image>s in a <sprite> declaration. |
| | 238 | Effects are special features that can be added to a sprite when it is first created. For example, the brightness of all images in a sprite can be altered from their base image so they appear lit (to create an illuminated hover version of a button, for example, without having to create a duplicate texture and alter its brightness in Gimp, PhotoShop or any other image editor). |
| | 239 | |
| | 240 | Effects are specified in the {{{<effect/>}}} tag, which '''must always''' appear before any {{{<image>}}}s in a {{{<sprite>}}} declaration. |
| 214 | | The add_color effect adds a specified RGB value to the colour value of the sprite. For example, add-color="42 42 42" increases the overall brightness of the sprite when displayed, particularly useful for buttons that illuminate when the cursor hovers over them. |
| 215 | | |
| 216 | | ==== multiply_color ==== |
| 217 | | |
| 218 | | Similar to ''add_color'', except it multiples each component (where they�re in the range 0-1 rather 0-255); in other words, ''multiply-color'' will always leave black parts black, but brighten other parts, rather like a contrast adjustment. |
| 219 | | |
| 220 | | Due to an OpenGL clamping restriction, components can never be > 255, so ''multiply_color'' cannot make an image brighter (though ''add_color'' can). |
| 221 | | |
| 222 | | ==== <font color="green">grayscale</font> ==== |
| | 257 | The add_color effect adds a specified RGB value to the colour value of the sprite. For example, {{{add-color="42 42 42"}}} increases the overall brightness of the sprite when displayed, particularly useful for buttons that illuminate when the cursor hovers over them. |
| | 258 | |
| | 259 | ==== grayscale ==== |
