Как сделать спрайты в фотошопе
Как создать эффекты огня, взрыва, ледяных шипов и летящих пил.
Создание визуальных эффектов — это тонкая работа: разработчик должен сделать их правдоподобными, понятными и впечатляющими.
DTF поговорил с ведущим художником по 3D и эффектам из студии Highcore Games Владимиром Тихановым и выяснил, какие принципы должны лежать в основе визуальных эффектов.
Художник подробно описал процесс создания нескольких анимаций для Tanks A Lot! — он рассказал про огнемёт, огненную стену, ледяные шипы, взрыв и циркулярные пилы. Если вы хотите воссоздать эти эффекты в Unity, то можете использовать этот текст в качестве туториала.
Визуальные эффекты, про которые пойдёт речь в этом текстеВсе эффекты в игре должны соответствовать нескольким ключевым правилам.
С визуальной точки зрения эффекты не должны быть слишком сложными — следите за тем, чтобы их форма и цвет были лаконичными. Также учитывайте, что они должны легко читаться на экране любого мобильного устройства. Постарайтесь избавиться от любого визуального шума — сразу выделите в эффекте главное и делайте упор на этом.
Избегайте слишком резких переходов, появлений и исчезновений. Используйте 12 принципов анимации, особенно «смягчение начала и завершения движения» (slow in & slow out), «расчёт времени» (Timing), «преувеличение и утрирование» (Exaggeration). Это хорошо сказывается на динамике эффекта, делает его более выразительным и убедительным.
Силуэты спрайтов должны быть максимально простыми. Это нужно, чтобы общая композиция выглядела стилизованно, а форма легко читалась даже на небольшом экране. Один и тот же спрайт можно многократно использовать в разных эффектах, поэтому его цвет лучше настраивать в Particle System. Также постарайтесь не использовать более двух цветов.
В дизайне эффектов отдавайте предпочтение крупным и средним формам — мелкие можно использовать в качестве акцентов. Например, эффект выстрела может состоять из крупной формы вспышки со свечением, двух-трёх клубов дыма среднего размера и пяти-шести маленьких искр.
Когда вы вносите правки в эффект, ориентируйтесь на динамику самой игры и на объекты, с которыми он связан. Также следите, как он выглядит через игровую камеру.
Теперь затронем техническую сторону. В Highcore Games все эффекты создаются при помощи Particle System в Unity — стандартных средств почти всегда достаточно. Кастомные шейдеры используйте с осторожностью — только если это действительно нужно для решения задачи. Код в таких ситуациях лучше писать собственноручно, чтобы отсечь всё лишнее.
Инструменты для создания шейдеров хорошо подходят для прототипирования. Но полученный результат может привести к проблемам на разных устройствах и падению fps в игре. Поэтому применять такие шейдеры стоит только после оптимизации и существенной переработки.
Обычно в Highcore Games используют три шейдера для эффектов: Mobile Additive, Mobile Alpha Blended и Unlit Shader для мешей с текстурой.
Чем больше материалов используется, тем больше draw-calls и тем меньше fps в игре. Поэтому постарайтесь ограничиться тремя материалами для каждого типа шейдеров. Все спрайты и текстуры для эффектов храните в отдельном атласе. Чтобы выбрать нужный спрайт, используйте блок Texture Sheet Animation как показано в примере ниже.
Также художники из Highcore Games стараются не делать слишком много систем частиц. Их количество сильно зависит от конкретного эффекта: если это выстрел или попадание, то достаточно двух-трёх, если это летящий проджектайл, то можно применить от двух до четырёх, а взрыв может состоять из четырёх-пяти. Каждая система занимает определённое количество оперативной памяти устройства. Это касается даже тех систем, в которых ничего не происходит.
Когда эффект готов, разработчики выделяют в нём критически важные системы, а остальное отключают для low-end устройств — для этого есть специальный скрипт.
У огнемёта есть две ключевые атаки, для каждой из которых нужен отдельный эффект:
- обычная атака — струя пламени из ствола орудия;
- дополнительная атака — стена огня, которая наносит урон по области.
Первый шаг при создании эффекта — собрать и исследовать референсы, чтобы понять, как он должен выглядеть. Вы можете искать референсы, например, на Pinterest (вот пример поиска для огнемёта).
Затем нарисуйте скетч. Набросок должен быть простым и грубым, но при этом передавать суть задумки. Это черновой вариант, поэтому используйте только упрощённые формы для изображения объектов. И не тратьте слишком много времени на проработку наброска. Постарайтесь сделать так, чтобы на эту задачу у вас уходило не более 20 минут.
Следующий важный шаг — рисование частиц (спрайтов), из которых будет состоять эффект. Проще всего нарисовать их в Photoshop. Для эффекта огнемёта понадобится три вида частиц. Первые нужны для создания следа дыма. В реальности дым состоит из частиц, появившихся в результате горения, и пара, поэтому его поведение и физическая природа очень похожи на газообразное вещество.
Чтобы дым в игре был правдоподобным, разработчики использовали только закруглённые формы без углов и резких переходов. В результате частицы дыма похожи на неровный четырёхлистник.
Если вы не знаете, как должны выглядеть подобные частицы, можно поискать вдохновение на сайте Adobe Stock (вот пример поиска).
Второй тип частиц — огонь. В реальности он ассоциируется с остроконечными всполохами. Однако в этом случае эффект выглядит лучше, если все частицы имеют похожую форму — это позволяет добиться единства и цельности всех элементов композиции.
Чтобы сделать их больше похожими на огонь, художники подобрали подходящие цвета и разукрасили спрайты. Также они добавили небольшой жёлтый блик внутри частицы, чтобы создать эффект огненных всполохов.
Третий тип частиц нужен для создания ореола свечения, который характерен для огня. Спрайт — обычный круговой градиент белого, который становится прозрачным по краям. По словам Тиханова, при правильном масштабе и аддитивном шейдере это выглядит не хуже эффектов пост-процессинга, которые слишком ресурсозатратны для мобильных устройств.
Когда спрайты нарисованы, разработчики собирают их в атлас, который используется в Unity. В своей работе стоит использовать атласинг текстур для эффектов, потому что у такого подхода есть несколько больших преимуществ:
- оптимизация — вместо множества текстур у вас остаётся одна для всех эффектов, кроме тех, для которых используется покадровая анимация. Это существенно сокращает размер билда;
- это позволяет удобно редактировать текстуры и следить за тем, чтобы они соответствовали стилю проекта;
- можно использовать ограниченное число материалов, что важно для поддержания высокой производительности рендеринга.
Атласы удобно собирать в Substance Designer: там можно легко определить размер атласа и количество ячеек для будущих спрайтов. Всё зависит от проекта, но обычно хватает 2048 пикселей и 12х12 ячеек: в такой атлас можно поместить 144 текстуры — этого должно хватить для мобильного проекта. Также для Substance Designer есть бесплатный плагин, который позволяет легко управлять атласом.
В заключительной части руководства по пиксельной графике я объединю ранее созданные спрайты в единый холст, который содержит несколько фрагментов спрайтов:
1. Нужно определить размер каждого спрайта. Каждое из изображений зелий имеет размер 10 на 16 пикселей:
2. Вычислить размер всего спрайт-листа, исходя из размера отдельного изображения и их количества. У меня есть пять различных спрайтов зелий, 10 на 16 пикселей каждый, так что мой холст будет иметь 16 пикселей в высоту и 50 пикселей в ширину. Таким образом, все спрайты будут выстраиваться в ряд по горизонтали:
3. Перейдите в Файл> Поместить встроенные , чтобы вставить все спрайты игры с пиксельной графикой на холст:
4. Расположите все спрайты рядом. Убедитесь, что включены « Привязка » и « Быстрые направляющие », это поможет выровнять изображения:
5. Теперь спрайт-лист готов к сохранению в формате PNG :
Но этот метод имеет ряд ограничений и отнимает много времени, особенно если вы работаете с большим количеством игровых элементов. Наилучшим решением было бы использовать другую программу для пиксельной графики. В интернете доступно несколько бесплатных генераторов спрайт-листов, которые могут сделать этот процесс намного проще.
Например, Stitches позволяет загрузить отдельные изображения, а затем скачать спрайт-лист, включающий их все, а также CSS и HTML- код . Этот инструмент немного ограничен, когда нужно разместить каждый спрайт отдельно. Но если вы размещаете изображения просто в ряд, его возможностей вполне должно хватить.
Вот скачанный со Stitches PNG-файл :
Теперь вы можете сослаться в коде игры на один спрайт-лист и получить доступ ко всем изображениям этого листа. Спрайт-листы могут содержать любую часть игровой графики, которая вам нужна, в том числе анимированные циклы ( кадры, которые проигрываются последовательно, создавая анимацию, которая через цикл плавно переходит от последнего кадра к первому ).
Используя те же установки, которые мы задали при создании основного графического персонажа (в первой части) и те же приемы, я собираюсь создать монстра крысу.
1. Мы начинаем с холста размером 50 на 50 пикселей. При включенной сетке я добавлю нейтральный цвет заливки:
2. Я начну с базового коричневого цвета и создам тело крысы-врага из игры с пиксельной графикой. Не забывайте использовать инструмент « Карандаш » вместо инструмента « Кисть »:
3. Как я создала тело крысы:
4. Я решила, что просто серая крыса будет недостаточно похожа на монстра, поэтому после того, как я создала сведенную копию всех слоев, я добавила корректирующий слой ( Слой> Новый корректирующий слой> Цветовой тон / Насыщенность ), чтобы изменить общую цветовую гамму на зеленую:
5. Далее я хочу добавить свет и тени, как я делала для главного героя игры с пиксельной графикой. Я создала несколько новых слоев, и, используя режимы наложения « Мягкий свет » и « Перекрытие », добавила глубину. Я также вернула назад красные глаза:
6. Теперь все готово, обрежьте изображение и сохраните файл в формате PNG :
Если вы хотите сохранить изображение большее, чем 50 на 50 пикселей, просто измените значение параметра « Ресамплинг (Размера изображения) » на « По соседним пикселям »:
Создаем оружие
1. Создайте новый холст, как мы делали раньше. Или просто удалите все слои из предыдущего проекта ( кроме цвета заливки ) и сохраните его под новым именем.
Подсказка: Я советую создавать новый слой для каждого дополнительного элемента, на тот случай, если вы захотите изменить что-нибудь позже:
3. Я хочу, чтобы лезвие выглядело металлическим, так что добавлю более светлый желтый цвет для одной стороны. Чтобы получить соответствующий оттенок, я использовала инструмент « Пипетка » и подобрала с его помощью цвет, а затем увеличила его насыщенность в панели выбора цвета программы для пиксельной графики:
4. В качестве последнего штриха добавим украшения в рукоятку меча для героя игры с пиксельной графикой ( рубины ). Я выбираю глубокий красный для основного цвета и более легкую версию этого цвета для бликов:
5. Теперь я добавлю больше глубины с помощью слоев света и тени. Я создала новый слой с режимом смешивания « Мягкий свет » и зарисовала его черным цветом. Однако этот режим не работает для желтых цветов лезвия, потому что они цвета очень светлые.
Но я все равно хочу добавить небольшие тени для лезвия, поэтому я вручную выбрала более темный цвет ( как я сделала для блеска лезвия ):
6. Чтобы закончить, обрежьте изображение и сохраните его в формате PNG :
Создание бутылочек с зельями
2. Горлышко бутылки будет иметь 4 пикселя в ширину.
3. Пробка будет коричневого цвета. Это 2 пикселя выше верхней части горлышка.
6. Добавьте немного теней и все готово:
Хотите создать разные зелья? Добавьте новый слой « Цветовой тон / Насыщенность » и измените цветовую гамму, как мы делали с зеленой крысой. Чтобы пробка оставалась того же цвета, я добавила этот слой снова поверх слоя « Цветовой тон / Насыщенность ».
Вот мои разные расцветки. Теперь у меня есть:
Используйте палитру цветов для ручного подбора вариантов базового цвета для конкретной детали. В качестве дополнительного шага используйте дополнительные слои с альтернативными режимами наложения и / или непрозрачностью, чтобы добавить свет и тень поверх сведенной копии всех слоев. В конце подрежьте холст до минимального размера и сохраните его в формате PNG .
В заключительной части этого руководства я займусь объединением отдельных игровых элементов в листы спрайтов.
В этом динамичном туториале я покажу вам основные приёмы создания пиксельарта. Спрайты - это картинки в 2D играх, которые представляют собой различные объекты: игрового персонажа, монстров, предметы и т.д.
Пиксельарт, также известный как дот-арт в Японии, это вид цифрового искусства, где рисование происходит на пиксельном уровне. В основном он ассоциируется с графикой игр 80-90 годов, в которых художники преодолевали технические ограничения (небольшое количество памяти и маленькое разрешение), создавая все более захватывающие картины.
В наши дни пиксель арт все еще актуален и используется в играх, несмотря на возможность создания реалистичной 3D графики. Почему? - cпросите вы. Если не брать во внимание ностальгию, то создавать хорошие рисунки с такими жесткими ограничениями все также интересно и достаточно сложно. Также, как мы восхищаемся тем, что художник, сделав пару мазков, может показать объем и вызвать у нас какие-то эмоции, мы любуемся несколькими соединёнными пикселями, выполняющими ту же работу.
Порог вхождения в пиксельарт довольно низкий, по сравнению с традиционным рисунком и 3D графикой, позволяя инди разработчикам воплощать свои идеи в жизнь. Но это никоим образом не означает, что закончить игру с ним будет легко. Я видел много пиксельарт проектов на кикстартере, которые думали, что управятся с игрой за год, когда в реальности нужно было около шести лет. Пиксельарт на том уровне, который хотят видеть люди требует достаточно много времени и усилий, есть лишь пару путей, позволяющих ускорить этот процесс.
Работая с 3D моделью ты, по крайней мере, можешь крутить ее, деформировать, перемещать её конечности, копировать анимацию с одной модели на другую и т.д, чего не скажешь о пиксельарте. Профессиональный пиксельарт почти всегда подразумевает под собой большое количество кропотливого размещения пикселей на каждом кадре анимации.
Как говорится “Кто предупрежден, тот вооружен!”, а теперь о моем стиле: по большей мере я использую пиксельарт для своих игр, они же и воодушевляют меня продолжать заниматься этим. Если быть точным, то я фанат Famicon(NES), 16 битных консолей и аркадных автоматов 90ых годов.
Мои любимые игры этой эры имели пиксельарт, который нельзя описать иначе как насыщенный, дерзкий и чёткий. но не настолько, чтобы быть чопорным или минималистичным. Это стиль, который я взял за основу своего, но вы можете легко использовать техники, применяемые в этом туториале для чего-то совсем другого. Смотрите на художников, которые вам нравятся и делайте пиксельарт, какой вашей душе угодно!
Самыми базовыми инструментами для занятия пиксельартом являются лупа и карандаш. Также будут полезными линия, фигуры, выделение и заливка цветом. Есть большое количество как платных, так и бесплатных программ, в которых имеются данные инструменты. Я расскажу о самых популярных из них (включая те, которые использую сам).
Если у вас Windows, вы можете использовать Paint, несмотря на скудность программы, в ней имеются все нужные инструменты, чтобы заниматься пиксельартом.
На удивление неплохой редактор, которым вы можете пользоваться прямо через ваш браузер. Может производить экспорт как в png и gif, так и сохранять спрайты в браузере. Неплохой способ начать заниматься пиксельартом.
GraphicsGale - это первый редактор, о котором я узнал, разработанный и предназначенный именно для пиксельарта и его анимации. Созданный компанией HUMANBALANCE, он стал бесплатным в 2017 году и до сих пор широко используется несмотря на рост популярности Aseprite. К сожалению, доступен только обладателям Windows.
Самый популярный редактор на данный момент. Содержит большое количество полезных функций и инструментов, постоянно обновляется, доступен как на Windows и Mac, так и на Linux. К тому же вы можете пользоваться программой бесплатно, скомпилировав её исходный код. Если вы серьёзно хотите заниматься пиксельартом и ещё не выбрали себе редактор, то Aseprite будет неплохим вариантом.
GameMaker Studio 2 - это отличный движок для создания 2D игр, который также содержит достойный редактор спрайтов. Если вы собираетесь делать игры с пиксельартом, то это лучший выбор для обоих. В данный момент (2019 год) я использую его для создания UFO 50, коллекции из 50 ретро игр. В основном я использую местный редактор для создания спрайтов, а тайлсеты делаю в Photoshop.
Так как Photoshop требует ежемесячную плату и не приспособлен для пиксельарта, я не рекомендую его, если только вы уже не используете его. Несмотря на выше сказанное, его вполне можно использовать для статических спрайтов, но он достаточно громоздкий по сравнению с GraphicsGale или Aseprite.
Я настоятельно рекомендую пользоваться графическим планшетом для любого вида иллюстраций, чтобы предотвратить заболевания повторяющейся длительной нагрузки на запястье (туннельный синдром). Такие заболевания намного легче предотвратить, чем вылечить. Когда появляется боль, вы уже обречены ( мои дни рисования мышкой, сделали невозможным играть в игры с быстрым нажатием кнопок). Так, что позаботьтесь о себе пока не поздно – это того стоит! В данный момент я использую маленький Wacom Intuous Pro.
Если у вас нет возможности купить планшет, по крайней мере, возьмите лучезапястный бандаж. Я использую от компании Mueller Green Fitted Wrist Brace. У других брендов бандажи были либо слишком неудобными, либо недостаточно эффективными.
Давайте приступим к делу! Мы начнем со спрайта персонажа размером 96x96 пикселей. Я решил нарисовать орка, но вы вправе выбрать что-то другое. Конечный вариант орка находится на скриншоте Final Fight, который вы можете увидеть выше, для того, чтобы вы понимали масштаб спрайта– он большой для большинства ретро игр (оригинальный скриншот имеет размер 384x224 пикселя).
Причина по которой мы начинаем с такого большого спрайта заключается в том, что мне будет легче показать техники пиксельарта именно на нем. К тому же, создание больших спрайтов очень похоже на обычное рисование, которое может быть вам знакомо. После того, как мы изучим базовые техники можно будет уменьшить размер спрайта.
Пиксельарт характеризуется своими ограничениями. Каждый пиксель имеет большое значение, по сравнению с другими видами иллюстраций, также как и цвета, количество которых должно быть ограничено.
Так, что да, выбор палитры цветов очень важен и помогает обозначить ваш стиль. Но для начинающих пиксельарт художников лучшим вариантом будет отложить теорию насчёт цветов в сторону и просто выбрать одну из существующих палитр ( или несколько рандомных цветов), чтобы начать рисовать. Одно из преимуществ пиксельарта заключается в том, что вы в любой момент можете поменять палитру цветов.
Именно для этого туториала я буду использовать палитру из 32 цветов, созданную специально для UFO 50. Палитры из 32 и 16 цветов используются достаточно часто. Данная палитра была создана для выдуманной консоли, которая бы находилась где-то между Famicon и PC Engine. Можете спокойно взять эту палитру и двигаться дальше (или нет! Это не столь важно).
Мы начнем рисовать наш спрайт с наброска карандашом, также как если бы мы рисовали на бумаге. Опираясь на свой опыт, могу сказать, что неплохие пиксельарт художники достаточно хороши в обычном рисовании и наоборот. Так что никогда не помешает улучшить свои навыки рисования.
Дальше мы должны убрать лишние пиксели и сделать все линии толщиной в один пиксель. Но какие пиксели являются лишними? – для того, чтобы ответить на данный вопрос, нам нужно познакомиться с таким понятием как зазубрины.
Нам нужно научиться делать два вида линий: прямые и закруглённые. На бумаге все будет зависеть от контроля мышц, но мы работаем с маленькими цветными блоками, что создает свои трудности.
Для того, чтобы делать хорошие линии, нужно свести к минимуму количество зазубрин: маленьких пикселей или группы пикселей, которые нарушают последовательность линии. Так как в пиксельарте каждый пиксель имеет большое значение, пару зазубрин могут испортить весь спрайт. Представьте, что вы рисуете линию на кусочке бумаги и кто-то внезапно стукает по столу, получившаяся у вас загогулина является тем же, что и зазубрины в пиксельарте.
Читайте также: