Платформер на Construct 2. Создание уровня

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

 

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

 

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

 

Приступим. Запускаем программу и открываем проект (FileOpen…) из прошлого урока.

В первую очередь слегка настроим проект. Выделяем его в окне Projects. Затем в параметрах устанавливаем размер видимой части (Windows Size) игры 1280 на 720 пикселей. Это одно из самых популярных разрешений экранов. Хотя можно использовать любое другое.

 

Ниже, в режиме полноэкранного масштабирования (Fullscreen in browser) выбираем Scale outer. При таком масштабировании игра подстраивается под ширину любого экрана за счет увеличения видимой части. При этом не будет никаких черных полос по краям экрана. Для платформера, это оптимальный вариант.

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

При желании вы можете сразу настроить название, описание и другие данные этой игры.

 

В прошлом уроке мы использовали большой прямоугольник (спрайт platform), как временную платформу для тестирования персонажа. Больше он нам не нужен. В дереве проекта щелкаем по нему правой кнопкой мыши и в контекстном меню выбираем пункт Delete. И подтверждаем удаление.

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

Теперь в дереве проекта выделяем макет Layout 1, из него мы сделаем первый уровень игры. В параметрах называем макет — 1, а ниже вводим размеры. Уровень у нас будет небольшим, допустим 3500 на 1500 пикселей.

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

Далее переходим на вкладку Layers, чтобы увидеть список слоев данного макета. Пока здесь всего один слой, выделяем его и называем background (фон уровня).

 

В параметре Background color можно сразу выбрать цвет фона. Но сплошной цвет будет смотреться не очень хорошо. В идеале использовать специальный фон, соответствующий стилю игры (например, картинка с деревьями, горами или подобное). Мы же пока будем использовать небольшой спрайт с небесным градиентом.

 

Ниже в параметре Parallax вводим значение 0 по X и 0 по Y. Это необходимо, чтобы зафиксировать слой на экране. То есть куда бы не переместилась камера за персонажем, этот слой будет оставаться по центру экрана.

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

Далее в окне Layers нажимаем на кнопку в виде плюсика (Add layer at top), чтобы добавить новый слой. Называем его objects. На этом слое мы будем размещать игровые объекты: персонаж, платформы, оформление.

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

Кстати, сейчас персонаж находится на фоновом слое. Выделяем оба спрайта (основу и анимацию) и в окне параметров перемещаем их на слой objects.

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

Снова выбираем слой background. Затем добавляем новый Sprite, который называем background_1 (фон для первого уровня).

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

В редакторе спрайта загружаем файл background_1.png (из нашего набора графики). На макете растягиваем спрайт и переносим в видимую часть экрана. Напоминаю, что она выделяется пунктирными линиями.

 

Фоновое изображение должно быть немного больше видимой части игры! Это необходимо для выбранного режима масштабирования. Когда видимая часть будет расширяться под определенный экран, это дополнительное пространство должно заполняться фоном.

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

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

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

Теперь в окне Layers выделяем слой objects. Затем добавляем новый спрайт и называем его platform_1.

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

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

 

В нашем наборе графике в папке основной платформы присутствует 13 фрагментов. Загружаем все, кроме первого фрагмента. Чуть позже вы поймете, почему без него.

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

Напоминаю, что при таком способе загрузки остается пустой нулевой кадр. Его нужно удалить.

 

Чтобы мы могли работать с каждым фрагментом отдельно, для анимации Default устанавливаем нулевую скорость (параметр Speed) проигрывания.

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

Закрываем редактор. Затем добавляем к спрайту platform_1 два поведения: Solid и Jump-thru.

Это два похожих поведения, но оба пригодятся.

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

И пока отключаем добавленные поведения в параметрах спрайта platform_1.

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

Позже где это будет нужно, мы будем включать необходимое поведение.

 

Перед тем, как начать создавать уровень, давайте где-нибудь за пределами макета подготовим все 12 фрагментов платформы. Зажав клавишу Ctrl, щелкаем мышкой по первому фрагменту и перетаскиваем его на свободное место. Этим действием мы создаем копию фрагмента. В параметрах этой копии устанавливаем номер кадра на единицу больше.

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

Таким образом создаем все 12 фрагментов. Так как нумерация кадров анимации начинается с нуля, то последний фрагмент будет с номером 11.

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

Еще один момент, упрощающий построение уровня. Открываем меню View и устанавливаем галочки у пунктов Snap to grid (привязать объекты к сетке) и Show grid (показывать сетку).

 

Размер наших фрагментов платформы составляет 100 на 100 пикселей. Мы делаем сетку в два раза меньше — 50 на 50 пикселей. Обратите внимание, что размер сетки не всегда устанавливается с первого раза. Поэтому проверьте введенные данные.

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

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

Я создал начальную платформу в левом нижнем углу. Платформы, которые соприкасаются с границами макета, также должны выходить за его пределы (как и фон). Когда каркас платформы готов, выделяем его фрагменты и активируем поведение Solid. Они станут твердой поверхностью.

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

Теперь добавляем объект Tiled Background и называем его platform_1_1 (дополнение к первой платформе).

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

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

 

Что это за объект такой? Tiled Background — это так называемая тайловая графика. С помощью нее можно из небольших фрагментов делать большие. Это не просто растягивание изображения, а постоянное дублирование, поэтому качество тут не страдает.

 

