Платформер на Construct 2. Расположение элементов интерфейса

В прошлом уроке мы отлично поработали с пользовательским интерфейсом. Только осталась одна маленькая недоработка. Элементы интерфейса не привязаны к границам экрана. При ранее установленном режиме масштабирования (scale outer) игры, они могут немного съезжать на различных экранах. Разберемся, как это исправить.

 

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

 

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

На макете элементы интерфейса размещены в углах видимой части игры. Сердечки и счет бонусов в левом, кнопка паузы в правом.

Платформер на Construct 2. Расположение элементов интерфейса (скриншот 1)

Платформер на Construct 2. Расположение элементов интерфейса (скриншот 2)

Но, если запустить игру на широком экране, то это будет выглядеть так:

Платформер на Construct 2. Расположение элементов интерфейса (скриншот 3)

Как видите, появились достаточно приличные отступы.

 

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

 

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

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

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

 

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

 

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

Действие 1: объект button_pause → Set position → в X вводим ViewportRight(0)-60, в Y вводим ViewportTop(0)+60 → Done

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

 

Выражением ViewportRight(0) мы получаем нулевую точку правой границы экрана. Затем мы вычитаем из нее 60 пикселей, чтобы кнопка не налезала на границу, а была немного левее. Точно также с верхней границей. Выражением ViewportTop(0) мы получаем нулевую точку и прибавляем к ней 60 пикселей.

 

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

Платформер на Construct 2. Расположение элементов интерфейса (скриншот 4)

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

Действие 2: объект score → Set position → в X вводим ViewportLeft(0)+30, в Y вводим ViewportTop(0)+90 → Done

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

Платформер на Construct 2. Расположение элементов интерфейса (скриншот 5)

Так как сердечка у нас три, необходимо отдельно расставить каждое.

 

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

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

В условии проверяется, имеет ли сердечко переменную со значением 1.

 

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

Действие: объект life → Set position → в X вводим ViewportLeft(0)+55, в Y вводим ViewportTop(0)+45 → Done

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

 

И создаем еще два похожих под-события для второго и третьего сердечка.

Платформер на Construct 2. Расположение элементов интерфейса (скриншот 6)

Проверяем:

Платформер на Construct 2. Расположение элементов интерфейса (скриншот 7)

Работает. Никаких отступов, все как и задумано изначально.