20.56M

Похожие презентации:

Виды анимации

Алгоритмика. Мастер-класс

Создание игры на движке Construct 2

Как добавлять спрайты из библиотеки Scratch и загружать их с компьютера

Unity. Создание персонажа. Спрайты, полигоны и коллайдеры

Minecraft в Scratch

Construct 2. Урок # 2

Minecraft Scratch

Разработка игры в жанре Платформер

Программирование на Python. Знакомство с модулем Pygame. Урок 6

М1. У2. Создание персонажа, анимации и управление движением

Цели
и
задачи
Цели:
- Научить добавлять анимации персонажу.
- Познакомить с системой управления движением (включая прыжки).
- Расширить функционал проекта: персонаж будет двигаться по платформам и прыгать.
- Создать опасные препятствия для игрока.
Задачи:
1. Ввести в основы анимации персонажа: как добавить несколько кадров и
переключать их.
2. Научить устанавливать управление движением персонажа с помощью WAD
3. Объяснить, как добавить прыжок с помощью клавиши пробела.
4. Создать опасности, которые будут убивать героя
5. Продемонстрировать, как привязать анимации к действиям персонажа,
например, анимация бега и прыжка.

3.

4.

Анимация персонажа:
первые шаги
Что такое анимация и зачем она нужна?
Анимация делает персонажа живым, добавляя ему движения. Она
создается из последовательности кадров — отдельных изображений,
которые сменяют друг друга, создавая эффект динамики.
В GDevelop каждый набор движений персонажа, например, ходьба,
прыжок или бездействие, оформляется как отдельная анимация. Вы
можете загрузить для каждой анимации серию спрайтов — рисунков
персонажа в разных положениях.
Использование анимации помогает игроку почувствовать связь с
героем и делает игровой процесс более увлекательным. Позже мы
подробно разберем, как настроить и использовать анимации в игре.

5.

Почему анимация
важна в играх?
Движение — это жизнь.
Анимация делает персонажа живым и
помогает передать его эмоции и действия.
Она не только добавляет визуальную
привлекательность, но и помогает игроку
понимать, что происходит в игре: прыжки,
атаки или получение урона.
Без анимации игра кажется статичной, но с
её помощью мир становится динамичным и
увлекательным. В GDevelop вы сможете
создать анимации для любых действий
вашего героя!
так

6.

Как работает
в GDevelop?
анимация
Основы создания движения.
Тип анимации
В GDevelop анимация — это набор кадров,
которые проигрываются по очереди. Для
каждого действия персонажа (ходьба, прыжок,
бездействие) создается отдельная анимация.
Вы задаете частоту смены кадров, чтобы
движение выглядело плавным, и можете легко
переключать анимации в зависимости от
событий в игре, таких как нажатие клавиш или
столкновение с объектом.
GDevelop позволяет оживить вашего персонажа
всего за несколько шагов!
Кадры в
анимации

7.

Типы
анимаций
Idle, Run и Jump анимации.
Каждое движение персонажа имеет свою анимацию, чтобы
сделать его поведение живым:
Idle (Ожидание): Анимация для состояния покоя, когда
персонаж стоит на месте, слегка двигаясь или моргая.
Run (Бег): Показывает активное движение персонажа. Эта
анимация должна соответствовать его скорости, чтобы бег
выглядел натурально.
Jump (Прыжок): Анимация прыжка отображает момент
отрыва от земли и движение в воздухе, добавляя
динамичности.
Это основные анимации для комфортной игры. Однако их может
быть намного больше. Например можно добавить анимацию
приседания или того как персонаж что-то подбирает.

8.

Как работает
в GDevelop?
анимация
Подключение и управление анимациями.
Анимация в GDevelop привязывается к
выполнению особых действий. Например
если нажата определенная кнопка или
кнопки. Так для прыжка достаточно
создать следующее условие: Если кнопка
W нажата, то персонаж проиграет
анимацию “Jump”.
Если нажаты кнопки A и D, то герой будет
проигрывать анимацию “Run”.
И если персонаж не движется, а именно
его скорость равна нулю, то будет
проигрываться анимация “Idle”.

9.

