бандл дизайн персонажа в 2d
Персонаж за 4 часа: создать 2D-героя, не забыв про анимацию
Как совместить большие планы и сжатые сроки.
Поговорим о персонажах — именно с их конкретными образами мы связываем многие проекты, будь то Tomb Raider, The Witcher или Pac-Man.
Даже с ограничениями во времени и ресурсах можно создать героев, которые полюбятся игрокам. Если у вас есть хорошая механика, не стоит бояться проблем с артом — исходите из реальных возможностей и помните, что даже самая простая стилизованная графика может выглядеть классно.
Ваши главные инструменты — это стилизация и обобщение, они помогут сделать персонажей узнаваемыми. Возьмём «Симпсонов» — их герои выполнены в одном обобщённом стиле — не таком натуралистичном, как на картинах художников Возрождения.
Тут главное — узнаваемый считываемый образ и чёткое следование канону.
В быстром цикле разработки, например, при создании инди-платформера нужно думать не только о внешнем виде персонажей, но и об удобстве для масштабирования.
Хорошо, когда персонажи легко тиражируются — в этом поможет минимальное количество деталей и читаемый силуэт. Чем сложнее персонаж, тем трудозатратнее производство графики и анимации.
Bowmasters — мобильная контентная игра в стиле GaaS. Для таких проектов, с учётом быстрого цикла разработки, необходимо выпускать новый контент и поддерживать интерес игроков. Для них новый контент становится одним из уникальных USP, а разработчикам нужно делать ставку на оптимизацию скорости выпуска персонажей.
Но не только скорость разработки повлияла на внешний вид наших персонажей и стилистику в целом. Отсылки к мемам, популярным образам и любимым героям играют важную роль. Есть небольшой лайфхак: сделали игру — добавьте туда котика.
Самые доступные инструменты, которые помогут понять востребованность образов, — это Google Trends и Yandex Wordstat. С ними можно не только определить, какой из героев больше на слуху, но и оценить динамику тренда — вовремя заметить, что один из вариантов уже пошёл вниз и начинает забываться.
К разработке графики стоит переходить, когда природное чутьё, понимание трендов, художественный вкус и знание рынка привели к взвешенному образу персонажа.
Обычно пайплайн разработки 2D-контента для мобильных раннеров, платформеров или экшенов не сильно отличается от студии к студии. Коротко расскажу о нашем:
Геймдизайнер создает документ с подробным визуальным описанием персонажа, а также необходимыми анимациями, суперспособностями, и даже репликами — это очень важно, чтобы получить релевантный образ. Туда же прикладываются референсы, и задача отправляется художнику.
Создаются первые черновые скетчи — 3-6 максимально разных идей в рамках одной концепции. Скетчи обычно делаются в ч/б линиях или «от пятна», чтобы определиться с примерным силуэтом, образом и ключевыми деталями.
Выбирается общий образ, после чего уточняются формы и детали, предлагаются различные решения для нюансов. Проработанные скетчи через фидбек и уточнения приобретают необходимый внешний вид.
После согласования монохромного скетча подбирается цветовая схема персонажа, после выбора которой вносятся последние правки — получается финальный скетч.
Разработка финального арта происходит в Photoshop. Все важные детали создаются в отдельных слоях с соблюдением иерархии наложения объектов друг на друга, как для привычной перекладной анимации, которая позволяет не рисовать каждый кадр отдельно. То есть ноги — это нижние слои, затем части туловища, элементы лица, одежда. Верхние слои — это рука, которая ближе к игроку, так как при анимации она может перекрывать корпус.
Все слои именуются в соответствии с содержанием и на английском языке — это облегчает экспорт и поиск какого-либо определённого элемента персонажа.
Финальный персонаж также проходит этап согласования перед тем, как задачу на арт можно считать завершённой.
Важный момент: для персонажей очень важна «читаемость» — они не должны сливаться с фоном, потому герои всегда проверяются не в вакууме или на дефолтной подложке, а на реальных игровых бэкграундах. И так как мы разрабатываем мобильные игры, то тестируем сразу на устройствах, а не на мониторах, чтобы понимать, как это видит игрок.
Это же работает и на сложных проектах — персонажи должны выглядеть в окружении гармонично. Нельзя жертвовать считываемостью в угоду дизайну отдельных элементов.
По опыту могу сказать, что такой итеративный процесс разработки и апрува скетчей помогает избежать дорогостоящих правок или замены финальной графики.
А для удержания стилистического единства персонажей мы пользуемся простыми правилами:
Отдельно стоит прописать то, чего делать не стоит, и к каким последствиям это может привести. Например, не менять пропорции без согласования, так как может не подойти анимация. Такой документ тоже поможет сэкономить время на правках, быстро обучать и онбордить новых членов команды.
Когда сделали одного такого персонажа по всем правилам, то сделать пачку следующих по образу и подобию уже будет проще.
Если проект не ограничивается одним персонажем и парой спрайтов для фона, то следует также организовать систему хранения файлов и каталогов. Это отдельная тема, но могу точно сказать, что хорошая структура хранения и понятный нейминг — ключ к сохранению порядка на проекте и экономии времени.
Такой подход облегчит поиск и доступ к необходимым файлам как самими 2D-художниками, так и аниматорам и программистам.
Когда арт готов, можно переходить к созданию анимации. Для персонажей Bowmasters мы используем костную анимацию в Spine.
Для стандартных героев по умолчанию есть три типа скелета (для толстяка, накачанного и обычного телосложения) и набор универсальных движений и поз — это позволяет в разы сокращать трудозатраты при сохранении стандарта качества графики. То есть все наши персонажи заранее адаптированы под «пересадку» стандартных анимаций, что минимизирует время на риг. Десять минут — и новый герой может прыгать, падать, грозно размахивать руками или трястись от испуга.
А вот уникальные, сочные анимации припасены для фаталити — мы проводили опросы игроков и ничто их так не радует, как сокрушительная победа над соперником. Таким образом игрок не пресыщен перманентным визуальным безумием.
Когда стиль выработан и понятен, можно позволить себе некоторые отступления от правил. Если это сделает вашего героя действительно особенным и ценным для игрока, то вы вправе отойти от канона, не нарушив стилистической гармонии образа. Мы тоже так делаем.
Например, один из наших любимых персонажей — Акула. Может показаться, что она отличается по форме от гуманоидных персонажей, но если разобраться, в её основе все тот же классический набор основных спрайтов — под неё легко адаптировать стандартный персонажный риг.
Мы немного «нарушили» правило только по части визуального стиля, а на трудозатратах со стороны аниматоров и кодеров это никак не отразилось. Отбросив условности, можно сказать, что внутри акула — тоже человек!
Бывает так, что есть и далеко идущие цели, и готовые пайплайны с инструкциями, но присутствует стойкое ощущение, что порядка на проекте всё ещё не хватает. Возможно, просадка именно в планировании — нет понимания, сколько, чего и какими силами можно добавить в игру в следующем апдейте. И это очень важный момент, о котором забывают многие начинающие разработчики игр.
Если знать, сколько времени было затрачено в среднем на типовые образцы графики, можно выделить общие сроки для каждого вида контента, будь то персонаж или какая-нибудь стандартная интерфейсная кнопка.
Но даже в рамках одного типа, арт может разниться по степени трудоёмкости — это следует учитывать при планировании, условно разделив внутри типов графику на простую, обычную и сложную в исполнении.
После этого можно прогнозировать реальные сроки путём простых вычислений.
Для условного примера рассмотрим графику для простого персонажа гиперказуальной игры с минимальной детализацией, для которого уже утверждены технические требования и порядок разработки:
Аналогичным образом прогнозируем трудозатраты на производство прочей необходимой графики и делим получившиеся результаты на количество художников команды, которым предстоит заниматься разработкой.
Мы попробовали разобрать процесс разработки персонажа для гиперказуальных проектов, но при этом есть много нюансов у воркфлоу разных жанров. Для быстрого старта можно взять готовый, это особенно полезно на этапе проработки прототипов.
Оптимизируйте, планируйте и помните, что незаурядные персонажи и весёлая анимация могут вдохнуть жизнь в игру с самой простой графикой.
Бандл дизайн персонажа в 2d
Мечтаешь стать 3D-моделлером, но не знаешь, с чёго начать? Начни с обучения по хорошей скидке!
— Скидки на обучение до 20% Показать полностью.
— Персональный фидбэк по твоему портфолио от менеджеров и индивидуальный подбор курсов
— Участие в розыгрыше большого LEGO набора «Средневековая кузница»
— Возможность еще больше увеличить скидку по персональному промокоду!
Места на обучение по скидке ограничены! Успей записаться тут: vk.cc/c7PoHJ
Дорогие друзья! Время ответа в личных сообщениях немного увеличено.
Мы стараемся оперативно отвечать всем, но заявок по Чёрной пятнице становится больше. Пожалуйста, если вдруг вам не отвечают больше 3 дней, напишите нам ещё раз и продублируйте свой вопрос.
Если диалог с вами уже ведётся, и ему менее 3 дней, то повторно писать не нужно.
Спасибо за ожидание — и до встречи на обучении!
Хочешь сделать карьеру CG-художника? Лови скидки и учись вместе с нами!
В рамках Чёрной пятницы мы предлагаем базовые курсы «Основы CG-рисунка», «Скетчинг и форма» и «Рисование материалов» — всё, что нужно для мощного старта в геймдеве!
Подробности акции — тут: vk.cc/c7PlBp
Напиши кодовую фразу «ХОЧУ РИСОВАТЬ» в сообщения сообщества и получи персональный промокод на дополнительную скидку: vk.cc/akE3KN
Раз в году — скидки до 20% на все курсы Smirnov School!
Черная Пятница — это возможность составить индивидуальную программу обучения и запастись курсами на несколько месяцев вперед.
— Научись рисовать быстрее и выразительнее; Показать полностью.
— Закрой пробелы в базе и прокачай навыки;
— Пополни портфолио качественными работами;
— Начни получать заказы и рабочие предложения.
Создаем 2D платформер при помощи Unreal Engine 4. Часть 1 — Игровой персонаж, движение
Давайте подготовим раскадровки для 2х состояний: покой и бег, для этого необходимо удалить красный фон (нам ведь не надо, что бы персонаж перемещался всегда на фоне красного прямоугольника) и вырезать требующиеся части изображения, на выходе получая что-то вроде этого:
Из фоновых изображений пока вырезаем только пол:
Структурируем папки проекта и импортируем соответствующие изображения:
Далее необходимо из текстур извлечь, собственно, спрайты. Сделать это можно двумя способами: автоматически и вручную, замечу, что с автоматичемским извлечением может быть один нюанс: спрайты будут пронумерованы по возрастанию, но совсем не обязательно, что нумерация будет соответсвовать их положению в исходной текстуре, так что после извлечения рекомендую все тщательно проверить, что бы впоследствии не было артефактов анимаций. Поскольку у нас все же урок, сделаем все вручную.
Первым делом создаем еще пару папочек, на этот раз в “Sprites” → “Alucard”, внутри которой будут папки “Idle” и “Walking” с соответствующими спрайтами. Итак, создаем пустой спрайт, называем его “Idle_1” и открываем. Сразу же переходим в “Edit source region”, а в качестве текстуры-источника указываем текстуру «Alucard_Idle».
Один спрайт должен содержать один кадр анимации персонажа, так что скорректируем значения “Source UV” и “Source dimension”, что бы получить один кадр, либо просто дважды кликаем на нужно изображение, что бы автоматически определить его границы:
Проделываем то же самое с оставшимися кадрами покоя и ходьбы:
Из текстуры платфомы так же создаем спрайт, но, поскольку там всего одно изображение можно сделать просто через контекстное меню.
Самое время придать немного жизни нашим спрайтам! Для этого создаем “Animation flipbook”, даем ему имя и открываем. Добавляем соответствующие кадры по порядку и выставляем количество кадров в секунду по вкусу, мне нравится 6:
Повторяем для ходьбы и на выходе имеем 2 flipbook’а:
Теперь добавим на сцену нашу платформу, важно что в ее положении по компонента Y была равна 0. Далее добавим управление (в заготовке оно уже включено, но переназначим, как нам будет удобно): Edit → Project Setting → Input.
Переходим непосредственно к созданию персонажа. В папке “Blueprints” создаем новый BP, нас спросят, какой класс принта, выбираем “Character”, даем имя, открываем и направляемся в раздел “Components”. Добавляет к капсуле Flipbook, в качестве источника выбираем заготовленную Idle анимацию, так же добавляем SpringArm и к ней цепляем камеру, в принципе можно обойтись и без руки, но лучше с ней. Настраиваем размеры спрайтов и капсулы по вкусу, но капсулу лучше делать немного поменьше, что бы спрайт не парил над землей. У камеры убираем зависимость от контроллера и выставляем ортографический тип, глубину — по вкусу.
Компилируем, сохраняем. В настройках мира можно создать свой GameMode, либо поменять в уже существующем “Default Pawn Class” на только что созданного нами персонажа.
Теперь можно запустить и убедиться, что мы все сделали правильно и что наш персонаж нетерпеливо ожидает приказов.
Пора научить его передвигаться, для этого вновь открываем BP персонажа и переходим в раздел графа. Стоит отметить, что Blueprints – очень мощный инструмент, с его помощью можно обойтись в проекте без классического написания кода, но на деле это то же самое программирование, просто, собственно, писать надо будет разве что несколько имен, да значений. Итак, прежде всего надо добавить движение по вектору при событии MoveRight:
Тут происходит следующее: при воздействии на ось (у нас может быть два воздействия ± 1) происходит передвижение объекта по оси X на заданное воздействие. В принципе этого достаточно для передвижения, можно пробовать — компилируем, сохраняем, тестируем. Персонаж смещается вдоль оси, но без анимации, ведь мы не предусмотрели ее переключение.
Для переключения между анимациями нам необходимо заменить, собственно анимацию в flipbook нашего персонажа. Сделать это можно несколькими способами, но я предпочитаю наиболее универсальный и, как мне кажется, изящный. Создадим на графе Свое событие, назовем соответственно цели – “Update animation”.
Логика работы тут следующая: при вызове события во flipbook цели помещается заданная анимация. Сама анимация выбирается в зависимости от того, какая скорость у нашего объекта, если больше нуля — анимация ходьбы, иначе — покоя. Обновим и граф движения:
Появилось новое событие — “Event Tick”, оно происходит каждый кадр, соответственно каждый кадр у нас теперь происходит проверка необходимости смены анимации. Если сейчас запустить игру, то персонаж будет двигаться с анимацией бега, но всегда будет смотреть в одну сторону, исправим это:
Таким образом сегодня мы создали анимированного 2D персонажа, способного перемещаться по платформе. В дальнейшем добавим способность прыгать, сражаться и уничтожать врагов. Пожелания, комментарии и критика приветствуются.
UPD 1. По совету пользователя Torvald3d убрал билинейную интерполяцию на текстурах-исходниках персонажа. Просто заходим в импортированную текстуру и меняем фильтр на «ближайший».
Основы создания 2D персонажа в Godot. Часть 1: компилирование игрового движка, создание проекта и анимация покоя героя
Пару дней назад увидел статью о публикации исходного кода под свободной лицензией MIT игрового движка Godot и сразу решил поковыряться в нём.
Оказалось не всё так сложно, скорее забавно. В своей первой публикации хотелось бы рассказать о первых шагах на пути к созданию игрового платформера, и всех подводных камнях, о которые я чуть было не переломал пальцы за эти дни.
Если это кому-то интересно, добро пожаловать под Хабракат!
Встречаем: компилирование и установка godot на GNU/Linux x86, создание простейшей сцены и анимированного персонажа
Сразу определимся, чтобы не было недопонимания:
1) На написание статьи меня сподвиг Charoplet со своим циклом статей «2D персонаж в Unity 3D». Спасибо ему за это, творческих успехов и новых публикаций.
2) Опять же, для наглядности взял (без спроса) текстуры (персонажа) из его уроков. Надеюсь, меня за это простят.
3) На борту имею только GNU/Linux, x86 и amd64 соответственно. Под другие ОС достаточно скачать бинарные файлы с сайта создателей. Так как под amd64 всё уже есть, а под x86 предвидится в ближайшем будущем (автор обещал скомпилировать бинарные файлы как только сможет), я и решил что для 32-битных систем статья будет более актуальна и интересна.
Компиляция
Устанавливаем зависимости, если ещё нет в системе (Если что-то не получается, информация устарела, посмотрите на сайте разработчиков):
GCC or LLVM
Python 2.7+ (3.0 ещё не тестировался).
SCons build system.
X11 and MESA development Libraries
ALSA development libraries
Freetype
pkg-config
Пользователям Ubuntu:
Клонирование исходных кодов:
Можно сходить и приготовить чашечку чая. Компилирование — процесс не быстрый.
Чай приготовили, компиляция ещё идёт? Тогда можно сходить на сайт издателя и почитать документацию, скачать Демо и примеры, а так-же Шаблоны экспорта проектов под нужные операционные системы.
Первый запуск, создание проекта
В директории /bin появился бинарный файл godot. Достаточно просто запустить его.
Перед нами сразу же появляется диалоговое с проектами. Так как мы запустили в первый раз, оно будет пустым.
Давайте создадим свой первый проект.
Сначала я думал что у меня руки кривые. Пересобрал из git, запускаю — опять двадцать пять. Собрал на другой машине — всё заработало! На своей — нет. И тут до меня допёрло! Товарищи! Программа не понимает кириллицу! В общем переместил я всё в другой каталог, и всё заработало и на моей машине. Что ж, впредь будем осторожнее.
Ну вот и главное окно программы.
Для начала давайте создадим новую сцену. Сцена — это эпизод игры. Это может быть целый уровень. Заставка. Анимация персонажа. Задний план. Godot — программа редактирования сцен. Мы сегодня не будем углубляться в создание полнофункциональной игровой сцены, а просто создадим персонажа.
Создание игрового персонажа
Первое что надо сделать — это добыть спрайты. Нарисовать/скачать/украсть. Я пожалуй возьму из урока про Unity3D. Спрайты от Charoplet.
Качаем Idle.png.
Импортируем в Godot:
Указать какое изображение(я) куда импортируем
Указать степень сжатия
И нажать «Import». В Wiki есть более подробная информация об импорте текстур на английском. Рекомендую к прочтению.
Ну а мы довольные результатом пробуем создать персонажа.
Сцена персонажа
В верхнем правом углу в окошке Scene нажимаем на единственную активную кнопку «Add/Create a new Node», или сочетанием клавиш Ctrl+A создаём «Ноду». Я думаю самый близкий перевод — шестерня, но звучит не красиво. Пусть будет материал? Документ? Или так и оставить, — «Нода»? Буду рад комментариям.
В поиске «Search» вводим «Rigid», и «Node» отсортируются по названиям. Выбираем RigidBody2D.
Настраиваем параметры в меню Inspector ниже:
Mode: Character
Mass: 3
Friction: 0
Custom Integrato:
Да, она появилась! Теперь нам надо указать, что у нас тут аж целых 8 фреймов (Правда сами фреймы считаются с нуля, их количество считаем с единицы, привыкайте). Параметр Hframes, — Горизонтальные фреймы, ставим равным 8. И что мы видим?
На первом же (который нулевой) фрейме виден хвост капитана из следующего! Это возмутительно! Да что эти OKAM Studio о себе возомнили?! Даже количество кадров в раскадровке нормально посчитать не могут! Как они могут такие программы писать?!
Да? Промелькнула мысль? Нет, разработчики не виноваты. Виноваты мы. Поленились нарисовать свои спрайты. Взяли чужие — вот и расплата.
Персонаж на спрайте расположен криво. Будем править.
В GIMP’е оказывается делать/изменять/править спрайты не так уж и трудно. Выставляем сетку нужного размера (120 на 120 пикселей). И распихиваем кадры по местам. Готово. Скачать исходные файлы можно тут. Готовая текстура выглядит так:
Да, я склеил все анимации в одну картинку. Чтобы было проще работать дальше. Когда мы будем делать прыжки и бег/ходьбу.
Ок, перезаливаем. Указываем Vframes = 4; Hframes = 8
Наводим на RigidBody2D и переименовываем его в player. Так будет понятнее, не правда ли?
Ctrl+A — создаем «Node» «AnimationPlayer» и сразу же «Camera2D» чтобы не возвращаться. Переименовываем AnimationPlayer в anim, а Camera2D просто в camera. Так дальше будет проще. С камерой я думаю сразу догадались что делать. Больше пока её трогать не будем.
Самое время создавать анимацию! Делать это проще некуда! Выбираем anim, внизу слева появляется меню анимации.
Создадим анимацию. Слева внизу есть кнопка «Create new animation in player». Жмякаем. Называем idle.
Нажимаем на карандаш правее, и вот оно, меню редактора анимации.
Ставим Len(s) — длину анимации 1,1 (секунды), а Step(s) — шаг анимации, 0,15.
Выбираем опять на Sprite в окне Scene вверху справа.
Смотрим на Inspector — ищем переменную Frame. Она должна равняться нулю. Справа нарисован ключик. Нажимаем на него. Нам предлагают создать новую линию анимации «frame» для данного спрайта. Соглашаемся (Create).
Теперь всё просто. Нажимаем Ctrl + Right, выбираем следующую анимацию — нажимаем на ключик. И так далее. Всего должно получиться 8 синих точек, 8 кадров анимации. После этого можно нажать на плеере на play, и посмотреть что у нас получилось. Да, не забудьте зациклить анимацию. (Кнопка Enable/Disable looping in animation).
Так, 30% сделали. Теперь самое интересное.
Будем варить! кодить!
Переключаемся на вкладку скрипты.
Ну-с, поехали. Напоминаю что программа не понимает кириллицу. Поэтому комментарии к коду только в образовательных целях. Не пытайтесь их вставить в код. Ниже будет полный код без них.
Ну вот, а вы боялись.
var new_anim=anim
new_anim=«idle»
if (new_anim!=anim):
anim=new_anim
get_node(«anim»).play(anim)
Не забываем сохранить как player.gd.
Так. В принципе почти всё готово. Осталось самое главное:
Создание сцены
Не забываем сохранить сцену с персонажем. И создаём новую. Благо уже умеем.
Для начала создаём пустую «Node» — назовём её Scene.
Теперь к ней привяжем нашего игрока. Нажимаем на «плюс» и выбираем нашего только что созданного player.xml.
Сохраняем нашу сцену как scene.xml. И запускаем ещё раз. Если всё сделали правильно, то увидите потрясающую анимацию нашего Капитана!
Небольшое видео результата с бонусными задниками и землей под ногами:
Ну и в заключение. Как я писал выше, в ОС GNU/linux x86 на данный момент проект экспортировать нельзя. Авторы программы уведомлены. В скором будущем обещали решить эту проблему и скомпилировать не только бинарники для x86, но и Шаблоны экспорта. Также можете протестировать экспорт на другие ОС.
Ну а я, если получится, надеюсь продолжить цикл статей о создании 2D, а в будущем возможно и 3D игр на этом замечательном движке. Приятной пятницы, с Днём Компьютерщика, до скорых встреч!