godot engine анимация персонажа
Основы создания 2D персонажа в Godot. Часть 2: компилирование шаблонов, немного о GDScript, движение и анимация героя
В предыдущей статье мы рассмотрели азы создания нового проекта в Godot. И с этими поверхностными знаниями можно разве что поглядеть demo-версии игр. 
Во второй части на повестке дня у нас:
1) Экспорт готового проекта в бинарные файлы для выбранной архитектуры.
2) Новые анимации. Параметры персонажа.
3) Управление.
3) GDScript. Добро пожаловать в настоящий кодинг!
4) Импорт простейших Tilesets.
5) Бонус: разбор устройства простейших задников.
Ну и как обычно, много картинок!
Компиляция.
В прошлой статье я упоминал что авторы не предусматривали бинарники для linux x86. На время написания статьи бинарные файлы всё ещё были не готовы. Но экспортировать готовые проекты, demo или просто тесты уже хотелось. Но что делать, если нет Шаблонов экспорта? Правильно! Скомпилировать их самому!
Переходим в директорию с исходными файлами и компилируем
После успешной компиляции переименовываем свежеполученный файл в linux_x11_32_debug
Сам шаблон экспорта:
Переименовываем в linux_x11_32_release
Запаковываем в zip-архив.
Скармливаем архив Godot. Вуаля, теперь можно экспортировать проект для ОС GNU/Linux любой разрядности.
Да даже под ОС и разрядности, отличные от Вашей. Бинарные файлы для Windows без проблем смог завести в wine, главное не забыть снять или поставить галочку 64bits, и выключить debugging, если не нужен.
Подробнее про настройки экспорта можно почитать на сайте проекта на английском языке. Если будет актуально и востребовано, можно будет подумать о русской локализации статей и создания русскоязычной wiki по Godot.
Анимация бега и прыжков
В прошлом уроке я заранее подготовил текстурку со спрайтами бега и прыжка нашего Капитана. Поэтому я думаю создать две анимации jumping и run не составит труда. Я думаю это не трудно будет сделать. Скажу лишь параметры:
Да, прыжок — это только прыжок. Значит нужна ещё анимация падения.
Параметры персонажа
1) Напоминаю. Проверьте, стоит ли галочка на параметре Camera2D/Current, отвечающая за привязку объекта «камера» к объекту player.
3) С геометрией веселее. Для начала надо добавить Node CollisionPolygon2D. Теперь нам надо нарисовать этот самый полигон, дающий персонажу «массу».То-есть надо нарисовать то, чем герой будет «биться об стенки» при столкновении с ними. Иначе он будет просто проходить «сквозь стены».
Выбираем карандаш. Теперь левой клавишей мыши «ставим» 3 вершины треугольника. Два на каждом из плечей, и один в районе живота. И правой клавишей (просто щёлкнуть на рабочей области) рисуем треугольник. Желательно чтобы он в итоге получился равнобедренный или равносторонний. С нижней вершиной на оси Y. Теперь увеличим его. Немного. Иначе персонаж будет проходить сквозь потолок например.
Готово, наш персонаж — болванчик готов. Теперь самое лёгкое — управление.
Создание клавиш управления
GDScript
Тут я немного в ступоре. Дело в том что из меня программист честно сказать не очень. Я сам многое не понимаю. И читаю книжки по Python чтобы лучше разбираться в вопросе. Потому что GDScript очень похож на него.
Внимание!
Небольшая просьба — если знаете как оформить лучше — напишите пожалуйста. Буду рад учесть все замечания.
Напомню предыдущий код отображения простейшей анимации:
Основы создания 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 игр на этом замечательном движке. Приятной пятницы, с Днём Компьютерщика, до скорых встреч!
Твоя первая игра на Godot Engine
1. Предисловие
Здравствуй, в данной статье я хочу в максимально сжатой форме познакомить тебя с основами создания простых 2d платформеров на движке Godot. Иногда мы будем останавливаться на некоторых важных моментах, а иногда пропускать ненужную тебе на начальном уровне информацию.
2.Стартуем!
Думаю установить сам движок не составит труда. После установки открываем его и нажимаем на кнопку «новый проект».
Создание проекта.
В выплывшем окошке введи название проекта и выбери его расположение в файловой системе. В пункте «отрисовщик» выбираем «OpenGL ES 3.0», у нас нет нужды использовать более старую версию opengl, т.к ее обычно применяют при создании браузерных игр.
3.Знакомство с интерфейсом
Итак, мы создали твой первый проект! Отличное начало, на сегодня хватит. Ладно, а если серьезно, то изучать интерфейс программы, особенно на первых парах, очень важно. Перед тобой открылась интересная картина с пустой 3d сценой, но она нам сегодня не понадобится, поэтому переходим во вкладку 2d. Кнопка находится сверху посередине. Стало немного проще, не правда ли? Ну, а теперь перейдем к самому интерфейсу программы (его кстати можно настроить под себя, перетащив какие-то элементы левой кнопкой мыши, но пока лучше оставить все как есть).
4.Работа с файлами через Godot
Не очень удобно каждый раз лазить в проводник, чтобы достать какие-то файлы, согласен? Для этого в Godot существует отдельное окошко, оно находится в левом нижнем углу редактора.
Проводник в Godot Engine.
Пока что там пусто, но это потому, что мы еще ничего не добавили. Так давай сделаем это! Ссылку на архив я прикрепил в конце поста, скачивай его и наслаждайся халявными спрайтами для игры (сразу говорю, они не мои). Если конечно у тебя заготовлена своя графика, то милости прошу.Итак, выделяем все нужные нам файлы и переносим их в окошечко. Вжух и они скопировались в движок! Но на этом магия не заканчивается! Здесь можно делать все то, что ты делаешь в обычном проводнике! Одним словом, полная свобода действий.
Но давай пока оставим эту часть экрана в покое и перейдем к более серьезным вещам.
5.Работа со сценами
Посмотри в верхний левый угол редактора. Здесь есть вкладка, которая называется «Сцена». Давай добавим твою первую сцену! Делается это просто, тебе нужно либо нажать на плюсик, либо ввести сочетание клавиш «ctrl + A». Перед тобой выплыло меню, в поиске которого нужно ввести заветное слово «Node». Мы давай это будет наша основная сцена, назовем ее «World», но название в принципе неважно. Чтобы переименовать сцену нужно лишь дважды щелкнуть на нее левой кнопкой мыши. Теперь давай добавим на сцену игрока!
Многие просто добавляют объект «Sprite», но это большая ошибка! Так делать нельзя! Запомни это раз и навсегда! Мы с тобой, как продвинутые пользователи добавим не «Sprite», а «KinematicBody2D».
Теперь древо твоего проекта выглядит так:
Добавляем игрока.
Как ты наверное успел заметить, напротив нашего «KinematicBode2D» висит какой-то желты значок. Что он тут забыл? Дело в том, что наш объект пока что не имеет форму, вот Godot и ругается. Но прежде чем добавить форму нашему игроку, давай добавим его спрайт( И не забудь заменить название «KinrmaticBode2D» на «Player» ). Для этого нажми один раз правой кнопкой мыши на нашего «Player» и сочетанием клавиш «ctrl + A» добавь объект «Sprite». Потом опять нажми на Игрока и добавь объект «CollisionShape2D». У тебя должна быть примерно такая картина:
Добавляем в спрайт и границы игрока.
Если все так, едем дальше. Теперь зададим картинку спрайта нашего персонажа. Выбираем объект «Sprite», а потом перетаскиваем из моего архива картинку «Player.png»( или твою картинку) в раздел «Texture». Если картинка импортировалась с сжатым качеством, просто нажми на нее, и в Godot в верхнем левом углу перейди в вкладку «Импорт», там в разделе «Flags» убери галочку с пункта «Filter» и нажми «Переимпортировать». Если не помогло, то просто перезапусти Godot.
Итак, мы добавили спрайт игрока, но выглядит это немного странно.
Добавляем текстуру спрайта игрока.
Что же делать? Без паники, все поправимо в пару кликов. В левой части панели «Инспектор» выбираем параметр «Hframes», и подгоняем его по размерам ( у меня это 25). Ну что, поменялась картинка?
Устанавливаем границы спрайта.
Супер, едем дальше! Ты еще не забыл про CollisionShape2D? Выделяй его и в пункте «Shape» выбирай «Новый RectangleShape2D». Теперь изменяй его под размер персонажа. У меня получилось так:
CollisionShape2d.
6.Отдельные сцены в Godot
Это все конечно классно,но хорошим тоном в Godot является создание отдельных сцен для объектов. Поэтому нам нужно сделать так, чтобы объект «Player» был отдельной сценой. Но не создавать же нам все заново? Нет, для этого в движке предусмотрена отдельная функция.Нажмите на «Player» правой кнопкой мыши и выберете «Сохранить ветку,как ветку».
Создание сцены из ветки.
Теперь «Player» это отдельная сцена, отлично!Чтобы перейти на сцену игрока достаточно нажать на иконку:
Перейдем на сцену игрока и приступим к очень интересному занятию — программированию.
7. Скрипт игрока, GDscript
Для того чтобы добавить скрипт какому-либо объекту нужно просто выбрать этот объект и нажать на иконку свитка:
Создать скрипт.
После этого выплывет такая табличка:
Скрипт для игрока.
Нажимаем «Создать» и у нас открывается встроенный редактор кода в Godot.Теперь начинается более сложная часть туториала, поэтому слушай внимательнее.Пока что наш персонаж просто стоит на сцене и ничего не делает, это слишком скучно. Ну так давай сделаем управление персонажем!Что нам для этого понадобится? Нам нужен скрипт, который будет обрабатывать нажатия клавиш с клавиатуры, двигать персонажа, проигрывать анимацию. Но давай пойдем по порядку и начнем с самого простого — управления.
Простое управление.
Как ты заметил, мы прибавляем к координате игрока произведение направления по координате на ускорение и на какую-то delta. Вопрос, что такое delta? Delta показывает сколько времени (в секундах, тип float) прошло с момента отрисовки прошлого кадра.Зачем это сделано? Если мы не будем привязывать передвижение игрока ко времени, то оно автоматически привязывается к частоте процессора. На крутых компьютерах или телефонах разница незаметна, но запустив приложение на старом пк или телефоне, ты все поймешь. Поэтому всегда привязывай передвижение к delta!
Потом в строке 13 мы используем какой-то clamp. Опять неразбериха! Все просто, clamp, как можно догадаться из названия, «сжимает» значение переменной. Сделано это для оптимизации и плавности движения.Ну и в последней строке мы просто запускаем передвижение нашего игрока. Не так уж все и сложно!
8. Первый запуск.
Вот сделали мы все это с тобой, а где результат? Ну так давай поскорее запустим с тобой первую демку! Все очень просто, нажми клавишу F5, после этого выплывет окно, которое скажет тебе, что основания сцена не выбрана. В нашем случае основная сцена — World.tscn. Выбираем ее и снова жмем F5. Должно появиться что-то такое:
Окно демки.
В верхнем левом углу можно заметить маленькую часть нашего персонажа. Давай приведем все в порядок. Для этого сначала закрое окошко демки и перейдем в настройки проекта. Чтобы это сделать, в левой верхней части нажми на «Проект», а в выплывшем окне нажми «Настройки проекта». Здесь переходим в вкладку «Window» и ставим разрешение на 320×180. Почему такое маленькое? Все просто, мы с тобой задали разрешение экрана в самой сцене, для платформера такие размеры идеальны. А для экрана самой демки нужно задать нормальное разрешение. Это можно сделать в пунктах «Test Width» и «Test Height». Я задам его в формате 1280×720. Спустимся пониже и в пункте «Mode» ставим «2d», а в «Aspect» ставим «keep». Для красоты предлагаю обратно перейти на сцену и передвинуть персонажа в середину экрана. Делается это легко, просто зажми персонажа левой кнопкой мыши и начни перетаскивать. Теперь все приготовления закончены,можно запускать демку.
Красота, правда? Попробуй передвигать персонажа стрелками на клавиатуре. Получилось? Да, но персонаж будто скользит по экрану и не может остановиться. Не волнуйся, скоро мы это исправим. Однако сейчас наш персонаж как бы висит в воздухе, это не есть хорошо. Давай сделаем землю для нашего игрока!
9.Tilemaps
Что такое «Tilemap»? Тайлы — это плитки, вместе образующие сетку тайлов. Чаще всего они принимают форму квадратов. Как же их добавить в наш платформер? Очень просто, для начала выбери объект «World»(нашу основную сцену), нажми клавиши «ctrl + A» и выбери «TileMap».
Теперь в этом окошке выбири «Tile Set» и нажми «Новый TileSet».Снова нажми на «TileSet», должно получиться ка-то так:
Добавляем анимацию.
Давай добавим спрайт для нашего tilemap, для этого нажми на плюс снизу и выбери «tile.png».
Следующий шаг будет довольно сложным, поэтому слушай внимательно. Итак, во вкладке «Регион» полостью выделяем нашу картинку, в вкладке «snap options» ставим step по x и y на 16. Такие же действия повторяем во вкладках столкновение, перекрытие, навигация, битовая маска. А последней мы остановимся поподробней.
В ней мы нажимаем на квадратик и выделяем весь тайл. Тоже самое проделываем и в других вкладках. Вот как в итоге должно получиться.
Задаем границы тайла.
Отлично, сохраняем все и переходим обратно на сцену. Еще раз кликаем на Tilemap и в раздеел «Cell» меняем size на 16×16.Теперь можно делать уровень!
Создаем простой уровень.
Вот как у меня получилось. Супер, но на нашего игрока до сих пор не действует гравитация, давай это исправим. Для этого перейдем в скрипт player и введем там такой код.
Константы для прыжка и гравитации.
Здесь к существующим переменным мы добавляем friction, gravity, jumpforce, airresistance. Названия говорят сами за себя, поэтому объяснять за что они отвечают я не буду.
Реализация прыжка и гравитации.
Следом идет сама сила гравитации. Мы прибавляем к motion.y силу тяжести, умноженную на delta. Это действие заставляет нашего игрока падать вниз, если под ним ничего нет. После этого скрипт обрабатывает нажатия на кнопки, характерные для прыжка (стрелочка вверх). И заставляет игрока падать вниз, когда он уже прыгнул.
Вот собственно и все, давай запустим демку!Все работает. Но нет никаких анимаций,и передвижение из-за этого выглядит очень топорно.
Как выглядит при запуске.
10.Анимации
Простые анимации в Godot сделать очень легко. Для этого перейдем на сцену player и добавим туда «AnimationPlayer». Жмем на кнопку «анимация», далее жмем «новый» и вводим название анимации. Сделаю анимацию для бега и назову ее «Run».Чтобы добавить новый кадр для анимации нужно перейти в «sprite».
Добавляем кадры в анимацию.
Напротив пункта «frame» есть ключик,если нажать на него, то кадр из спрайта добавиться в анимацию. Постепенно увеличиваем frame от 0 до 8 и ключиком добавляем кадр в анимацию. Вот как в итоге это должно выглядеть:
Создаем анимацию из кадров.
Тоже самое повторяем для других анимаций, просто меняя номер кадра. В итоге у тебя будет несколько анимаций — для прыжка, ходьбы, и анимация idle. Теперь все это нужно добавить в код.Переходим в код player и вносим некоторые изменения:
Добавляем переменные для анимации.
Добавляем две переменные sprite и player. Но ты заметил, они какие-то странные. Почему в начале стоит слово onready, что за странное значение этой переменной? Сейчас все объясню. Переменные типа onready нужны для взаимодействий с другими объектами на сцене. В данном случае мы подключаем их для воспроизведения анимации и получения спрайта игрока.
Анимация при ходьбе.
На 16-ой строчке мы проигрываем анимацию ходьбы. Однако здесь еще появилась какая-то странная 22 строчка, что она делает? Она зеркально отражает анимацию игрока в зависимости от того, куда он идет. А на 24 строке мы говорим, что если игрок стоит, то проигрывать нужно анимацию idle.
Анимация прыжка.
На 35 строчке мы проигрываем анимацию прыжка, если игрок не на земле. Вот собственно и все изменения в коде.
Заключение
Если ты все правильно делал, то у тебя должен получиться простой платформер. Что делать дальше? Да все что угодно! Улучшай свои навыки в использовании движка, создавай свои собственные игры изучай новые фишки. На этом я вынужден с тобой проститься, надеюсь ты хорошо провел время и научился чему-то новому.