Опасности для
персонажа: Колья
Как создать смертельные ловушки:
Ловушки, такие как колья, добавляют в игру элемент риска и заставляют игроков
быть более внимательными. Они делают игровой процесс увлекательным и
сложным, мотивируя игроков избегать ошибок и прокачивать свои навыки.
Кроме кольев, в играх могут быть и другие опасности:
Мины — взрываются при касании, наносят урон или уничтожают героя.
Лавовые потоки — персонаж теряет здоровье при попадании в лаву.
Ядовитые растения — поражают персонажа токсином, замедляют или
убивают его.
Эти опасности усиливают драматизм игры и делают каждый уровень более
интересным.

10.

Окно
“События”
Давайте подробнее разберем окно события.
Условие
Как мы уже знаем, событие у нас делится
на условие и действие. Чтобы легче было
понимать как составлять команду мы
должны проговаривать “При каком или
каких условиях будет происходить
действие или действия”.
Как условий, так и действий может быть
несколько штук. То есть при двух или
более условиях может совершаться
действие. Или при одном условии может
совершаться два и более действий.
Комбинируя условия и действия, вы
создаете интересную и сложную механику
для своей игры!
Действие
Условие
Условие
Действие
Действие
Условие
Действие
Условие
Действие
Условие
Действие

11.

Условия
и
события
Сами условия и действия разделены на две части.
Зайдя в условия, мы увидим, что у нас есть
возможность создать условие для
определенного объекта. Выбрав объект,
мы можем назначить для него условие,
например, если персонаж столкнулся с
чем-то. Затем мы также можем войти в
действия, выбрать нашего
персонажа(Объект) и назначить для него
действие “Удалить объект”.
Но помимо назначения условий и
действий для объекта у нас есть вкладка
“Другие условия\Действия”. В нем мы
выбираем не объекты, а функции,
например: звуки, клавиши, сцены, время и
так далее.
Объекты
Другие условия

12.

Уделите клавиатурному тренажеру 5 минут
ССЫЛКА

13.

14.

Создание
персонажа
Персонаж и анимации.
Анимации увеличивают время создания
персонажа, так как помимо самого создания,
нужно учитывать дизайн персонажа, чтобы
легко было создавать для него разные
анимации.
Мы нарисуем простого персонажа ниндзю.
Создадим анимацию спокойствия, бега и
прыжка.

15.

Рисование
ниндзя
Создадим пока всего один фрейм с персонажем:
1. Создайте новый объект - спрайт.
2. Измените настройки холста, поставив
размер 64 на 64, затем нажмите “Resize” .
3. Нарисуйте персонажа используя
инструменты Piskel. Цвета костюма ниндзя
вы можете выбрать сами, однако форму и
детали делайте точно как на картинке 3. Мы
его позже сохраним и будем использовать
как основу для анимаций.
1
3
2

16.

Сохранение
персонажа
Сохраним нашего героя:
Перейдите в меню экспорта, выберите
сохранение в формате PNG и нажмите
Download, чтобы скачать изображение на
компьютер.
Не забудьте нажать “Save”, когда скачаете
картинку.
Экспорт
Download
PNG

17.

Создание
анимации
Idle анимация:
Перейдите Обратно в piskel.
1. Дублируйте кадр три раз, нажав на
иконку двух листов
.
2. Перейдите на второй кадр и
выберите инструмент “Выделение”.
3. Выделите половину персонажа,
зажмите клавишу “Shift” и левой
клавишей мыши опустите выделение
ниже всего на один пиксель и
кликните в пустое место. На третьем
кадре так же выделите половину
персонажа и опустите уже на два
пикселя.
1
2
3

18.

Сохранение
анимации
Давайте сохраним и назовем анимацию:
Нажмите “Save” и перейдите в меню
анимаций.
1
1. Найдите свою анимацию. Она
должна быть под номером 0.
Напишите правее слово “Idle”
(Спокойствие).
2. Если мы проиграем анимацию, то
персонаж будет очень быстро
двигать телом вниз и вверх, чтобы
изменить скорость анимации,
изменим значение на 0.15. Так же,
чтобы анимация воспроизводилась
бесконечно поставьте галочку
напротив пункта “Цикл”.
2

19.

Добавление
спрайта
Загрузим нашу болванку:
Вставим нашу болванку, которую мы
сохраняли на компьютер.
1. Создайте новую анимацию, нажав на
кнопку “Добавить анимацию”.
2. Сразу назовите её “Run”.
3. нажмите на кнопку “Добавить
спрайт” и найдите болванку на
компьютере.
4. Перейдите в Piskel.
1
2
3
4

