> ## Documentation Index > Fetch the complete documentation index at: https://docs.ss14.art/llms.txt > Use this file to discover all available pages before exploring further. # Спрайты и иконки SpriteComponent и IconComponent — два основных компонента рендеринга для сущностей. SpriteComponent используется для рендеринга сущностей на карте, а IconComponent — это более простой способ представления иконки сущности, например, на панели спавна. ## Выбор текстуры Есть два способа выбора текстуры: 1. Прямой файл текстуры (сейчас это PNG). 2. Из RSI, с ID состояния. RSI — это наш аналог формата DMI из BYOND, содержащий список иконок по ключам. Загрузка из текстуры довольно проста. Вы просто указываете путь к файлу .png в VFS, и всё готово. С RSI вам нужно указать сам RSI в одной переменной, а затем состояние RSI в другой. ### IconComponent IconComponent имеет 3 свойства в прототипе: \`yml * type: Icon texture: "" sprite: "" state: "" \` exture используется для ссылки на прямую текстуру, такую как PNG. sprite и state используются для ссылки на RSI и соответствующее состояние. Они взаимоисключающие: вы не можете использовать exture вместе с sprite и state. ### SpriteComponent А вот здесь начинается самое интересное. SpriteComponent делает всё: поддержка шейдеров, слои, направления, анимации... Компонент использует несколько слоёв, наподобие overlay'ев в BYOND. Эти слои рисуются по порядку, поэтому последний слой в списке будет поверх остальных. Вы можете указать слои в прототипе в виде списка под ключом layers, например: \`yml * type: Sprite layers: * texture: "a.png" * texture: "b.png" * ... \` Слой в прототипе имеет следующие свойства: * exture: то же, что и для IconComponent. * sprite: то же, что и для IconComponent. Если не указано, слой может использовать свойство sprite основного прототипа (подробнее ниже). * state: то же, что и для IconComponent: состояние RSI. * shader: а вот и самое интересное: ID шейдера. [См. документацию по шейдерам](./shaders). * scale: Масштаб слоя, задаётся как vector 2 (2 числа с плавающей точкой, разделённые запятой). * otation: Поворот слоя, в градусах. * isible: rue или alse, включает/отключает слой. Полезно, если слой включается кодом, например, пламя сварочного инструмента. Основной прототип также имеет некоторые свойства: * sprite, state и exture. Они работают как быстрые сокращения для тех же свойств слоёв. Если они установлены, добавляется слой с этими параметрами текстуры. Важно: **sprite действует для всех слоёв, если слой не указывает свой собственный.** То есть вы можете установить базовый спрайт прототипа на RSI, и тогда каждому слою нужно указать только состояние. * scale: масштаб, применяемый ко всем слоям. * otation: поворот, применяемый ко всем слоям, в градусах. * offset: смещение, применяемое ко всем слоям. * drawdepth: порядок отрисовки этого спрайта. Соответствует enum DrawDepth в коде. Чем выше значение, тем выше объект будет отображаться относительно объектов с меньшим draw depth. * color: цветовое умножение, применяемое ко всем слоям. Используйте hex-цвет. * directional: если true, спрайт не будет поворачиваться вместе с сущностью, но будет менять направление RSI на север/юг/восток/запад и т.д. Если false, эти направления игнорируются, и спрайт вращается как обычно. Отключение полезно для top-down спрайтов, которые должны вращаться, например, пули. * isible: делает весь компонент видимым или невидимым. Все эти свойства могут быть изменены во время выполнения с помощью методов компонента. *** # Гайд по спрайтингу Этот гайд охватывает визуальную сторону создания спрайтов для Space Station 14. Это рекомендации, а не строгие правила — используйте их как отправную точку и развивайте свой стиль с практикой. ## Визуальный стиль В SS14 используется **проекция 3/4 сверху** — вы видите верхнюю грань и одну боковую сторону объекта. Источник света обычно сверху и немного сбоку. ### Палитра Используйте ограниченную палитру из **4–5 оттенков на базовый цвет**: | Оттенок | Назначение | | -------- | --------------------------------------------------- | | Блик | Самая светлая точка, для глянцевых поверхностей | | Свет | Освещённая часть, обращённая к свету | | Основной | Главный цвет материала | | Полутень | Переход между основным и тенью | | Тень | Самая тёмная часть, противоположная источнику света | Хорошее правило: тени делайте чуть **холоднее** (синеватые), а блики чуть **теплее** (желтоватые). Это называется hue shift и делает цвета естественнее. Схема палитры ### Контур (обводка) * Каждый спрайт нуждается в **контуре** — он отделяет объект от фона. * **Никогда не используйте纯 чёрный контур**. Вместо этого используйте более тёмный оттенок цвета объекта. * Слегка меняйте оттенок контура на теневой стороне для более мягкого вида. Правильный и неправильный контур ### Контраст Свет и тень должны чётко различаться. Низкий контраст делает спрайты плоскими и плохо читаемыми на расстоянии. Если сомневаетесь — отдалите спрайт; если детали сливаются, увеличьте контраст. ## Теория ### Line Art (линии) Начинайте с чистых линий до добавления цвета. Ключевые моменты: * Толщина линий должна быть **одинаковой** по всему спрайту. * Избегайте **зазубрин** — диагональные линии должны использовать плавный, повторяющийся шаблон пикселей. Плавные и рваные кривые ### Сглаживание (Anti-Aliasing) Сглаживание смягчает резкие пиксельные края, размещая пиксели промежуточного цвета на углах и изгибах. Используйте его умеренно — слишком много делает спрайт размытым. Сглаженное и несглаженное Избегайте **бандинга** — параллельных линий похожего цвета, создающих полосатый эффект. Бандинг делает тени механическими. Если не уверены — делайте проще и чище. Пример бандинга ### Шейдинг по материалу Разные материалы отражают свет по-разному: | Материал | Стиль шейдинга | | -------- | ----------------------------------------------------------------------- | | Металл | Сильные блики, высокий контраст, резкие переходы | | Пластик | Средний контраст, мягкие блики | | Ткань | Рассеянный свет, мягкие тени, без бликов, матовая | | Дерево | Матовое (сырое) или глянцевое (лакированное), часто с текстурой волокон | | Стекло | Полупрозрачное, яркие блики по краям | Всегда определяйте **источник света** перед шейдингом. В SS14 свет падает сверху. Этапы шейдинга шара ### Аксонометрия (перспектива 3/4) Объекты рисуются в проекции 3/4 сверху. Ребро 3/4 (где верхняя грань встречается с боковой) обычно выделяется бликом для читаемости формы. Начинайте с **простых форм** (куб, цилиндр, шар) для построения объёма. Собирайте объект как конструктор, проверяйте силуэт, затем добавляйте цвет и шейдинг. Куб в аксонометрии ### Типичные ошибки * **Pillow shading** — шейдинг от центра к краям без источника света. Всегда выбирайте направление света сначала. * **Чрезмерный дизеринг** — пиксельный шум скрывает форму. Используйте дизеринг умеренно, только для текстур. * **Слишком много цветов** — придерживайтесь 4–5 на базовый цвет; больше оттенков редко улучшает спрайт 32×32. ## Программы ### Aseprite (рекомендуется) Aseprite — самый популярный редактор пиксель-арта. Специализированный, лёгкий, отличный для анимации. **Базовые инструменты:** | Инструмент | Клавиша | Назначение | | ---------- | ------- | -------------------------------------- | | Карандаш | B | Рисовать отдельные пиксели | | Ластик | E | Удалять пиксели | | Пипетка | I | Взять цвет с холста | | Заливка | G | Залить область одним цветом | | Выделение | M | Выделять/перемещать/копировать области | | Линия | L | Рисовать прямые линии | **Полезные сочетания:** * `Shift + R` — заменить один цвет на другой * `Shift + H` — отразить по горизонтали * `Shift + V` — отразить по вертикали * `Shift + O` — автоматическая обводка выделения **Анимация:** Нажмите `Tab` для открытия таймлайна. Слои работают как прозрачные плёнки. `Shift + N` — новый слой, `Alt + N` — новый кадр. **Скрипты:** Aseprite поддерживает Lua-скрипты (File → Scripts → Open Scripts Folder). Скрипт More Color Shading Options помогает генерировать палитры. ### Resprite (мобильный) Бесплатный аналог Aseprite для телефона. Полезен для быстрых набросков и практики в дороге. ## Практика ### Подход 1: По шаблону Используйте существующие шаблоны спрайтов (у SS220 большая коллекция). Замените палитру, сохраняя структуру: 1. Загрузите шаблон. 2. Замените каждый оттенок на выбранный цвет. 3. Подстройте яркость/насыщенность под стиль игры. Этот подход хорош для изучения работы с палитрой и структурой одежды. ### Подход 2: С нуля Начните с простого объекта (например, деревянный стул), чтобы отработать полный процесс: 1. **Силуэт** — наметьте базовую форму. Определите источник света. 2. **Объём** — добавьте детали (ножки, сиденье, спинка) в правильной перспективе. 3. **Тени и контуры** — затемните участки вдали от света. Добавьте цветные контуры. 4. **Переходы граней** — выделите ребро 3/4 между гранями. 5. **Падающая тень** — добавьте тень на землю, соответствующую направлению света. Стройте из простых форм. Даже сложные объекты можно разбить на кубы, цилиндры и шары. ## Работа с RSI Технические детали формата RSI (meta.json, именование стейтов, лицензии) — см. [спецификацию RSI](#texture-selection) выше. Ключевые соглашения по именованию: * Имена RSI-папок: строчные буквы, подчёркивание как разделитель, без префиксов вида `_ss220` * Файлы спрайтов внутри: `icon.png` (32×32 инвентарь), `equipped-INNERCLOTHING.png` (64×64, 4 направления), `inhand-left.png` / `inhand-right.png` * `meta.json` обязан включать: version, license, copyright, size и массив states ## Ресурсы * [Pixel Logic — Michael Azzi](https://gumroad.com/l/pixel_logic) (рекомендуется к прочтению) * [Aseprite](https://aseprite.org/) — редактор пиксель-арта * [Space Background Generator](https://deep-fold.itch.io/space-background-generator) — для параллакс-фонов * Гайды по спрайтингу от SS220/Sunrise (источник этого конспекта)