Платформер на Construct 2. Создание персонажа

В сегодняшней статье мы подробно поговорим о персонаже для платформера. Создадим необходимые объекты, разберемся с анимацией персонажа, добавим соответствующие поведения, а также настроим собственное управление в игре.

 

Чтобы лишний раз не повторяться и уменьшить размер статьи, я не буду подробно расписывать элементарные действия, пройденные в прошлых уроках. Если что-то забыли, вы всегда можете вернуться назад.

 

Для более быстрого изучения Construct 2, рекомендую полностью проделать этот урок на своем компьютере. Для этого загрузите небольшой набор графики (273 Кб), который я использовал в уроке.

 

Приступим. Запускаем программу Construct 2 и создаем новый пустой проект.

Перед тем, как создать персонажа, добавим временную поверхность, по которой он будет бегать. Добавляем графический объект Sprite и называем его platform.

Платформер на Construct 2. Создание персонажа (скриншот 1)

В редакторе спрайта выбираем инструмент заливки (Fill) и закрашиваем спрайт любым цветом.

Платформер на Construct 2. Создание персонажа (скриншот 2)

Закрываем редактор. Затем растягиваем спрайт (тянем за любой уголок) на макете, чтобы он был больше похож на дорожку. И перемещаем его в видимую часть экрана, выше горизонтальной пунктирной линии.

Платформер на Construct 2. Создание персонажа (скриншот 3)

Далее превратим эту платформу в твердую поверхность. Добавляем объекту поведение Solid (твердый).

Платформер на Construct 2. Создание персонажа (скриншот 4)

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

 

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

 

Добавляем новый Sprite (графический объект) и называем его player_animation.

Платформер на Construct 2. Создание персонажа (скриншот 5)

В редакторе спрайта открываем изображение персонажа, стоящего на месте (из нашего набора). Для этого нажимаем на кнопку Load an image from a file и находим изображение на компьютере.

Платформер на Construct 2. Создание персонажа (скриншот 6)

Обязательно выполните обрезку изображения (кнопка Crop transparent edges). Это удаление пустого места на изображении, необходимо для оптимизации и быстродействия игры.

Платформер на Construct 2. Создание персонажа (скриншот 7)

Платформер на Construct 2. Создание персонажа (скриншот 8)

Сразу же отцентрируем главную точку изображения. Нажимаем на кнопку Set origin and image points, чтобы открыть список точек. Так как размер нашего изображения составляет 79 на 126 пикселей (это показано внизу редактора), вводим координаты точки 40 (округлим) на 63.

Платформер на Construct 2. Создание персонажа (скриншот 9)

И закрываем редактор спрайта.

 

Добавляем новый Sprite, называем его player. Это будет основа персонажа.

Платформер на Construct 2. Создание персонажа (скриншот 10)

В редакторе изменяем размер спрайта. Нажимаем на кнопку Resize, вводим ширину 79 и высоту 126. Это такой же размер, как у спрайта с анимацией.

Платформер на Construct 2. Создание персонажа (скриншот 11)

Затем с помощью инструмента заливки (Fill), закрашиваем спрайт любым цветом.

Платформер на Construct 2. Создание персонажа (скриншот 12)

Закрываем редактор. Теперь добавляем к спрайту player поведение Platform.

Платформер на Construct 2. Создание персонажа (скриншот 13)

Давайте посмотрим на промежуточный итог. В правом верхнем углу программы нажимаем на кнопку Run layout. Это запуск в браузере открытого на данный момент макета.

Платформер на Construct 2. Создание персонажа (скриншот 14)

Что получилось: мы можем управлять (стрелочками на клавиатуре) только закрашенным прямоугольником, анимация персонажа висит отдельно.

Платформер на Construct 2. Создание персонажа (скриншот 15)

Сейчас давайте привяжем спрайт с анимацией к спрайту основе.

Открываем список событий (Event sheet 1) и добавляем новое событие (ссылка Add event).

Условие: System → Every tick

В условии говорится, выполнять действие каждый тик. Если вдаваться в подробности, в каждой секунде 60 тиков. Говоря простым языком, выполнять постоянно.

Платформер на Construct 2. Создание персонажа (скриншот 16)

Затем добавляем действие (Add action).

Действие: объект player_animation → Set position to another object → в Object выбираем объект player, в Image point вводим 0 → Done

В этом действии спрайт с анимацией устанавливается поверх спрайта основы в главной (нулевой) точке.

Платформер на Construct 2. Создание персонажа (скриншот 17)

Полностью событие звучит так: каждый момент накладывать спрайт с анимацией на спрайт основу.

 

Возвращаемся на макет. Выделяем спрайт player (основа) и в параметре Initial visibility устанавливаем значение Invisible. То есть делаем объект невидимым.

