Construct 2. Собственный экран загрузки

В программе Construct 2 присутствуют пять стилей загрузочного экрана. И на данный момент их никак не заменить! В интернете доступно множество уроков по этой теме, но ни один не работает. Все равно при запуске игры отображается стандартный загрузчик. Поэтому я предлагаю создать не совсем загрузчик, а некую стартовую страницу, во время которой можно подгружать сохраненные данные или запускать фоновою мелодию.

 

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

 

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

 

Приступим. Запускаем программу Construct 2 и создаем новый пустой проект. Затем в параметрах проекта выбираем текстовый загрузочный экран (Percentage text).

 

Почему этот? Да просто, это самый упрощенный вариант, без лишних деталей.

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

 

Размер видимой части игры будет 1280 на 720 пикселей. Но только под заранее заготовленный фон. В своей игре вы можете использовать любой другой размер. Это не важно.

Construct 2. Собственный экран загрузки (скриншот 1)

Первым макетом, с которого будет запускаться игра, выбираем Layout 1 (в параметре First layout).

 

Дополнительно можно активировать параметр Use loader layout. Это использование собственного загрузчика игры. Но, еще раз говорю, пока это не работает. В следующих версиях программы возможно проблему устранят.

Construct 2. Собственный экран загрузки (скриншот 2)

Макет и список событий называем loader. Размер макета будет такой же, как видимая часть игры.

Construct 2. Собственный экран загрузки (скриншот 3)

Переходим к слоям этого макета (вкладка Layers). Стандартный слой называем background (фон).

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

Construct 2. Собственный экран загрузки (скриншот 4)

Теперь добавляем новый Sprite и называем его background_loader (фон загрузчика).

Construct 2. Собственный экран загрузки (скриншот 5)

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

 

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

 

Закрываем редактор и устанавливаем изображение по центру макета.

Construct 2. Собственный экран загрузки (скриншот 6)

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

 

Затем добавляем еще один слой. Называем его objects (объекты) и также убираем Parallax.

Construct 2. Собственный экран загрузки (скриншот 8)

На этом слое создаем новый Sprite, который называем title (название игры).

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

Construct 2. Собственный экран загрузки (скриншот 9)

С дополнительным оформлением разобрались. Далее займемся полосой загрузки. Мы ее сделаем из трех частей: фоновая часть, увеличивающийся ползунок и рамка.

На слое objects добавляем новый Sprite, называем его loader.

Construct 2. Собственный экран загрузки (скриншот 10)

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

Construct 2. Собственный экран загрузки (скриншот 11)

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

 

У нас остался пустой нулевой кадр. Из него мы сделаем увеличивающийся ползунок. Выделяем этот кадр и нажимаем на кнопку Resize (изменить размер). Изначально ширина должна быть небольшой, пусть будет 10 пикселей. Высота такая же, как у фоновой части — 34 пикселя.

Construct 2. Собственный экран загрузки (скриншот 12)

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

Для удобного порядка перемещаем этот кадр на вторую позицию (в окне Animations frames).

Construct 2. Собственный экран загрузки (скриншот 13)

Теперь выбираем инструмент для работы с точками объекта (кнопка Set origin and image points).

Главную точку этого кадра нужно переместить к левой границе. В координату X записываем 0.

Construct 2. Собственный экран загрузки (скриншот 15)

Обязательно в параметрах анимации Default указываем нулевую скорость проигрывания. Без этого мы не сможем использовать каждый кадр отдельно.

Construct 2. Собственный экран загрузки (скриншот 14)

Закрываем редактор спрайта. И размещаем фоновую часть загрузчика в нужном месте на макете.

Construct 2. Собственный экран загрузки (скриншот 16)

Зажав клавишу Ctrl, начинаем перемещать фоновую часть на свободное место. Этим действием мы создадим копию объекта.

В параметрах (пункт Initial frame) этой копии указываем первый номер кадра. Он превратится в ползунок.

Устанавливаем этот ползунок поверх фоновой части слева.

Construct 2. Собственный экран загрузки (скриншот 17)

Создаем еще одну копию объекта loader. В параметрах копии указываем второй номер кадра. Он превратится в рамку. Устанавливаем ее поверх остальных частей.

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

Construct 2. Собственный экран загрузки (скриншот 18)

Теперь добавляем переменную к этому объекту.

Называем ее progress, выбираем тип числовой, в начальное значение вводим 0.

Construct 2. Собственный экран загрузки (скриншот 19)

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

Условие: объект System → Every tick

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

 

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

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

Под-условие 2: объект loader → Compare width → в Comparison выбираем Less or equal (меньше или равно), в Width вводим 298 → Done

В первом условии проверяется, имеет ли объект номер кадра 1. Во втором условии проверяется, ширина объекта меньше ли 298 пикселей.

 

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

Действие: объект loader → Set width → в Width вводим loader.Width+1 → Done

В этом действии к текущей ширине объекта прибавляется единица.

Construct 2. Собственный экран загрузки (скриншот 20)

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

 

Почему 298? Это значение я подобрал тестированием. При нем ползунок полностью заполняет рамку загрузчика и не выходит за ее пределы.

 

Промежуточный результат:

Construct 2. Собственный экран загрузки (скриншот 21)

Продолжаем. Давайте добавим отображение загрузки в процентах. Добавляем новый текстовый объект и называем его loader_text.

Construct 2. Собственный экран загрузки (скриншот 22)

Устанавливаем следующие параметры:

  • Text (начальное значение) — 0
  • Color (цвет текста ) — белый
  • Horizontal alignment (горизонтальное выравнивание) — по центру
  • Vertical alignment (вертикальное выравнивание) — по центру
  • Hotspot (главная точка) — по центру

После чего перемещаем объект на полосу загрузки, по центру.

Construct 2. Собственный экран загрузки (скриншот 23)

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

Создаем новый макет с прикрепленным списком событий. Называем их menu.

Construct 2. Собственный экран загрузки (скриншот 24)

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

Construct 2. Собственный экран загрузки (скриншот 25)

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

Под-условие: объект loader → Compare instance variable → в Instance variable выбираем переменную progress, в Comparison выбираем Less than (меньше), в Value вводим 100 → Done

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

 

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

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

В этом действии в переменную объекта добавляется единица деленная на 3.

 

Зачем делить переменную на три? У нас полная ширина полосы загрузки около 300 пикселей. Если к переменной прибавлять просто единицу, то 100 процентов наберется, когда полоса заполниться только на треть. А таким способом мы синхронизируем полосу и проценты.

 

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

 

Теперь в основное условие (напротив Every tick) добавляем действие (Add action).

Действие: объект loader_text → Set text → в Text вводим без кавычек round(loader.progress) → Done

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

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

 

Ко всему событию оставляем комментарий: Отображение прогресса загрузки.

Construct 2. Собственный экран загрузки (скриншот 26)

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

Условие: объект loader → Compare instance variable → в Instance variable выбираем переменную progress, в Comparison выбираем Greater or equal (больше или равно), в Value вводим 100 → Done

В условии проверяется, больше или равна ста переменная объекта.

 

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

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

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

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

 

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

Construct 2. Собственный экран загрузки (скриншот 27)

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

 

Тестируем:

Construct 2. Собственный экран загрузки (скриншот 28)

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

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