Guide to Spriting

Итак, вы хотите научиться спрайтингу — искусству создания пиксельной графики, которая оживляет персонажей, предметы и целые миры. Отлично! В этом гайде мы разберёмся с основами спрайтинга: от инструментов и работы с Byond, до советов по стилю. Главное - помните: Спрайтинг требует времени. Не сдавайтесь. Часто практикуясь, вы каждый раз становитесь чуть лучше.

Спрайтинг для Начинающих

Статья из каталога руководств Категории: Community; Contributing;

Что такое Спрайты?

Игровые спрайты людей. Сохраните, они пригодятся вам.

Каждый спрайт в SS13 - это изображение в пределах 32 на 32 пикселя. К примеру:

Спрайты обычно хранят в формате .png, без сжатия. Анимации могут быть сохранены, как .gif, или как .png в качестве полосы из 32x32 кадров. Но спрайты, используемые в SS13, хранятся в формате .DMI. О них речь пойдет чуть позже.

Где мне рисовать? Выбор программы

В BYOND-овском редакторе Dream Maker есть собственный редактор спрайтов, но он не подойдёт нам по функционалу (например, в нем отсутствует функция слоев), и понадобится, лишь чтобы поправить недочёты и собрать кадры в анимации. Где же вам заниматься спрайтингом? Существует ряд программ:

Хорошие:

• Aseprite - ОЧЕНЬ хороший редактор, специально изготовленный для пиксель-арта. Платный, хотя является open-source программой, поэтому вы свободно можете скачать и скомпилировать у себя их код с репозитория на гитхабе.
• GIMP - бесплатный редактор изображений, напоминающий фотошоп. Интерфейс может вызвать у вас трудности.
• Paint.net - Другой бесплатный редактор изображений. Довольно прост, поддерживается только на Windows.

Прочее:

• Piksel - Бесплатный онлайн редактор.
• Adobe Photoshop - Программа, используемая чаще всего не для пиксель-арта, но может подойти, если вы уже привыкли к ней.

Основной стиль

Если вы рисуете спрайты, которые в последствии будут использоваться в нашем билде на постоянной основе, им нужно соответствовать определенному стилю и уровню качества. Это связано не с тем, что мейнтейнеры билда ворчуны - в противном случае визуальная составляющая игры быстро превратилась бы в венегрет из спрайтов разного стиля и качества. Снизу будут перечислены основные моменты, на которые вам стоит обратить внимание.

Перспектива

Спрайты, как правило, должны быть в перспективе на три четверти (для краткости - 3/4), за некоторыми исключениями. Перспектива на 3/4, по сути, означает, что у объектов одна грань и видна верхняя часть, обращенная вверх. В большинстве случаев это относится и к спрайтам предметов. Тут можно почитать про перспективу чуть подробнее.

Палитра

У нашего сервера в данный момент существует палитра, которой мы придерживаемся. Вы можете выходить за ее пределы, если знаете, что делаете. В целом, старайтесь использовать как можно меньше цветов, и выбирайте более контрастные, если это возможно. Если существующий в игре предмет похож на ваш спрайт (например, если он содержит цвета того же отдела), возьмите цвета этого уже существующего в билде спрайта, чтобы сохранить общую согласованность.

Контуры

Все спрайты должны иметь цветные контуры. Это означает, что спрайты должны иметь контуры, состоящие из более темных оттенков цветов, с которыми они соединяются, вместо одноцветного контура. Контуры также не должны игнорировать свето-тень: становиться темнее в более темных частях объекта и светлее, при выделении более светлых частей.

Предметы

Каждый предмет как минимум имеет хотя бы один спрайт - тот, что отображается в вашем инвентаре. Рекомендуется также добавить спрайты в руке "инхенд" (in hand), которые отображаются на мобе, когда он держит ваш предмет. В сумме спрайтов в руке 8 (по 4 на каждую руку). Также, можно добавить "инворлд" (in world) версию предмета - это уменьшенная версия спрайта, который он будет принимать, когда находится вне инвентаря игрока. В итоге программа-максимум - по 10 спрайтов на предмет.

- [WIP] - Картинку заменить, добавив плюс к этому то как оно лежит в другой руке и инворлд спрайт. В сумме должно получиться 10 клеток.

Одежда

Пример: серая униформа.

Для создания предмета одежды понадобится нарисовать ему:

• Вид спереди, сзади и с обоих сторон. - Примеры в билде
• Специальный "спрайт-предмет" - то, как вещь будет отображаться в слоте инвентаря, или на земле. - Примеры в билде
• (Необязательно) "In-hand" спрайты - маленькие изображения предмета для того, чтобы они отображались при ношении в руках. Необходимо нарисовать для обоих рук. - Примеры в билде

BYOND показывает спрайты один слой поверх другого; каждый спрайт не должен быть шире, чем слой выше. Пример: если вы рисуете униформу, помните, что она должна быть уже, чем спрайт скафандра. В противном случае несколько пикселей из униформы будут отображаться по всему краю скафандра.

