Игра на Construct 2. Часть 1: Знакомство с Construct 2

Что такое Construct 2?

Как утверждает официальный сайт www.scirra.com: Construct 2 является новаторским средством для создания HTML5 игр. Он позволяет любому делать игры без опыта программирования.

Construct 2 легoк в освоении и не требует программирования (вернее, требует только простого визуального программирования). Описание логики игры производится выбором подходящего типа объекта, настройки его свойств, определения событий и действий. Полученная игра работает на любой операционной системе в любом современном HTML5-браузере на компьютере, ноутбуке, планшетах, смартфонах. Для управления в игре можно использовать клавиатуру, мышь и тачскин.

Типы игр, которые можно создавать в Construct 2, — это преимущественно пазлы, шутеры, экшены и аркады, т.к. они не могут содержать сложных математических вычислений или физики.

Плюсы и минусы

Что меня привлекло в Construct 2 — это тот факт, что созданный проект можно скомпилировать в PhoneGap проект и таким образом превратить сие в мобильную кроссплатформенную игру, которая будет доступна для iOS, Android, Windows Phone, BlackBerry, Bada, Symbian, webOS. Теперь фраза “Всё гениальное — просто” ассоциируется у меня с Construct 2.

Интересный факт: на официальном сайте существует интернет-магазин, в котором за фунты, евро или доллары можно купить графические элементы и звуковые эффекты для создания своих собственных игр. Их цена колеблется от 3 до 30 фунтов.

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

Что действительно заставило меня помучаться морально в начале работы с Construct 2, так это то, что IDE доступна только для Windows XP/Vista/7. И ведь, как назло, я использую Mac OS и Windows 8, они меня полностью устраивают, и перейти на другую операционную систему ради установки одной программы было чрезвычайно трудно.

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

Существует 2 типа платной версии программы: Personal Edition и Business Edition. Их отличия только в лимитированном коммерческом использовании для Personal Edition. В свою очередь, бесплатная версия считается непредназначенной для такового. Цена за Personal Edition составляет 79 фунтов, а за Business Edition — 259 фунтов.

Отличия платных версий программы от бесплатных в том, что в платных версиях открываются возможности для создания iOS, Android и Desktop приложений, убираются ограничения бесплатной версии на 100 событий, 4 слоя и 2 эффекта в проекте и т.д.

Скачать программу можно с главной страницы официального сайта. Ну, а теперь перейдем к созданию игры с помощью Construct 2.

Начало работы

Запускаем Construct 2 и создаем новый проект. Изменяем Layout Size, если это требуется. Я буду использовать 640 на 480.

Теперь стоит добавить новый объект в лист событий. Делаем двойной клик по рабочей области, и появляется всплывающее окно:

Выбираем Touch. В дальнейшем функция Insert New Object будет часто использоваться.

Добавляем еще 1 слой (просто нажимаем на плюс) и переименовываем оба слоя, используя кнопку Rename layer. Теперь нижний слой у нас носит название Background, а основной слой — Main.

Начнем с создания главного персонажа в игре. Не забывайте о том, что для того, чтобы взаимодействовать с необходимым слоем, сначала нужно выбрать его в меню Layers (предыдущая картинка). Делаем двойной клик по рабочей области, и видим появившееся окно Insert New Object, в котором выбираем из вкладки General — Sprite. При необходимости изменяем имя объекта и жмем на кнопку Insert. После чего всплывает окно Edit image, в котором мы выбираем необходимую картинку с помощью кнопки Load an image from a file:

Далее просто закрываем окно, и изображение появляется на рабочей области.

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

Начнем с добавления элемента на рабочую область. Далее, в меню Properties добавляем новое поведение для элемента:

Во всплывающем окне выбираем Bullet, как показано ниже:

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

Угол перемещения пули можно задать в меню Properties — Angle. По умолчанию установлен 0, и это именно тот угол движения, который в данном случае понадобится (изображение будет двигаться слева направо).

Также стоит добавить несколько поведений для элемента Character. Это будет BoundToLayout (это поведение не позволяет спрайту выйти за границы рабочего слоя) и 8Direction (это поведение необходимо для управления элементом, и после его установки уже возможно перемещать спрайт во время работы игры, используя клавиши вверх/вниз/влево/вправо на клавиатуре).

В данный момент уже можно сделать первый тест, на котором будет видно, как пуля перемещается по рабочей области 1 раз при запуске игры. Для запуска просто нажмите Run layout, после чего будет открыт браузер по умолчанию (убедитесь, что он поддерживает HTML5).

Теперь перейдем к Event sheet и добавим первое событие — появление пули по нажатию на рабочую область. Выбираем вкладку Event sheet 1 и добавляем событие с помощью Add event: выбираем Touch, нажимаем кнопку Next, выбираем On any touch end и нажимаем Done. Следующим шагом стоит добавить то действие, которое будет происходить при нажатии на рабочую область. Нажимаем Add action и добавляем для Character событие Spawn another object, где в качестве объекта выбираем Sparrow. Так же добавим действие для Sparrow — Move forward и установим значение в 50 пикселей. Вот что получилось в итоге:

Таким образом, теперь по нажатию в любой точке рабочей области будет создаваться объект Sparrow на 50 пикселей правее центра Character и двигаться слева направо.

Перейдем к созданию вражеских элементов в игре. Пусть это будет облако. Добавляем спрайт на рабочую область. Устанавливаем поведение для данного элемента: DestroyOutsideLayout и Bullet (так как, по сути, вражеский элемент должен двигаться по образу и подобию пули). Не стоит забывать о свойстве Angle: именно от него будет зависеть в какую сторону будет двигаться облако. Я устанавливаю это значение равным 180.

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

Таким образом при соприкосновении Sparrow и Cloud оба элемента уничтожаются и в то же время создается элемент Fire.

Еще одним элементом игры будем считать тот факт, что при соприкосновении героя и врага, герой теряет одну из своих жизней, а враг погибает. Для реализации данной функции стоит завести глобальную переменную (правая кнопка мыши — Add global variable).

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

После чего добавляем описанные ранее события для Character.

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

Осталось добавить функцию регулярного создания вражеских элементов. Пусть вражеский элемент создается каждые 3 секунды. Координаты по оси х будут равны 720 (так как размер экрана равен 640, а половина размера изображения равна 80 по оси х), а по оси у — рандомное число от 60 до 420.

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

В properties установим скорость для cloud = 200, для balloon = 300 и для sparrow = 600.

Теперь изменим фон Background слоя. Можно установить его прозрачным или выбрать какой-то определенный цвет для него, но я в данном случае остановлюсь на фоновом изображении. Делаем двойной клик по рабочей области, видим появившееся окно Insert New Object, в котором выбираем из вкладки General — Tiled Background и далее добавляем изображение. Теперь закрываем окно и устанавливаем необходимый для нас размер изображения.

Результат

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

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