Платформер на Construct 2. Создание интерфейса игры

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

 

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

 

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

 

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

Первым делом давайте переименуем список событий. Его мы будем использовать только для уровней, поэтому называем его levels. Затем в этом списке событий создаем группу Player и перемещаем в нее все события, касающиеся персонажа. Сворачиваем группу, чтобы ничего нам не мешало.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 1)

Теперь добавим бонусы на уровень. На слое objects создаем новый Sprite, называем его bonus.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 2)

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

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 3)

Далее создаем новый слой макета, называем его gui. Это будет наш пользовательский интерфейс (информация, кнопки, итоги уровня). В параметре Parallax вводим значение 0 по X и 0 по Y. То есть фиксируем слой по центру экрана, чтобы он всегда был виден (независимо от перемещений персонажа).

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 4)

Далее на слою gui создаем объект Text, называем его score (счет). Это объект, предназначенный для отображения какого-либо текста. Мы в нем будем выводить количество собранных бонусов.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 5)

Отмечу, что объект Text мы используем только для ознакомления. При создании серьезной игры, лучше использовать объект Sprite Font. Он также служит для вывода текста. Только еще позволяет использовать красивые шрифты и менее нагружает систему (повышает производительность). Разбираться, как работать со Sprite Font мы будем позже, в следующих уроках.

 

Сразу же настраиваем объект score. Сперва перемещаем его в левый верхний угол (30 на 90). Затем увеличиваем размер (200 на 50) текстового окна, чтобы поместился более крупный шрифт. В параметре Text вводим начальное значение — 0. В параметре Font устанавливаем размер шрифта 26 и ниже выбираем белый цвет текста.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 6)

Для подсчета количества собранных на уровне бонусов, необходимо создать переменную.

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

 

Создавать ее для основы персонажа (спрайт player) не стоит, так как при поражении он уничтожается. Если мы захотим перезаписывать значение переменной в какой-нибудь общий счет, то мы не успеем это сделать, данные уничтожатся. Лучше переменную создать для объекта player_animation (спрайт с анимацией персонажа). Называем переменную bonus, тип — числовая, начальное значение — 0.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 7)

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

Условие: объект player → On collision with another object → в Object выбираем объект bonus → Done

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

 

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

Действие 1: объект bonus → Destroy

Действие 2: объект player_animation → Add to → в Instance variable выбираем переменную bonus, в Value вводим 1 → Done

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

 

Оставляем комментарий: Сбор бонусов.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 8)

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

 

Теперь отобразим этот подсчет на экране. Создаем новое событие (ссылка Add event).

Условие: System → Every X seconds → в Interval вводим 0.5 → Done

Это условие выполняет действие каждые пол секунды.

 

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

Действие: объект score → Set text → в Text вводим player_animation.bonus (без кавычек) → Done

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

 

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 9)

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

 

Почему именно каждые пол секунды? Для высокой производительности игры желательно, как можно реже выполнять повторяющиеся действия. Именно поэтому не рекомендую использовать Every tick (каждый тик). Но в тоже время нельзя использовать слишком большие задержки. Будет не очень красиво, если вы получили бонус, а информация обновляется только через несколько секунд. Так что я использовал оптимальное значение — каждые пол секунды (не постоянно, но и не заметно для игрока).

 

Продолжаем. На слое gui создаем новый Sprite, называем его life (жизнь).

Платформер на Construct 2. Пользовательский интерфейс (скриншот 11)

В редакторе спрайта загружаем изображение сердечка из нашего набора.

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 12)

Когда персонаж будет терять жизни, сердечки должны исчезать по одному, а не все сразу. Поэтому без переменной тут не обойтись. Добавляем переменную к спрайту life (сердечкам). Называем ее number (номер), выбираем числовой тип и вводим начальное значение 1.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 13)

И теперь нумеруем каждое сердечко от 1 до 3 (слева на право).

Платформер на Construct 2. Пользовательский интерфейс (скриншот 14)

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

Называем переменную lives (жизни), выбираем числовой тип и устанавливаем начальное значение 3.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 15)

Что будет отнимать жизни у персонажа? Давайте так. Падение в воду будет отнимать сразу три жизни. А ядовитые грибы будут отнимать по одной жизни.

 

На слое objects добавляем новый Sprite, называем его mushroom (гриб).

Платформер на Construct 2. Пользовательский интерфейс (скриншот 16)

В редакторе спрайта загружаем изображение мухомора из нашего набора графики.

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 17)

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

Условие: объект player → On collision with another object → в Object выбираем объект mushroom → Done

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

 

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

Действие 1: объект mushroom → Destroy

Действие 2: объект player → Subtract from → в Instance variable выбираем переменную lives, в Value вводим 1 → Done

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

 