Подгоняем этот фрагмент под начальную платформу.

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

Затем перетаскиваем основу персонажа к начальной платформе. Спрайт с анимацией персонажа можно разместить за пределами макета, все равно он автоматически наложится на основу.

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

Сейчас давайте запустим тестирование проекта, посмотрим промежуточный итог.

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

Отлично, продолжаем строить платформы. Только не забывайте активировать поведение Solid.

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

Теперь о поведении Jump-thru у спрайта platform_1. С помощью него можно создавать платформы, так сказать, на заднем плане. Персонаж может проходить мимо таких платформами, а также запрыгивать на них.

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

Важный момент. Персонаж и платформы находятся на одном слое — objects. Так как мы добавили платформу позже персонажа, то эта платформа находится выше. Если сейчас запустить тестирование игры, то можно увидеть, что персонаж проходит за этой платформой, а не перед ней.

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

Чтобы это исправить, необходимо щелкнуть правой кнопкой мыши по спрайту с анимацией персонажа (player_animation) и в контекстном меню выбрать Z Order Send to top of layer (переместить вверх слоя).

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

Получится так:

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

Давайте еще на уровень добавим дополнительную платформу. Создаем новый Sprite и называем его platform_2. В редакторе импортируем три фрагмента дополнительной платформы, затем удаляем пустой кадр, устанавливаем нулевую скорость проигрывания анимации. Закрываем редактор и добавляем к спрайту только поведение Jump-thru. И за пределами макета создаем заготовку из трех разных фрагментов.

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

Я не стал расписывать все действия подробно, так как мы выполняли то же со спрайтом platform_1.

 

Немного повозившись у меня получился такой уровень. Красными линиями я показал этапы его прохождения.

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

Если заготовки фрагментов, которые находятся над макетом, вам больше не нужны, то можно их удалить. Только не удалите их из дерева проекта! Уберите их лишь с рабочего пространства.

 

Далее мы займемся оформлением уровня, добавим деревья и кусты. Сетка здесь не понадобится, потому что ее удобно использовать для объектов с одинаковым размером. А деревья и кусты у нас разные. Так что открываем меню View и снимаем галочки у пунктов Snap to grid и Show grid.

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

Добавляем новый спрайт и называем его plants_1 (растения для первого уровня). В редакторе импортируем все растения из нашего набора. Затем удаляем пустой нулевой кадр и устанавливаем нулевую скорость проигрывания анимации.

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

Закрываем редактор и начинаем украшать уровень. Создавайте копии объекта, меняйте номер кадра и расставляйте различные растения по уровню.

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

Когда с оформлением уровня закончили, снова щелкаем правой кнопкой мыши по спрайту player_animation и перемещаем его в верх слоя (Z Order Send to top of layer). Это нужно, чтобы персонаж проходил перед растениями, а не за ними.

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

Еще по оформлению. Давайте добавим воду между островами. Добавляем новый Sprite и называем его water_1 (вода, часть первая). В редакторе спрайта загружаем файл water_1.png из нашего набора. Затем закрываем редактор.

 

И сразу добавим вторую часть воды. Создаем новый Tiled Background, называем его water_2. В редакторе загружаем файл water_2.png из нашего набора. Затем закрываем редактор.

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

Снова отображаем сетку на макете (активируем пункты Snap to grid и Show grid в меню View). И расставляем фрагменты между островами. Верхняя часть воды пускай сильнее наезжает на острова.

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

Создадим эффект движения волн. Выделяем спрайт water_1 и добавляем ему поведение Sine. Параметры этого поведения оставим стандартными. Хотя тут можно поэкспериментировать.

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

Так как мы добавили волны в самом конце, то на слою objects они находится выше всего. Можно было бы опустить их вниз слоя, но тогда при падении, персонаж будет пролетать перед водой. А должен создаваться эффект, что персонаж тонет в воде, как бы исчезает на заднем плане. Поэтому мы не воду перемещаем вниз слоя, а боковые фрагменты платформы перемещаем вверх слоя (Z Order Send to top of layer).

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

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

Платформер на Construct 2. Создание уровня (скриншот 38)

Точно также добавляем воду с другой стороны острова.

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

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

 

Затем на макете размещаем таблички. И сразу переместите их вниз слоя (Z Order Send to bottom of layer).

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

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

С оформлением мы закончили.

 

Что еще нам надо доработать? Обязательно надо запретить персонажу выходить за границы макета. Это можно сделать двумя способами:

  1. Добавить к персонажу поведение Bound To Layout.
  2. Добавить невидимый спрайт с поведением Solid (твердый) на границы макета.

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

 

Поэтому воспользуемся вторым способом. Добавляем новый Tiled Background и называем его border (граница, рамка). В редакторе нажимаем на кнопку Resize (изменить размер) и вводим размер 16 на 16 пикселей. Затем закрашиваем изображение черным цветом и закрываем редактор.

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

К объекту border добавляем поведение Solid. А в параметрах (пункт Initial visibility) делаем его невидимым.

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

Уменьшаем рамку по ширине и увеличиваем по высоте. После чего выставляем рамку по левой границе макета.

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

Затем создаем копию рамки и выставляем ее по правой стороне макета.

Платформер на Construct 2. Создание уровня (скриншот 45)

Первый уровень готов. Вот, что получилось:

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

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