Платформер на Construct 2. Создание персонажа (скриншот 18)

Снова запускаем тестирование игры. И тут мы видим одну проблему, персонаж не касается платформы, он чуть выше. Исправим этот недочет.

Платформер на Construct 2. Создание персонажа (скриншот 19)

Дважды щелкаем по объекту player, чтобы открыть редактор. И выбираем инструмент Set collision polygon (редактирование маски столкновений).

 

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

 

Вокруг объекта появится синяя рамка и красные точки. Выделяем нижнюю левую точку. По координате Y она установлена на 126. Поднимем точку на 2 пикселя, введем 124. Точно также поднимаем на 2 пикселя нижнюю правую точку.

Платформер на Construct 2. Создание персонажа (скриншот 20)

Закрываем редактор и запускаем тестирование. Теперь персонаж передвигается по платформе как следует.

Платформер на Construct 2. Создание персонажа (скриншот 21)

Далее добавим анимации бега и прыжка. Открываем редактор спрайта player_animation.

В окне Animations щелкаем правой кнопкой мыши и выбираем Add animation (добавить анимацию).

Платформер на Construct 2. Создание персонажа (скриншот 22)

Называем анимацию Run (бег). Выделяем ее, затем в окне Animations frames (кадры анимации) щелкаем правой кнопкой мыши и выбираем Import frame From files… (импортировать кадры с компьютера).

Платформер на Construct 2. Создание персонажа (скриншот 23)

И загружаем все кадры анимации бега из нашего набора графики.

Платформер на Construct 2. Создание персонажа (скриншот 24)

Кадры добавлены. Но обратите внимание, что остался пустой нулевой кадр. Выделяем его и удаляем (Delete).

Платформер на Construct 2. Создание персонажа (скриншот 25)

Не забываем выполнять обрезку (кнопка Crop transparent edges) каждого добавленного кадра анимации.

Платформер на Construct 2. Создание персонажа (скриншот 26)

Платформер на Construct 2. Создание персонажа (скриншот 27)

В параметрах анимации Run устанавливаем скорость проигрывания на 10 кадров за секунду и активируем постоянное повторение анимации (Loop).

Платформер на Construct 2. Создание персонажа (скриншот 28)

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

Платформер на Construct 2. Создание персонажа (скриншот 29)

В нашем случае отлично подходит значение 10 кадров в секунду.

 

Теперь добавим анимацию прыжка. Снова щелкаем правой кнопкой мыши в окне Animations и выбираем пункт Add animation. Называем ее Jump (прыжок). Затем загружаем кадры анимации прыжка из нашего набора.

Платформер на Construct 2. Создание персонажа (скриншот 30)

Платформер на Construct 2. Создание персонажа (скриншот 31)

Удаляем пустой нулевой кадр.

Платформер на Construct 2. Создание персонажа (скриншот 32)

Опять же выполняем обрезку каждого кадра анимации.

Платформер на Construct 2. Создание персонажа (скриншот 33)

Скорость анимации прыжка также установим на 10 кадров в секунду. В нашем случае, это оптимальный вариант. А повторение анимации здесь не требуется.

Платформер на Construct 2. Создание персонажа (скриншот 34)

Закрываем редактор спрайта.

 

Далее настроем собственное управление персонажем и назначим анимации на конкретные действия (стоит, бежит, прыгает). Выделяем объект player и в параметрах отключаем стандартное управление (Default controls).

Платформер на Construct 2. Создание персонажа (скриншот 35)

Для создания собственного управления нужно добавить объект Keyboard (клавиатура).

Платформер на Construct 2. Создание персонажа (скриншот 36)

И снова переходим в список событий. Кстати, в прошлых статьях я рассказывал насколько полезно комментировать созданные события. Давайте в этом списке событий также оставлять небольшие комментарии.

 

Выделяем первое событие и нажимаем на клавишу Q. Появится небольшая желтая строка, в которую вводим вот такой комментарий: Привязываем спрайт с анимацией к персонажу.

Платформер на Construct 2. Создание персонажа (скриншот 37)

Идем дальше. Добавляем новое событие (Add event).

Условие: объект Keyboard → Key is down → Key (click to choose) → Нажимаем на клавишу D → Done

В этом условии проверяется, удерживается ли нажатой клавиша D.

 

Добавляем действия (Add action).

Действие 1: объект player → Simulate control → в Control выбираем Right → Done

Действие 2: объект player_animation → Set mirrored → в State выбираем Not mirrored → Done

В первом действии персонаж двигается вправо. Во втором действии у анимации персонажа убирается (если оно было) зеркальное отображение. То есть, чтобы персонаж при движении вправо смотрел в эту же сторону.

 

