SS14:Файлы

Спрайты

Эта часть сугубо для файлов из репозитория. Все файлы из репозитория следует загружать в формате png или apng. (Данные форматы взаимозаменяемы)

Инструменты

Вы не станете мастером, если не будете иметь под рукой небольшой набор инструментов :Cat_nerd:, поэтому вот вам список всего, что мы сегодня будем использовать:

• [игры] - Источник всех спрайтов для ваших злодеяний. Все спрайты находятся в space-station-14/Resources/Textures
• ezgif.com - Крутой сайт, имеющий весь инструментарий для создания гифок и обрезки спрайтов (да-да, не удивляйтесь, скоро всё поймёте).

Обработка материала

Создание статичных спрайтов

Создание сложного статичного спрайта

Некоторые спрайты, хоть и являются статичными, но собираются из нескольких отдельных спрайтов. Примерами таких спрайтов являются: Ключи шифрования (на самом деле они состоят из спрайта "основы" разных цветов и значка отдела, который накладывается поверх спрайта "основы") или светящиеся палочки (у которых одна и та же "основа" сверху и снизу, но разный цвет у самой палочки).

1. Найдите все нужные части сложного спрайта по папкам в Resources/Textures.
2. Откройте самый нижний слой спрайта вашим любимым редактор изображений с поддержкой нескольких слоёв.
3. Накиньте следующими слоями всё остальное. Если что-то выглядит не так, как должно - попробуйте поперемещать слои, возможно вы просто разместили их не в том порядке.
4. Когда вы уверены что изображение выглядит так, как должно - сохраните его как новое изображение в удобном вам месте.

НИКОГДА НЕ СОХРАНЯЙТЕ ИЗОБРАЖЕНИЕ ЧЕРЕЗ ОПЦИЮ "Сохранить", ТАК КАК ВЫ РИСКУЕТЕ ПОТЕРЯТЬ ВАШ ИЗНАЧАЛЬНЫЙ СПРАЙТ. ВСЕГДА ИСПОЛЬЗУЙТЕ ОПЦИЮ "Сохранить как..."'

---

Создание анимированных спрайтов

Все анимированные спрайты в игре хранятся в виде spritesheets - изображения, на котором все спрайты объекта (его повороты, анимации и прочее) склеены в одно большое изображение.

Разделение spritesheet на отдельные изображения

1. Откройте файл meta.json в .rsi папке с вашим спрайтом и найдите строчку "size". В этом параметре вы найдёте размеры спрайта по x и по y (чаще всего они равны и спрайт представлют из себя квадраты, но никогда нельзя быть уверенным в чём-то на 100%).
2. Зайдите на сайт https://ezgif.com, после чего в разделе "split" выберите "Sprite sheet cutter".
3. Загрузите ваш spritesheet на сайт
4. Поставьте галочку напротив "By tile size" и в появившихся полях впишите размеры спрайта (помните, что width = ширина = x, а height = высота = y). Формат изображений менять не рекомендуется во избежании шакалов
5. Нажмите кнопку "Cut!"

Вот и всё! Снизу у вас появились нужные вам кадры, которые вы можете скачать в виде zip-архива, или создать gif анимацию!

---

Преобразование кадров в gif

Если вы никуда не уходили с сайта с прошлого этапа и до сих пор находитесь на странице с вашими нарезанными кадрами:

1. Нажмите кнопку "Create GIF animation". Вас должно перевести на страницу создания анимации. Перед вами будут представлены все кадры, полученные в прошлом параграфе.
2. Скорее всего в вашем спрайте есть много вариантов одного и того же существа (или предмета) под разные игровые ситуации, поэтому вам необходимо отключить ненужные кадры. Делается это во вкладке "Toggle a range of frames" чуть ниже полученных кадров. Вписываете номер начального и конечного кадров (включительно), с которыми вам нужно провести манипуляции и нажимаете "Skip" или "Enable", в зависимости от того, что вы хотите сделать. Эти кадры останутся здесь, но будут пропущены при создании анимации и вы их не увидите на гифке.
3. В пункте "GIF options" вы можете настроить Delay для каждого кадра в анимации. Если вы не знаете что ставить - загляните в meta.json и найдите название вашего файла без расширения в пункте "states". Там списком будут указаны все Delays в секундах для стейта вашего спрайта. Если они все одинаковы - в поле "Delay time" прописываете время в 1/100 от секунды (то есть 0.2 секунды будет равно 20/100 от секунды, значит в поле нужно прописать 20), которое будет применено к каждому кадру в анимации. Если же они разные - могу лишь пожелать удачи обозначить время для каждого кадра.
4. Нажимаем галочку "don't stack frames" (каждый новый кадр будет рисоваться чистым, без остатков предыдущих кадров) и затем нажимаем на кнопку "Make a GIF".

НЕ ЗАБУДЬТЕ СКАЧАТЬ ВАШУ ГИФ С ПОМОЩЬЮ КНОПКИ save СНИЗУ. Это важно, так как гифки на сайте хранятся ограниченное количество времени и могут сгореть, из-за чего вам снова нужно будет вырезать спрайты и совмещать их в гифку.

---

Если вы скачали кадры архивом и ушли с сайта ИЛИ у вас уже есть готовый набор вырезанных кадров:

