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 шейдера. См. документацию по шейдерам.
• 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 — самый популярный редактор пиксель-арта. Специализированный, лёгкий, отличный для анимации. Базовые инструменты: Полезные сочетания:

• 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 выше. Ключевые соглашения по именованию:

• Имена 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 (рекомендуется к прочтению)
• Aseprite — редактор пиксель-арта
• Space Background Generator — для параллакс-фонов
• Гайды по спрайтингу от SS220/Sunrise (источник этого конспекта)