Оставляем комментарий: Ядовитые грибы.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 18)

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

 

Далее настроим удаление сердечек при потере жизней. Добавляем событие (ссылка Add event), состоящее из двух условий:

Условие 1: объект player → Compare instance variable → в Instance variable выбираем переменную lives, в Comparison выбираем Less than (меньше), в Value вводим 3 → Done

Условие 2: объект life → Compare instance variable → в Instance variable выбираем переменную number, в Comparison выбираем Equal to (равно), в Value вводим 3 → Done

В первом условии проверяется, меньше ли трех жизней осталось у персонажа. Во втором условии проверяется, имеет ли сердечко переменную со значением три.

 

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

Действие: объект life → Destroy

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

 

Оставляем комментарий: Скрываем сердечки.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 19)

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

 

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 20)

Давайте проверим, что получилось. Переходим на макет и запускаем тестирование.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 21)

Отлично. Только есть один недостаток. Когда персонаж теряет жизнь, внешне это никак не проявляется. Сделаем, чтобы персонаж мелькал. Выделяем спрайт player_animation и добавляем ему поведение Fade.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 22)

Сразу же настроим это поведение. Отключаем запуск при старте уровня (параметр Active at start). В параметре Fade in time вводим единицу. То есть объект у нас будет исчезать и появляться за одну секунду. В параметрах Wait time и Fade out time вводим — 0. Это дополнительные параметры, связанные с исчезновением объекта. Нам они не нужны. И обязательно отключаем (параметр Destroy) уничтожение объекта при исчезновении.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 23)

Переходим в список событий. И в событие с ядовитыми грибами добавляем третье действие (Add action).

Действие 3: объект player_animation → Restart fade

В этом действии перезапускается поведение Fade. Персонаж начинает мелькать.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 24)

Запускаем тестирование и смотрим результат.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 25)

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 26)

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

 

Когда анимация добавлена, переходим в список событий. И добавляем новое событие (ссылка Add event).

Условие 1: объект player → Compare instance variable → в Instance variable выбираем переменную lives, в Comparison выбираем Equal to (равно), в Value вводим 0 → Done

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

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

 

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

 

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

Действие 1: объект System → Wait → в Seconds вводим 0.1 → Done

Действие: объект player → Destroy

Действие 3: объект player_animation → Set animation → в Animation вводим «Dead» (с кавычками), в From выбираем beginning → Done

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

 

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 27)

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

 

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

Условие: объект player → Is outside layout

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

 

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

Действие 1: объект System → Wait → в Seconds вводим 0.1 → Done

Действие 2: объект player → Set value → в Instance variable выбираем переменную lives, в Value вводим 0 → Done

Действие 3: объект player → Destroy

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

 

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 28)

Снова запускаем тестирование игры и проверяем.

 

Хорошо, теперь добавим возможность поставить игру на паузу.

Создаем новый Sprite на слое gui, называем его button_pause (кнопка паузы).

Платформер на Construct 2. Пользовательский интерфейс (скриншот 29)

В редакторе спрайта загружаем изображение кнопки из нашего набора.

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 30)

Добавляем новый Sprite на слое gui, называем его scoreboard.

Это будет небольшое табло, на котором будут выводится дополнительные кнопки и результаты уровня.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 31)

В редакторе спрайта загружаем соответствующее изображение из нашего набора.

Размещаем табло в центре видимой части игры. Найти центральную точку достаточно просто, нужно вдвое разделить стороны видимой части. То есть, если видимая часть игры 1280 на 720 пикселей, то центральная точка 640 на 360 пикселей. Также делаем табло изначально невидимым. В параметре Initial visibility выбираем Invisible.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 32)

Добавляем новый Sprite на слое gui, называем его buttons_menu.

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 33)

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 34)

Затем расставляем три кнопки поверх информационного табло. У первой кнопки номер кадра — 0. У второй кнопки номер кадра — 1. У третьей кнопки номер кадра — 2. И все три кнопки делаем невидимыми.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 35)

Для того, чтобы нажимать на кнопки в игре, нам необходима поддержка компьютерной мыши. Можно добавить объект Mouse, который полностью поддерживает мышь (левая и правая кнопки, колесико, положение курсора). Но в нашем случае полная поддержка не требуется, необходима обработка только левой кнопки мыши. Поэтому я предпочитая использовать объект Touch. Он предназначен для сенсорных устройств, но также работает и с мышкой.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 36)

И еще по оформлению. Давайте добавим затемнение экрана, когда игра стоит на паузе. Создаем новый слой, называем его blackout (затемнение). Перемещаем этот слой ниже слоя gui.

 

Затем закрашиваем слой черным цветом (Background color). В параметре Transparent отключаем прозрачность слоя. В параметре Opacity вводим 0, чтобы изначально не видеть слой. И делаем слой глобальным, чтобы использовать его на других уровнях.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 37)

