Всем привет!
Не так давно возникла у меня идея разработать игру, где можно было бы играть за собаку, которая жестоко и весело расправляется с толпами врагов в духе старых добрых приставочных платформеров.
Игра была разработана на удивление быстро, и сейчас уже доступна в Google Play. Но пост не совсем об этом.
Одной из первых задач, которые мне предстояло решить, стало создание анимированных персонажей. Инструменты для анимации в Photoshop оказались не так уж интуитивно понятны, и мне пришлось много гуглить, чтобы собрать воедино всю необходимую информацию. Надеюсь, я своим постом сберегу немного времени тем, кто тоже хочет научиться рисовать анимации для игр.
Кроме, собственно, Unity, нам понадобится Adobe Photoshop. Для нашей задачи версия программы не так важна, но у меня, например, CS6. В более поздних версиях интерфейс немного другой, но суть не меняется.
Для начала создаём новый документ (File/New…).
Здесь сразу стоит задать размер спрайта. Главное условие – высота и ширина должны равняться степеням двойки (например, 32 или 64). Чем крупнее спрайт, тем больше возможностей для детализации, но при этом сложнее рисовать и анимировать.
Прежде чем анимировать персонажа, нужно изобразить его в пассивном состоянии. Я вот, например, взял и нарисовал инопланетянина с лазерной винтовкой:
В Photoshop множество потрясающих кистей, но для пиксель-арта лучше всего подойдёт обычный карандаш, ведь он даёт нам максимум контроля над цветом каждого конкретного пикселя. Ещё пригодится ластик, его также надо переключить в режим карандаша, с жёсткими границами.
Когда персонаж нарисован, пора приступать к самому главному: к созданию анимации. Начать стоит с открытия окна временной шкалы (Window/Timeline).
Вот она: длинное окно слева внизу. Там нужно нажать на большую кнопку «Create Frame Animation». Это создаст первый кадр:
Прямо под кадром можно поменять его длительность. При переносе анимации в Unity данное значение роли играть не будет, но задать его бывает очень полезно для предварительного просмотра анимации в Photoshop. Я обычно ставлю длительность 0.2 секунды для медленных движений (бездействие, ходьба) или 0.1 для быстрых (атаки). Там, где сейчас написано «Once», можно выбрать способ зацикливания анимации. Это также нужно только для предпросмотра.
В правом нижнем углу скриншота есть две кнопки, одна из которых копирует выбранный кадр, а другая – удаляет его. Новые кадры к анимации добавляются как раз копированием уже существующих.
Помните, я писал, что инструменты для анимации не совсем интуитивно понятны? Так вот, неочевидный момент заключается в том, что нам потребуется создавать не только новые кадры на шкале, но и новый слой для каждого кадра. Сам кадр информации о изображении хранить не может, он управляет лишь тем, какие слои в этом кадре включены, а какие – выключены.
Итак, копируем кадр нажатием описанной выше кнопки (на которой изображён листок бумаги с загнутым уголком). Затем копируем наш единственный слой, выделив его и нажав Ctrl+J.
Над списком слоёв мы можем заметить галочку с надписью «Propagate Frame 1». Когда она включена, то все изменения, применяемые к первому кадру, автоматически применятся и ко всем последующим.
Сделаем так, чтобы в первом кадре был активен только первый слой, а во втором - только второй. Мы получили последовательность из двух кадров, сменяющих друг друга.
Только никакого движения не происходит, потому что содержимое слоёв одинаковое. Исправим это! Попробуем нарисовать пассивную анимацию (когда персонаж ничего важного не делает, просто стоит и ждёт).
Перейдя во второй кадр и выбрав второй слой, выделим верхнюю часть персонажа (всё что выше колен) и сдвинем её на один пиксель вниз, так, чтоб это выглядело, что персонаж слегка покачивается на месте.
Ставим способ зацикливания анимации на Forever, воспроизводим и видим, что персонаж двигается, но выглядит это пока не очень хорошо, ведь кадров-то всего два.
Создаём третий кадр, скопировав второй, и создаём третий слой, также скопировав второй слой.
К этому моменту вы могли заметить, что вся эта система со слоями и кадрами не особо удобна. Что поделать, искусство требует жертв. Если будете рисовать много анимаций, со временем вы выработаете наиболее удобный для вас порядок действий, позволяющих добавлять к анимации новые кадры куда быстрее. Например, чтобы в выбранном кадре был активен только нужный нам слой, удобно нажать на иконку включения/выключения этого слоя (с изображением глаза), удерживая Alt, вместо того, чтобы вручную выключать все ненужные слои.
Итак, в третьем кадре мы опять опускаем часть персонажа на один пиксель вниз, чтобы придать анимации плавность. Трёх слоёв для статической анимации вполне достаточно, только надо будет визуально зациклить анимацию. Для этого копируем второй кадр и вставляем его после третьего. А копировать второй слой не нужно, ведь и второй, и четвёртый кадр будут демонстрировать нам один и тот же второй слой. Вот так будет выглядеть документ после этого:
При воспроизведении увидим примерно следующее:
Получше освоившись со временной шкалой, вы сможете нарисовать и более сложные анимации, вроде такой:
В этой анимации 11 кадров, но слоёв только 5, поскольку все они повторяются по нескольку раз.
И вот пришла пора экспортировать анимацию для Unity! Делать это мы будем через spritesheet. Так называется последовательность спрайтов, идущих друг за другом в одном файле.
Для того, чтобы перевести слои нашего файла в spritesheet, понадобится установить специальный скрипт для фотошопа. Я лично использую тот, который нашёл здесь. Но наверняка есть и другие варианты.
Обязательно сохраните документ и только после этого запустите скрипт. На выходе получаем что-то вроде этого:
Не сохраняйте документ PSD после запуска скрипта! Иначе он так и останется в виде спрайтшита, возвращать его в исходное состояние придётся вручную, долго и мучительно.
Вместо этого сохраните получившееся изображение как файл PNG. Затем этот файл нужно скопировать в проект Unity.
Важно сразу же задать правильные настройки импорта.
Наиболее интересные для нас параметры:
-Texture Type. Должен быть выбран Sprite(2D and UI). Этот вариант будет выбран по умолчанию, если тип нашего проекта - 2D (тип можно задать при создании проекта или в меню Edit/Project Settings/Editor).
- Sprite Mode. Поскольку в нашем изображении содержится несколько кадров, выберем Multiple. В дальнейшем нам потребуется задать границы кадров, об этом расскажу ниже.
- Pixels Per Unit. Количество пикселей, приходящихся на одну единицу длины в Unity. Это значение должно по возможности совпадать у всех спрайтов, используемых для игровых объектов (в том числе и персонажей). Удобнее всего установить его равным размеру спрайта, который мы задавали в самом начале, при создании документа Photoshop.
- Filter Mode. Фильтрация изображения. Для пиксель-арта нужно установить значение Point(no filter). Иначе вместо чётких красивых пикселей получим унылое мыльное нечто.
- Compression. Степень сжатия. Если для вас важно сохранить цвет каждого пикселя в первозданном виде, лучше поставить None (без сжатия). Пиксельные спрайты всё равно весят совсем немного.
Жмём Apply, чтобы применить изменения, а затем кнопку Sprite Editor. Откроется окно, в котором нам предстоит нарезать изображение на отдельные кадры.
В этом окне нажмём на кнопку Slice в верхнем левом углу. Поскольку размеры всех кадров одинаковы и известны нам, выберем тип нарезки Grid By Cell Size (сетка по размеру клетки).
Далее задаём размеры кадра, в моём случае - 32х32. Наконец, устанавливаем параметр Pivot (опорная точка) в значение Bottom (низ). Это будет означать, что начало координат каждого спрайта находится в ногах персонажа, что является общепринятой практикой в большинстве игр.
После нажатия большой кнопки Slice внизу окошка, Unity автоматически разобьёт изображение на отдельные кадры. Дело сделано, можно нажимать Apply и закрывать окно.
Осталось создать анимацию на основе нарезанных кадров. Все их мы можем увидеть в окне проекта, если нажать на маленькую стрелочку возле иконки импортированного спрайта:
Берём первый кадр, перетаскиваем из окна проекта в сцену. Затем, выделив создавшийся объект, идём в меню Window/Animation (или жмём Ctrl+6). Откроется окно анимации:
Поскольку у объекта ещё нет анимаций, нам предлагают создать первую. Жмём Create и выбираем, куда сохранить анимацию. Желательно держать анимации разных персонажей в отдельных папках, чтобы не возникало путаницы.
Когда анимация создана, выделим все кадры и перетащим на временную шкалу.
Если запустить получившуюся анимацию, можно заметить, что она, скорее всего, слишком быстрая. Поэтому кадры нужно растащить друг от друга подальше, чтоб замедлить анимацию. Кроме того некоторых кадров не хватает, мы ведь экспортировали в спрайтшит лишь не повторяющиеся кадры. Теперь некоторые кадры нужно продублировать на временной шкале через Ctrl+C/Ctrl+V, чтобы воссоздать тот вид, который анимация имела, когда мы делали её в Photoshop.
После этого запускаем анимацию и наслаждаемся окончательным результатом.
Теперь, чтобы по-настоящему оживить персонажа, потребуется нарисовать ему и другие анимации, а также написать множество скриптов, которые будут управлять поведением персонажа в игре. Но это уже совсем другая история…
Спасибо всем, кто дочитал до конца. Думаю, будут в дальнейшем и другие посты про то, как мы с друзьями делаем игры.
Также советую ознакомиться с моей игрой “Пёс-Убийца”, говорят, она довольно неплоха.
Страница игры в Google Play: https://play.google.com/store/apps/details?id=com.RibaPlus.KillerDog
