Select language
English : Russian
Desktop multi language  
Top main menuMainDownloadsRegistrationSupportForum 
Products
Aston2
  • Product details
  • Themes
  • Live desktop
  • Skinning Manual
  • Skinning Tutorials
  • Aston 1.x
  • Aston2 Menu
  • Product details
  • Skins
  • Aston Secure Desktop
  • Product details
  • AltDesk
  • Product details
  • FAQ
  • Skinning Tutorial
  • Skins
  • StarBlaze
  • Product details
  • FAQ
  • StarBlaze 2
  • Product details

  • Services
  • Upload center
  • Press
  • Links


    MrBiotech's site

    adni18 site

    Skinning.net site
    Freeware
  • Fox Hunting
  • c2pas32

  • Search

    Smart tiling

     
     

    Smart tiling.

    Smart tiling can be used when the destination paint area and the source image sizes don't match (one is bigger or smaller than the other).
    For example, a source image:


    If you use smart tiling, you can get a result like this:

    Smart tiling allows to paint objects with borders and to place an integer number of decorative elements. In case there is not enough space for the decorative element, it can be hidden (optionally).

    There are two ways to markup smart tiling. The simple way is using of smart_tiles section.
    For example:

    ...
        <skin name="background">
            <paint image="test.jpg">
                <smart_tiles x="110:20:110" y="50:40:50" stretch="xy"/>
            </paint>
        </skin>
    ...
    

    In this example we suppose that initial image rectangle is split to 9 parts (3x3), like this:


    The green lines was painted for explaining (don't use it in real skin).
    The attribute stretch gives border tiled (or stretched) mode, it can be skipped if no stretch required. Tiled mode is preferred (for best performance).

    Alternate way to define smart tiling is more powerful and flexible. It allows to create complex decorations on borders. The basic principle is markup of the source image to horizontal and vertical cells. You can do it recursively.
    For example, firstly, you can split an image vertically:


    Than, each cell is split horizontally:


    Finally, each cell should be set up:
    • corners should be of a fixed size,
    • left/right sides should be tiled vertically only,
    • top/bottom sides should be tiled horizontally only.
    It's a general idea. Now, let's consider cell's option attributes in more details:
    order- the priority of the cells order. If this attribute is skipped, the cell will be displayed after all the other neighboring cells.
    w- the cell width in the source image (in texels). If the cell align is horizontal, this attribute should be skipped.
    h- the cell height in the source image (in texels). If the cell align is vertical, this attribute should be skipped
    size- the preliminary cell size according to the align direction (in percent of the destination area size, 100% by default).
    min- adjusts the cell destination area size minimum (in pixels).
    max- adjusts the cell destination are size maximum (in pixels).
    step - adjusts the cell destination area size by a certain step (in pixels).
    pos - the cell position (in percent of destination area size). For example, the central position is 50%.
    mode_u- the source image displaying mode endwise X-axis. The allowable values are 'tile' (by default) or 'stretch'.
    mode_v- the source image displaying mode endwise Y-axis.
    justify_u- justification endwise X-axis (in percent).
    justify_v- justification endwise Y-axis (in percent).

    The attributes w and h are related to the source image area, all the other are related to the destination paint area space. Let's consider some skin example:

    ...
        <skin name="background">
            <paint image="test.jpg">
                <cell h="8"/>
                <cell h="16 order="1"
                            step="16"
                            max="64"
                            pos="50%"/>
                <cell h="8" pos="100"/>
            </paint>
        </skin>
    ...
    

    Here are 3 vertically aligned cells. The first cell has order="1".
    It should be placed vertically to center (see attribute pos).
    Preliminary, it tries to take 100% of space (by default size="100%"), but there are some restrictions (have a look at the step and max attributes).
    The rest of the space from top and bottom is taken by the above and the bottom cells.
    Please note, that the last cell should have pos="100". Keep to this rule in future to avoid unexpected results.
    Here is a more complex example with 3x3 cells:

    ...
        <skin name="background">
            <paint image="test.jpg">
                <cell h="4" order="1" max="4" size="50">
                    <cell w="24" order="1" max="24" size="50"/>
                    <cell w="96"/>
                    <cell w="8" order="2" max="8" size="50" pos="100" justify_u="100"/>
                </cell>
                <cell h="24">
                    <cell w="24" order="1" max="24" size="50"/>
                    <cell w="96"/>
                    <cell w="8" order="2" max="8" size="50" pos="100" justify_u="100"/>
                </cell>
                <cell h="4" order="2" max="4" pos="100" size="50" justify_v="100">
                    <cell w="24" order="1" max="24" size="50"/>
                    <cell w="96"/>
                    <cell w="8" order="2" max="8" size="50" pos="100" justify_u="100"/>
                </cell>
            </paint>
        </skin>
    ...
    

    As you can see, this example used a source image 128x32 texels (sum up h and w attributes of each cell).
    Firstly, the image split vertically to 3 cells. Than each of them is split horizontally to 3 sub-cells.
    Let's consider some typical tricks in this example:

    • You can't set the destination area fixed pixel size for a cell directly. Use max attribute, where size="100%" (it is the default value therefore it can be skipped).
      For example, if you need 16-pixels size of the destination area, set max="16".
    • Let's consider a case, when cells for the opposite sides use max attribute to set their pixel sizes, but the destination area is smaller than both cells' max size.
      In this case a cell size doesn't depend on max attribute. Use size="50%" and the resulting size of both cells will be approximately equal. The justify_u and justify_v attributes let one get better results.


    back


     
         
    Copyright © 1999-2017 Gladiators Software