Как экспортировать анимацию из фотошопа в юнити
Главная » Как выгрузить анимацию в Photoshop’е и импортировать в AdobeFlash
Как выгрузить анимацию в Photoshop’е и импортировать в AdobeFlash
Выгрузить анимацию в фотошопе можно просто — сохранить в формате «gif». но если нужно сохранить покадрово в другом графическом формате, то нужно сохранять отдельно каждый кадр. А если этих кадров очень много? То же самое касается AdobeFlash — как загрузить все кадры анимации сразу, а не загружать по одной картинке? В этом уроке разберемся, как автоматизировать эти процессы, упростить выгрузку кадров анимации из фотошопа и загрузку в AdobeFlash.
Выгрузка кадров анимации в фотошопе
Примечание. Выгрузить анимацию можно также в качестве готового видео-файла. Для этого нужно зайти в главное меню File -> Export -> Render Video… Должно появиться окно с различными настройками выгрузки видео-файла и настройками видео. В данном уроке мы не будем рассматривать этот способ экспортирования анимации, можете почитать об этом на официальном сайте.
Откройте пример или создайте свою анимацию. Должна получиться следующая последовательность кадров анимации:
Чтобы выгрузить кадры анимации в виде отдельных картинок, нужно преобразовать их в слои. Для этого нажмите в панели анимации на кнопку, расположенную в верхнем правом углу, и в появившемся меню выберите «Flatten Frames Into Layers», в панели «Layers» появятся новые слои.
Эти новые слои и будут выгружаться как отдельные картинки. Прежде чем экспортировать анимацию, давайте подготовим слои. Можете удалить все старые слои, либо сделать их невидимыми, а все новые видимыми.
Выберите в главном меню File -> Scripts -> Export Layers to Files, чтобы открыть окно с настройками экспорта слоев с анимацией.
Экспортирование слоев происходит, начиная с верхнего, поэтому после выгрузки файлы будут иметь имена в обратном порядке, начиная с десятого, а не первого. Чтобы этого избежать, нужно перед выгрузкой поменять порядок их расположения в окне «Layers». Для этого выберите все нужные слои и перейдите в главном меню Layer -> Arrange -> Reverse. Теперь слои идут так, как нужно, начиная с первого слоя.
Давайте рассмотрим некоторые пункты в окне Export Layers to Files. В первом поле нужно указать папку, в которую будут выгружаться файлы. Второе поле указывает, какой префикс будет добавляться к именам файлов. Далее идет флажок Visible Layers Only, который означает, что выгружаться будут те слои, которые отмечены как видимые. После того, как все настройки сделаны, нажмите кнопку «Run». Если выгрузка прошла успешно, то появится окно с надписью «Export Layers to Files was successful». Проверьте папку с выгруженными файлами.
Импортирование анимации в AdobeFlash
Теперь можно загрузить картинки анимации в AdobeFlash. Находясь в символе, перейдите в главное меню File -> Import -> Import to Stage… , выберите первый файл, после чего появится диалоговое окно, нажмите «ok», все картинки будут расставлены каждый в своем кадре на панели TimeLine.
Когда все картинки загрузились, желательно их выровнять по центру. Для этого нужно выбрать каждый кадр и нажать на кнопку align справа вверху, после чего отобразится следующие варианты выравнивания, нажмите в первой группе «Align horizontal center» и «Align vertical center». Можно упростить и выровнять их сразу все, для этого на панели Timeline внизу нажмите на кнопку «Edit Multiple Frames».
На панели Timeline над кадрами должны появиться две скобки, которые нужно передвинуть так, чтобы в них находились все кадры.
Теперь выделите мышью в окне Scene все картинки и выровняйте инструментом align, как делали это для каждого отдельного кадра. Проверьте все кадры, чтобы в каждом картинка окружность находилась в центре. После проделанного нужно снять отжать кнопку-переключатель «Edit Multiple Frames». Перейдите на основную сцену, чтобы поместить на нее из библиотеки символ с анимацией, запустите приложение (ctrl + Enter), чтобы воспроизвести анимацию шарика.
Если урок был полезен, то поделитесь им в социальных сетях (значки внизу), это поможет продвижению сайта.
Комментариев: 2 на “ Как выгрузить анимацию в Photoshop’е и импортировать в AdobeFlash ”
В интернете очень много информации по этим темам, только все в разброс и не так детально. Мне для создания рекламного приложения нужно было выгрузить очень много кадров анимации из фотошопа и добавить их во флэш. В программировании не особо сильна, больше занимаюсь рисованием и дизайном. Спасибо за урок, очень помог, добавлю в закладки фэйсбука.
Спасибо за такой урок. Давно искал,как можно выгрузить из фотошопа анимацию по кадрам,а не отдельными картинками.
Добавлено (17.08.2013, 12:11)
---------------------------------------------
seaman, хорошо я постараюсь разобраться))
Добавлено (17.08.2013, 12:28)
---------------------------------------------
seaman, а что мне в Animation.AddClip(здесь нужно указать animation clip, но ведь у меня же его нет). Что туда написать? Что бы он новый создал.
MissingComponentException: There is no 'Animation' attached to the "Стив (анимация)" game object, but a script is trying to access it.
You probably need to add a Animation to the game object "Стив (анимация)". Or your script needs to check if the component is attached before using it.
UnityEngine.Animation.AddClip (UnityEngine.AnimationClip clip, System.String newName, Int32 firstFrame, Int32 lastFrame) (at C:/BuildAgent/work/cac08d8a5e25d4cb/Runtime/ExportGenerated/Editor/Animations.cs:641)
AnimationImporter.OnPostprocessModel (UnityEngine.GameObject go) (at Assets/Plugins/Editor/AnimationImporter.cs:13)
System.Reflection.MonoMethod.Invoke (System.Object obj, BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) (at /Applications/buildAgent/work/b59ae78cff80e584/mcs/class/corlib/System.Reflection/MonoMethod.cs:222)
Rethrow as TargetInvocationException: Exception has been thrown by the target of an invocation.
System.Reflection.MonoMethod.Invoke (System.Object obj, BindingFlags invokeAttr, System.Reflection.Binder binder, System.Object[] parameters, System.Globalization.CultureInfo culture) (at /Applications/buildAgent/work/b59ae78cff80e584/mcs/class/corlib/System.Reflection/MonoMethod.cs:232)
System.Reflection.MethodBase.Invoke (System.Object obj, System.Object[] parameters) (at /Applications/buildAgent/work/b59ae78cff80e584/mcs/class/corlib/System.Reflection/MethodBase.cs:115)
UnityEditor.AttributeHelper.InvokeMemberIfAvailable (System.Object target, System.String methodName, System.Object[] args) (at C:/BuildAgent/work/cac08d8a5e25d4cb/Editor/Mono/AttributeHelper.cs:236)
UnityEditor.AssetPostprocessingInternal.PostprocessMesh (UnityEngine.GameObject gameObject) (at C:/BuildAgent/work/cac08d8a5e25d4cb/Editor/Mono/AssetPostprocessor.cs:154)
UnityEditorInternal.InternalEditorUtility:ProjectWindowDrag(HierarchyProperty, Boolean)
UnityEditor.DockArea:OnGUI()
Вот код моего скрипта. Он находится в Plugins/Editor.
public class AnimationImporter : AssetPostprocessor
if и endif в начале и в конце скрипта для того что бы при билде игры он не ругался на этот скрипт.
Ошибка вылезает когда я кидаю fbx в проект. Кидаю в папку Resources, но помоему без разницы куда кидаю
public class AnimationImporter : AssetPostprocessor
void OnPostprocessModel (GameObject go)
<
ModelImporter importer = assetImporter as ModelImporter;
ModelImporterClipAnimation clip = new ModelImporterClipAnimation();
clip.firstFrame = 0;
clip.lastFrame = 1000;
clip.loop = true;
clip.name = "Test";
ModelImporterClipAnimation[] clips = new ModelImporterClipAnimation[]
<
clip
>;
Сказ о том, как делать не стоит. Или, как я дважды сгорал на работе
Сегодня я хочу поделиться своим опытом в изготовлении анимаций для персонажей и внедрения их в игру. Естественно, с позиции художника. Каждый заказ, который попадает ко мне на почту разительно отличается от предыдущего, во множестве аспектов, и работать над чем-то новым для меня не впервые.
Но, именно данный заказ натолкнул меня на мысль, что подобным опытом стоит поделиться. Дабы, не знакомые со сферой, знали, как работает внутренняя кухня, а коллеги, как делать не стоит и почему. К тому же, перспектива Top-Down специфическая и материалов по ней практически не существует. Когда я начинал работу, никакого опыта с top-down перспективой, кроме игровой, у меня не было, что подогревало интерес.
Надеюсь, данное чтиво окажется, если и не интересным, то, по крайней мере, познавательным.
Promo-art для проекта
Проект выполнен в жанре: Top Down Stealth - Action (уникальная смесь из серий Splinter Cell и Hotline Miami).
Движок: Love2D
Арт/Дизайн/Анимации выполнены в: Adobe Photoshop ( :) )
Художественное направление: Pixel art
Проект находится в Steam, и ознакомится с ним можно по данной ссылке: Intravenous
Скриншот из ранних версий Скриншот из демо-версии
Когда со мной связался заказчик (программист - Роман Гребенков), он уже имел на руках прототип с работающими механиками вроде взаимодействия с дверьми, телами врагов, подбора предметов и прочего. Выглядело крайне многообещающе.
Я изготовил для проекта UI (редизайн/арт), эффекты, персонажей, анимации, тайлсеты, объекты, портреты, promo-art.
В общем, практически всё, что вы увидите в игре. Но в данной статье, речь пойдёт именно про анимации, т.к. они стали "камнем преткновения" всей разработки.
Немного о перспективе
Enter The Gungeon - хороший пример перспективы 3/4
Существует распространённое заблуждение, что "top-down" - это любой угол поворота камеры, в том числе несколько видов изометрии и, так называемая, перспектива 3/4.
Скетчи персонажей для освоения top-down перспективы
Связано это с тем, что у ряда перспектив, не существует какого-то объединяющего понятия/термина отличного от "вида сверху" т.е. "Top-Down".
Отсюда и возникающие недопонимания при обсуждении того или иного проекта.
"Top-Down" (топ-даун) - это перспектива, камера в которой привязана исключительно над головой персонажа.
Примеры: GTA 1/2, Darkwood, Hotline Miami
Анимации
Скетчи персонажей в пикселях
Техническое задание (оно же: Т/З) включало в себя создание довольно внушительного числа анимаций для нескольких персонажей (с рядом исключений). В следствие чего, мне было необходимо придумать способ, как упростить этот процесс на большинстве этапов разработки.
Первые потуги анимации в top-down перспективе
Список анимаций для всех персонажей включал в себя:
5 видов основного оружия (Дробовик, Обрез, MP5, UZI, AK103, M4);
5 видов второстепенного (Glock19, HS2000, P89, SW457, VP9);
5 видов уникальных приспособлений (Тазер, Переносной ЭМИ глушитель, Светошумовая граната, Осколочная граната, Пустые магазины);
Ближний бой на всех видах оружия, в том числе и рукопашный;
Idle анимации;
Анимации смерти;
Подбор и взаимодействие с предметами;
Уникальные для персонажа игрока:
Оглушение или добивание персонажей;
Лаз через 2 вида препятствий;
Помимо этого, существует 3 степени умения обращения с оружием (что увеличило список анимаций втрое!), которые мы условно назвали:
- Умелый; (персонаж игрока, профессиональные военные)
- Не умелый; (киллеры, наёмники)
- Абсолютно не умелый; (гангстеры, шпана)
Все 3 степени отличаются геймплейно:
- точностью при стрельбе;
- скоростью перезарядки;
- скоростью реакции на события;
Что отражается визуально, через:
- наличие лишних телодвижений при перезарядке;
- положение персонажа (стойку);
Обрез. Абсолютно неумелый.
Список анимаций на каждого персонажа достигал значения 200+. Т.к. каждая анимация, даже в которой было изменён исключительно спрайт пистолета был уникальным.
Для команды из 2 человек (программист и художник), объём работы был колоссальный. Это означало, что нам необходим шаблон персонажа, дабы упростить производство.
В дальнейшем, несмотря на то, что мы понимали, что существует более изощрённый способ для решения проблемы, нами был выбран крайне монотонный и исключающий большинство проблем при переносе.
В результате, это привело к тошнотворно рутинному производству и ряду медицинских проблем, в том числе: выгорание, нервный тик, нарушение сна и т.д.
Поэтому, если вы осознанно пойдёте на подобный риск, будьте готовы к последствиям.
Шаблон
Шаблон персонажа включал в себя:
- Голову;
- Тело;
- Руки;
- Оружие;
- Дополнительные слои (ладони/детали);
- Ноги/нижняя половина тела (отдельно);
Из которых покадрово собирался цикл анимации.
Экспорт
Существует 2 пути экспорта шаблонных анимаций.
Способ 1:
Все части шаблона - отделены (слоями);
Оружие легко заменяется (если позволяет анимация);
Одежда кладётся поверх слоёв в игре;
+ Упор делается на сборку составляющих внутри движка игры;
+ Гибкость, возможность осуществлять исправления, буквально, на лету;
- Требователен к инструментарию движка;
Не совсем корректный, но отличный пример: Garage: Bad Trip.
(На самом деле, она известна своей скелетной анимацией скрещенной с Pixel-art графикой, и даже существует статья на эту тему, но я её не нашёл) ("Пес-песа" - тебя помнят!)
Нашли их презентацию на эту тему!
Способ 2:
Все части шаблона склеены (монолитный слой);
Оружие заменяется исключительно в исходнике (PSD/GIF файле);
Одежда склеивается вместе с частями шаблона;
+ Упор делается на финализацию работ перед отправкой;
+ Лёгкий импорт в движок игры;
- Многократно возрастающий объём работы;
- РУТИНА;
- Не подходит проектам, в которых используется большой размер спрайтов;
Как вы уже понимаете, нами был выбран 2 вариант. Почему?
На это повлиял целый ряд причин:
Отсутствие инструментария для анимации (игра разрабатывалась на Love2D);
Необходимость разгрузки программиста от лишней работы (переизбыток задач);
Тримминг текстур (упаковка кадров анимации в spritesheets);
Малый размер спрайтов;
А теперь поподробнее.
Заказчику было необходимо добиться максимальной производительности, чтобы проект смог быть запущен на устройстве любой мощности;
Разработка инструментария для анимаций не рассматривалась вовсе, т.к. эти силы разумно было бросить на встроенный level-editor (редактор уровней) и проработку ИИ (искусственного интеллекта) врагов;
Импортирование 2D-ресурсов в Unity
В этом уроке вы научитесь импортировать 2D-ассеты в Юнити, чтобы создать спрайты как из одного изображения, так и из таблицы спрайтов (атлас спрайта), содержащей несколько ассетов, которые вы настроите в редакторе спрайтов.
1. Подготовка 2D-ресурсов изображений для импортирования в Юнити
Импортирование двумерных ассетов, известных как спрайты, в Unity относительно простой и легкий процесс.
Существует несколько шагов, которые можно предпринять, чтобы сделать импортирование, поиск и использование спрайтов в Юнити намного легче. Хотя их можно сохранять где угодно в основной папке Assets, мы рекомендуем создавать в Assets папку только для спрайтов и в ней размещать подпапки, организованные по сценам, персонажам или любой другой организационной структуре, подходящей для вашего проекта.
Называйте ассеты так, чтобы их назначение было понятным. Такое название, как Title_Screen_Background упростит распознавание, чем, например, названия файлов New Image 27 или Untitled3 . Если спрайт является частью анимации, хорошей практикой будет дать каждому кадру в этой анимации такое же имя, пронумеровав каждый так, чтобы они отображались по порядку в окне Project. Например, может быть двенадцать спрайтов с именами от Player_Barbarian_Walk_North_00 до Player_Barbarian_Walk_North_11 .
Unity может импортировать 2D-ресурсы либо в виде отдельных файлов, где каждый элемент пользовательского интерфейса или кадр анимации представляет собой отдельный файл, либо как множество ресурсов, сгруппированных в одно изображение (часто называемое Sprite Sheet — таблицей спрайтов или Sprite Atlas — атласом спрайтов).
Примечание. Атлас спрайтов — это изображение, содержащее набор непоследовательных спрайтов, в то время как таблица спрайтов — это изображение, содержащие последовательные спрайты, обычно используемые для анимации.
При работе с редактором спрайтов следует учитывать несколько важных моментов. Таблица спрайтов должна иметь размер, равный степени 2 (512 * 512, 1024 * 512, 1024 * 1024 и т.д.), чтобы избежать проблем с таблицами неправильного размера. Также для правильной работы в Unity у таблицы спрайтов должен быть параметр Sprite Mode со значением Multiple. Если установлено значение Single, вы не сможете использовать функции редактора спрайтов.
Один из способов автоматизировать присвоение имен длинным последовательностям кадров анимации — сохранять кадры вместе по порядку в таблице спрайтов, содержащей только эту анимацию.
В приведенном выше примере вы назвали бы изображение Player_Barbarian_Walk_North_ и использовали бы редактор спрайтов, описанный далее в этом рабочем процессе, чтобы автоматически нарезать и присвоить названия спрайтам.
Большинство инструментов анимации могут экспортировать таблицы спрайтов, а их тщательная организация и присвоение имен могут автоматизировать настройку спрайтов в Unity.
Другой случай, когда вы можете хранить отдельные элементы на одном листе, — это компоновка спрайтов для тайловых карт. Для получения дополнительной информации о тайловых картах смотрите урок «Введение в тайловые карты Unity».
2. Импортирование одного спрайта
При импортировании одного спрайта Юнити назовет этот спрайт именем файла изображения. Например, Hamburger.jpg станет Hamburger. Создайте или откройте 2D-проект в Unity и поместите спрайт (Рисунок 1) в окно Project, или где-нибудь внутри Assets используя проводник Windows (или Finder на Mac).
Рисунок 1: Пример спрайта, увеличен для наглядности
Нажмите на только что импортированный спрайт в окне Project, чтобы открыть инспектор для настроек импорта (Рисунок 2).
Рисунок 2: Параметры импорта по умолчанию для спрайтов. Обязательно примените изменения, которые делаете для настроек, нажав на Apply в правом нижнем углу. Если вы забудете это сделать, то Unity предложит применить изменения.
Для большинства задач важны следующие параметры:
Pixels Per Unit: Определяет сколько Unity единиц в размере спрайта. Обычно это число будет одинаковым для всех спрайтов в проекте. В большинстве случаев вы будете выбирать это число перед созданием ассетов, так как этот параметр указывает относительный масштаб спрайтов относительно друг друга, мира, и ортогональной камеры.
Для проектов, использующих изображения с высоким разрешением или не ориентированных на конкретное разрешение, соотношение сторон, или визуальный стиль (например, консольные или компьютерные ретро игры) это число в значительной степени является произвольным.
Этот параметр полезен, если вы создаете игровой мир на основе тайлов; параметр Pixels Per Unit равный размеру одной единицы мира облегчает быстрое построение миров, удерживая клавишу Ctrl (Command на Mac), чтобы двигать их на одну единицу за раз.
Еще одна особенность, которую стоит учитывать при настройке Pixels Per Unit — какая часть мира должна быть видимой на экране. Именно здесь параметр Pixels Per Unit имеет важность вместе с размером (ортогональной) камеры.
Для игры-приключения в стиле ретро можно было бы сделать спрайты 16×16, установив параметр Pixels Per Unit на 16. Размер ортогональной камеры — половина вертикального размера экрана в единица Unity. Чтобы сделать игровой миры высотой 244 пикселей на экране, разделите половину 224 (112) на 16, чтобы получить размер ортографической камеры (в данном случае 7).
Pivot: опору можно рассматривать как точку привязки спрайта. Чтобы сталактит свисал с потолка нужно установить его pivot на значение Top, а его позицию установить как у потолка. Для любого персонажа или элемента декора, который должен стоять на земле, обычно устанавливается значение Bottom. Существует 10 вариантов поворота: любое из трех горизонтальных положений (центр и края) в сочетании с любым из трех вертикальных положений или настраиваемый поворот, указанный в диапазоне 0–1 в обоих измерениях. Центр установлен по умолчанию и подходит для многих целей.
Filter Mode: Определяет визуальное качество спрайтов. Возможные настройки: Point (без фильтра), Bilinear и Trilinear. В режиме Point, вместо интерполяции между исходными пикселями, пиксели повторяются или пропускаются, чтобы спрайт выглядел больше или меньше. Bilinear — это 2D-сглаживание, которое полезно для элементов с высоким разрешением или на основе фотоизображений. Trilinear переходы между MIP-картами, которые обычно не используются для 2D-элементов.
3. Импортирование и настройка нескольких спрайтов в одно изображение при помощи Sprite Editor
Импортирование нескольких спрайтов в одно изображение не очень различается от импортирования одного спрайта. Вместо базового инспектора вы будете использовать редактор спрайтов, чтобы нарезать и именовать спрайты, и расставлять их точки опоры.
Создайте или скачайте изображение с несколькими спрайтами и импортируйте его в проект (Рисунок 3).
Настройки для параметра Type следующие:
Automatic: Редактор спрайтов определяет области, которые окружены прозрачностью, и назначает их как спрайты.
Grid By Cell Size: Сетка нарезается равномерно с указанием пользователем размера каждой ячейки. Это наиболее распространенный параметр при построении проектов на основе тайлов, или проекты, в которых большая часть или вся область спрайтов на листе одинакового размера (например, значки или другие унифицированные элементы интерфейса, или строительные блоки игрового мира).
Grid By Cell Count: Сетка нарезается равномерно с указанием пользователем количества строк и столбцов спрайтов. Можно использовать этот параметр вместо Grid By Cell Size, если таблица спрайтов была сгенерирована программой, в которой вы уже определили количество строк и столбцов.
Cell Size: определяется либо Pixel Size, либо количеством Column и Row, в зависимости от того, какой неавтоматический параметр вы выбираете.
Offset: позволяет вам отметить начальный (слева сверху) угол в таблице спрайтов, и бывает полезным в ситуациях, когда спрайты разделены сеткой.
Padding: позволяет указать буфер между спрайтами, опять же, полезно для спрайтов, разделенных сеткой.
Keep Empty Rects: определяет спрайт даже если в нем нет изображения в автоматически сгенерированной области, при нарезке по размеру ячейки или количеству.
Pivot: определяет опорную точку спрайта. Например, спрайт с параметром Pivot, у которого установлено значение Center (по умолчанию), будет центрировано вокруг исходной точки, если для его позиции устанавливаются значения 0, 0, 0.
- Установите свои настройки и нажмите на Slice.
- По умолчанию все имена спрайтов — это комбинации исходного файла изображения и позиции спрайта в последовательности спрайтов (подразумевается порядок чтения слева-направо, сверху-вниз), начиная с 0.
- Нажмите на спрайт, чтобы выделить его. Теперь вы можете переименовать его, отрегулировать его позицию и размер, и добавить границы (для 9-нарезки). чтобы узнать больше о том, что такое 9-нарезка, посмотрите Использование 9-Нарезки для масштабируемых спрайтов.
- Чтобы создать новый спрайт без использования инструмента нарезки (или после того, как вы его использовали), нажмите где-нибудь на изображении (начиная снаружи любых существующих спрайтов, иначе вы закончите выделение и передвинете спрайт) и перетащите, чтобы создать спрайт.
- После выбора вы также можете удалить назначенный спрайт. Обратите внимание, что это не удаляет выбранную часть изображения. Вы также можете перетащить края спрайта, чтобы изменить его размер. Зажмите Ctrl/Command при перетаскивании, чтобы отрегулировать границы спрайта. В данном примере изображения мы удалили спрайты из центральной и нижней части столбца. Затем мы перетащили нижний край верхнего спрайта вниз к нижней части таблицы спрайтов, чтобы сделать весь столбец одним большим спрайтом (Рисунок 8). Рисунок 8: Присвоение спрайтам значимых имен упрощает их поиск в дальнейшем.
- Когда закончите, нажмите Apply и закройте окно редактора спрайтов (Рисунок 9).
Вот все, что касается импортирования 2D-ассетов в Unity. Выбранные вами настройки будут во многом зависеть от вашего проекта, и с опытом вы найдете то, что лучше всего вам подходит.
Если вам понравился урок, то вы можете добавить его в закладки социальных сетей (значки снизу), чтобы сохранить новые знания.
Creating game art or assets is a pivotal part of the game development process. The art direction of the game directly influences the player’s sense of power, immersion in the game world, and emotions. Great game art will pull new players in while bad game art will stop players from giving your game a chance. Producing game art, however, takes a lot of time. That is where having a solid workflow can help speed up the process. For instance, using Unity’s 2D PSD Importer to import photoshop files will allow you to quickly move from creation to implementation.
Unity’s 2D PSD importer is easily overlooked because it is offered as a package. To use the 2D PSD Importer, you must download and install the PSD Importer package, set up your game art in layers, save the file as a PSD or PSB file, and then import the asset into Unity. In this Tips and Tricks: Unity PSD Importer we are going to show you how to take your game art from Photoshop directly into Unity with as few steps as possible.
Creating Game Art in Photoshop
The first thing you are going to need is game art. Unfortunately, we cannot show you how to make game art that fits your game. We do have a few tips to help you along the way. The first is to pick a consistent size for your artwork. You do not want to be creating furniture that fills a 3840 pixel by 2160 pixel canvas and then create a character sprite that is 256 pixels by 1024 pixels. This will result in a lot of extra work resizing everything or recreating blurry assets. Unity has a great article on selecting the perfect resolution for 2D assets.
Second, art is an iterative process. Do not expect to have the game’s style nailed down the first go round. Expect to come back to your art several times throughout the development process. If you find yourself getting stuck or frustrated with your art, put it down and pick up some other aspect of your game to work on.
Third, and goes along with the second tip, do not put off creating game art because it is not your strongest skill. If you are not an experienced game artist, you will need time to develop those skills and your game’s art style. Deciding to create art after you work through all the programming aspects of your game, using placeholders or not, will result in you hitting a wall and can lead to an unfinished project. Give yourself time to iterate. Create something small even if it is an initial sketch or outline of a character, then come back after working through other aspects of your game. Rinse and repeat and eventually the small improvements will build towards better art assets.
How to Create a Sprite Sheet Layout in Photoshop
Once you have your art in Photoshop you have a few layout options available to you. If you have several 2D art assets in one file, you will want to lay them out in a grid. Space everything evenly so that you can separate them inside of Unity later. Feel free to create a new canvas that can hold all of your assets if you have them in separate files or do not have enough room to spread them out. This is often referred to as a sprite sheet. The benefit of using a sprite sheet over individual png or jpeg files is that it is more performant and can cut down on your game’s file size. File size is even more important when creating games for mobile devices.
Additionally, if you have your assets saved in layers like our character below, you do not need to do anything. Unity can handle the layers as separate files when importing the PSD file. Make sure all of you Photoshop layers are labeled so they are easier to identify later on.
Save your photoshop File for Unity
For file types you have a few options. If you have a simple art asset, say a crate, and that is all you want to import, it may be easier to export as a png. Sprite sheets, as described above, can be saved as a PSD or PSB file before being imported. The difference between a PSD and PSB file is that the PSB file carries over more data about the artwork you have designed. The extra data a PSB file carries includes the layers and layer depth information from the art we have created. Art like our example character needs to be saved as a PSB to manipulate the different layers or add things like bones later.
Import Unity’s 2D PSD Importer Package
In order for Unity to process your PSD or PSB files you will need to install the 2D PSD Importer package. To do this go to the menu bar inside of Unity and select Window > Package Manager. In the top left, set Packages to Unity Registry. Scroll down or use the search bar to locate 2D PSD Importer. Click install in the bottom right to install the package.
Import Photoshop File into Unity
Inside of the project view in Unity, create a folder to hold your assets. Remember, it is way easier to set up an organized project structure now than it is to sort assets later. Do not waste time searching through random files to find what you need. Import your Photoshop art asset into Unity by right clicking in the folder you want to save your asset to and selecting Import New Asset… Select the PSD or PSB file you exported earlier and click ok.
Unity 2D PSD Importer Settings
Now that our file is in the project view, we can select the sprite and edit the properties in the inspector. If you have a sprite sheet or a layered PSB file you will want to change the sprite mode to Multiple. For our PSB file, we can see an arrow next to the asset. Click the arrow to see all of the sprites that make up the asset. Unity has automatically created a prefab out of the photoshop file. If you drag it into the scene now it should appear exactly as you had it saved in Photoshop. The new hierarchy of Game Objects representing the layers from Photoshop. This is great for layered sprites, like the character we showed earlier, since we can quickly add it to the game without having to line up our layers again.
Editing Photoshop Sprites in Unity Using Sprite Editor
Occasionally, you may have issues with the way Unity has separated your sprites in your sprite sheet. You can edit the way Unity has segmented these by selecting the Sprite Editor button from the inspector with the asset selected. Resize the rectangle bounds to slice the sprites into different segments. Move the circle in the center to change the pivot point of the sprite.
Adding Bones to Photoshop Sprites Using Unity’s Skinning Editor
Additionally, you can add bones to your sprites by using the Skinning Editor. To locate the skinning editor, select your art asset in the project view. Then select the sprite editor button in the inspector. The upper left corner has a drop down containing several editors. Open the drop down and select the skinning editor. Now, you can edit or create bones for the different parts that make up the sprite.
And now you are ready to use Unity’s PSD Importer to import PSD and PSB files from Photoshop to use in your games created with Unity. Thank you for stopping by. Stick around and check out more of our tutorials or posts like our piece on how to pass parameters with ScriptableObject Events. Also, leave a comment telling us what you liked or did not like about the tutorial. Was it easy to follow along? What do you want to learn next? As always check out some of our published apps below.
Читайте также: