| |
Смарт тайлинг может быть использован, когда размеры области раскраски и исходного изображения не совпадают (один больше другого или наоборот).
Например, исходное изображение:
При использовании Смарт тайлинга можно получить следующий результат:
Смарт тайлинг позволяет раскрашивать объекты с обрамлением и размещать целое число декоративных элементов.
В случае, если места для декоративного элемента недостаточно, он может быть скрыт (опционально)
Есть два способа разметки markup Смарт тайлинга. Простой способ - через использование секции smart_tiles.
Например:
...
<skin name="background">
<paint image="test.jpg">
<smart_tiles x="110:20:110" y="50:40:50" stretch="xy"/>
</paint>
</skin>
...
|
В этом примере мы предполагаем, что изначальное изображение прямоугольника поделено на 9 частей (3х3), вот так:
Зеленые линии были нарисованы для объяснения (не используйте их для прорисовки настоящих скинов).
Атрибут stretch создает замощеную (либо растянутую) границу. Он может быть пропущен, если не требуется растяжения.
Предпочтителен режим замощения (для лучшей производительности по скорости).
Альтернативный способ использования Смарт тайлинга более эффективен и гибок.
Он позволяет создавать сложные декорации на границах.
Основным принципом является разбивка исходного изображения на горизонтальные и вертикальные ячейки.
Вы можете делать это рекурсивно.
Например, сначала Вы можете разбить изображение вертикально:
Затем каждая ячейка делится горизонтально:
Наконец, каждая ячейка должна быть настроена:
- углы должны быть фиксированного размера
- левая/правая стороны должны быть замощены только вертикально
- верхняя/нижняя стороны должны быть замощены только горизонтально
Это общая идея. Теперь рассмотрим опциональные атрибуты ячейки более детально:
| order | - приоритет порядка ячеек. если этот атрибут пропущен, ячейка будет отображаться после всех других соседних ячеек |
| w | - ширина ячеек в исходном изображении (в текселях). Если выравнивание ячейки горизонтальное, этот атрибут можно не указывать |
| h | - высота ячейки исходного изображения (в текселях). Если выравнивание ячейки вертикальное, этот атрибут можно не указывать. |
| size | - предварительный размер ячейки согласно направлению выравнивания (в процентах области назначения, 100% по умолчанию) |
| min | - корректирует минимальный размер области отрисовки ячейки (в пикселях) |
| max | - корректирует максимальный размер области отрисовки ячейки (в пикселях) |
| step |
- корректирует размер области отрисовки ячейки с заданным шагом (в пикселях) |
| pos |
- позиция ячейки (в процентах от размера области назначения). Например, если по центру то будет равно 50% |
| mode_u | - режим отображения исходного изображения по оси Х. Допустимые значения: 'tile' (по умолчания) либо 'stretch'.
|
| mode_v | - режим отображения исходного изображения по оси Y. |
| justify_u | - выравнивание по оси X (в процентах) |
| justify_v | - выравнивание по оси Y (в процентах) |
Атрибуты w и h относятся к области исходного изображения (текстуры), все остальные относятся к области отрисовки на экране.
Рассмотрим пример шкурки:
...
<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>
...
|
Здесь представлены 3 вертикально выровненных ячейки. Порядок первой ячейки ="1".
Она должна быть размещена вертикально по центру (см. атрибут pos).
Предварительно, она пытается захватить 100% пространства (по умолчанию размер="100%"),
но есть некоторые ограничения (взгляните на атрибуты step и max).
Остальное пространство сверху и снизу занимается верхней и нижней ячейками.
Пожалуйста, заметьте, что у последней ячейки должна быть pos="100". Придерживайтесь этого правила в будущем во избежание непредвиденных результатов.
Вот более сложный пример с 3х3 ячейками:
...
<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>
...
|
Как вы можете видеть, в этом примере использовалось исходное изображение 128x32 тексела (суммируйте h и w атрибуты кадой ячейки).
Во первых, изображение поделили вертикально на 3 ячейки. Затем каждая из них была поделена горизонтально на 3 под-ячейки.
Рассмотрим некоторые типовые трюки в этом примере:
- Вы не можете установить фиксированный размер в пикселях для области назначения напрямую для ячейки.
Используйте атрибут max, где size="100%" (это значение по умолчанию, оно может быть пропущено).
Например, если вам нужно 16-пиксельное изображение области назначения, установите max="16".
- Рассмотрим случай, когда ячейки на противоположных сторонах используют атрибут max
для назначения их пиксельных размеров, но область отрисовки меньше максимального размера обеих ячеек.
В этом случае размер ячейки не зависит от атрибута max.
Используйте size="50%" и получившийся размер обеих ячеек будет примерно одинаков.
Атрибуты justify_u и justify_v позволяют получить лучшие результаты.
| |