20.

Создание
анимации
Run анимация:
1. Дублируйте кадр, чтобы их в общей
сложности стало шесть штук.
2. Перейдите на второй кадр, возьмите
инструмент выделения и выделите
сначала одну ногу и передвиньте ее,
затем вторую, чтобы было ощущение,
что они приближаются. На третьем
кадре поставьте ноги вместе. На
четвертом поменяйте их местами,
чтобы они стояли все еще вместе. На
пятом кадре отдалите их друг от друга и
в шестом кадре просто поменяйте ноги
местами.
1
2

21.

Создание
анимации
Run анимация:
Для улучшения анимации можно добавить эффект
поднятия и опускания.
Для этого достаточно на 2 и 5 кадре опустить половину
персонажа вниз на один пиксель, как мы делали в
анимации Idle.
Сохраните анимацию, поставьте галочку напротив
пункта “Цикл”. Скорость установите 0.15.

22.

Добавление
спрайта
Снова загрузим нашу болванку, но уже для прыжка:
Вставим нашу болванку, которую мы
сохраняли на компьютер.
1. Создайте новую анимацию, нажав на
кнопку “Добавить анимацию”.
2. Сразу назовите её “Jump”.
3. нажмите на кнопку “Добавить
спрайт” и найдите болванку на
компьютере.
4. Перейдите в Piskel.
1
2
3
4

23.

Создание
анимации
Jump анимация:
Анимация прыжка будет состоять всего
из одного кадра.
Для нее достаточно переставить
правую ногу ближе к середине и
сделать ее чуть короче.

24.

Поведения
персонажа
для
Добавьте персонажу два поведения:
Первое поведение “Персонаж платформера”.
Второе поведение
“PlatformerCharacterAnimator”.
И нажмите кнопку “Применить”.
С помощью поведения
“PlatformerCharacterAnimator” можно быстро
и удобно применить все анимации, которые
мы создавали. Главное, чтобы названия из
поведения были одинаковыми с названиями
из меню анимаций.

25.

Программирование
движения на WAD
для
Большинство игр созданы под два управления:
Первое управление происходит у нас на
стрелки. Второе при помощи клавиш W, A, D.
Для этого перейдите в окно “События”

26.

Программирование
движения на WAD
для
Программирование создается при помощи событий,
условий и действий.
Событие содержит в себе условие и
действие. Сейчас мы создадим простой
код на возможность симуляции движения
при помощи W, A, D.
Звучать код будет следующим образом:
“Если клавиша “a” нажата, то будет
иммитирироваться нажатие стрелки “left”.
Вот как будет выглядеть код для
движения налево:
Условие
Действие

27.

Программирование
движения на WAD
для
Создание для оставшихся клавиш W и D:
Дублируйте первую команду. Для этого необходимо кликнуть на прямоугольник слева от команды,
таким образом она выделится.
Затем нажмите комбинацию “Ctrl + C”, чтобы скопировать всю команду. После чего нажмите ”Ctrl +
V“два раза, чтобы вставить две новые команды.
Затем в одной команде поменяйте букву на d, а в третьей на w. Затем в действиях выберите для
клавиши d имитацию движения направо, а для w выберите имитацию прыжка.

28.

Рисование
колышка
Перейдем к созданию объекта, который может
уничтожить персонажа.
Создайте обычный спрайт и
назовите его “Spear”.
Создайте холст размером 15 на 15
пикселей и нажмите кнопку
“Resize”.
Нарисуйте колышек по примеру
из картинки:

29.

Программирование
колышка
Перейдите в окно “События” и напишите код.
Код звучит так:
Условие
Если Player находится в столкновении с Spear,
то персонаж удалится.
Для реализации кода создайте событие,
перейдите в условие и выберите персонажа.
Найдите в меню справа команду
“Столкновения”, выберите колышко и
нажмите “Ок”.
В действиях выберите персонажа и в меню
справа найдите “Удалить объект”, нажмите
“Ок”.
Действие

30.

Создание
уровня
Теперь с новыми анимациями и опасностями наш уровень
можно сделать куда интереснее и привлекательнее.
Потратьте оставшееся время на создание уровня и не
забудьте дать его попробовать другим ученикам.
Для удобного
расположения кольев
выключите сетку. Так
колышки не будут
прилипать.
Сохраните свою работу,
нажав на значок
дискеты в левом
верхнем углу.