Гайд на спрайты
Привет, викиделы. Сегодня мы поговорим о такой теме под названием "Спрайты на вики", в частности рассмотрим то, как они делаются быстро, чётко и красиво.
Инструменты
Вы не станете мастером, если не будете иметь под рукой небольшой набор инструментов :Cat_nerd:, поэтому вот вам список всего, что мы сегодня будем использовать:
- Файлы игры - Источник всех спрайтов для ваших злодеяний. Если у вас до сих пор нет локальной копии файлов игры - сделайте всё как сказано в этом гайде.
- ezgif.com - Крутой сайт, имеющий весь инструментарий для создания гифок и обрезки спрайтов (да-да, не удивляйтесь, скоро всё поймёте).
- Любой редктор изображений с поддержкой нескольких слоёв - Буквально что угодно на ваш вкус и цвет. Главное чтобы это "что угодно" имело функцию слоёв. Вы можете использовать как что-то профессиональное (как например Photoshop или Gimp), так и обычные программы для рисования, в которых изображения можно размещать в несколько слоёв (например FireAlpaca, на этой странице будет использоваться именно она).
- (Опционально) Терминальная утилита find - Если вы - счастливый обладатель Unix-like системы (macOS, Linux) (или вы установили WSL) и умеете пользоваться терминалом - вы можете использовать find для быстрого поиска файлов и папок с помощью regex-выражений.
Поиск материала
Прежде чем что-то обработать - для начала надо найти то, что мы будем обрабатывать. Основа основ - все текстуры в игре (в том числе спрайты) находятся в папке Resources/Textures.
Структура Resources/Textures
Изначально папка Resources/Textures встречает нас несколькими другими папками. Эти папки - области применения тех или иных спрайтов (к примеру у нас есть папка Mobs, в которой хранятся все текстуры для мобов; папка Clothing, в которой хранится вся одежда и т.п.). Содержимое этих папок может быть дополнительно расспортировано на подкатегории (к примеру в папке Clothing всё рассортировано по частям тела, в папке Markers эта сортировка отсутствует за ненадобностью, а в папке Structures так вообще рядом находятся .rsi папки и папки подкатегорий). Но это ещё не всё. В этих папках подкатегорий могут также располагаться следующие папки подкатегорий. При желании, такой вид "Категория => Подкатегория => Подкатегория подкатегории => Подкатегория подкатегории подкатегории" может идти очень и очень долго.
Это впринципе всё, что нужно знать об иерархии в папке Textures.
Поиск папки средствами операционной системы
Самое банальное что может прийти в голову - открыть папку с файлами игры в проводнике и найти нужный нам спрайт через окно поиска. Здесь не должно быть ничего сложного.
Windows
С виндой всё сложно, если вы видите тут эту строку значит я ничего не сделал
MacOS
Здесь есть несколько путей:
Поиск через Spotlight:
- В строке меню нажмите на значок увеличительного стекла. Вам откроется окно поиска, в которое необходимо ввести желаемое. Я хочу найти папку со спрайтами светящихся палочек, поэтому я ввожу "glowstick", что spotlight автоматически дополняет до "glowstick.rsi", что и является искомой папкой с текстурами.
- Остались вопросы? https://support.apple.com/ru-ru/guide/mac-help/mchlp1008/mac
Поиск через Finder:
- Находим нашу папку с файлами игры и открываем её в Finder.
- В папке с файлами игры заходим в папку Resources/Textures. Это во много раз упростит нам жизнь и сузит круг поиска.
- Нажимаем на значок увеличительного стекла справа сверху окна Finder и вводим желаемое.
- Чуть ниже переключаем параметр поиска с "Этот Mac" на "Textures", чтобы поиск проводился в папке Textures.
Linux
Здесь всё сложно. То, как вы ищете файлы может зависеть от чего угодно, начиная от вашего дистрибутива и заканчивая кастомным окружением рабочего стола, поэтому я оставлю это на ваши плечи, не маленькие, разебрётесь.
Поиск средставим операционной системы через терминал
Я смотрю вам нравится страдать. Если вы не умеете работать с терминалом - пожалуйста вернитесь к более понятному и простому варианту поиска
Windows
Пожалуйста, не используйте терминал на windows
MacOS
При запуске терминала вы изначально оказываетесь в директории ~ (то есть /Users/<Ваше имя пользователя>), из которой вам нужно дойти до вашей папки с файлами игры. Если вы нашли папку в Finder - нажмите ПКМ по папке и с зажатой клавишей ⌥ Option выберите пункт "Скопировать путь до "папка”".
- Перейдите к папке с файлами игры командой
cd <путь к папке>, где <пусть к папке> - путь к вашей папке (вау!) БЕЗ < >!!1 - Найдите нужную вам папку используя команду
find <папки, в которых вы хотите провести поиск> -name "<слово или regex выражение для поиска>". Пример:find Resources/Textures -name "*glowstick*.rsi"найдёт все папки и файлы, оканчивающиеся на ".rsi" и у которых в середине названия есть слово glowstick (* означает любое количество любых символов). - Полученный результат нужно скопировать и затем открыть в Finder с помощью команды
open <путь, найденный командой find>.
Linux
Действия на Linux не должны отличаться от действий на macOS, за исключением этапа с копированием пути к папке и того факта, что у вас в системе может не быть утилиты find.
- Перейдите к папке с файлами игры командой
cd <путь к папке>, где <пусть к папке> - путь к вашей папке (вау!) БЕЗ < >!!1 - Найдите нужную вам папку используя команду
find <папки, в которых вы хотите провести поиск> -name "<слово или regex выражение для поиска>". Пример:find Resources/Textures -name "*glowstick*.rsi"найдёт все папки и файлы, оканчивающиеся на ".rsi" и у которых в середине названия есть слово glowstick (* означает любое количество любых символов). - Полученный результат нужно скопировать и затем открыть в Finder с помощью команды
open <путь, найденный командой find>.
Обработка материала
Создание статичных спрайтов
Создание сложного статичного спрайта
Некоторые спрайты, хоть и являются статичными, но собираются из нескольких отдельных спрайтов. Примерами таких спрайтов являются: Ключи шифрования (на самом деле они состоят из спрайта "основы" разных цветов и значка отдела, который накладывается поверх спрайта "основы") или светящиеся палочки (у которых одна и та же "основа" сверху и снизу, но разный цвет у самой палочки).
- Найдите все нужные части сложного спрайта по папкам в Resources/Textures.
- Откройте самый нижний слой спрайта вашим любимым редактор изображений с поддержкой нескольких слоёв.
- Накиньте следующими слоями всё остальное. Если что-то выглядит не так, как должно - попробуйте поперемещать слои, возможно вы просто разместили их не в том порядке.
- Когда вы уверены что изображение выглядит так, как должно - сохраните его как новое изображение в удобном вам месте.
НИКОГДА НЕ СОХРАНЯЙТЕ ИЗОБРАЖЕНИЕ ЧЕРЕЗ ОПЦИЮ "Сохранить", ТАК КАК ВЫ РИСКУЕТЕ ПОТЕРЯТЬ ВАШ ИЗНАЧАЛЬНЫЙ СПРАЙТ. ВСЕГДА ИСПОЛЬЗУЙТЕ ОПЦИЮ "Сохранить как..."'
Создание анимированных спрайтов
Все анимированные спрайты в игре хранятся в виде spritesheets - изображения, на котором все спрайты объекта (его повороты, анимации и прочее) склеены в одно большое изображение.
Разделение spritesheet на отдельные изображения
- Откройте файл meta.json в .rsi папке с вашим спрайтом и найдите строчку "size". В этом параметре вы найдёте размеры спрайта по x и по y (чаще всего они равны и спрайт представлют из себя квадраты, но никогда нельзя быть уверенным в чём-то на 100%).
- Зайдите на сайт https://ezgif.com, после чего в разделе "split" выберите "Sprite sheet cutter".
- Загрузите ваш spritesheet на сайт
- Поставьте галочку напротив "By tile size" и в появившихся полях впишите размеры спрайта (помните, что width = ширина = x, а height = высота = y). Формат изображений менять не рекомендуется во избежании шакалов
- Нажмите кнопку "Cut!"
Вот и всё! Снизу у вас появились нужные вам кадры, которые вы можете скачать в виде zip-архива, или создать gif анимацию!
Преобразование кадров в gif
Если вы никуда не уходили с сайта с прошлого этапа и до сих пор находитесь на странице с вашими нарезанными кадрами:
- Нажмите кнопку "Create GIF animation". Вас должно перевести на страницу создания анимации. Перед вами будут представлены все кадры, полученные в прошлом параграфе.
- Скорее всего в вашем спрайте есть много вариантов одного и того же существа (или предмета) под разные игровые ситуации, поэтому вам необходимо отключить ненужные кадры. Делается это во вкладке "Toggle a range of frames" чуть ниже полученных кадров. Вписываете номер начального и конечного кадров (включительно), с которыми вам нужно провести манипуляции и нажимаете "Skip" или "Enable", в зависимости от того, что вы хотите сделать. Эти кадры останутся здесь, но будут пропущены при создании анимации и вы их не увидите на гифке.
- В пункте "GIF options" вы можете настроить Delay для каждого кадра в анимации. Если вы не знаете что ставить - загляните в meta.json и найдите название вашего файла без расширения в пункте "states". Там списком будут указаны все Delays в секундах для стейта вашего спрайта. Если они все одинаковы - в поле "Delay time" прописываете время в 1/100 от секунды (то есть 0.2 секунды будет равно 20/100 от секунды, значит в поле нужно прописать 20), которое будет применено к каждому кадру в анимации. Если же они разные - могу лишь пожелать удачи обозначить время для каждого кадра.
- Нажимаем галочку "don't stack frames" (каждый новый кадр будет рисоваться чистым, без остатков предыдущих кадров) и затем нажимаем на кнопку "Make a GIF".
НЕ ЗАБУДЬТЕ СКАЧАТЬ ВАШУ ГИФ С ПОМОЩЬЮ КНОПКИ save СНИЗУ. Это важно, так как гифки на сайте хранятся ограниченное количество времени и могут сгореть, из-за чего вам снова нужно будет вырезать спрайты и совмещать их в гифку.
Если вы скачали кадры архивом и ушли с сайта ИЛИ у вас уже есть готовый набор вырезанных кадров:
- Распаковывам архив с нашими кадрами, если вы этого ещё не сделали
- На сайте выбираем раздел "GIF maker" и загружаем туда все нужные нам кадры
- В пункте "GIF options" вы можете настроить Delay для каждого кадра в анимации. Если вы не знаете что ставить - загляните в meta.json и найдите название вашего файла без расширения в пункте "states". Там списком будут указаны все Delays в секундах для стейта вашего спрайта. Если они все одинаковы - в поле "Delay time" прописываете время в 1/100 от секунды (то есть 0.2 секунды будет равно 20/100 от секунды, значит в поле нужно прописать 20), которое будет применено к каждому кадру в анимации. Если же они разные - могу лишь пожелать удачи обозначить время для каждого кадра.
- Нажимаем галочку "don't stack frames" (каждый новый кадр будет рисоваться чистым, без остатков предыдущих кадров) и затем нажимаем на кнопку "Make a GIF".
НЕ ЗАБУДЬТЕ СКАЧАТЬ ВАШУ ГИФ С ПОМОЩЬЮ КНОПКИ save СНИЗУ. Это важно, так как гифки на сайте хранятся ограниченное количество времени и могут сгореть, из-за чего вам снова нужно будет вырезать спрайты и совмещать их в гифку.
Наложение анимированной части спрайта на статичную
Если вам нужно наложить что-то движущееся (например анимацию монитора консоли) на что-то статичное (например на пнг изображение консоли):
- Вырезаем анимированную и статичную часть спрайта (или склеиваем составную статичную часть спрайта) по инструкции и скачиваем полученные кадры в формате архива.
- Добавляем нашу статичную часть спрайта в папку с кадрами анимации, которая будет наложена поверх спрайта. Если в анимации есть лишние кадры (например спрайт для повёрнутой версии предмета, или для особого стейта) - удаляем их.
- Зайдите на сайт https://ezgif.com, и выбираем раздел "GIF maker". Загружаем туда все наши кадры и статичную часть спрайта, которую мы добавили в ту же папку ранее.
- В списке кадров наводимся на наш кадр со статичной частью анимации и перетаскиваем его перед всеми кадрами
- В пункте "GIF options" вы можете настроить Delay для каждого кадра в анимации. Если вы не знаете что ставить - загляните в meta.json и найдите название вашего файла без расширения в пункте "states". Там списком будут указаны все Delays в секундах для стейта вашего спрайта. Если они все одинаковы - в поле "Delay time" прописываете время в 1/100 от секунды (то есть 0.2 секунды будет равно 20/100 от секунды, значит в поле нужно прописать 20), которое будет применено к каждому кадру в анимации. Если же они разные - могу лишь пожелать удачи обозначить время для каждого кадра.
- Нажимаем галочку "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" означает что наш "фон" никогда не появится отдельным от всех кадром, то есть он всегда будет показан фоном и не будет показан отдельным от остального кадром.
- Нажимаем на кнопку "Make a GIF" и проверяем работоспособность гифки.
НЕ ЗАБУДЬТЕ СКАЧАТЬ ВАШУ ГИФ С ПОМОЩЬЮ КНОПКИ save СНИЗУ. Это важно, так как гифки на сайте хранятся ограниченное количество времени и могут сгореть, из-за чего вам снова нужно будет вырезать спрайты и совмещать их в гифку.
Забавности и технологии
Окрашивание "изображений-шаблонов"
Некоторые спрайты размещены в чёрно-белом формате. Это значит, что такой спрайт имеет "динамический цвет", регулируемый в прототипе. К таким спрайтам, например, относятся светящиеся палочки, аварийные фальшфееры и лужи.
Цвет эти спрайты получают попиксельно. С каждым цветом (красный, зелёный, синий) проводится манипуляция по следующей формуле:
color1/256*color2
Где:
- color1 - значение красного/зелёного/синего цвета, которое мы хотим применить к спрайту.
- color2 - значение красного/зелёного/синего цвета, которое имеет наше чёрно-белое изображение.
Если у вас получилась дробь - округляйте её в меньшую сторону
Допустим, мы хотим применить цвет #FFAABB (соответственно red = 256, green = 170, blue = 187) к пикселю, имеющему цвет #ADADAD (соответсвенно red = 173, green = 173, blue = 173).
Тогда чтобы получить красный на конечном изображении мы должны выполнить следующее:
256/256*173 = 173
Для зелёного:
170/256*173 ≈ 114
Для синего:
187/256*173 = 126
Значит что пиксель конечного изображения нужно окраживать в цвет #AD727E (соответственно red = 173, green = 114, blue = 126).