Для удобства объединим табло с дополнительными кнопками.

В окне Projects щелкаем правой кнопкой мыши по папке Families и выбираем пункт Add family (добавить семью).

 

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 38)

В появившемся окне в левой части находим объект buttons_menu и нажимаем на кнопку Add.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 39)

Объект перенесется в правую часть окна. Точно также добавляем объект scoreboard. После чего закрываем это окно, нажав на кнопку ОК. Созданную семью называем family_buttons.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 40)

Снова отправляемся в список событий. И добавляем новое событие (ссылка Add event).

Условие 1: объект Touch → On touched object → в Object выбираем объект button_pause → Done

Условие 2: объект button_pause → Is visible

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

 

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

Действие 1: объект System → Set time scale → в Time scale вводим 0 → Done

Действие 2: объект System → Set layer opacity → в Layer вводим «blackout» (в кавычках), в Opacity вводим 85 → Done

Действие 3: объект button_pause → Set visible → в Visibility выбираем Invisible → Done

Действие 4: объект family_buttons → Set visible → в Visibility выбираем Visible → Done

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

 

Оставляем комментарий: Пауза в игре.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 41)

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

 

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

Условие 1: объект Touch → On touched object → в Object выбираем объект button_menu → Done

Условие 2: объект button_menu → Compare frame → в Comparison выбираем Equal to (равно), в Number вводим 0 → Done

Условие 3: объект button_menu → Is visible

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

 

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

 

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

Действие 1: объект System → Set time scale → в Time scale вводим 1.0 → Done

Действие 2: объект System → Set layer opacity → в Layer вводим «blackout» (в кавычках), в Opacity вводим 0 → Done

Действие 3: объект button_pause → Set visible → в Visibility выбираем Visible → Done

Действие 4: объект family_buttons → Set visible → в Visibility выбираем Invisible → Done

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

 

Оставляем комментарий: Продолжить игру.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 42)

Проверим, что у нас получилось. Запускаем тестирование.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 43)

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

 

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

Условие 1: объект Touch → On touched object → в Object выбираем объект button_menu → Done

Условие 2: объект button_menu → Compare frame → в Comparison выбираем Equal to (равно), в Number вводим 1 → Done

Условие 3: объект button_menu → Is visible

Условия такие же, как в предыдущем событии. Только уже проверяется кнопка с номером кадра 1.

 

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

Действие 1: объект System → Restart layout

Действие 2: объект System → Set layer opacity → в Layer вводим «blackout» (в кавычках), в Opacity вводим 0 → Done

Действие 3: объект System → Set time scale → в Time scale вводим 1.0 → Done

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

 

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 44)

Проверяем.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 45)

Третья кнопка предназначена для выхода в список уровней. Так как мы его еще не создали, пока добавим пустой макет и будем выходить на него.

 

В окне Project щелкаем правой кнопкой мыши по папке Layouts и выбираем пункт Add layout (добавить макет). Появится окно, в котором будет предложено создать макет со списком событий или без него. Выбираем первый вариант, в следующих уроках пригодится.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 46)

Переименовываем созданный макет и список событий — list of levels.

 

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

Условие 1: объект Touch → On touched object → в Object выбираем объект button_menu → Done

Условие 2: объект button_menu → Compare frame → в Comparison выбираем Equal to (равно), в Number вводим 2 → Done

Условие 3: объект button_menu → Is visible

Опять же, условия те же самые. Но здесь уже проверяется кнопка с номером кадра 2.

 

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

Действие: объект System → Go to layout → в Layout выбираем макет list of levels → Done

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

 

Оставляем комментарий: Выход в список уровней.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 47)

Тестируем.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 48)

Последняя на сегодня задача — вывод итогов уровня.

На слое gui добавляем новый текстовый объект, называем его result (результат).

Платформер на Construct 2. Пользовательский интерфейс (скриншот 49)

Размешаем его по центру видимой части экрана.

Устанавливаем следующие параметры объекта: текст — результат уровня, изначально невидимый, размер текста — 28, цвет текста — синий, горизонтальное выравнивание по центру, вертикальное выравнивание по центру, главная точка по центру.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 50)

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

Условие: объект player → On destroyed

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

 

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

Действие 1: объект System → Wait → в Seconds вводим 1.5 → Done

Действие 2: объект System → Set layer opacity → в Layer вводим «blackout» (в кавычках), в Opacity вводим 85 → Done

Действие 3: объект button_pause → Set visible → в Visibility выбираем Invisible → Done

Действие 4: объект scoreboard → Set visible → в Visibility выбираем Visible → Done

