| |
Typicaly, each object can have widget-dependent settings and several skins. For example:
...
<object name="Clock" skin_font_height="40">
<skin name="background"/>
<skin name="face"/>
<skin name="foreground"/>
</object>
...
|
Every object can contain several skins for different elements.
Section skin contains the name and the description of skin painting method and animation.
For example:
...
<object name="Menu">
<skin name="background">
<paint image="a.jpg"/>
</skin>
<skin name="scroll left">
<paint image="b.jpg"/>
</skin>
<skin name="scroll right">
<paint image="c.jpg"/>
</skin>
</object>
...
|
Section paint defines the way this rectangle is drawn, and can have percent and pixel components.
You can paint it with solid color:
...
<skin name="background">
<paint color="0xFF000000" />
</skin>
...
|
Attribute color defines the transparency and the color of the element.
It's HTML-like way to set the color, but first two hexadecimal digits define the transparency.
Thus, in our example, the "background" element is black and opaque.
Also, you can use an image file to paint the element:
...
<skin name="background">
<paint image="test.jpg"/>
</skin>
...
|
If both image and color attributes are present, image attribute has a higher priority.
In case the image size doesn't match the paint area size, there are three ways to handle this situation in Aston2:
Tiling
Stretching
Smart tiling
You can switch tile/stretch modes for X-axes and Y-axes
independently by means of align_u and align_v attributes:
...
<skin>
<paint image="background.jpg"
align_u="tile"
align_v="stretch"/>
</skin>
...
|
If the align attribute is skipped, tiling will be used by default.
If you use tiling, please note that one of the tiles can be partially displayed.
You can assign this part to the edges by justify_u and justify_v attributes both for X-axes and Y-axes.
For example:
justify_u="0" : tiles are docked to the left edge
justify_u="50" : tiles are docked to the center
justify_u="100" : tiles docked to the right edge
If you need to use only some part of an image, use "u", "v", "u2", "v2" attributes to define the source texture rect.
For example:
...
<skin>
<paint image="background.jpg"
u="0"
v="0"
u2="32"
v2="32"/>
</skin>
...
|
You can use an animated image with the help of animation attrbute:
...
<skin>
<paint animation="anim1"/>
</skin>
...
|
The attribute animation has a higher priority than image.
You can read more about animation here.
PNG-images can use alpha channel.
Thus, you can use several paint elements to multi-pass painting with different images, alignments and other settings of the paint elements.
Every skin can contain several paint sections.
This is the way to use multi-pass painting technique.
For example:
...
<skin name="background">
<paint image="rocks.jpg"/>
<paint color="0x88CCCCCC">
<percent_rect x2="100" y2="100"/>
<pixel_rect x="8" y="8" x2="-8" y2="-8"/>
</paint>
</skin>
...
|
| |