Спрайты головных уборов, масок, очков, формы, костюмов и обуви рекомендуется рисовать для всех рас и комплекций тела. Особенно это касается расы Воксов.

Объекты и Машинерия

Плитка

Большие неперемещаемые объекты обычно занимают весь тайл, подчеркивая их размер. При рисовании объектов старайтесь оставлять у краёв тайла небольшой промежуток (к примеру, 1-2 пикселя), чтобы рядом стоящие объекты не сливались между собой. Машинерия чаще всего анимирована.

Внедрение

Чтобы добавить свои спрайты в игру, вам понадобится перенести их в формат DMI (Dream Maker Icon) - BYOND использует его для хранения изображений (По сути это измененный формат .png). В нашем билде все эти файлы хранятся в папке "icons". В целом, если вы не вносите в билд свои спрайты самостоятельно, потому что не хотите разбираться с Гитхабом, и нашли раба-кодера, который добавит ваши изменения за вас, эту главу можно проигнорировать. Найти таких людей можно в нашем дискорде, в канале #rnd или #sprites.

Если существующий в билде .dmi файл подходит для вашего спрайта, используйте его вместо создания нового. Если же необходимо создать новый файл - процесс довольно прост:

1. Открываете BYOND-овский Dream Maker.
2. В меню создаём "New Environment"
   • Если у вас уже есть "Environment" в котором работаете, или из-за предыдущего открытия dmi-файлов, вы можете перейти сразу к шагу 5.
3. Укажите каталог файлов, в котором находится файл "среды" (.dme) и связанные с ним файлы будут находиться. Назовите .dme файл.
4. Создайте новый файл через File->New. (Если вы создали новую среду, программа все сделает за вас.) Выберите "Icon File (.dmi)". Укажите, где .dmi будет находиться относительно папки, в которой хранится файл среды (если вы оставите поле пустым, файл будет находиться в той же папке). Назовите его как-нибудь.
5. Важно: В одном dmi файле - могут быть спрайты только одного размера. Установите размер 32х32.

Эти .dmi файлы, конечно, лишь "контейнеры" для ваших спрайтов. Чтобы наполнить их вашими произведениями искусства, вы можете:

1. Находясь внутри DMI-файла, откройте меню "Graphic" в самом вверху (или ПКМ по пустому месту) и выберите "Import". Выберите в открывшимся окне ваш спрайт и нажмите "ОК". Выбирайте файлы в заданном DMI-файлом разрешении (обычно это 32х32, как говорилось ранее), иначе программа порежет ваш спрайт на куски.
2. ПКМ где угодно в центре экрана, внутри открытого DMI-файла, либо откройте меню "Graphic" в самом вверху и выберите "New State". Открылся редактор, в котором вы увидите пустое ничего. Теперь вы можете делать с ним всё, что угодно, к примеру, скопировать (Ctrl + C, Ctrl + V) туда свой спрайт из любого редактора изображений.

Анимации

Чтобы сделать стейт-анимацию, вам понадобится сделать несколько кадров (Нажмите на "+" снизу, либо выберите кол-во кадров слева. Теперь вы можете редактировать кадры. Также не забудьте настроить длительность каждого кадра (Delay) - достаточно просто кликнуть на цифры над кадрами, и вуаля! Можете выбрать любое число, даже дробное. Ну и наконец, чтобы посмотреть, что получается, поставьте галочку около надписи "Animate" слева, и вы увидите вашу анимацию в небольшом окошке. Можете там же настроить дальность просмотра.

Советы

• Спрайты, как правило, должны располагаться по центру холста, особенно если их можно подобрать.
• При рисовании предмета важно не сделать его слишком большим или слишком маленьким, иначе игрокам будет неудобно его использовать.
• Отсылки разрешены, но старайтесь делать это ненавязчиво.
• DMI Viewer - онлайн инструмент, показывающий спрайты внутри DMI файла. Помимо обычной загрузки, умеет открывать файл по ссылке.
• Когда хотите показать кому-то свое творение - не кидайте одежду просто скрином из редактора - так ни вы, ни советчики ничего не увидят. Цепляйте одежду на куклу там же в редакторе, или тестите в игре.

Что прочесть и где найти помощь?

• Вы всегда можете задать вопросы или обсудить свои творения в канале #sprites нашего дискорда.
• Референсы и гайды от Вальтера
• Для знатоков английского существует "SS13 Spriter Server" - небольшой канал в дискорде, созданный спрайтером зарубежной /goon/ станции Gannets для помощи новичкам. В нём состоит огромное кол-во спрайтеров всея SS13.
• Читайте гайды! На просторах интернета их море, достаточно просто загуглить. Примеры:

Русские:

• http://gas13.ru/v3/tutorials/ru_sywtbapa_almighty_grass_tile.php
• https://gamin.me/posts/4849

Англоязычные:

• https://tgstation13.org/phpBB/viewtopic.php?f=11&t=687
• http://androidarts.com/pixtut/pixelart.htm
• https://onimille.tumblr.com