Действие 5: объект result → Set text → в Text вводим «Уровень провален!» (в кавычках) → Done

Действие 6: объект result → Set visible → в Visibility выбираем Visible → Done

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

 

Оставляем комментарий: Итоги уровня — поражение.

 

Но мы не показали ни одной кнопки. Получается, что с уровня не выйти и уровень не перезапустить. Исправляемся. К основному событию добавляем под-событие (в контекстном меню выбираем Add sub-event).

Под-условие 1: объект button_menu → Compare frame → в Comparison выбираем Equal to (равно), в Number вводим 1 → Done

В этом под-условии проверяется, имеет ли эта кнопка кадр анимации с номером 1 (кнопка перезапуска).

 

Добавляем действия к этому под-условию (Add action).

Действие 1: объект button_menu → Set position → в X вводим 570, в Y вводим 460 → Done

Действие 2: объект button_menu → Set visible → в Visibility выбираем Visible → Done

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

 

Добавляем еще одно под-событие (в контекстном меню выбираем Add sub-event).

Под-условие 2: объект button_menu → Compare frame → в Comparison выбираем Equal to (равно), в Number вводим 2 → Done

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

 

Добавляем действия к этому под-условию (Add action).

Действие 1: объект button_menu → Set position → в X вводим 710, в Y вводим 460 → Done

Действие 2: объект button_menu → Set visible → в Visibility выбираем Visible → Done

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 51)

Полностью событие звучит так: когда персонаж уничтожен (закончились жизни), через 1.5 секунды появляется затемнение, кнопка паузы становится невидимой, появляется табло и текст о поражении. Затем выполняются под-события: кнопки (перезапуска и выхода) сдвигаются и становятся видимыми.

 

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

 

Проверяем.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 52)

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

 

Добавляем новое событие (ссылка Add event).

Условие 1: объект player → On collision with another object → в Object выбираем объект sign → Done

Условие 2: объект sign → Compare frame → в Comparison выбираем Equal to (равно), в Number вводим 1 → Done

В первом условии проверяется, касается ли персонаж таблички. Во втором условии проверяется имеет ли эта табличка номер кадра 1 (именно финальная табличка).

 

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

Действие 1: объект System → Wait → в Seconds вводим 1.0 → Done

Действие 2: объект System → Set layer opacity → в Layer вводим «blackout» (в кавычках), в Opacity вводим 85 → Done

Действие 3: объект button_pause → Set visible → в Visibility выбираем Invisible → Done

Действие 4: объект scoreboard → Set visible → в Visibility выбираем Visible → Done

Действие 5: объект result → Set text → в Text вводим «Уровень пройден!» (в кавычках) → Done

Действие 6: объект result → Set visible → в Visibility выбираем Visible → Done

Действие 7: объект player → Set ignoring input → в Input выбираем Start ignoring → Done

Здесь мы выполняем почти то же самое. Только в первом действии устанавливаем задержку в одну секунду. В пятом действии сообщаем об успешном прохождении уровня. А в седьмом действии отключаем управление персонажем с клавиатуры.

 

И отобразим кнопку для выхода с помощью под-события (Add sub-event)

Под-условие: объект button_menu → Compare frame → в Comparison выбираем Equal to (равно), в Number вводим 2 → Done

 

Добавляем действия к этому под-условию (Add action).

Действие 1: объект button_menu → Set position → в X вводим 640, в Y вводим 460 → Done

Действие 2: объект button_menu → Set visible → в Visibility выбираем Visible → Done

В первом действии переносим кнопку немного ниже центра. Во втором делаем кнопку видимой.

 

И оставляем комментарий ко всему событию: Итоги уровня — победа.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 53)

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

 

Снова тестируем.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 54)

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

Платформер на Construct 2. Пользовательский интерфейс (скриншот 55)

И еще один важный момент. Когда мы выходим с уровня, все объекты возвращаются к исходному состоянию. Но, к сожалению, сюда не относится время и прозрачность слоев.

 

Приведу пример. Мы включили паузу в игре и вышли в список уровней. Если мы снова зайдем на уровень, время будет на паузе и будет видно затемнение. Чтобы этого не было, нужно добавить еще одно событие (ссылка Add event).

Условие: объект System → On start of layout

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

 

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

Действие 1: объект System → Set time scale → в Time scale вводим 1.0 → Done

Действие 2: объект System → Set layer opacity → в Layer вводим «blackout» (в кавычках), в Opacity вводим 0 → Done

В первом действии устанавливаем стандартное течение времени. Во втором убираем (делаем прозрачным) слой затемнения.

 

И оставляем комментарий: Сброс времени и затемнения при старте уровня.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 56)

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

 

И еще раз проверим итог нашей работы.

Платформер на Construct 2. Пользовательский интерфейс (скриншот 57)

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