1. Распаковывам архив с нашими кадрами, если вы этого ещё не сделали
2. На сайте выбираем раздел "GIF maker" и загружаем туда все нужные нам кадры
3. В пункте "GIF options" вы можете настроить Delay для каждого кадра в анимации. Если вы не знаете что ставить - загляните в meta.json и найдите название вашего файла без расширения в пункте "states". Там списком будут указаны все Delays в секундах для стейта вашего спрайта. Если они все одинаковы - в поле "Delay time" прописываете время в 1/100 от секунды (то есть 0.2 секунды будет равно 20/100 от секунды, значит в поле нужно прописать 20), которое будет применено к каждому кадру в анимации. Если же они разные - могу лишь пожелать удачи обозначить время для каждого кадра.
4. Нажимаем галочку "don't stack frames" (каждый новый кадр будет рисоваться чистым, без остатков предыдущих кадров) и затем нажимаем на кнопку "Make a GIF".

НЕ ЗАБУДЬТЕ СКАЧАТЬ ВАШУ ГИФ С ПОМОЩЬЮ КНОПКИ save СНИЗУ. Это важно, так как гифки на сайте хранятся ограниченное количество времени и могут сгореть, из-за чего вам снова нужно будет вырезать спрайты и совмещать их в гифку.

---

Наложение анимированной части спрайта на статичную

Если вам нужно наложить что-то движущееся (например анимацию монитора консоли) на что-то статичное (например на пнг изображение консоли):

1. Вырезаем анимированную и статичную часть спрайта (или склеиваем составную статичную часть спрайта) по инструкции и скачиваем полученные кадры в формате архива.
2. Добавляем нашу статичную часть спрайта в папку с кадрами анимации, которая будет наложена поверх спрайта. Если в анимации есть лишние кадры (например спрайт для повёрнутой версии предмета, или для особого стейта) - удаляем их.
3. Зайдите на сайт https://ezgif.com, и выбираем раздел "GIF maker". Загружаем туда все наши кадры и статичную часть спрайта, которую мы добавили в ту же папку ранее.
4. В списке кадров наводимся на наш кадр со статичной частью анимации и перетаскиваем его перед всеми кадрами
5. В пункте "GIF options" вы можете настроить Delay для каждого кадра в анимации. Если вы не знаете что ставить - загляните в meta.json и найдите название вашего файла без расширения в пункте "states". Там списком будут указаны все Delays в секундах для стейта вашего спрайта. Если они все одинаковы - в поле "Delay time" прописываете время в 1/100 от секунды (то есть 0.2 секунды будет равно 20/100 от секунды, значит в поле нужно прописать 20), которое будет применено к каждому кадру в анимации. Если же они разные - могу лишь пожелать удачи обозначить время для каждого кадра.
6. Нажимаем галочку "don't stack frames", галочку "use first frame as background" и галочку "0 delay for the first frame". Галочка "don't stack frames" означает что старые кадры будут очищаться с гифки при проигрывании и у нас не будет их "следов" (выглядит это конечно красиво, но нам это не нужно). Галочка "use first frame as background" заставит первый кадр во всей анимации стать фоном этой анимации (то есть все следующие кадры будут накладываться на него). Галочка "0 delay for the first frame" означает что наш "фон" никогда не появится отдельным от всех кадром, то есть он всегда будет показан фоном и не будет показан отдельным от остального кадром.
7. Нажимаем на кнопку "Make a GIF" и проверяем работоспособность гифки.

НЕ ЗАБУДЬТЕ СКАЧАТЬ ВАШУ ГИФ С ПОМОЩЬЮ КНОПКИ save СНИЗУ. Это важно, так как гифки на сайте хранятся ограниченное количество времени и могут сгореть, из-за чего вам снова нужно будет вырезать спрайты и совмещать их в гифку.

Использование меты

Файлы meta используется игрой для правильного проигрывания анимаций, соответственно может быть использован и нами для выставления времени кадров в анимированных картинках.

Использование прототипов

Прототипы (файлы с расширением .yml) содержат в себе информацию о свойствах предметов. В частности нас интересует информация о спрайте, последовательности слоёв, и их цветокоррекции.

Наименование файлов

Все файлы следует называть в соответствии с данным шаблоном:

Название.формат

Пример:

Файл.png

Файлы репозитория

Файлам из репозитория игры следует давать названия согласно их ID в игре. Не следует как либо изменять название во избежание поломок ботов работающих ID. ID можно найти в самом репозитории. Пример:

HydroponicsTray.png

В случае нескольких предметов с одинаковыми ID, следует добавлять к названию указание состояния или цифру
Примеры:

HydroponicsTray1.png

HydroponicsTray2.png

В том случае если ID предмета не существует в игре, следует давать название по папке и файлу спрайта в репозитории следующим образом.

Папка-файл.png

Пример:

Onion-harvest.png

Файлы не из репозитория

В случае файлов не из репозитория, следует давать названия на русском языке. Для разделения слов следует использовать тире.
Пример:

Конструкция.png

Шаблон файл

Шаблон файл является обязательным к заполнению для всех файлов загружающихся на Вики.

Лицензии

Лицензии также является обязательным пунктом в статье файла. Обычно используются следующие лицензии

{{CC-BY-SA-3.0}} - Для файлов из репозитория игры

{{CC BY-NC-SA 4.0}} - Для скриншотов

{{NoLicense}} - Для файлов с неизвестным источником