Пишем игру на html5 код: Игра “Формы” (часть 2)

Здравствуйте, продолжаем создавать детскую игру на html5 с использованием бесплатной программы Construct 2.

Первая часть данного руководства по созданию html5 игры находится по следующей ссылке – Пишем игру на html5 код (часть 1).

Хоть программ Construct 2 и бесплатна, но у неё есть и платные версии – которые расширяют её функционал и снимают ограничения:

Кликните по картинке, чтобы рассмотреть отличия бесплатной версии от платных:

Вот например ограничения:

Так что если Вы не хотите ограничиваться 4 слоями для своей игры, то лучше купить программу:

Давайте добавим новый слой непосредственно с самой игрой – где нужно будет перетянуть фигуры в подходящие по форме очертания.

Для этого в правой панели выбираем вкладку Project и наводим курсор мышки на Layouts:

, зажимаем правую кнопку мышки и выбираем пункт Add layout:

В открывшемся окошке выбираем Add event sheet:

У нас появился слой “Layout1” и страница событий к нему “Event sheet 1” – переименовываем их в “shapes” и “evtShapes”:

Переходим на слой shapes (откываем вкладку shapes и кликаем левой кнопкой мышки на рабочей области слоя) и меняем его размеры – делаем их такими же как у слоя titleScreen, а именно, меняем параметры на:
Layout Size: 1200, 800
Margins: 1200, 800

Далее открываем страницу событий “evtShapes” (по умолчанию скрыта) – для этого в панели справа, во вкладке Projest кликаем дважды (левой кнопкой мышки) на “evtShapes”, после чего сверху у нас появляется вкладка “evtShapes”:

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

Для этого переходим на страничку действий “evtTitle” и жмем на ссылку Add event:

Открывается окошко:

Нам нужен “Touch” – но его здесь нет, наверное ничаяно его удалил, ничего страшного, давайте его дабавим. Для этого заходим во вкладку “Project”, находим пункт “Object types”, кликаем по нему правой кнопкой мыши и выбираем пункт “Insert new object”:

В открывшемся окошке выбираем “Touch”:

и жмем кнопку Insert.

В пункте “Object types” у нас появился “Touch”:

Теперь опять пробуем на страничке действий “evtTitle” нажать на ссылку Add event – здесь у нас уже появился параметр “Touch” – выбираем его:

Далее выбираем параметр “on tap object”:

Далее выбираем объект – в нашем случае это будет кнопка с треугольником – btnShapes:

Добавляем действие (переход на другой слой – слой с игрой – shapes) – для этого кликаем по ссылке Add action и выбираем System:

Далее выбираем “Go to layout”:

В итоге у нас получилось следующее:

Читается это так: если пользователь нажал на кнопку btnShapes, то нужно открыть слой shapes.

Аналогично можно добавить переходы на остальные кнопки.

Далее давайте нарисуем слой shapes.

Для создания слоя shapes будем использовать следующие изображения:

Продолжаем создавать слой “shapes”.

Для этого переходим на вкладку shapes и кликаем по рабочей области слоя дважды левой кнопкой мышки:

Выбираем “Sprite”:

Далее жмем на кнопку в виде папочки и устанавливаем изображение фона вот эту картинку:

Далее немного растянем картинку и установим координаты:

Position: 1200, 800
Size: 1200, 800

Теперь можно протестировать работу кнопки, для этого сохраняем проект – жмем на кнопку Save, переходим на слой titleScreen и жмем на кнопку Play:

Открывается игра, жмем на кнопку с треугольником и открывается вторая страничка:

Кнопка работает! Но вторая страничка отображается не по центру – давайте это исправим.

Для этого переходим на вкладку evtTitle выделяем переметры, отвечающие за централизацию экрана – можно нажать на маленькую зеленую стрелочку для выделения: