Участник:Voiko
Дополнительные действия
|
Страница-заготовка. Контент страницы находится в разработке и недоступен
Использовать данный контент нельзя |
Руководство по созданию спрайтов
Спрайтеры - люди, занимающиеся внешним видом игры, делают в основном текстурки для игры. Их главная цель - сделать хорошо, а плохо - не сделать, пиксель арт не стремится сделать достоверную репрезентацию чего-то в игре, его цель - показать объект так, чтобы было ясно что это он и красиво его нарисовать. Обычно спрайты рисуются в разрешении 32x32 пикселя, но бывают и исключения, например спрайты мегафауны имеют большее разрешение.
Терминология
Перед процессом спрайтингом нам предстоит немного ознакомиться с основными терминами.
- Билд - папка, которую вы скачали с нашего репозитория, хранит в себе кодовую структуру и конечно же DMI файлики с нашими спрайтами.
- DMI (Атлас) - формат файла .dmi, также может называться как Атлас. Грубо говоря это файл, который имеет в себе спрайты от одного до целого множества. Обычно именно их вы встретите в билде.
- Спрайт (стейт) - спрайтшит, в котором может быть анимация и несколько направлений спрайта. .
- VSC (Visual Studio Code) - программа, в которой мы можем просматривать код и спрайты, а также делать изменения. (Для редактирования спрайтов программа не годится, только для просмотра).
- Dream Maker - стандартная программа, появляется при установке BYOND, через которую вы можете открыть атлас, импортировать или экспортировать файлы, а также редактировать сам спрайт. Будьте осторожны. При открытии спрайтов могут сгенерироваться изменения в коде, которые могут помешать запуску билда.
Выбор программы
Рисовать спрайты можно где вашей душе угодно. Можно конечно всё делать сразу в встроенном редакторе byond, но лучше использовать что-то другое, ибо он устаревший и достаточно неудобен, а ещё может сломать вам билд. Большинство спрайтеров пользуются Aseprite - удобной программой специально для пиксель арта.
Также стоит заметить, что если вы используете программу, не созданную специально для пиксель арта, вам необходимо будет выбрать режим интерполяции “По соседним пикселям” чтобы ваш спрайт не превратился в мыло.
Прежде, чем начать спрайтить, нам потребуется взять на вооружение программу, с помощью которой ты сможешь создавать самые различные спрайты объектов, мобов, снаряжения и не только.
На выбор у нас имеются программы:
- Aseprite - отличный выбор, используется очень часто. Вы можете получить его бесплатно, скомпилировав исходный код, или купить. Отдельно можно установить плагин для поддержки DMI.
- Piskel - бесплатный сайт, который позволяет редактировать спрайты без необходимости скачивания. Простенький интерфейс, с отсутствием поддержки DMI файлов/атласов.
- GIMP - бесплатный вариант, не особо модный, требует скачивания. Имеет интерфейс немного лучше, чем обычный Paint. Поддержка DMI отсутствует.
- Adobe Photoshop - платный вариант, но возможно для кого-то покажется удобным инструментом для редактирования PNG картинок. Поддержка DMI отсутствует.
В данном гайде мы будем ориентироваться на функционал программы "Aseprite", однако перед этим нам потребуется загрузить сердце нашего проекта, определится с выбором билда и загрузить его.
Подразумевается, что вы уже ознакомлены с руководством по установке локального сервера и имеете на компьютере загруженный билд.
Важно! НЕЛЬЗЯ, ЧТОБЫ НА ПУТИ ПРОГРАММЫ БЫЛА КИРИЛИЦА.
Инструкция по установке расширений для Aseprite
- Запускаем Aseprite - Edit (Menu) - Preferences
- Выбираем раздел Extensions - Add Extension - Прикрепляем файл Asesprite-DMI-Windows.
Если вдруг не работает расширение - выбираем его в этой же менюшке и нажимаем Enable.
Работа расширения
При перетаскивании DMI файла в окно Aseprite (обычное открытие не работает из-за отсутствия поддержки), открывается окно со всеми иконками.
- В расширении можно:
- Создавать/изменять спрайт в стейте
- Менять данные
- Сохранять (работает как обычное сохранение)
- Экспортировать в формат .dmi.
Полезные расширения для Aseprite
- Перевод для Aseprite - расширение, что переводит интерфейс на русский язык.
- Поддержка DMI - обязательный плагин, предоставляет возможность работать с DMI файлами.
- Поддержка DMI №2 - резервный плагин, предоставляет возможность работать с DMI файлами. Не требует установки, если уже установлен плагин выше.
Основы
В BYOND для спрайтов используются файлы формата .dmi - спрайт-лист (изображение, хранящее большое количество спрайтов). DMI файлы хранят в себе состояния (стейты), их направления, анимации и скорость её воспроизведения.
Все спрайты в игре разбиты по разным файлам и разделены по файлам по категориям. Так намного проще ориентироваться в них и заниматься поиском нужного спрайта.
Обычно спрайты отсортированы по своему назначению:
- icons/obj - спрайты различных объектов
- icons/mod - спрайты живых существ, одежды на куклах, спрайты предметов в руках и тд.
- icons/turf - спрайты всех стен и полов.
- icons/effects - спрайты для различных эффектов: от атак, щитов, крови на полу до оверлеев светa.
Создание DMI файла
- Открываем DreamMaker (/BYOND/bin/dreammaker.exe)
- В меню file выбираем “New Enviroment”
- Если у вас уже есть Enviroment - переходите к 4 шагу
- В открывшемся окне выбираем папку под работу с dmi и название файла .dme
В меню file -> New создаём новый файл (после создания .dme окошко сразу откроется), в поле Type выбираем Icon File, ниже укажите папку и название нового файла.
После создания .dmi файла, естественно, его надо заполнить. Сделать это можно несколькими способами:
Создайте новый стейт, зайдя в меню “Graphic -> New State” / нажав на синий плюс в верхнем левом углу / нажав ПКМ где угодно в открытом DMI файле.
Зайдя в меню Graphic -> import выберите ваш спрайт. Если выбранный файл не будет указаного в файле разрешении (обычно 32х32), то программа порежет ваш спрайт на куски.
Чтобы переименовать стейт нажмите дважды на его название (или no name, если он новый). Название стейта должно быть написано на латинице, маленькими буквами и разделением слов через нижнее подчёркивание.
Не забывайте часто сохранять ваш файл, ибо Dreammaker очень сильно любит вылетать в самый неподходящий момент.
Пример использования DMI файлов в коде
Здесь, для спрайта предмета в игре, мы берём стейт под названием “gauze” из файла items.dmi, в то время для спрайтов в левой и правой руке у персонажей мы указываем два разных файла items_lefthand и items_righthand, откуда мы берём стейты с названием “gauze”, что мы указали в item_state.
Работа с ДМИ, фишки приколы фейлы
DMI файлы состоят из стейтов - наборов спрайтов, аля спрайт-лист. В каждом файле спрайты сгруппированы в icon state, по русски в стейты. В стейт можно добавить анимацию и до восьми направлений, то есть в него можно добавить до восьми отдельных спрайтов.
На пике выше - два стейта: corgi и corgi_dead. Первый отвечает за спрайты корги, когда он жив, corgi_dead, соответственно, когда мёртв.
Посмотреть стейты в ДМИ файле можно просто открыв его в DreamMaker. В нём вы можете редактировать стейты внутри, количество их направлений и анимации.
Анимация
Стейты в DMI файлах можно анимировать, редактируя отдельные кадры в анимации. DreamMaker предоставляет несколько опций настройки анимации:
1. Количество кадров - чтобы изменить количество кадров в анимации нажимайте на стрелки на строке с frames, или нажмите на пустой кадр после существующего.
2. Длительность кадра (Delay) - каждому кадру можно указать то, сколько миллисекунд (0.1 секунды) он будет длиться. Изменить это значение можно нажав на строку Delay под нужным кадром. На примере ниже на каждом кадре указано значение в 1 (0.1 секунды) и 10 (1 секунда).
3. Настройка воспроизведения анимации - изначально для стейта включено зацикливание анимации. Вы можете включить опцию Rewind (перемотка), чтобы анимация, после достижения последнего кадра, воспроизводилась обратно. Также вы можете указать количество повторов анимации, выбрав опцию times. При этом в окне демонстрации анимации она будет циклична.
Документация
Также для удобства предоставляем список материалов, с которыми можно ознакомиться для повышения собственной квалификации.
- Gas13 - Базовый гайд на русском языке, рекомендуется ознакомиться для начинающих спрайтеров.
- Gamin.me - Pixel Art для начинающих, на русском.
- Hackmd.oi/@Partheo - Очень хороший гайд на английском, в целом по сске.
- Гайд по спрайтингу с Tau Ceti Station Wiki
- Гайд по спрайтингу с TGStation13 Wiki
Хоткеи
Основные сочетания клавиш для работы.
Основы
Спрайты в SS13 хранятся в файлах dmi. По сути, это атлас-спрайтов в определенном формате. Вы помещаете в него PNG и даете ему имя — это состояние значка. Большинство dmis имеют размер 32x32. У вас может быть растровое изображение, представляющее собой статический спрайт, а гифки можно анимировать. BYOND также работает с 8 направлениями движения, но обычно вам понадобится только 4 или 1.
ПО
Aseprite используется очень часто. Вы можете получить его бесплатно, скомпилировав исходный код, или купить. Некоторые люди также используют Piskel. Вы также можете использовать другое программное обеспечение для обработки изображений, например Paint.net. От себя ещё могу порекомендовать бесплатный GIMP, или платный Adobe Photoshop, хотя ни в том ни в другом нет функции работы с DMI
Обзор объекта
В игре 4 типа объектов:
- Область – нас это не будет интересовать, так как вы не увидите ее в игре и достаточно wip-графики,
- Моб – люди, обезьяны, киборги, инопланетяне и другая живность на станции / кораблях / планетах,
- Объекты – машины, двери, предметы и все остальное в игре,
- Турф – стены, полы и пространство
Формат файла DMI
Спрайты в SS13 упакованы в файлы .dmi. Чтобы создать новый файл dmi, откройте Dream Maker, выберите «Файл» > «Новый» и выберите «Файл значка (dmi)» в раскрывающемся меню. Напишите для него путь к файлу и нажмите ОК.
Откроется новое окно с пустым файлом. в правом верхнем углу есть два места для размеров спрайта. Большинство спрайтов имеют размер 32x32 пикселя. К сожалению, один dmi-файл не может содержать спрайты разных размеров.
Теперь щелкните правой кнопкой мыши где-нибудь на белизне. Существует два типа спрайтов: растровое изображение и фильм. Растровое изображение статично, а фильм можно анимировать и смотреть в разных направлениях, вот и вся разница. Давайте создадим спрайт фильма. (Новый фильм)
Откроется окно с четырьмя стрелками направления и тремя рамками для каждой из них, все серого цвета. Байонд понимает 8 направлений. Вы можете выбрать, сколько кадров вы хотите использовать, под самими спрайтами: 1, 4 или 8. Вы также можете выбрать, сколько кадров вы хотите иметь в анимации. Если вы создаете разнонаправленный статический спрайт, создайте фильм с 1 кадром, без анимации, но с 4 или 8 направлениями, в зависимости от того, сколько вам нужно. Если вы хотите анимировать спрайт, вас также может заинтересовать возможность установить задержку в 1/10 секунды над конкретным кадром. Хорошо, надеюсь, отсюда вы поймете, что делать. Встроенный инструмент редактирования спрайтов очень примитивен и единственное, о чем в нем стоит упомянуть, это о том, как применять альфа-фильтр. Если вы дважды щелкните любое изображение, вы попадете в редактор спрайтов, а справа от него находится вертикальный ползунок, управляющий альфа-каналом. Также стоит отметить, что копирование из редактора может вести себя немного странно, поскольку фон создается полностью, несмотря на установленный альфа-фильтр. Просто «залейте» фон цветом со значением альфа 0 или используйте «импорт», который отлично работает.
Теперь предположим, что мы сделали ваши спрайты спрайтами, вернитесь к файлу dmi (экран, который появился, когда вы впервые создали файл). Предполагая, что вы создали спрайт, вы увидите его в списке. Дважды щелкните чуть ниже фактического спрайта, и откроется окно переименования. Альтернативно выберите спрайт и нажмите F2 на клавиатуре. Дайте имя вашему спрайту. Это имя часто называют icon_state, поскольку это имя переменной, которая определяет его в коде.
Также обратите внимание, что вы можете импортировать и экспортировать файлы изображений разных типов, выбрав файлы, которые вы хотите экспортировать, в редакторе (удерживайте Ctrl, чтобы выбрать несколько), щелкнув правой кнопкой мыши и выбрав экспорт, или щелкнув правой кнопкой мыши в любом месте и выбрав импорт, чтобы импортировать. DMI похож на PNG, поэтому, если вы переименуете расширение DMI в PNG, оно должно работать во всех программах графического редактирования. Обычно это работает и в обратную сторону. Это ускоряет перекрашивание.
Надеюсь, это вся информация, которая вам нужна для создания спрайтов и файлов dmi.
Требуемые спрайты по категориям объектов
Теперь расскажу вам, какие спрайты нужны различным типам предметов:
Мобы
- Спрайты мобов по большей части требуют четырех направлений.
- Спрайты мобов требуют спрайтов мертвых мобов .
- Если вы захотите, вы можете создать спрайт моба, который лежит.
- Если вы создаете моба, который может носить одежду, вы можете использовать Pixel_y, Pixel_x для смены одежды при кодировании моба.
Мобы с конечностями
- Человек и человеческий вид состоят из конечностей – головы, груди, двух рук и двух ног.
- Файлы находятся в icon/mob/human_parts.dmi для конечностей, имеющих заданный цвет, и в icon/mob/human_parts_greyscale.dmi для конечностей, которые можно перекрасить и начать использовать оттенки серого.
- Конечности имеют 4 кадра, как и полноценные иконки.
- Конечности также используются в качестве иконок предметов на случай расчленения.
- Именование следующее:
- [race]_l/r_arm/leg для рук и ног.
- [race]_chest(_m/f) для торса (м/ж для мужских/женских вариантов, необязательно)
- [race]_head(_m/f) для головы (м/ж для мужского/женского вариантов, необязательно)
- Дополнительные части тела, такие как хвосты ящерицы, помещаются в mutant_bodyparts.dmi.
Турфы
- Полы находятся в файле icon/turf/floors.dmi.
- Стены находятся в файле icon/turf/walls.dmi.
- Стены и полы шаттла находятся в файле icon/turf/shuttle.dmi.
- Космические плитки находятся в файле icon/turf/space.dmi.
Объекты
- Спрайты объектов находятся в папке icon/obj.
- Спрайты предметов разбросаны по всей папке.
- Спрайты предметов по большей части требуют наличия собственных спрайтов. Их можно найти в разделах icon/mob/items_lefthand.dmi и icon/mob/items_righthand.dmi.
- Спрайты одежды находятся в папке icon/obj/clothing.
- Спрайты одежды на мобах можно найти в папке icon/mob.
- Спрайты одежды по большей части требуют спрайтов, находящихся в руках. Их можно найти в разделах icon/mob/items_lefthand.dmi и icon/mob/items_righthand.dmi.
- Спрайты техники находятся в папке images/obj/machines. Хотя значительная их часть находится в папке icon/obj.
- Спрайты дверей расположены в папке icon/obj/door.
- Обычный спрайт двери требует Door_closed, Door_locked, Door_opening, Door_deny, Door_Closing, Door_open, Door_spark, o_door_opening, o_door_Closing, Panel_open, Welded и Elights. Предлагаю осмотреть door.dmi
- Укреплённым дверям требуются только спрайты открытия и закрытия, а также спрайты, когда они открыты и закрыты.