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

в 17:08, , рубрики: Construct 2, game development, Блог компании «ООО «Рус Визардс»», метки:

Что такое Construct 2?

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

image

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.

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

image

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

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

image

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

image

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

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

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

image

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

image

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

image

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

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

image

В данный момент уже можно сделать первый тест, на котором будет видно, как пуля перемещается по рабочей области 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 пикселей. Вот что получилось в итоге:

image

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

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

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

image

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

image

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

image

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

image

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

image

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

image

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

image

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

image

image

image

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

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

Результат

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

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

Автор: mkolenchukova

Источник

* - обязательные к заполнению поля


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js