styles

Стили

Стили используются вместе с компонентами для того чтобы дать компоненту понять как и какие ассеты он должен рендерить.

Сам стиль представляет собой список из параметров. Такого типа

style[styleKey] = styleValue;
style[background] = @backgroundTexture;
style[width] = 100px;
style[height] = 100%;

На старте приложения собираются загруженные стили из файловой системы и также забитые кодом и обрабатываются Значения типа 100px, 100%, @backgroundTexture преобразуются в элементы. К примеру: @ - ссылка на файловую систему на экземпляр с id backgroundTexture в данном случае 100px - 100 пикселей т.е просто Number(100); 100% - это UnitValue который будет по запросу отдавать размер относительно контейнера элемента и т.д.

Стили могут наследоваться от других стилей. Если мы имеем стиль например:

BaseButtonStyle
{
    background=@baseButtonBackgroundTexture
    width=50px
    height=20px
}

Мы же хотим сделать кнопку которая будет как стандартная своими размером и другими свойствами но с другой текстурой. Тогда мы создаем стиль GameStartButton и наследуем его от BaseButtonStyle

GameStartButtonStyle extends BaseButtonStyle
{
    background=@gameStartButtonBackgroundTexture
    //Остальные свойства ширина и высота будут взяты с базового стиля
}

Также для комплексных стилей мы можем задавать под-стили или композитные стили. Предполагаем что есть окно настроек в нем есть текстовое поле и кнопки сохранить, отмена, и крестик в углу закрыть.

GameSettingsWindowStyle
{
    @saveButton.background=@baseButtonBackgroundTexture
    //теперь когда обрабатывается компонент в нем будет найдет суб-компонент с id saveButton
    //этому суб-компоненту будет задан сконструированный на основе данного стиль в данном
    //случае он будет содержать только background=@baseButtonBackgroundTexture

    @exitButton=BaseButtonStyle
    //суб-компоненту с id exitButton будет задан стиль BaseButtonStyle
}

P.S Композитные стили нужны лишь для удобства в некоторых случаях но понятно во что они могут вырасти, в огромные не контролируемые структуры из сотен под-элементов. Поэтому возможно стоит только визуально держать композитный стиль но под-стили генерировать в отдельные стили на этапе компиляции

Каждый компонент имеет свою определенную таблицу стилей styleSheet. В случае работы с эдитором в компонент эдиторе мы будем создавать лаяут компоненту и задавать элементы например: background - как SpriteRenderable т.е статичный спрайт и styleAnchorn как например bakcground

В случае программируемого компонента компонент будет содержать метод buildStyleSheet Пример: https://gist.github.com/gNikro/b067742f3e81ed76f116

Примерный класс стайла который используется сейчас в displayList движке: https://gist.github.com/gNikro/cba77bd96ce38389b043

Разворот стиля

Эксплорер стилей