Guide to Spriting

Итак, вы хотите научиться спрайтингу — искусству создания пиксельной графики, которая оживляет персонажей, предметы и целые миры. Отлично!

В данной статье мы разберем, какую программу лучше выбрать, расскажем про то, как рисовать и добавлять спрайты в игру, и дадим ссылки на полезные статьи. Мы не научим вас рисовать, для этого подойдут многочисленные гайды в интернете и посещение художественной школы. Однако, мы рекомендуем прочитать книгу Майкла Аззи "Pixel Logic". Вот ссылка. (Внимание: гайд на английском)

Главное, помните: Спрайтинг требует времени. Не сдавайтесь. Практикуясь, вы каждый раз становитесь чуть лучше.

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

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

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

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

В [Space Station 13], спрайтами являются изображения всех объектов: персонажей, предметов, интерьеров, интерфейса. Обычно эти изображения находятся в пределах 32 на 32 пикселя. К примеру:

Спрайты обычно хранят в формате .png, без сжатия. Анимации могут быть сохранены, как .gif, или как в качестве раскадровки размером 32x32 пикселя. Но спрайты, используемые в SS13, хранятся в уникальном для BYOND формате DMI (Dream Maker Icon). По сути это измененный формат .png, спрайт-лист, но с парой особенностей:

1. Создаётся и изменяется через Dream Maker — встроенный редактор BYOND.
2. Сохраняется в виде PNG-файла, но с дополнительной метаинформацией, которая описывает:
   • Названия состояний (стейтов).
   • Количество кадров.
   • Направления (например, север, юг, запад, восток).
   • Скорость анимации и пр.

Пример использования DMI файла в коде билда:

icon = 'items.dmi'
icon_state = "laser_gun"

Это значит, что объект будет использовать иконку из файла items.dmi и брать спрайт с именем "laser_gun".

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

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

Хорошие:

• Aseprite - очень хороший редактор, специально созданный для пиксель-арта. Платный, хотя является open-source программой, поэтому вы свободно можете скачать и скомпилировать у себя их код с репозитория на гитхабе. Более дружелюбный новичку интерфейс.
• Pro Motion NG - более дорогой и более профессиональный вариант, чем Aseprite. Менее интуитивный интерфейс, но больше настроек и функций.
• GIMP - бесплатный редактор изображений, напоминающий фотошоп. Интерфейс может вызвать у вас трудности.

Прочее:

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

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

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

Берите в референс уже существующие спрайты из нашего билда, и, в конце концов, то, как выглядит игра в данный момент:

Этот скрин можно скачать, чтобы, например, подставить свой спрайт.

Ниже перечислены основные моменты, на которые вам стоит обращать внимание во время работы.

Перспектива

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

Палитра

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

Контуры

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

Предметы

Предмет должен иметь:

1. Спрайт в инвентаре - главный спрайт, то, как предмет будет выглядеть у игрока в рюкзаке. Старайтесь не рисовать близко к краю вашего 32х32 холста, а еще всегда размещайте спрайт по центру. Этот спрайт - детальное изображение предмета. Размещается в папке icons/obj , там они рассортированы по тематическим файлам. Например, спрайты бургеров вы найдете в food.dmi.
2. Спрайт в мире (англ. Inworld) - то, как предмет будет выглядеть в игровом окружении, например, на столе повара. Более маленькая версия, чем спрайт в инвентаре, потому что он должен соответствовать пропорциям персонажа, тоесть он должен быть меньше его (бургер же меньше человека). Предмет будет принимать этот спрайт, когда находится вне инвентаря персонажа. Спрайт в мире для предмета лежит в том же файле, что и спрайт в инвентаре.
3. Спрайт в руках (англ. Inhand) - нужен, чтобы отображать, что человек держит что-то в руке. У персонажа две руки (правая и левая), и четыре направления - сервер, юг, запад и восток. Соответственно, вам потребуется сделать 8 спрайтов предмета в руках. Не переживайте, их не нужно сильно детализировать (Нужно просто чтобы было видно, что человек держит что-то), а еще, нарисовав одно направление, его легко переиспользовать, чтобы нарисовать остальные. Спрайты в руках хранятся в папке icons/mob/inhands, во время рисования вам также пригодятся спрайты кукол, их можно найти в приложениях статьи.

Одежда

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

• Вид спереди, сзади и с обоих сторон. - Примеры в билде
• Специальный "спрайт-предмет" - то, как вещь будет отображаться в слоте инвентаря, или на земле. - Примеры в билде
• (Необязательно) "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 нашего дискорда.
• Референсы и гайды на нашем форуме
• Читайте гайды! На просторах интернета их море, достаточно просто загуглить. Примеры:

Русские:

• 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

Приложения

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

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