Сделать скелет в фотошопе
Хочу поделиться своим опытом работы со Spine — программой для создания скелетной анимации, специально заточенной под игры.
После просмотра официального гайда возникает много вопросов, поговорим про то, какие подводные камни ожидают нас при работе с этой программой на каждом этапе рабочего процесса (на примере Spine — Unity), как можно оптимизировать свою работу, а так же рассмотрим некоторые популярные фишки типа 3D эффекта. В статье будет много тяжелых гифок.
UPD: После недавнего релиза Spine версии 3.6 фишки с Json описанные в конце статьи актуальны разве что для общего развития, т.к. разработчики добавили данный функционал «из коробки».
UPD2:
Layers to PNG теперь называется Photoshop to Spine, сохраняет картинки сразу в нормальном размере, а так же после появления в версии 3.8 функции trace для автоматической генерации меша по контуру текстуры и встроенной полигональной паковки атласов так заморачиваться с подготовкой картинок теперь не обязательно.
Теперь в Spine уже встроен предпросмотр готовой анимации, делается это в окне preview, там можно посмотреть как отрабатывают бленды и как одна анимация накладывается на другую. Отдельно Skeleton viewer теперь искать не обязательно. Проблем со смешиванием чаще всего удается избежать просто внимательно следя за тем какие ключи и где вы ставите.
Сразу оговорюсь, для создания программной анимации в играх есть и другие решения, Dragon Bones, Spriter, Creature, Marionette studio, плагин Puppet 2D и наверняка найдутся другие, просто я как аниматор работаю в Spine.
Схема работы
Когда у нас на руках есть информация и понимание какие персонажи/анимации должны быть созданы для игры, отрисован необходимый материал — можно приступать.
Общая схема работы такова:
Первым делом необходимо подготовить рабочий материал из графических редакторов. Затем ассеты (assets, текстуры) импортируются в Spine и анимируются. На выходе мы получаем Json — файл в котором записаны все ключевые кадры трансформации костей, слотов и проч. Данный файл импортируется в движок, создается специальная skeleton data, которая добавляется на сцене в Spine game object, где наша анимация визуализируется по средствам mesh renderer, запуском можно управлять с помощью кода или же стандартным unity animator.
Непосредственно рабочий процесс в спайне выглядит следующим образом:
- Импорт текстур
- Риггинг (настройка скелета)
- Скиннинг (настройка меша и привязка его к костям)
- Анимация
- Экспорт Json и проверка
Импорт текстур
На этапе подготовки текстур нам важно понимать сколько необходимо проекций персонажа, какая часть работы будет сделана покадрово, какая программно, как грамотно разрезать персонажа и подготовить ассеты.
не рисовать текстуры движущихся частей где их не видно:А также недостаточное число проекций если персонаж меняет ракурс.
Часто у персонажей есть парные элементы с идентичными изображениями — руки, ноги, глаза, и проч. В таком случае целесообразно сохранить только одну текстуру, и использовать ее два, или более, раз.
В данном случае нам будет достаточно одной проекции, и ассеты художник отрисовал хорошо. Можно приступать к импорту в спайн.
Процесс импорта текстур можно существенно ускорить используя скрипт layers to PNG, который сохраняет каждый слой из фотошопа в отдельное png изображение, при этом записывает Json файл в котором содержится информация о расположении текстур, импортируя его в спайн мы получаем готового собранного персонажа.
1) Экспортируем из фотошопа с помощью скрипта Json и PNG картинки (можно указать скеил фактор)
2) Импортируем json в спайн file-import data
3) Указываем путь к текстурам
подробнее
Однако у такого способа есть ряд недостатков — скрипт сохраняет изображения без сжатия, что непрактично. Просто пересохранив слои через file-generate-image assets мы уменьшим вес изображения приблизительно в 10 раз.
Далее, необходимо не забывать разворачивать ваши в спрайты в горизонтальное или вертикальное положение, и стирать все лишнее, т.к. скрипт сохранит изображения прямо в том положении в котором они находятся в фотошопе.
Если для проекта необходима покадровая анимация (напр. огонь, спецэффекты, и проч.) — материалы необходимо отрисовать заранее. Далее с помощью adobe after effects и скрипта ae_to_spine мы можем в пару кликов перенести последовательность кадров в Spine.
Аналогично скрипту layers to png. Подробнее
Рекомендую заранее продумать концепцию наименования, материалы часто приходят в формате «слой 1 (копия) 5», это не слишком практично, для каждой текстуры в проекте необходимо сделать уникальное название, что бы не вызвать проблемы при запаковке атласов. Вполне пригоден вариант формата CharacterVyasya_Skin_a_Hand_R_1.
Тут во многом нам может помочь инструмент find and replace который позволяет быстро переименовывать, указывать путь для большого количества объектов.
Риггинг
Настраивая скелет для персонажа нужно уже думать о том, что, скорее всего, в процессе работы над игрой анимацию нужно будет корректировать, подправлять, поэтому желательно сделать его максимально гибким, что бы процесс правок был максимально простым и быстрым.
Тут может помочь введение дополнительных костей-контролов для разбиения движения по осям X и Y (т.к. в спайне остутствует функция separate dimentions).
Сложное движение ящера суммируется из нескольких составляющих: вертикального, горизонтального и для возможности быстрой корректировки добавлен глобальный контрол.
Тут же маленький типс, если вдруг чувствуется нагромождение из за излишнего количества костей — попробуйте покрутить настройку bone scale:
Смотрите примеры готовых ригов из образцов поставляемых вместе со спайном, или в сети.
Небольшая подборка достаточно известных авторов, у которых есть что подсмотреть:Так же полезные материалы можно искать на behanсe, форуме, соответствующих сообществах в социальных сетях.
Скиннинг
Меш — Один из ключевых инструментов в спайне, накладывая на его текстуру мы получаем возможность ее деформировать, искажать, создавать иллюзию 3D.
При создании меша помните: чем меньше вертексов — тем проще контролировать анимацию.
Т.к. деформация меша потребляет ресурсы CPU, при создании сетки стоит руководствоваться принципом необходимого минимума, наглядно это можно рассмотреть на примере рига кончика хвоста динозавра:
1 вариант - недостаточно точек, видны изломы на картинке: 4 вариант - излишнее количество точек, которые не выполняют никакой функции, никуда не годится:Не забывайте про возможность дублирования целой иерархии меша вместе с костями и весами. Это поможет значительно сэкономить время при риге повторяющихся объектов.
Производительность
В конечном итоге у нас возникает вопрос — а сколько вертексов можно использовать?
Разработчики спайна конкретно не отвечают на этот вопрос, и отсылают к вкладке Spine Metrics, где мы можем отследить суммарное количество элементов в сцене, но при этом говорят о необходимости проведения кастомных тестов производительности.
Важно помнить что трансформация меша, таймлайны, констрейны грузят CPU, а статичная геометрия — GPU. В общем, я бы советовал в случае работы над ключевыми персонажами не сильно заморачиваться по поводу точек, плюс минус десяток не сыграет никакой роли, однако в случае объекта из окружения, который будет повторяться сотню раз, каждый сэкономленный вертекс пойдет на пользу.
И так, когда наш персонаж настроен можно переходить к анимации:
Анимация
Сама по себе анимация это очень большая тема и явно не для обсуждения в рамках одной статьи.
Тут я ограничусь банальными советами в ключе:
- Не забывайте про художественную часть, старайтесь сделать анимацию максимально выразительной
- Следуйте диснеевским принципам анимации
- Импортируйте материал в локацию, часто только после этого становятся видны косяки.
3D-эффект
Это то за что так любят спайн — возможность деформировать изображение с помощью меша тем самым создавая трехмерный эффект.
Для себя я отметил несколько способов создания псевдо 3Д:
- Анимация непосредственно вертексов в меше
- Много костей в ключевых точках меша, анимируются кости
- Кости ставятся выборочно, а далее тщательно настраиваются веса в меше
- Комбинированный способ, все сведено под глобальные контролы
Проставляются кости в ключевых точках меша:
Анимируя кости создаем трехмерный эффект:
Можно сделать анимацией вертексов в меше, но как мы видим по сравнению с кубом точек значительно больше:
Аналогично кубу, кости в ключевых точках меша. По затраченному времени этот способ не лучше предыдущего:
Было бы гораздо более гибко свести риг под один глобальный контрол с помощью констрейнов, двигая одним управлять всеми костями:
То же самое, можно сделать без лишней массы костей,
Для этого каждому вертексу тщательно подбирается значение в весах. Такой способ можно считать оптимальным для округлых поверхностей.
Из примеров видно что анимация непосредственно точек в меше это один из самых негибких вариантов, который в случае необходимости будет трудозатратно переделывать. К этому стоит добавить что в некоторых других рантаймах, помимо юнити, эта фича не поддерживается. Поэтому рекомендую по возможности не трогать меш и управлять им с помощью костей.
По аналогии можно сделать деформацию любой геометрической формы, тем самым добавив вашей анимации выразительности.
И так, мы просидели несколько часов над ключевыми кадрами, мешами, и сделали анимацию персонажа:
Тестирование
Далее можно отправлять нашу анимацию в движок. Однако часто возникают ситуации когда внешний вид анимации в спайне и в рантайме существенно отличается, а т.к. каждое взаимодействие аниматор-программист занимает определенное время, лучше заранее провести тест анимации в рантайме, в ходе которого выявятся основные косяки, и только потом отдать работу будучи уверенным что все хорошо.
Если ваш аниматор не дружит с движком, можно использовать Skeleton Viewer
Какие проблемы возникают наиболее часто:
Некорректное отображение текстур
Чаще всего такое происходит из за неправильной композиции текстуры — меш должен четко соответствовать размеру спрайта.
После отработки анимация выглядит не так как раньше
Изначально овираптор сидит на гнезде с яйцами, потом встает и отходит в сторону. Казалось бы, когда анимация начнется с начала, он должен таким же образом сидеть на гнезде, однако т.к. мы сдвинули его в предыдущей анимации он будет смещен до тех пор пока не будет поставлен ключом в соответствующую позицию.
Происходит это потому что в рантайме анимация просчитывается не из дефолтного положения, а как бы из текущего. Т.е. если мы один раз включим текстуру и не выключим — она останется в таком положении во всех анимациях. Тоже самое и с другими ключами. Это скорее не баг, а фича, но к сожалению аниматор не видит реальной картины пока не импортирует свой материал в рантайм. Решить данный вопрос можно несколькими способами:
1) Проставить ключи на всех свойствах всех объектов в начале и в конце каждой анимации. На первый взгляд слегка муторно, но таким образом вы полностью обезопасите себя от нежданных сюрпризов. Использование фильтров и горячих клавиш ускорит процесс.
Красным выделена иконка фильтра объектов по костям и кнопка для быстрого разворачивания иерархии:
Горячие клавиши по умолчанию:
Key Active: L
Key Selected: ctrl + L
Key Dopesheet: ctrl + shift + L
Key Translation, Key Rotation, Key Scale, Key Shear, Key Color — нужно настраивать самому
2) Использовать скрипт setToSetupPose, который как бы и заставляет проигрываться анимацию из дефолтного состояния. Но такой метод имеет существенный недостаток — Setup Pose выставляется мгновенно, а рендер меняет картинку на соответствующую только со следующего кадра. Таким образом мы имеем проскакивание лишнего кадра между анимациями, выглядит это неприятно. Соответствующее issue уже стоит на доске у разработчиков.
Мы можем экспортировать из спайна Json, провести с ним какие-либо манипуляции, и импортировать обратно, получив определенный результат. Это очень мощный инструмент т.к. мы получаем доступ ко всем компонентам проекта, в свою очередь нам это может очень помочь в определенных ситуациях:
- При необходимости смержить несколько проектов
- При необходимости скопировать иерархию костей вместе с анимацией
- При необходимости откатиться на более старую версию
- Любое другое применение, которое придет вам на ум
Мержинг проектов
Часто возникает необходимость держать анимации в одной сцене, например как тут:
Сам жук в игре появляется в множестве других сцен и был скопирован из одной из них. Однако теперь в проекте два скелета, и соответственно на выходе будет 2 json и 2 объекта на сцене, что добавит необходимость делать определенную логику синхронного запуска этих анимаций для их совмещения во времени, а так же нужно будет точно совместить объекты по положению в локации. Можно упростить себе жизнь отдав материал в одной сцене. Для этого два json нужно смержить.
Для этого есть как минимум два способа: руками и скриптом.
Руками
Копируем куски кода из одного json в другой, в соответствующие категории: слоты к слотам, кости к костям, анимации к анимациям, и т.д. Что бы не возникло конфликтов, важно соблюсти корректность наименования объектов, что бы названия из одного json не совпадали с названиями из другого. Проще всего этого добиться заранее в спайне присвоив всем объектам в именах свой уникальный индекс типа _skel1_ и _skel2_. Этот способ слегка затратный по времени, но меня еще не подводил.
Предельно простой пример для демонстрации принципа, два скелета с костями в одном проекте:
В результате имеем все в одном проекте:
Проблемы могут возникнуть в проектах с скинами, по возможности старайтесь не менять иерархию костей.
Более сложный пример с лягушкой:
(Осторожно, длинные файлы)
Skeleton Merger Tool
Добрые люди написали специальную тулзу для мержинга. Ознакомиться и скачать можно по ссылке . Использовать ее достаточно удобно, включен автоматический ренейминг объектов, однако я не раз сталкивался с ошибками.
Дублирование объектов вместе с анимацией
В спайне отсутствует вложенность композиций (аналог прекомпоз в After Effects или символ во Flash), однако, как показывалось выше, есть возможность продублировать объекты, с сохранением всех зависимостей, но ключи анимации в таком случае не копируются. Не сложно догадаться что, для того что бы не делать анимацию заново, можно переназначить ее на дубликат костей, для этого надо всего лишь перебить в Json имена. Опять же, это проще сделать если у каждой кости будет свой уникальный индекс.
Есть муравей с анимацией. Задача сделать в спайне целую цепочку бегающих друг за другом муравьев. При дублировании муравья анимация не копируется. Обратите внимание, у первого муравья в названии стоит индекс _skel_1_, у второго _skel_2_.
Экспортируем Json и открываем его текстовым редактором. Код анимации walk_1 копируем, находим там все участки _skel_1_:
заменяем их на _skel_2_
Вставляем обратно. Таким образом мы переназначили анимацию на другие кости. Сохраняем json, и импортируем его в спайн путем file — import data. Теперь у нас два бегающих муравья.
Откатиться до старой версии
Проекты сохраненные в более новой версии будут не совместимы со старыми. Иногда это может стать проблемой, и для ее решения есть несколько способов:
Руками перебить версию в json
Поможет если между версиями небольшой промежуток, и нет принципиальных различий в алгоритмах работы анимации.
Сложность урока: Легкий
Перед вами обновлённая версия урока, который выполнен в Photoshop CC2018.
В этом уроке мы сделаем выделение пары и перенесем ее на другой фон за пять минут.
Будем работать вот с этим изображением:
Итак, время пошло!
1. Подготовка
Шаг 1
Открываем изображение, с которым мы собираемся работать. Файл – Открыть (File – Open).
Шаг 2
Создадим копию фонового слоя (Ctrl+J). А затем скроем фоновый слой на панели Слои (Layers).
2. Создаем выделение
Шаг 1
Первым делом нам нужно выделить девушку максимально быстро (можно не очень точно). Я буду пользоваться инструментом Быстрое выделение (Quick Selection). Нажмите левую клавишу мыши и, удерживая ее, выделите задний фон. Постарайтесь захватить в выделение весь фон. Ничего страшного, если вместе с фоном выделяются также части наше пары. Должно получиться примерно так:
Для удобства выделения можно увеличить масштаб изображения. Это удобно делать с помощью клавиш. И вообще, работа с клавишами ускоряет весь процесс обработки в несколько раз. Вот некоторые полезные комбинации:
- Увеличение масштаба – сочетание клавиш Ctrl и «+»
- Уменьшение масштаба – сочетание клавиш Ctrl и «-»
- Сделать изображение на весь экран – сочетание клавиш Ctrl и 0(ноль)
- Инструмент Рука (Hand) удобен, когда изображение не помещается на весь экран. Позволяет сдвигать картинку. Нажмите на пробел и сдвигайте изображение, удерживая левую клавишу мыши и перемещая мышь по столу.
- Меняйте размер кисти, которой выделяете, нажатием на клавишу «[» для уменьшения размера кисти и «]» для увеличения.
Шаг 2
Чтобы исключить из выделения ненужные части, на панели опций выберите кнопочку Вычитание из выделенной области (Subtract from selection)
и осторожненько поводите, удерживая левую клавишу, по тем местам, где имеется лишнее выделение. Если к выделению нужно еще что-то добавить, то выберите Добавить к выделенной области (Add to selection):
Итак, вот что примерно должно получилось:
Шаг 3
Внизу панели Слои (Layers) щелкаем по иконке Добавить слой маску:
У нас фон остался на месте, а люди скрылись. Все правильно, мы ведь выделяли именно фон. Чтобы поменять выделение в нашей маске, щелкаем мышкой 2 раза по миниатюре маски. Появляется окно со свойствами маски, нажимаем кнопку Инвертировать (Invert).
Обратите внимание, что на панели слоев на миниатюре маски черный и белый цвет поменялись местами. Вот что получилось:
У меня на все это ушло 2 минуты. А у вас?
3. Делаем коллаж
Шаг 1
Открываем в Photoshop изображение, которое будет новым фоном.
Шаг 2
Инструментом Перемещение (Move) щелкаем по миниатюре слоя с маской, удерживая левую клавишу мыши и тянем ее на закладку картинки с новым фоном. Ждем несколько секунд, пока закладка откроется, и отпускаем нашу пару на фоновое изображение. Вы можете расположить ее или изменять размер так, как вам захочется, используя этот же инструмент Перемещение (Move). У меня получилось так:
Да, волосы выделены не идеально, торчат куски светлого фона, а также, в некоторым местах, волосы обрезаны:
Отлично, есть над чем поработать. Кстати у нас осталось 2 минуты.
Шаг 3
На палитре слоев щелкните мышкой по маске слоя:
Откроется окно свойств, там нажмите кнопку Выделение и маска…(Select and Mask…)
В списке Вид (View) выбираем На чёрном (On Black). Это делается для удобства обработки контуров
Сразу стало видно, какое неточное было выделение:
Шаг 4
Инструментом Уточнить края, который вы сможете найти в этом же окне, поводим по контуру волос. Если в прошлый раз при выделении вы отрезали некоторую часть волос, само время их вернуть.
Вот что получилось пока:
Теперь, чтобы получилось более естественно, в этом же окне выставляем следующие настройки:
- Растушевка (Feather) – делает весь контур немного размытым
- Контрастность (Contrast)– добавляет четкости краям выделения
- Сместить край (Shift Edge) – срезает контур (если двигать ползунок влево)
- Последняя галочка Очистить цвета (Decontaminate Colors) и ползунок Количество (Amount) позволили еще больше убрать белый ореол вокруг волос.
Если у вас изображение другое, то, скорее всего, и настройки будут другими. Попробуйте просто поиграть с ползунками и вы увидите разницу. Все, можно нажимать кнопку Ок. Появился третий слой с маской, а на предыдущем слое выключен глазик.
4. Результат
Хороший результат для пяти минут.
Фух, как раз уложились в 5 минут. Очень надеюсь, что урок оказался для вас полезным.
Читая статьи о Photoshop, я часто удивляюсь тому, насколько многие авторы усложняют решение по сути простых задач по обработке. Этим страдают и многие «монументальные» писатели, например Дэн Маргулис. Но ему это простительно – его задача написать о всех тонкостях и нюансах процесса обработки, рассмотреть его со всех ракурсов и сторон. Хотя именно эта особенность подачи материала в его книгах отталкивает многих читателей.
На самом деле, корни подобных способов «увеличить резкость в 40 действий» растут из очень простой вещи – люди, которые пишут эти уроки, никогда не работали с большим объемом фотографий. То есть, как правило, у них есть пара фотографий и они готовы в процессе их обработки убить вечер-другой. Но когда у тебя идут постоянные заказы, и с каждой фотосессии тебе надо серьезно обработать несколько десятков кадров – начинаешь задумываться о более простых и удобных способах обработки.
О них мы сегодня и поговорим. Я расскажу вам о пяти простых, но очень эффективных инструментах Photoshop, которые я постоянно использую в своей работе.
Перед тем, как обрабатывать фотографии в Photoshop, я всегда сначала работаю с кадрами в RAW-конвертере. Именно там я провожу основную цветокоррекцию и первичную обработку фотографий. По сути, я создаю «скелет» обработки, а в Photoshop работаю уже с деталями фотографии.
Итак, мы поработали с фотографией в RAW-конвертере и открываем ее в Photoshop. Фотошоп встречает нас огромным количеством инструментов для обработки на все случаи жизни. Но мы поговорим о самых простых и эффективных из них.
1. Dodge Tool/Burn Tool
Главная функция Dodge Tool/Burn Tool – осветление/затемнение отдельных участков изображения. По сути, вы можете «рисовать» затемнение или наоборот – осветлять снимок. Это очень просто, попробуйте: уверен, вы оцените этот инструмент. Dodge/Burn Tool имеет всего две, но очень важные настройки.
Range — Выбор области применения
Вы можете использовать этот инструмент на темные (Shadows), светлые (Highlights) или нейтральные (Midtones) области фотографии. Например, вам нужно осветлить темные участки подбородка (при обработке портрета), а светлые оставить не тронутыми. В таком случае мы ставим режим Shadows в Dodge Tool, и она будет осветлять только темные участки мест, на которые мы ее применим.
Exposure – сила воздействия
Очень важно правильно выставить силу воздействия. Многие люди, экспериментируя с фотошопом, пробуют Dodge/Burn на 100%. И, затемняя изображение, получают черные «дыры», а осветляя – сплошные пересветы. Конечно, получая такой результат, они больше не возвращаются к этому инструменту. Но Dodge/Burn – это тонкий инструмент. Если вы работаете по теням или светам – попробуйте силу применения в 7-10%, если с нейтральными участками – 10-20%. Для каждого случая сила воздействия подбирается отдельно, но, немного поработав с этим инструментом, вы начнете чувствовать, какая именно мощность нужна в каждом конкретном случае.
Использование
Dodge/Burn имеет массу способов применения:
- Осветляйте радужку глаз
- Затемняйте линии формы лица на мужском портрете
- Осветляйте области контрового света
- Отбеливайте зубы вашим моделям
Именно используя Dodge Tool, проще и эффективнее всего отбеливать зубы на фотографии. Немного попозже я обязательно напишу отдельный урок о правильном отбеливании зубов с помошью Dogde Tool.
2. Clone Stamp
В фотошопе существует несколько инструментов для ретуши изображений, и каждый из них по своему хорош. Но «Штамп» — самый универсальный в применении инструмент.
Его функция – брать определенный участок изображения и копировать его. Тем самым мы можем, например, заретушировать морщины – просто «заменив» их участками гладкой кожи. Для этого нажимаем Alt и выбираем область, откуда будет браться картинка, и потом, просто кликая по нужным участкам изображения, мы будем копировать ее на них.
В настройках штампа важно обратить внимание на два параметра:
Mode
Это режимы, в которых будет работать штамп. Например, в режиме Darken штамп будет «заменять» только более светлые зоны, нежели выбранный участок. По сути – вы можете затемнять светлые зоны изображения, оттого и название режима – Darken. И, сооветственно, в режиме Lighten штамп будет работать только на более темные зоны изображения, осветляя их.
Clone Stamp имеет много режимов работы – поэкспериментируйте с ними, уверен, вы получите интересные результаты.
Описывать работу каждого режима, на мой взгляд, не имеет смысла — в фотошопе для всех инструментов действуют по сути одни и теже принципы работы режимов, только немного изменяясь под специфику конкретного инструмента.
Opacity
Opacity – значит непрозрачность. Проще говоря, чем меньше вы поставите процент в этой настройке, тем более прозрачная будет «работа» штампа. Например, при 100% штамп полностью заменит выбранный участок, а при 50% — будет полупрозрачным. Для ретуши лица, как правило, используется 10-30%, в ином случае будет слишком четко виден след штампа.
Использование Clone Stamp
Ретушь во всех ее проявлениях – основное назначение штампа. Прежде всего штамп используется для ретуши кожи – убирать морщины, синяки под глазами, отеки и прочие прекрасные творения матери-природы.
Также можно заретушировать, например, нежелательный объект в кадре. Если, конечно, он не занимает половину фотографии.
Очень удобно использовать штамп для устранения небольших пересветов. Например, у вашей модели на кончике носа небольшое пятнышко пересвета. Мы берем штамп, ставим режим Darken и в пару кликов затемняем это пятнышко.
3. History Brush
Хистори браш – это машина времени для обработки фотографий. Вы можете брать любую стадию обработки и кисточкой рисовать из нее по вашему изображению.
History Brush таит в себе огромные возможности. Подробно о работе этого инструмента я уже писал в отдельной статье. В ней вы найдете подробный урок по применению хистори браш и узнаете, как увеличивать резкость только на нужных вам участках изображения.
Безусловно, увеличение резкости не единственная область ее применения. В будущих статьях, я расскажу, как с помощью History Brush работать с цветом на фотографии.
4. Black&White
Инструмент Black&White находится во вкладке Image-->Adjustments. Или можно просто создать Adjustment layer (Корректирующий слой) на фотографии.
Главная функция инструмента Black&White – «правильный» перевод цветного изображения в ч/б. Правильный потому, что вы можете изменять черно-белое отображение каждого из цветов. Тем самым вы сможете получить красивую и «вкусную» ч/б картинку.
Но на этом функционал B&W не ограничивается.
С помощью этого инструмента можно получить очень интересную и цветную картинку. Применим на нашу картинку B&W, а затем включим режим слоя Overlay.
Теперь, манипулируя рычажками управления B&W и прозрачностью слоя, мы можем получить очень интересную картинку. Для большей наглядности я поставил довольно высокий Opacity слоя с B&W — 62% и повернул на максимум рычажки Greens, Cyans, Blues и Magentas.
Как мы видим, картинка стала сразу насыщеннее и контрастнее (кликните по картинке для увеличения).
А теперь обратим внимание на галочку Tint. Включив ее, мы сможем тонировать изображение в нужный нам цвет.
Использование
Вариантов использования B&W как при работе с цветом, так и при обработке Ч/Б — масса.
В одной из следующих статей я, на примере обработки нескольких фотографий, расскажу о всех основных нюансах работы с Black&White.
5. Shadow/Highlights
Shadow/Highlights также находится во вкладке Image-->Adjustments (там вообще, кстати, много интересных инструментов находится, советую поэкспериментировать со всеми)
Этот инструмент создан, чтобы затемнять пересвеченые области и вытягивать света из теней. Кроме самого очевидного применения – устранять пересветы и недосветы, S/H отлично работает также и для создания ощущения большей глубины картинки. Мы можем в светлые области добавить темных полутонов, а в темные – светлых. Тем самым, картинка станет более объемной и глубокой.
Например, на этой фотографии с помощью S/H я добавил объема шерсти щенка и картинка сразу стала интересней.
На самом деле, Shadow/Highlights — совершенно незаменимый инструмент для любой серьезной обработки. Практически любую фотографию можно сделать лучше, если грамотно применить S/H.
Хочется рассказать о всех настройках S/H и его функционале, но это действительно тема для отдельной статьи. В будущем, я обязательно вернусь к теме Shadow/Highlights, а пока просто попробуйте поэкспериментировать — пробуйте разные варианты настроек и смотрите на результат. По моему опыту, этот способ — самых действенный для освоения новых вещей.
Как мы видим, все эти инструменты очень просты в использовании, но при этом – потрясающе эффективны. Попробуйте поэкспериментировать с ними и вы почувствуете сколько возможностей они дают при обработке.
Думаю стоит сделать серию статей о простых, но очень эффективных инструментах в Photoshop. И в следующей статье я расскажу об инструментах для серьезной работы с цветом на фотографии.
Хочу поделиться своим опытом работы со Spine — программой для создания скелетной анимации, специально заточенной под игры.
После просмотра официального гайда возникает много вопросов, поговорим про то, какие подводные камни ожидают нас при работе с этой программой на каждом этапе рабочего процесса (на примере Spine — Unity), как можно оптимизировать свою работу, а так же рассмотрим некоторые популярные фишки типа 3D эффекта. В статье будет много тяжелых гифок.
UPD: После недавнего релиза Spine версии 3.6 фишки с Json описанные в конце статьи актуальны разве что для общего развития, т.к. разработчики добавили данный функционал «из коробки».
UPD2:
Layers to PNG теперь называется Photoshop to Spine, сохраняет картинки сразу в нормальном размере, а так же после появления в версии 3.8 функции trace для автоматической генерации меша по контуру текстуры и встроенной полигональной паковки атласов так заморачиваться с подготовкой картинок теперь не обязательно.
Теперь в Spine уже встроен предпросмотр готовой анимации, делается это в окне preview, там можно посмотреть как отрабатывают бленды и как одна анимация накладывается на другую. Отдельно Skeleton viewer теперь искать не обязательно. Проблем со смешиванием чаще всего удается избежать просто внимательно следя за тем какие ключи и где вы ставите.
Сразу оговорюсь, для создания программной анимации в играх есть и другие решения, Dragon Bones, Spriter, Creature, Marionette studio, плагин Puppet 2D и наверняка найдутся другие, просто я как аниматор работаю в Spine.
Схема работы
Когда у нас на руках есть информация и понимание какие персонажи/анимации должны быть созданы для игры, отрисован необходимый материал — можно приступать.
Общая схема работы такова:
Первым делом необходимо подготовить рабочий материал из графических редакторов. Затем ассеты (assets, текстуры) импортируются в Spine и анимируются. На выходе мы получаем Json — файл в котором записаны все ключевые кадры трансформации костей, слотов и проч. Данный файл импортируется в движок, создается специальная skeleton data, которая добавляется на сцене в Spine game object, где наша анимация визуализируется по средствам mesh renderer, запуском можно управлять с помощью кода или же стандартным unity animator.
Непосредственно рабочий процесс в спайне выглядит следующим образом:
- Импорт текстур
- Риггинг (настройка скелета)
- Скиннинг (настройка меша и привязка его к костям)
- Анимация
- Экспорт Json и проверка
Импорт текстур
На этапе подготовки текстур нам важно понимать сколько необходимо проекций персонажа, какая часть работы будет сделана покадрово, какая программно, как грамотно разрезать персонажа и подготовить ассеты.
не рисовать текстуры движущихся частей где их не видно:А также недостаточное число проекций если персонаж меняет ракурс.
Часто у персонажей есть парные элементы с идентичными изображениями — руки, ноги, глаза, и проч. В таком случае целесообразно сохранить только одну текстуру, и использовать ее два, или более, раз.
В данном случае нам будет достаточно одной проекции, и ассеты художник отрисовал хорошо. Можно приступать к импорту в спайн.
Процесс импорта текстур можно существенно ускорить используя скрипт layers to PNG, который сохраняет каждый слой из фотошопа в отдельное png изображение, при этом записывает Json файл в котором содержится информация о расположении текстур, импортируя его в спайн мы получаем готового собранного персонажа.
1) Экспортируем из фотошопа с помощью скрипта Json и PNG картинки (можно указать скеил фактор)
2) Импортируем json в спайн file-import data
3) Указываем путь к текстурам
подробнее
Однако у такого способа есть ряд недостатков — скрипт сохраняет изображения без сжатия, что непрактично. Просто пересохранив слои через file-generate-image assets мы уменьшим вес изображения приблизительно в 10 раз.
Далее, необходимо не забывать разворачивать ваши в спрайты в горизонтальное или вертикальное положение, и стирать все лишнее, т.к. скрипт сохранит изображения прямо в том положении в котором они находятся в фотошопе.
Если для проекта необходима покадровая анимация (напр. огонь, спецэффекты, и проч.) — материалы необходимо отрисовать заранее. Далее с помощью adobe after effects и скрипта ae_to_spine мы можем в пару кликов перенести последовательность кадров в Spine.
Аналогично скрипту layers to png. Подробнее
Рекомендую заранее продумать концепцию наименования, материалы часто приходят в формате «слой 1 (копия) 5», это не слишком практично, для каждой текстуры в проекте необходимо сделать уникальное название, что бы не вызвать проблемы при запаковке атласов. Вполне пригоден вариант формата CharacterVyasya_Skin_a_Hand_R_1.
Тут во многом нам может помочь инструмент find and replace который позволяет быстро переименовывать, указывать путь для большого количества объектов.
Риггинг
Настраивая скелет для персонажа нужно уже думать о том, что, скорее всего, в процессе работы над игрой анимацию нужно будет корректировать, подправлять, поэтому желательно сделать его максимально гибким, что бы процесс правок был максимально простым и быстрым.
Тут может помочь введение дополнительных костей-контролов для разбиения движения по осям X и Y (т.к. в спайне остутствует функция separate dimentions).
Сложное движение ящера суммируется из нескольких составляющих: вертикального, горизонтального и для возможности быстрой корректировки добавлен глобальный контрол.
Тут же маленький типс, если вдруг чувствуется нагромождение из за излишнего количества костей — попробуйте покрутить настройку bone scale:
Смотрите примеры готовых ригов из образцов поставляемых вместе со спайном, или в сети.
Небольшая подборка достаточно известных авторов, у которых есть что подсмотреть:Так же полезные материалы можно искать на behanсe, форуме, соответствующих сообществах в социальных сетях.
Скиннинг
Меш — Один из ключевых инструментов в спайне, накладывая на его текстуру мы получаем возможность ее деформировать, искажать, создавать иллюзию 3D.
При создании меша помните: чем меньше вертексов — тем проще контролировать анимацию.
Т.к. деформация меша потребляет ресурсы CPU, при создании сетки стоит руководствоваться принципом необходимого минимума, наглядно это можно рассмотреть на примере рига кончика хвоста динозавра:
1 вариант - недостаточно точек, видны изломы на картинке: 4 вариант - излишнее количество точек, которые не выполняют никакой функции, никуда не годится:Не забывайте про возможность дублирования целой иерархии меша вместе с костями и весами. Это поможет значительно сэкономить время при риге повторяющихся объектов.
Производительность
В конечном итоге у нас возникает вопрос — а сколько вертексов можно использовать?
Разработчики спайна конкретно не отвечают на этот вопрос, и отсылают к вкладке Spine Metrics, где мы можем отследить суммарное количество элементов в сцене, но при этом говорят о необходимости проведения кастомных тестов производительности.
Важно помнить что трансформация меша, таймлайны, констрейны грузят CPU, а статичная геометрия — GPU. В общем, я бы советовал в случае работы над ключевыми персонажами не сильно заморачиваться по поводу точек, плюс минус десяток не сыграет никакой роли, однако в случае объекта из окружения, который будет повторяться сотню раз, каждый сэкономленный вертекс пойдет на пользу.
И так, когда наш персонаж настроен можно переходить к анимации:
Анимация
Сама по себе анимация это очень большая тема и явно не для обсуждения в рамках одной статьи.
Тут я ограничусь банальными советами в ключе:
- Не забывайте про художественную часть, старайтесь сделать анимацию максимально выразительной
- Следуйте диснеевским принципам анимации
- Импортируйте материал в локацию, часто только после этого становятся видны косяки.
3D-эффект
Это то за что так любят спайн — возможность деформировать изображение с помощью меша тем самым создавая трехмерный эффект.
Для себя я отметил несколько способов создания псевдо 3Д:
- Анимация непосредственно вертексов в меше
- Много костей в ключевых точках меша, анимируются кости
- Кости ставятся выборочно, а далее тщательно настраиваются веса в меше
- Комбинированный способ, все сведено под глобальные контролы
Проставляются кости в ключевых точках меша:
Анимируя кости создаем трехмерный эффект:
Можно сделать анимацией вертексов в меше, но как мы видим по сравнению с кубом точек значительно больше:
Аналогично кубу, кости в ключевых точках меша. По затраченному времени этот способ не лучше предыдущего:
Было бы гораздо более гибко свести риг под один глобальный контрол с помощью констрейнов, двигая одним управлять всеми костями:
То же самое, можно сделать без лишней массы костей,
Для этого каждому вертексу тщательно подбирается значение в весах. Такой способ можно считать оптимальным для округлых поверхностей.
Из примеров видно что анимация непосредственно точек в меше это один из самых негибких вариантов, который в случае необходимости будет трудозатратно переделывать. К этому стоит добавить что в некоторых других рантаймах, помимо юнити, эта фича не поддерживается. Поэтому рекомендую по возможности не трогать меш и управлять им с помощью костей.
По аналогии можно сделать деформацию любой геометрической формы, тем самым добавив вашей анимации выразительности.
И так, мы просидели несколько часов над ключевыми кадрами, мешами, и сделали анимацию персонажа:
Тестирование
Далее можно отправлять нашу анимацию в движок. Однако часто возникают ситуации когда внешний вид анимации в спайне и в рантайме существенно отличается, а т.к. каждое взаимодействие аниматор-программист занимает определенное время, лучше заранее провести тест анимации в рантайме, в ходе которого выявятся основные косяки, и только потом отдать работу будучи уверенным что все хорошо.
Если ваш аниматор не дружит с движком, можно использовать Skeleton Viewer
Какие проблемы возникают наиболее часто:
Некорректное отображение текстур
Чаще всего такое происходит из за неправильной композиции текстуры — меш должен четко соответствовать размеру спрайта.
После отработки анимация выглядит не так как раньше
Изначально овираптор сидит на гнезде с яйцами, потом встает и отходит в сторону. Казалось бы, когда анимация начнется с начала, он должен таким же образом сидеть на гнезде, однако т.к. мы сдвинули его в предыдущей анимации он будет смещен до тех пор пока не будет поставлен ключом в соответствующую позицию.
Происходит это потому что в рантайме анимация просчитывается не из дефолтного положения, а как бы из текущего. Т.е. если мы один раз включим текстуру и не выключим — она останется в таком положении во всех анимациях. Тоже самое и с другими ключами. Это скорее не баг, а фича, но к сожалению аниматор не видит реальной картины пока не импортирует свой материал в рантайм. Решить данный вопрос можно несколькими способами:
1) Проставить ключи на всех свойствах всех объектов в начале и в конце каждой анимации. На первый взгляд слегка муторно, но таким образом вы полностью обезопасите себя от нежданных сюрпризов. Использование фильтров и горячих клавиш ускорит процесс.
Красным выделена иконка фильтра объектов по костям и кнопка для быстрого разворачивания иерархии:
Горячие клавиши по умолчанию:
Key Active: L
Key Selected: ctrl + L
Key Dopesheet: ctrl + shift + L
Key Translation, Key Rotation, Key Scale, Key Shear, Key Color — нужно настраивать самому
2) Использовать скрипт setToSetupPose, который как бы и заставляет проигрываться анимацию из дефолтного состояния. Но такой метод имеет существенный недостаток — Setup Pose выставляется мгновенно, а рендер меняет картинку на соответствующую только со следующего кадра. Таким образом мы имеем проскакивание лишнего кадра между анимациями, выглядит это неприятно. Соответствующее issue уже стоит на доске у разработчиков.
Мы можем экспортировать из спайна Json, провести с ним какие-либо манипуляции, и импортировать обратно, получив определенный результат. Это очень мощный инструмент т.к. мы получаем доступ ко всем компонентам проекта, в свою очередь нам это может очень помочь в определенных ситуациях:
- При необходимости смержить несколько проектов
- При необходимости скопировать иерархию костей вместе с анимацией
- При необходимости откатиться на более старую версию
- Любое другое применение, которое придет вам на ум
Мержинг проектов
Часто возникает необходимость держать анимации в одной сцене, например как тут:
Сам жук в игре появляется в множестве других сцен и был скопирован из одной из них. Однако теперь в проекте два скелета, и соответственно на выходе будет 2 json и 2 объекта на сцене, что добавит необходимость делать определенную логику синхронного запуска этих анимаций для их совмещения во времени, а так же нужно будет точно совместить объекты по положению в локации. Можно упростить себе жизнь отдав материал в одной сцене. Для этого два json нужно смержить.
Для этого есть как минимум два способа: руками и скриптом.
Руками
Копируем куски кода из одного json в другой, в соответствующие категории: слоты к слотам, кости к костям, анимации к анимациям, и т.д. Что бы не возникло конфликтов, важно соблюсти корректность наименования объектов, что бы названия из одного json не совпадали с названиями из другого. Проще всего этого добиться заранее в спайне присвоив всем объектам в именах свой уникальный индекс типа _skel1_ и _skel2_. Этот способ слегка затратный по времени, но меня еще не подводил.
Предельно простой пример для демонстрации принципа, два скелета с костями в одном проекте:
В результате имеем все в одном проекте:
Проблемы могут возникнуть в проектах с скинами, по возможности старайтесь не менять иерархию костей.
Более сложный пример с лягушкой:
(Осторожно, длинные файлы)
Skeleton Merger Tool
Добрые люди написали специальную тулзу для мержинга. Ознакомиться и скачать можно по ссылке . Использовать ее достаточно удобно, включен автоматический ренейминг объектов, однако я не раз сталкивался с ошибками.
Дублирование объектов вместе с анимацией
В спайне отсутствует вложенность композиций (аналог прекомпоз в After Effects или символ во Flash), однако, как показывалось выше, есть возможность продублировать объекты, с сохранением всех зависимостей, но ключи анимации в таком случае не копируются. Не сложно догадаться что, для того что бы не делать анимацию заново, можно переназначить ее на дубликат костей, для этого надо всего лишь перебить в Json имена. Опять же, это проще сделать если у каждой кости будет свой уникальный индекс.
Есть муравей с анимацией. Задача сделать в спайне целую цепочку бегающих друг за другом муравьев. При дублировании муравья анимация не копируется. Обратите внимание, у первого муравья в названии стоит индекс _skel_1_, у второго _skel_2_.
Экспортируем Json и открываем его текстовым редактором. Код анимации walk_1 копируем, находим там все участки _skel_1_:
заменяем их на _skel_2_
Вставляем обратно. Таким образом мы переназначили анимацию на другие кости. Сохраняем json, и импортируем его в спайн путем file — import data. Теперь у нас два бегающих муравья.
Откатиться до старой версии
Проекты сохраненные в более новой версии будут не совместимы со старыми. Иногда это может стать проблемой, и для ее решения есть несколько способов:
Руками перебить версию в json
Поможет если между версиями небольшой промежуток, и нет принципиальных различий в алгоритмах работы анимации.
Читайте также: