Сделал систему скинов для котиков 🐈
В ScreenCat уже много скинов, и я прям сильно устал рисовать и подгонять каждый вручную в Figma. Особенно когда меняется поза, а вместе с ней нужно поправить голову, хвост, лапы, глаза и ещё десяток мелочей.
Посидел вместе с Claude и подумал: а что, если создание скина будет больше похоже на написание кода, чем на ручную сборку иллюстрации?
В итоге собрал data-driven систему на JSON. Теперь визуальная часть кота состоит из трёх уровней:
1. skin.json - описание конкретного кота: его части, текстуры, позиции, порядок слоёв, точки крепления аксессуаров и настройки взгляда.
2. JSON-клипы анимаций - описывают движение частей: подпрыгивание тела, поворот хвоста, наклон головы, моргание.
3. animations.json — граф состояний: когда кот сидит, бежит, спит, реагирует на действие или переключается между анимациями.
{
"id": "ginger_fold_cat",
"rig": {
"parts": [
{ "id": "body", "texture": "body.png", "position": [-5, -22] },
{ "id": "tail", "texture": "tail.png", "parent": "body", "position": [32, -12] },
{ "id": "head", "texture": "head.png", "parent": "body", "position": [-10, 41] }
]
}
}
Риг это иерархия частей внутри скина. Например, хвост прикреплён к телу, а глаза к голове. Поэтому при движении головы всё нужное едет вместе с ней.
Анимации задаются не абсолютными координатами, а дельтами от базовой позы. Один и тот же клип бега можно применить к разным котам, даже если у них разная форма тела или хвоста:
{
"part": "tail",
"property": "rotation",
"keys": [[0, 0], [0.14, 18], [0.42, -18], [0.56, 0]]
}
То есть здесь хвост просто отклоняется от своего обычного положения на 18 градусов туда и обратно. Клипу не нужно знать, где хвост находится у конкретного скина.
В итоге новый скин - это набор PNG и JSON, а не пачка исключений в коде. Можно менять пропорции, добавлять образы и анимации, а валидатор сразу проверит, что все части, текстуры и связи на месте.
PS: После написания json - скрипт прогоняет рендеринг PNG через ffmpeg
В ScreenCat уже много скинов, и я прям сильно устал рисовать и подгонять каждый вручную в Figma. Особенно когда меняется поза, а вместе с ней нужно поправить голову, хвост, лапы, глаза и ещё десяток мелочей.
Посидел вместе с Claude и подумал: а что, если создание скина будет больше похоже на написание кода, чем на ручную сборку иллюстрации?
В итоге собрал data-driven систему на JSON. Теперь визуальная часть кота состоит из трёх уровней:
1. skin.json - описание конкретного кота: его части, текстуры, позиции, порядок слоёв, точки крепления аксессуаров и настройки взгляда.
2. JSON-клипы анимаций - описывают движение частей: подпрыгивание тела, поворот хвоста, наклон головы, моргание.
3. animations.json — граф состояний: когда кот сидит, бежит, спит, реагирует на действие или переключается между анимациями.
{
"id": "ginger_fold_cat",
"rig": {
"parts": [
{ "id": "body", "texture": "body.png", "position": [-5, -22] },
{ "id": "tail", "texture": "tail.png", "parent": "body", "position": [32, -12] },
{ "id": "head", "texture": "head.png", "parent": "body", "position": [-10, 41] }
]
}
}
Риг это иерархия частей внутри скина. Например, хвост прикреплён к телу, а глаза к голове. Поэтому при движении головы всё нужное едет вместе с ней.
Анимации задаются не абсолютными координатами, а дельтами от базовой позы. Один и тот же клип бега можно применить к разным котам, даже если у них разная форма тела или хвоста:
{
"part": "tail",
"property": "rotation",
"keys": [[0, 0], [0.14, 18], [0.42, -18], [0.56, 0]]
}
То есть здесь хвост просто отклоняется от своего обычного положения на 18 градусов туда и обратно. Клипу не нужно знать, где хвост находится у конкретного скина.
В итоге новый скин - это набор PNG и JSON, а не пачка исключений в коде. Можно менять пропорции, добавлять образы и анимации, а валидатор сразу проверит, что все части, текстуры и связи на месте.
PS: После написания json - скрипт прогоняет рендеринг PNG через ffmpeg
А дальше я навайбкодил UI на Tauri, чтобы работать со скинами было ещё удобнее.
Про редактор, генерацию арта и весь этот пайплайн расскажу в следующих постах.