Оставляем комментарий: Движение персонажа вправо.

Платформер на Construct 2. Создание персонажа (скриншот 39)

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

 

Продолжаем. Добавляем похожее событие (Add event), только для движения влево.

Условие: Keyboard → Key is down → Key (click to choose) → Нажимаем на клавишу A → Done

В этом условии проверяется, удерживается ли нажатой клавиша A.

 

Добавляем действия (Add action).

Действие 1: объект player → Simulate control → в Control выбираем Left → Done

Действие 2: объект player_animation → Set mirrored → в State выбираем Mirrored → Done

По первому действию понятно, персонаж двигается влево. А во втором действии персонаж разворачивается зеркально (от стандартного положения).

 

Оставляем комментарий: Движение персонажа влево.

Платформер на Construct 2. Создание персонажа (скриншот 40)

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

 

Далее добавляем событие (Add event) прыжка.

Условие: Keyboard → On key pressed → Key (click to choose) → Нажимаем на клавишу W → Done

В условии отслеживается одиночное нажатие на клавишу W.

 

Добавляем действие (Add action).

Действие: объект player → Simulate control → в Control выбираем Jump → Done

В этом действии персонаж выполняет одиночный прыжок.

 

Оставляем комментарий: Прыжок персонажа.

Платформер на Construct 2. Создание персонажа (скриншот 41)

Полностью событие звучит так: как только мы нажимаем на клавишу W, выполняется одиночный прыжок.

 

С собственным управлением разобрались. Можно использовать любые клавиши, лишь бы было удобно.

Теперь по анимации персонажа. Новое событие будет состоять из двух условий. Сначала добавляем первое.

Условие 1: объект player → Is moving → Done

В условии проверяется, двигается ли персонаж.

 

Чтобы добавить второе условие в событие, щелкаем правой кнопкой мыши по первому условию и в контекстном меню выбираем пункт Add another condition.

Платформер на Construct 2. Создание персонажа (скриншот 42)

И создаем второе условие.

Условие 2: объект player → Is on floor → Done

В этом условии проверяется, находится ли персонаж на платформе.

 

А действие будет такое:

Действие: объект player_animation → Set animation → в Animation вводим «Run» → Done

В этом действии спрайт начинает проигрывать анимацию бега.

Платформер на Construct 2. Создание персонажа (скриншот 43)

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

 

Добавляем следующее событие (Add event).

Условие: объект player → Is moving → Done

Сейчас в этом условии проверяется, движется ли персонаж. Но нам необходимо обратное условие. Щелкаем правой кнопкой мыши по условию и выбираем Invert.

Платформер на Construct 2. Создание персонажа (скриншот 44)

В условии появится красный крестик. И теперь в нем проверяется, не движется ли персонаж.

 

Затем добавляем действие (Add action).

Действие: объект player_animation → Set animation → в Animation вводим «Default» → Done

В этом действии у объекта player_animation запускается стандартная анимация (где персонаж стоит).

Платформер на Construct 2. Создание персонажа (скриншот 46)

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

 

И добавляем последнее событие (Add event), которое будет отвечать за прыжок персонажа.

Условие: объект player → Is jumping → Done

В этом условии проверяется, находится ли персонаж в прыжке.

 

И добавляем действие (Add action).

Действие: объект player_animation → Set animation → в Animation вводим «Jump» → Done

В этом действии у объекта player_animation запускается анимация прыжка (называется Jump).

 

Оставляем комментарий к трем последним событиям: Анимация персонажа.

Платформер на Construct 2. Создание персонажа (скриншот 47)

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

 

Возвращаемся на макет и запускаем тестирование. Все отлично, персонаж стоит, бегает и прыгает.

Платформер на Construct 2. Создание персонажа (скриншот 48)

Что еще мы можем сделать? Например, поэкспериментировать с параметрами поведения Platform. Вы можете увеличить скорость движения, высоту прыжка, добавить двойной прыжок и прочие.

Платформер на Construct 2. Создание персонажа (скриншот 49)

Обо все параметрах этого поведения я рассказывал в прошлом уроке.

 

И еще один важный момент по персонажу. Обычно в платформерах создаются достаточно большие уровни. И если персонаж выйдет за границу видимой части, то его просто будет не видно. Поэтому к объекту player (персонаж) необходимо добавить поведение Scroll To.

Платформер на Construct 2. Создание персонажа (скриншот 50)

Это камера, которая всегда будет держать персонажа в центре экрана, независимо от его перемещения.

 

На сегодня все. Сохраните проект (FileSave As Project…), чтобы его можно было использовать в следующий уроках. Вопросы по этому уроку оставляйте в комментариях.