Участник:Voiko: различия между версиями
Дополнительные действия
Voiko (обсуждение | вклад) Нет описания правки |
Voiko (обсуждение | вклад) |
||
| (не показаны 42 промежуточные версии этого же участника) | |||
| Строка 1: | Строка 1: | ||
{{В процессе создания|worker=Voiko}} | {{В процессе создания|worker=Voiko}} | ||
= Руководство по созданию спрайтов = | |||
'''Спрайтеры''' - люди, занимающиеся внешним видом игры, делают в основном текстурки для игры. Их главная цель - сделать хорошо, а плохо - не сделать, пиксель арт не стремится сделать достоверную репрезентацию чего-то в игре, его цель - показать объект так, чтобы было ясно что это он и красиво его нарисовать. Обычно спрайты рисуются в разрешении '''32x32''' пикселя, но бывают и исключения, например спрайты мегафауны имеют большее разрешение. | |||
== Терминология == | |||
Перед процессом спрайтингом нам предстоит немного ознакомиться с основными терминами. | |||
<ol> | |||
<li>'''Билд''' - папка, которую вы скачали с нашего репозитория, хранит в себе кодовую структуру и конечно же DMI файлики с нашими спрайтами.</li> | |||
<li>'''DMI (Атлас)''' - формат файла .dmi, также может называться как '''Атлас'''. Грубо говоря это файл, который имеет в себе спрайты от одного до целого множества. Обычно именно их вы встретите в билде.</li> | |||
<li>'''Спрайт''' (стейт) - спрайтшит, в котором может быть анимация и несколько направлений спрайта. .</li> | |||
<li>'''VSC (Visual Studio Code)''' - программа, в которой мы можем просматривать код и спрайты, а также делать изменения. (Для редактирования спрайтов программа не годится, только для просмотра).</li> | |||
<li>'''Dream Maker''' - стандартная программа, появляется при установке BYOND, через которую вы можете открыть атлас, импортировать или экспортировать файлы, а также редактировать сам спрайт. Будьте осторожны. При открытии спрайтов могут сгенерироваться изменения в коде, которые могут помешать запуску билда. </li> | |||
</ol> | |||
== Выбор программы == | == Выбор программы == | ||
Прежде, чем начать | Рисовать спрайты можно где вашей душе угодно. Можно конечно всё делать сразу в встроенном редакторе byond, но лучше использовать что-то другое, ибо он устаревший и достаточно неудобен, а ещё может сломать вам билд. Большинство спрайтеров пользуются '''Aseprite''' - удобной программой специально для пиксель арта. | ||
На выбор у нас имеются | <br> | ||
[[File:Aseprite_Logo.png|thumb|128px]] | |||
[[File:Aseprite.png|thumb|128px|'''"Aseprite"''' - стандартная программа для редактирования DMI файлов.]] | |||
Прежде, чем начать спрайтить, нам потребуется взять на вооружение программу, с помощью которой ты сможешь создавать самые различные спрайты объектов, мобов, снаряжения и не только.<br> | |||
На выбор у нас имеются программы: | |||
<ol> | <ol> | ||
<li> '''[https:// | <li> '''[https://www.aseprite.org/ Aseprite]''' - отличный выбор, используется очень часто. Вы можете получить его бесплатно, скомпилировав [https://github.com/aseprite/aseprite исходный код], или купить. Отдельно можно установить [https://github.com/spacestation13/aseprite-dmi плагин] для поддержки DMI.</li> | ||
<li> '''[https:// | <li> '''[https://www.piskelapp.com/ Piskel]''' - бесплатный сайт, который позволяет редактировать спрайты без необходимости скачивания. Простенький интерфейс, с отсутствием поддержки DMI файлов/атласов.</li> | ||
<li> ''' | <li> '''[https://www.gimp.org/ GIMP]''' - бесплатный вариант, не особо модный, требует скачивания. Имеет интерфейс немного лучше, чем обычный Paint. Поддержка DMI отсутствует.</li> | ||
<li> '''[https://www.adobe.com/ua/products/photoshop.html Adobe Photoshop]''' - платный вариант, но возможно для кого-то покажется удобным инструментом для редактирования PNG картинок. Поддержка DMI отсутствует.</li> | |||
</ol> | </ol> | ||
В данном гайде мы будем ориентироваться на функционал программы " | В данном гайде мы будем ориентироваться на функционал программы "Aseprite", однако перед этим нам потребуется загрузить сердце нашего проекта, определится с выбором билда и загрузить его.<br> | ||
Подразумевается, что вы уже ознакомлены с [[Запуск локального сервера|руководством по установке локального сервера]] и имеете на компьютере загруженный билд.<br> | Подразумевается, что вы уже ознакомлены с [[Запуск локального сервера|руководством по установке локального сервера]] и имеете на компьютере загруженный билд.<br> | ||
'''Важно! НЕЛЬЗЯ, ЧТОБЫ НА ПУТИ ПРОГРАММЫ БЫЛА КИРИЛИЦА.''' | '''Важно! НЕЛЬЗЯ, ЧТОБЫ НА ПУТИ ПРОГРАММЫ БЫЛА КИРИЛИЦА.''' | ||
<br> | |||
Также стоит заметить, что если вы используете программу, не созданную специально для пиксель арта, вам необходимо будет выбрать режим интерполяции “По соседним пикселям” чтобы ваш спрайт не превратился в мыло.<br> | |||
[[File:sprite_settings1.png|384px]]<br> | |||
[[File:sprite_settings2.png|384px]] | |||
===Инструкция по установке расширений для Aseprite=== | |||
[[File: | |||
[[File: | |||
<ol> | <ol> | ||
<li>''' | <li>Запускаем Aseprite - '''Edit (Menu)''' - '''Preferences'''</li> | ||
<li>Выбираем раздел '''Extensions''' - '''Add Extension''' - Прикрепляем файл '''Asesprite-DMI-Windows'''.</li> | |||
<li>''' | |||
</ol> | </ol> | ||
< | Если вдруг не работает расширение - выбираем его в этой же менюшке и нажимаем Enable. | ||
<br>[[File:Aseprite_instruction1.webp|737px]] | |||
====Работа расширения==== | |||
При перетаскивании DMI файла в окно Aseprite (обычное открытие не работает из-за отсутствия поддержки), открывается окно со всеми иконками. | |||
<li> | <ol>'''В расширении можно:''' | ||
<li> | <li>Создавать/изменять спрайт в стейте</li> | ||
<li> | <li>Менять данные</li> | ||
<li> | <li>Сохранять (работает как обычное сохранение) </li> | ||
<li>Экспортировать в формат .dmi.</li> | |||
</ol> | </ol> | ||
[[File: | [[File:Aseprite_instruction2.webp|737px]] | ||
< | ===Полезные расширения для Aseprite=== | ||
<ul> | |||
<li>[https://github.com/lufog/aseprite-language-russian Перевод для Aseprite] - расширение, что переводит интерфейс на русский язык.</li> | |||
< | <li>[https://github.com/spacestation13/aseprite-dmi Поддержка DMI] - обязательный плагин, предоставляет возможность работать с DMI файлами.</li> | ||
<li>[https://github.com/Seefaaa/aseprite-dmi Поддержка DMI №2] - резервный плагин, предоставляет возможность работать с DMI файлами. Не требует установки, если уже установлен плагин выше.</li> | |||
</ul> | |||
== Основы == | |||
В ''BYOND'' для спрайтов используются файлы формата '''.dmi''' - спрайт-лист (изображение, хранящее большое количество спрайтов). DMI файлы хранят в себе состояния (стейты), их направления, анимации и скорость её воспроизведения.<br> | |||
Все спрайты в игре разбиты по разным файлам и разделены по файлам по категориям. Так намного проще ориентироваться в них и заниматься поиском нужного спрайта.<br> | |||
'''Обычно спрайты отсортированы по своему назначению:''' | |||
<ul> | |||
<li>'''icons/obj''' - спрайты различных объектов</li> | |||
<li>'''icons/mod''' - спрайты живых существ, одежды на куклах, спрайты предметов в руках и тд.</li> | |||
<li>'''icons/turf''' - спрайты всех стен и полов.</li> | |||
<li>'''icons/effects''' - спрайты для различных эффектов: от атак, щитов, крови на полу до оверлеев светa.</li> | |||
</ul> | |||
==== Создание DMI файла ==== | |||
<ol> | <ol> | ||
<li> | <li>Открываем DreamMaker (/BYOND/bin/dreammaker.exe)</li> | ||
<li> | <li>В меню file выбираем “New Enviroment”</li> | ||
<li> | <li>Если у вас уже есть Enviroment - переходите к 4 шагу</li> | ||
<li> | <li>В открывшемся окне выбираем папку под работу с dmi и название файла .dme</li> | ||
</ol> | </ol> | ||
[[File: | <br> | ||
[[File:sprite_settings3.png]] | |||
<br> | |||
В меню '''file -> New''' создаём новый файл (после создания .dme окошко сразу откроется), в поле Type выбираем Icon File, ниже укажите папку и название нового файла. | |||
После создания .dmi файла, естественно, его надо заполнить. Сделать это можно несколькими способами: | |||
Создайте новый стейт, зайдя в меню “'''Graphic -> New State'''” / нажав на синий плюс в верхнем левом углу / нажав ПКМ где угодно в открытом DMI файле. | |||
<br> | |||
[[File:sprite_settings4.png]] | |||
<br> | |||
Зайдя в меню Graphic -> import выберите ваш спрайт. Если выбранный файл не будет указаного в файле разрешении (обычно 32х32), то программа порежет ваш спрайт на куски. | |||
<br> | |||
Чтобы переименовать стейт нажмите дважды на его название (или no name, если он новый). Название стейта должно быть написано на латинице, маленькими буквами и разделением слов через нижнее подчёркивание. | |||
<br> | |||
'''Не забывайте часто сохранять ваш файл, ибо Dreammaker очень сильно любит вылетать в самый неподходящий момент.''' | |||
==== Пример использования DMI файлов в коде ==== | |||
[[File:sprite_settings5.png|717px]] | |||
<br> | |||
Здесь, для спрайта предмета в игре, мы берём стейт под названием “'''gauze'''” из файла '''items.dmi''', в то время для спрайтов в левой и правой руке у персонажей мы указываем два разных файла '''items_lefthand''' и '''items_righthand''', откуда мы берём стейты с названием “'''gauze'''”, что мы указали в '''item_state'''. | |||
== Работа с ДМИ, фишки приколы фейлы == | |||
DMI файлы состоят из '''стейтов''' - наборов спрайтов, аля спрайт-лист. В каждом файле спрайты сгруппированы в '''icon state''', по русски в стейты. В стейт можно добавить анимацию и до восьми направлений, то есть в него можно добавить до восьми отдельных спрайтов. | |||
<br> | |||
[[File:sprite_settings6.png|717px]] | |||
<br> | |||
На пике выше - два стейта: corgi и corgi_dead. Первый отвечает за спрайты корги, когда он жив, corgi_dead, соответственно, когда мёртв. | |||
Посмотреть стейты в ДМИ файле можно просто открыв его в DreamMaker. В нём вы можете редактировать стейты внутри, количество их направлений и анимации. | |||
=== Анимация === | |||
Стейты в DMI файлах можно анимировать, редактируя отдельные кадры в анимации. DreamMaker предоставляет несколько опций настройки анимации: | |||
<br> | |||
'''1. Количество кадров''' - чтобы изменить количество кадров в анимации нажимайте на стрелки на строке с '''frames''', или нажмите на пустой кадр после существующего. | |||
<br> | |||
[[File:sprite_settings7.gif|512px]] | |||
<br> | |||
'''2. Длительность кадра (Delay)''' - каждому кадру можно указать то, сколько миллисекунд (0.1 секунды) он будет длиться. Изменить это значение можно нажав на строку '''Delay''' под нужным кадром. На примере ниже на каждом кадре указано значение в 1 (0.1 секунды) и 10 (1 секунда). | |||
<br> | |||
[[File:sprite_settings9.gif|512px]] | |||
<br> | |||
[[File:sprite_settings8.gif|512px]] | |||
<br> | |||
'''3. Настройка воспроизведения анимации''' - изначально для стейта включено зацикливание анимации. Вы можете включить опцию Rewind (перемотка), чтобы анимация, после достижения последнего кадра, воспроизводилась обратно. Также вы можете указать количество повторов анимации, выбрав опцию times. При этом в окне демонстрации анимации она будет циклична. | |||
<br> | |||
[[File:sprite_settings10.gif|512px]] | |||
===Направления=== | |||
Спрайтам можно задать несколько направлений. В игре они будут показываться в зависимости от того, в какую сторону обращён объект. Спрайт может иметь одно направление, четыре (↓, ↑, →, ←) или восемь (↓, ↑, →, ←, ↘, ↙, ↗, ↖). Выбрать количество направлений можно нажимая кнопки со стрелками над настройками анимации. | |||
<br> | |||
[[File:sprite_settings11.png|512px]] | |||
<br> | |||
У '''предметов''' используется одно направление, у '''мобов''', в основном - четыре, с некоторыми исключениями. Восемь направлений используются очень редко, например - спрайт турели. | |||
===Стейты перемещения=== | |||
В окне редактирования имени стейта можно включить поставить галочку напротив Movement State. Эта опция позволяет игре использовать выбранный стейт при движении объекта. При этом имя стейта перемещения должно совпадать с именем основного стейта. | |||
<br> | |||
[[File:sprite_settings12.png|512px]] | |||
<br> | |||
[[File:sprite_settings13.gif|512px]] | |||
===Добавление спрайтов в стейты=== | |||
Добавлять спрайты в стейты лучше всего вручную: копирование спрайта 32х32 в рабочей программе и вставка во встроенном редакторе спрайтов DreamMaker. Также если вы хотите попробовать что-то быстрее, но с дополнительными шагами, можете почитать гайд тут. | |||
== Документация == | |||
Также для удобства предоставляем список материалов, с которыми можно ознакомиться для повышения собственной квалификации. | |||
<ul> | |||
<li>[http://gas13.ru/v3/tutorials/ru_sywtbapa_almighty_grass_tile.php Gas13] - Базовый гайд на русском языке, рекомендуется ознакомиться для начинающих спрайтеров. </li> | |||
<li>[https://gamin.me/posts/4849 Gamin.me ] - Pixel Art для начинающих, на русском.</li> | |||
<li>[https://hackmd.io/@Partheo/spriting Hackmd.oi/@Partheo] - Очень хороший гайд на английском, в целом по сске.</li> | |||
<li>[https://wiki.taucetistation.org/Guide_to_Spriting Гайд по спрайтингу с Tau Ceti Station Wiki]</li> | |||
<li>[https://tgstation13.org/wiki/Guide_to_spriting Гайд по спрайтингу с TGStation13 Wiki]</li> | |||
</ul> | |||
== Хоткеи == | == Хоткеи == | ||
Основные сочетания клавиш для работы. | |||
{| class="wikitable" style="width:100%; text-align:left; border:3px solid rgba(80,80,80,0.4); border-radius:12px; overflow:hidden;" | |||
! style="width:220px; background-color:#a5b4d1; color:#000000; text-align:center;" |Категория | |||
! style="width:220px; background-color:#a5b4d1; color:#000000;" |Хоткей | |||
! style="background-color:#a5b4d1; color:#000000;" |Описание | |||
|- | |||
! rowspan="6" style="background-color:#f2b3b3; color:#000; text-align:center;" |Навигация и холст | |||
|Ctrl + колесо мыши | |||
|Зум | |||
|- | |||
|1 / 2 / 3 / 4 / 5 | |||
|Быстрый масштаб | |||
|- | |||
|H | |||
|Рука (перемещение холста) | |||
|- | |||
|Ctrl + 0 | |||
|Подогнать под экран | |||
|- | |||
|Tab | |||
|Скрыть интерфейс | |||
|- | |||
|Shift + Tab | |||
|Скрыть панели | |||
|- | |||
! rowspan="11" style="background-color:#f2d2b3; color:#000; text-align:center;" |Основные инструменты | |||
|B | |||
|Brush (Кисть) | |||
|- | |||
|E | |||
|Eraser (Ластик) | |||
|- | |||
|G | |||
|Paint Bucket (Заливка) | |||
|- | |||
|I | |||
|Eyedropper (Пипетка) | |||
|- | |||
|M | |||
|Marquee (Выделение прямоугольником) | |||
|- | |||
|L | |||
|Lasso (Свободное выделение) | |||
|- | |||
|U | |||
|Shape Tool (Фигуры) | |||
|- | |||
|P | |||
|Pencil (Карандаш) | |||
|- | |||
|C | |||
|Contour / Polygon | |||
|- | |||
|K | |||
|Ink (режимы рисования) | |||
|- | |||
|S | |||
|Spray | |||
|- | |||
! rowspan="4" style="background-color:#f2e7b3; color:#000; text-align:center;" |Работа с цветом | |||
|X | |||
|Поменять местами foreground/background | |||
|- | |||
|D | |||
|Сброс цветов (черный/белый) | |||
|- | |||
|Alt + клик | |||
|Пипетка | |||
|- | |||
|Shift + I | |||
|Color Picker (альтернативный) | |||
|- | |||
! rowspan="6" style="background-color:#b3f2c2; color:#000; text-align:center;" |Выделение | |||
|Ctrl + A | |||
|Выделить всё | |||
|- | |||
|Ctrl + D | |||
|Снять выделение | |||
|- | |||
|Ctrl + Shift + I | |||
|Инвертировать выделение | |||
|- | |||
|Alt + drag | |||
|Перемещение выделения | |||
|- | |||
|Shift | |||
|Добавить к выделению | |||
|- | |||
|Alt | |||
|Убрать из выделения | |||
|- | |||
! rowspan="7" style="background-color:#b3d2f2; color:#000; text-align:center;" |Слои и кадры | |||
|N | |||
|Новый слой | |||
|- | |||
|Shift + N | |||
|Новый слой сверху | |||
|- | |||
|Ctrl + Shift + N | |||
|Новый слой с настройками | |||
|- | |||
|Delete | |||
|Удалить слой/содержимое | |||
|- | |||
|Page Up / Page Down | |||
|Переключение кадров | |||
|- | |||
|Alt + N | |||
|Новый кадр | |||
|- | |||
|Alt + Delete | |||
|Очистить слой | |||
|- | |||
! rowspan="7" style="background-color:#d0b3f2; color:#000; text-align:center;" |Редактирование | |||
|Ctrl + Z | |||
|Отмена | |||
|- | |||
|Ctrl + Y | |||
|Повтор | |||
|- | |||
|Ctrl + X | |||
|Вырезать | |||
|- | |||
|Ctrl + C | |||
|Копировать | |||
|- | |||
|Ctrl + V | |||
|Вставить | |||
|- | |||
|Ctrl + B | |||
|Вставить в место | |||
|- | |||
|Ctrl + T | |||
|Трансформация | |||
== | |- | ||
! rowspan="3" style="background-color:#f2b3e1; color:#000; text-align:center;" |Трансформации | |||
|Ctrl + T | |||
|Свободная трансформация | |||
|- | |||
|Shift | |||
|Сохранять пропорции | |||
|- | |||
|Alt | |||
|Масштаб из центра | |||
|- | |||
! rowspan="5" style="background-color:#f2e0b3; color:#000; text-align:center;" |Дополнительно | |||
|F | |||
|Flip (отразить) | |||
|- | |||
|Shift + F | |||
|Отразить по вертикали | |||
|- | |||
|Ctrl + Shift + F | |||
|Отразить по горизонтали | |||
|- | |||
|Ctrl + U | |||
|Hue/Saturation | |||
|- | |||
|Ctrl + L | |||
|Levels | |||
|- | |||
! rowspan="2" style="background-color:#b3f2cf; color:#000; text-align:center;" |Тайлы и пиксель-арт | |||
2 - | |Ctrl + Shift + T | ||
|Tile Mode | |||
|- | |||
|Shift + B | |||
|Pixel Perfect (идеальные линии) | |||
|- | |||
! rowspan="4" style="background-color:#d6d6d6; color:#000; text-align:center;" |Полезные скрытые фишки | |||
|Пробел / СКМ (зажать) | |||
|Временно инструмент "рука" | |||
|- | |||
|Ctrl (зажать) | |||
|Временно пипетка | |||
|- | |||
|Shift (при рисовании) | |||
|Рисование прямых линий | |||
|- | |||
|Ctrl + drag | |||
|Перемещение содержимого | |||
|} | |||
== Обзор объекта == | |||
В игре 4 типа объектов: | |||
''' | * '''Область''' – нас это не будет интересовать, так как вы не увидите ее в игре и достаточно wip-графики, | ||
* '''Моб''' – люди, обезьяны, киборги, инопланетяне и другая живность на станции / кораблях / планетах, | |||
* '''Объекты''' – машины, двери, предметы и все остальное в игре, | |||
* '''Турф''' – стены, полы и пространство | |||
== Требуемые спрайты по категориям объектов == | |||
Теперь расскажу вам, какие спрайты нужны различным типам предметов: | |||
=== | === Мобы === | ||
* Спрайты мобов по большей части требуют четырех направлений. | |||
* Спрайты мобов требуют спрайтов мертвых мобов . | |||
* Если вы захотите, вы можете создать спрайт моба, который лежит. | |||
* Если вы создаете моба, который может носить одежду, вы можете использовать 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 | |||
* Укреплённым дверям требуются только спрайты открытия и закрытия, а также спрайты, когда они открыты и закрыты. | |||
Текущая версия от 17:51, 23 апреля 2026
|
Страница-заготовка. Контент страницы находится в разработке и недоступен
Использовать данный контент нельзя |
Руководство по созданию спрайтов
Спрайтеры - люди, занимающиеся внешним видом игры, делают в основном текстурки для игры. Их главная цель - сделать хорошо, а плохо - не сделать, пиксель арт не стремится сделать достоверную репрезентацию чего-то в игре, его цель - показать объект так, чтобы было ясно что это он и красиво его нарисовать. Обычно спрайты рисуются в разрешении 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. При этом в окне демонстрации анимации она будет циклична.
Направления
Спрайтам можно задать несколько направлений. В игре они будут показываться в зависимости от того, в какую сторону обращён объект. Спрайт может иметь одно направление, четыре (↓, ↑, →, ←) или восемь (↓, ↑, →, ←, ↘, ↙, ↗, ↖). Выбрать количество направлений можно нажимая кнопки со стрелками над настройками анимации.
У предметов используется одно направление, у мобов, в основном - четыре, с некоторыми исключениями. Восемь направлений используются очень редко, например - спрайт турели.
Стейты перемещения
В окне редактирования имени стейта можно включить поставить галочку напротив Movement State. Эта опция позволяет игре использовать выбранный стейт при движении объекта. При этом имя стейта перемещения должно совпадать с именем основного стейта.
Добавление спрайтов в стейты
Добавлять спрайты в стейты лучше всего вручную: копирование спрайта 32х32 в рабочей программе и вставка во встроенном редакторе спрайтов DreamMaker. Также если вы хотите попробовать что-то быстрее, но с дополнительными шагами, можете почитать гайд тут.
Документация
Также для удобства предоставляем список материалов, с которыми можно ознакомиться для повышения собственной квалификации.
- Gas13 - Базовый гайд на русском языке, рекомендуется ознакомиться для начинающих спрайтеров.
- Gamin.me - Pixel Art для начинающих, на русском.
- Hackmd.oi/@Partheo - Очень хороший гайд на английском, в целом по сске.
- Гайд по спрайтингу с Tau Ceti Station Wiki
- Гайд по спрайтингу с TGStation13 Wiki
Хоткеи
Основные сочетания клавиш для работы.
Обзор объекта
В игре 4 типа объектов:
- Область – нас это не будет интересовать, так как вы не увидите ее в игре и достаточно wip-графики,
- Моб – люди, обезьяны, киборги, инопланетяне и другая живность на станции / кораблях / планетах,
- Объекты – машины, двери, предметы и все остальное в игре,
- Турф – стены, полы и пространство
Требуемые спрайты по категориям объектов
Теперь расскажу вам, какие спрайты нужны различным типам предметов:
Мобы
- Спрайты мобов по большей части требуют четырех направлений.
- Спрайты мобов требуют спрайтов мертвых мобов .
- Если вы захотите, вы можете создать спрайт моба, который лежит.
- Если вы создаете моба, который может носить одежду, вы можете использовать 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
- Укреплённым дверям требуются только спрайты открытия и закрытия, а также спрайты, когда они открыты и закрыты.
