Изучаем Construct 2 боем. Часть 1

Введение

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

Для примера я выбрал одну из самых древних и простых игр — Ханойская башня. Для простоты ограничимся шестью кольцами.

Урок разбит на 4 части:

  1. Составление сцены
  2. Реализация механики игры
  3. Взаимодействие с внешними сервисами
  4. Экспорт игры на некоторые поддерживаемые платформы Construct 2
Пример первой части: посмотреть/скачать/ресурсы

В бой!

Создание проекта

Чтобы создать проект в Construct 2 нужно на стартовом экране нажать New project. Назовем проект TowerOfHanoi.

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

Layout — это полотно, на котором могут располагаться объекты заставки, уровня или меню.

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

Для Layout 1 также создался список событий или сценарий с названием Event sheet 1. В нем будет храниться вся логика в виде конструкций которые называются события(Events).

Настройка проекта

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

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

Я бы советовал в первую очередь ориентироваться на широкоформатные экраны(16:9). Выставляем Windows Size равным «800, 450» и Full in browser в значение Letterbox scale, чтобы занять в браузере максимально пространства и сохранить пропорции. Более подробно тут.

Далее выберем в проекте Layout 1 переименуем его в Main. У параметра Layout Size выставляем тоже значение что и Windows Size, так как все элементы у нас уберутся на одном экране экране.

Так же сразу переименуем Event sheet 1 в Scenario.

Здесь можно познакомиться со всеми свойствами проекта.

Создание сцены

Сцена игры у нас состоит из двух групп элементов: стержни и кольца которые насаживаются на стержни.

Создаем стержень.  Два раза кликаем по белой области на Layout, выбираем тип объекта Sprite, называем его Rod(пер. стержень). Нам откроется окно Edit image и еще несколько дочерних, где мы можем настраивать анимацию для спрайта.  Стержень статичен, поэтому достаточно загрузить его изображение(rod.png).

Закрываем окно, и наш стержень уже на сцене. Копируем его два раза, и располагаем их примерно как на изображение ниже.

Добавляем кольцо, так же создаем Sprite, но уже с названием Ring. Колец у нас несколько размеров, поэтому нам пригодиться окно Animation frames. Изначально у нас один frame(кадр) в него мы загружаем самое большое кольцо(ring0.png).

В окне Animation frames нажимаем правой кнопкой и выбираем Add frame, создается новый кадр. Выбираем его и загружаем изображение кольца меньшего размера(ring1.png). Так проделываем пока не добавим все кольца(до ring5.png).

Наши кадры складываются в Default анимацию. Список их отображается в окне Animations. Так как мы будем использовать кадры по отдельности, то в свойствах анимации Default, параметр Speed надо выставить на 0. Если этого не сделать, кадры начнут переключаться с заданной скоростью.

Закрываем окно Edit image и наше кольцо с выбранным нулевым кадром оказывается на сцене.

Сделаем кольца прозрачными, чтобы было всегда понятно, что они как бы насажаны на стержни. Для этого выставим Opacity у кольца на 50.

Вместо того, чтобы разместить все кольца вручную мы их будем генерировать.

Генерация колец

Нам нужно сделать одну вспомогательную точку на стержне, начиная с которой мы будем создавать кольца и выстраивать пирамидкой. Кликаем правой кнопкой по любому стержню и выбираем Edit animations. Переходим к окну Image points, где по-умолчанию есть точка Origin.

Origin — это точка принимается за центр объекта, вокруг нее происходит вращение.

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

Работа со сценарием

Открываем Scenario.

Добавим в него первое событие нажав кнопку Add event. В открывшемся окне выбираем объект System, в нем находим событие On start of layout, которое сработает при запуске Main или в нашем случаи игры.

Присоединяем к этому событию цикл Repeat, для этого щелкаем правой кнопкой по событию и находим Add another condition. В объекте System находим Repeat и ставим количество повторов равное количеству различных колец, то есть 6.

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

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

Координаты первого кольца можно узнать выражениями Rod.ImagePointX(1) и Rod.ImagePointY(1), где 1 — это порядковый Number точки спрайта FirstRing.

Зная всю нужную информацию, добавляем действие в событие. Выбираем объект System находим действие Create object.

 

В параметрах объектом выбираем Ring. Layer оставляем, так как он у нас один. Координаты выставляем Rod.ImagePointX(1) и Rod.ImagePointY(1) — loopindex * 30. Координата Y с каждым новым кольцом будет подниматься вверх выстраивая башню.

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

Добавляем еще одно действие к нашему событию. Тут уже выбираем объект Ring, действие Set frame. Выставляем значение loopindex.

Сценарий готов!

Теперь передвинем Ring на Main за границу полотна, так как этот экземпляр будет выполнять инициализирующую роль. То есть он будет служить базовым объектом, от которого все созданные в процессе экземпляры будут копировать все свойства.

Запускаем игру(F5) и видим на левом стержне башню из колец. Поздравляю!

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