Основы создания 2D персонажа в Unity 3D 4.3. Часть 1: заготовка персонажа и анимация покоя
Всем добрый день. В относительно недавно вышедшей Unity 4.3 появились инструменты для создания 2D игр. Конечно, такие игры можно было создавать и раньше, но это делалось при помощи дополнительных ухищрений (вот пример с хабра). Теперь же появилась поддержка 2D «из коробки». Надеюсь, разработчики продолжат ее развивать, а пока я хочу рассказать о некоторых приемах работы с новыми 2D инструментами.
Для основы урока я взял официальный видеоурок с сайта Unity3d.com. В нем создается анимированный управляемый 2D персонаж. Он может стоять, бегать, прыгать. Все это сопровождается соответствующими анимациями. Урок довольно длинный (почти полтора часа) и содержит немного «воды», поэтому я решил сделать некий текстовый перевод. В этой части речь пойдет о самых основах — создадим статичную платформу для нашего персонажа, самого персонажа, и сделаем персонажу анимацию покоя. Бег и прыжки рассмотрим позже, но основу для этого создадим сейчас. Все операции я постараюсь описывать подробно, но основные знания об интерфейсе Unity у вас должны быть. На том же официальном сайте Unity есть хорошие и быстрые уроки по интерфейсу.
Итак, начнем. Создадим новый проект в Unity. Выберем папку для расположения проекта, импортировать дополнительные пакеты не будем. Обязательно укажем, что мы создаем проект, настроенный на 2D игру (Setup defaults for: 2D).
Проект создан. В окне Project у нас должна быть одна папка — Assets. Давайте создадим в ней подпапку Sprites, где будем хранить спрайты — графические файлы, необходимые для отображения персонажей, фона, пола, бонусов и прочих игровых объектов. Нам нужен спрайт, для отображения платформы, по которой будет бегать наш персонаж. Для этого подойдет любое прямоугольное изображение. В конце поста я указал ссылку на архив со спрайтами, которые использовались в уроке. Это немного спрайтов из игры Capitan Claw. Файл спрайта платформы называется Platform.png. Скопируем его в папку Sprites. Теперь нам надо перетащить спрайт Platform на окно Scene. В нашем проекте есть камера с именем Main Camera. Она-то и будет отображать то, что мы видим в игре. Перетащим спрайт платформы так, чтобы она оказалась в нижнем углу поля зрения камеры (если кликнуть по камере, то внизу сцены появится окошко Camera Preview, по которому можно контролировать, что в данный момент видит камера). Unity автоматически создаст игровой объект с двумя компонентами — Transform и Sprite Render. Первый отвечает за положение нашей платформы, второй — за ее отрисовку. Но нам еще нужно, чтобы персонаж не падал сквозь эту платформу, поэтому добавим к объекту платформы компонент Box Collider 2D, из раздела Physics 2D. Итого, сейчас у нас должно быть что-то вроде этого:
Теперь займемся персонажем. Создадим пустой игровой объект (Game Object — Create Empty) и перетащим его так, чтобы он висел над левой частью платформы. Переименуем этот объект как Character и добавим к нему компонент Rigidbody 2D, для придания нашему персонажу физических свойств твердого тела. В компоненте Rigidbody 2D установим флажок Fixed Angle, чтобы предотвратить случайные вращения нашего персонажа, например, от столкновения с другими твердыми телами. Затем установим в поле Interpolate значение Interpolate. Документация Unity рекомендует устанавливать это значение для персонажей, управляемых игроком, особенно, если за ним следует камера. Это связано с синхронизацией расчета физики и отрисовкой графики. Подробности в документации.
Следующим шагом нам нужно добавить компонент Sprite Render, для отрисовки персонажа. Почему мы не можем просто перенести нужный спрайт, и получить автоматически сгенерированный Sprite Render, как в случае с платформами? Потому что наш персонаж, в отличии от платформ, будет отрисовываться не одним, а несколькими спрайтами, чтобы получился анимированный персонаж. Для этого нам придется выполнить ряд действий и первое из них — достать подходящие спрайтшиты (Sprite Sheet). Спрайтшит — это изображение, на котором содержаться кадры анимации для нашего персонажа. Думаю, ни для кого не секрет, что анимация — последовательное и быстрое отображение неанимированных кадров, каждый из которых немного отличается от предыдущего. Погуглите по запросу Sprite Sheet, и вы сразу поймете, что это такое. Нам нужны спрайтшиты для состояний покоя, бега и прыжка. В архиве со спрайтами есть файлы Idle.png, Run.png, и Jump.png. Скопируем их в папку Sprites. На данном этапе должно быть следующее:
Приступим к анимированию персонажа, а конкретно — к анимированию состояния покоя, когда персонаж просто стоит и ничего не делает. Точнее говоря, он ничего не делает с точки зрения игровой логики, но он может переминаться с ноги на ногу, моргать, делать жесты, показывающие, что ему скучно так просто стоять и так далее. Для анимации покоя нам понадобиться файл Idle из нашей папки Sprites. Выделим этот файл. В окне Inspector отображаются свойства этого файла. Свойство Texture Type задано как Sprite, и это то, что нам нужно, а вот значение свойства Sprite Mode надо изменить с Single на Multiple. Таким образом, мы указали, что файл играет роль не одиночного спрайта, а представляет собой коллекцию спрайтов. Однако, эту коллекцию еще надо инициализировать. Для этого чуть кликнем по кнопке Sprite Editor, которая находится все в том же окне Inspector чуть ниже свойства Pixels To Units. Откроется новое окно. В нем мы видим содержимое нашего спрайтшита для состояния покоя: несколько похожих друг на друга кадров. Нам нужно их нарезать на отдельные изображения. Для этого нажмем на кнопку Slice в левом верхнем углу окна. Во-первых, нам надо задать способ (Type) нарезки изображения: Grid или Automatic. Первый способ нарежет наше изображение сеточкой с настраиваемыми размерами ячеек (Pixel Size — X… Y. ). То есть, в этом режиме надо подобрать такие значения, чтобы все кадры нормально уместились в ячейках, чтобы ничего лишнего не было отрезано и т.п. Во втором режиме нарезка на кадры будет произведена автоматически. Сама нарезка произойдет после нажатия кнопки Slice. Попробуйте применить разные способы нарезки и посмотрите, что из этого получается. В случае с моим спрайтшитом нормально подходит способ Automatic. Даже если какой-то из кадров вышел немного неудачно — его можно отредактировать, кликнув по нему и изменив значения высоты/ширины/расположения и других параметров в соответствующем окне или при помощи мышки. Подтвердим нарезку нажатием на кнопку Apply в правом верхнем углу и закроем это окно.
Теперь нам надо найти наш импортированный файл Idle в окне Project. В правой части файла есть треугольник (или в левой, при самом мелком мастабе значков). Кликнув по треугольнику, мы развернем коллекцию изображений, полученных в результате нарезки. Они будут иметь имена Idle_0, Idle_1 и т. д. Теперь в окне Hierarchy выберем наш Character, и перетащим изображение Idle_0 в поле Sprite компонента Sprite Render. Наш персонаж отобразиться на сцене. Если он получился маленьким — можно увеличить его размеры до необходимых. Вот так:
Давайте сразу добавим к нашему персонажу компонент Box Collider 2D, что не проваливаться сквозь платформу. При этом откорректируем размеры и местоположение коллайдера так, чтобы он не был слишком большим и располагался на уровне ног персонажа. Этого достаточно, чтобы персонаж не падал сквозь платформу. Можете запустить игру и проверить.
Вернемся к анимации покоя. Для этого добавим к нашему Character еще один компонент — Animator (раздел Miscellaneous). Изменим некоторые его свойства — снимем флаг с Apply Root Motion и установим флаг Anymate Physics. Apply Root Motion позволяет изменять положение объекта из самой анимации (что нам сейчас не нужно), а включенный флаг Anymate Physics задает выполнение анимации в цикле расчета физики, что как раз рекомендовано для движущихся твердых тел. Теперь создадим в папке Assets файл Animator Controller. Назовем его CharacterController. В окне Hierarchy выделим нашего персонажа Character и перетащим CharacterController в поле Controller компонента Animator:
Кликнем дважды по CharacterController — откроется новое окно Animator. В нем мы будем создавать различные состояния анимации (покой, бег, прыжок) и задавать условия перехода между ними. Для создания непосредственно анимаций нам нужно окно Animation. Если оно у вас еще не отображается его можно включить из главного меню Unity (Window — Animation). Теперь выберем нашего персонажа Character в окне Hierarchy, а в окне Animation нажмем кнопку для создания новой анимации и выберем Create New Clip. На скриншоте ниже я отметил эту кнопку красной окружностью:
В стандартном диалоге сохранения файла сперва создадим папку Animations, а в нее сохраним наш файл анимации, назвав его Idle.
После сохранения, в окне Animator появится наша анимация Idle в виде прямоугольника оранжевого цвета. Оранжевый цвет означает, что это будет анимация по умолчанию — как раз то, что нам сейчас нужно.
Осталось всего пара шагов. Переходим в папку Sprites, разворачиваем спрайт Idle, выделяем первое изображение Idle_0, зажимаем шифт и выделяем последнее изображение Idle_7. Все выделенные изображения переносим мышью на окно Animation. Зададим значение Sample равное 10 — этот параметр означает количество кадров анимации в секунду. Как известно, для хорошей анимации необходимо, чтобы она отображалась со скоростью не менее 24 кадров в секунду, однако, в нашем случае анимация состоит из довольно маленького числа кадров и при значении 24 она будет отображаться слишком быстро.
Запустим игру! Если все сделано правильно, наш Капитан Коготь должен стоять на платформе, дышать, и вилять хвостом.
На этом пока все. В следующий раз поговорим о реализации бегущего вправо-влево персонажа и соответствующей анимации.
Основы создания 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:
apt-get install git scons pkg-config libx11-dev libxcursor-dev build-essential libasound2-dev libfreetype6-dev libglu-dev Клонирование исходных кодов:
git clone https://github.com/okamstudio/godot.git cd ./godot scons bin/godot scons поддерживает параллельную компиляцию. Достаточно добавить опцию -j с аргументом, указывающим на количество потоков, например
scons -j 4 bin/godot У меня быстрее всего получалось когда число потоков == числу ядер.
Можно сходить и приготовить чашечку чая. Компилирование — процесс не быстрый.
Чай приготовили, компиляция ещё идёт? Тогда можно сходить на сайт издателя и почитать документацию, скачать Демо и примеры, а так-же Шаблоны экспорта проектов под нужные операционные системы.
Первый запуск, создание проекта
В директории /bin появился бинарный файл godot. Достаточно просто запустить его.
Перед нами сразу же появляется диалоговое с проектами. Так как мы запустили в первый раз, оно будет пустым.
Давайте создадим свой первый проект.
New Project -> Project Path — соответственно директория, в которой он и будет находиться; Project Name — его название.
Не долго думая выбираем место назначения, называем test, клацаем кнопочку Edit, и созданный проект вылетает с segmentation fault.
Сначала я думал что у меня руки кривые. Пересобрал из 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:
Так. Хорошо идём! Теперь натягиваем спрайт:
Опять Ctrl+A, Sprite -> Выбираем Sprite. Не AnimatedSprite, а просто Sprite.
Идём в «Настройки» (Inspector — Контроль?), нажимаем на Texture в самом верху, -> Load. Выбираем уже импортированную текстуру Idle.tex.
Да, она появилась! Теперь нам надо указать, что у нас тут аж целых 8 фреймов (Правда сами фреймы считаются с нуля, их количество считаем с единицы, привыкайте). Параметр Hframes, — Горизонтальные фреймы, ставим равным 8. И что мы видим?
На первом же (который нулевой) фрейме виден хвост капитана из следующего! Это возмутительно! Да что эти OKAM Studio о себе возомнили?! Даже количество кадров в раскадровке нормально посчитать не могут! Как они могут такие программы писать?!
Да? Промелькнула мысль? Нет, разработчики не виноваты. Виноваты мы. Поленились нарисовать свои спрайты. Взяли чужие — вот и расплата.
Персонаж на спрайте расположен криво. Будем править.
… Спустя 10 минут…
В 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).
Сохраняем сцену (Scene -> Save, назвав player.xml).
Так, 30% сделали. Теперь самое интересное.
Будем варить! кодить!
Scene -> player -> Inspector -> Script. Успеваете за мной? На скриншоте выше нарисовано куда идти. Выбираем там New GDScript.
Переключаемся на вкладку скрипты.
Ну-с, поехали. Напоминаю что программа не понимает кириллицу. Поэтому комментарии к коду только в образовательных целях. Не пытайтесь их вставить в код. Ниже будет полный код без них.
extends RigidBody2D #объявляем класс var anim="" #Объявляем переменную анимации func _integrate_forces(s): #Начинаем функцию var new_anim=anim #Объявляем переменную смены анимации (понадобится в будущем, когда будем использовать разные анимации) new_anim="idle" #присваиваем анимацию покоя if (new_anim!=anim): ##Сама смена анимации anim=new_anim get_node("anim").play(anim) Ну вот, а вы боялись.
Как и обещал:
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 игр на этом замечательном движке. Приятной пятницы, с Днём Компьютерщика, до скорых встреч!
Как нарисовать персонажа для игры | Хороший способ | Pixel art | Aseprite
Рисуем 2d персонажа для игры? В этом видео я воспользуюсь хорошим способом для рисования моделей в формате пиксель арт, котором пользуюсь сам. Данный способ основан на случайностях, он хорошо подойдет для тех, кто только начинает учиться рисовать. Сообщество Вк. https://vk.com/club212567519
Показать больше
Войдите , чтобы оставлять комментарии
Игровая графика 2D: от простых форм до создания персонажа. Курс компьютерной графики
«Игровая графика 2D: от простых форм до создания персонажа. Курс компьютерной графики. Записывайтесь на курс в школе компьютерной графики по ссылке ��http://bit.ly/2HytKAh ☎ +7 (495) 532-98-95 Вам интересная игровая графика 2d? Ищете курсы, на которых вы смогли бы в максимально большом объеме узнать, как нарисовать персонажа для игры, и как вообще применяется 2d графика в играх? Алина Роз, преподаватель Школы компьютерной графики Game4art, проводит обучение по курсу игровой компьютерной графики 2d. На этом курсе вы разберете основы компьютерной графики, научитесь созданию простых форм, а также освоите рисование и дизайн персонажей для игр 2д. Вы не только узнаете, как рисовать персонажей, и как сделать 2д персонажа для игры, но также сможете принять участие в создании 2д персонажа на реальном проекте. Поскольку процесс обучения в Школе компьютерной графики Game4art вариативный, и задачи даются студентам у учетом их возможностей, новую интересную профессию с Game4art может освоить каждый. Game4Art — это подготовка специалистов для игровой и кино индустрии ☀ Доступные цены с помесячной оплатой ☀ Обучение программам Zbrush, Maya, 3dsmax, Photoshop для скетчинга и программам для Motion disign — After Effects , Cinema 4D, Houdini, Unreal Engine 4 ☀ Оборудованные мастерские и компьютерные классы ☀ Работаем при Российской академии художеств ☀ 5 минут от метро Октябрьская в здании художественного лицея ☀ Стажировка в ведущих студиях параллельно с обучением ☀ Сертифицированные преподаватели из игровой и кино индустрии ☀ Официальный документ об окончании ☀ Бесплатные дополнительные занятия два раза в неделю ☀ Вакансия от студии при добросовестном обучении, прохождении стажировки и защиты дипломной работы Факультеты: На курсе «2D концепт арт» вы научитесь разработке персонажа от наброска до финального отрендеренного концепта, на курсе «3D художник по персонажам» — создавать высоко реалистичных героев с подробным изучением пластической анатомии, на курсе «Анимация и Риггинг» – освоите полный цикл оживления персонажа от настройки скелета до анимации любой сложности. У нас открылся новый факультет «»Motion design»», на котором вы освоите производство анимированной 2D и 3D-графики для кино, игр и различных медиа. Выполняйте учебный план, домашние задания, посещайте мастер-классы, проходите стажировку, и вы получите настоящую высокооплачиваемую ПРОФЕССИЮ. А студия предоставит для вас вакансию. Запишитесь на бесплатные открытые уроки: https://game4art.ru/enter-courses/ani . Подпишитесь на социальные сети, чтобы бы не пропускать новые уроки по графическому дизайну: ☀ ВК: https://vk.com/game4art ★ GAME4ART ★ Забронируйте свой курс в школе компьютерной графики и 3d моделирования Game4Art по ссылке ☎ +7 (495) 532-98-95 �� http://bit.ly/2HytKAh Канал для будущих геймдизайнеров о создании дизайна 3д персонажей и компьютерной графики для игр и кино Всем привет! Меня зовут Алиса Роз, я являюсь преподавателем в школе компьютерной графики Game4art. Я преподаю на курсе игровая графика 2д. На нашем курсе вы узнаете полный спектр изучения 2д графики, начиная от простых форм, заканчивая персонажем. На каждый просмотр к нам приезжают представители студии. В данном club game и Союзмультфильм, которые отбирают себе учеников для стажировки. Процесс обучение компьютерной графике подразумевает под собой творческую составляющую. Процесс обучения довольно вариативен. Мы смотрим на слабые и сильные стороны каждого ученика и подбираем ему задачи в зависимости от его способностей. Подход к каждому индивидуален. Студии участвуют процессе обучения, и студенты практикуются на реальных проектах. Ждем вас на наших курсах в школе Game4art #concept #2d #cg #школакомпьютернойграфики #махлрах #геймдев»
Показать больше
Войдите , чтобы оставлять комментарии