Создание своей 2D игры для сайта без знания программирования

Игры / Статьи

Для начала творения вам нужно продумать игру, после чего приступать к работе над ней
В нашем случае это будет Кликер состоящий из 2 сцен:
- Меню
- Игра
В игре будем делать системы:
- Достижений
- Магазин [2 часть статьи]
- Онлайн Достижения [2 часть статьи]
  
Далее мы выбираем платформу, для данной статьи мы будем использовать Construct 2, где знания программирования не требуются, но нам понадобиться:

• Идея игры
• Графика, которую можно нарисовать самому, ну или взять где-то. В данной статье я часть возьму из Группы ВК, а часть нарисую сам используя Aseprite
• Немногое времени, а самое главное это умение создавать логические цепи для игры

Скачав Construct 2 и запустив его, вам нужно создать новый проект:
File =>New => New Empty project

Далее слева в Properties появятся настройки проекта, настройте их под себя, в нашем случае:
Name: Egg Clicker // Название игры
Window Size: 1280, 720 // Размер окна игры
First layot: Layout 1 // Начальная сцена. В дальнейшем вернемся

Теперь подготовим всё для дальнейшей работы: 
В Project создадим новый Layout, в появившемся окне выбираем 'Don't add event sheets' , слева
в Properties для этого Layout'а выбираем Event sheet 1
После чего переименуем их, Для Layout 1 - Menu, а для Layout 2 - Game
Отлично, теперь вам нужно сделать размеры этих Layouts под размеры нашего окна: 
Выбрали Menu справа, слева Layout Size и Margins изменили на свой размер (Который поставили в самом начале, т.е. в настройках проекта)


Отлично, теперь можно и создавать игру. Добавим спрайт (Яйцо), по которому мы в дальнейшем должны бить: 
В любом пространстве сцены (т.е. по центральному окну) правой кнопкой мыши, кликаем по Insert new object,

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

Ой, забыли про меню, над сценой найдем вкладку Menu и нажмем на неё

Появилось пустое поле, на нем нам нужно создать кнопки:
Играть, Достижения ну и далее как вам надо
Для этого используем ПКМ -> Button

В настройках слева изменим текст OK на Играть

Теперь во вкладке Event Sheets 1 Нажимаем

Появилось действие нажатия на кнопку, но ничего не происходит. Далее нам нужно сменить сцену, давайте в Add action выбираем: System => (General) Go to layout => вылезет окно, где выбираем нашу сцену игры Game => Done

Отлично, всё работает (Забыл сказать, для проверки нажмите Вверху на кнопку Run layout)
Но можно, эту кнопку можно сделать при помощи спрайтов, что бы было всё красиво:
Вместо Button создаем Sprite, где выбираем изображение кнопки и добавляем на сцену, далее 
В таком случае нужно добавить возможность работать с мышью, добавляем на сцену Mouse 
Далее в Event Sheet 1 Добавляем
Давайте теперь создадим переменную, в которой будем хранить значение денег
В Event Sheet 1 кликаем правкой кнопкой мыши, выбираем add global variable, назовем Money
Отлично, теперь у нас есть валюта, теперь создадим еще две переменных:
Первая - Health, значение Initial Value = 3, в ней будет находиться здоровье яйца
Вторую - Damage, значение у которого = 1, это будет указывать на то, сколько единиц хп будем отнимать (создали её для дальнейшей системы магазина)

Создадим новый event:
Для него Action:

Теперь мы можем отнимать HP у яйца при клике, теперь нужно вывести кол-во хп яйца над ним, создаем Text над яйцом, в Event sheet 1 создаем Event
В Action
Знаком & мы к тексту добавили значение переменной
Таким же образом создайте текст для денег (переменной Money)
!Внимание, для этого вам уже не нужно создавать новый Event, теперь можно просто добавить еще одно действие (action) к выше созданному Event'у
Всё работает, игра готова, но нет же, а почему наше здоровье уходит в минус??! Давайте исправим это:
Новый Event 
Действие (Action):
К этому же Event'у добавляем
Наш результат:

Теперь приступим к достижениям: 
Ваша задача создать кнопку перехода к меню. Если не получается то смотрите ниже

Перейдите во вкладку меню и создайте кнопку 'Достижения'
Для простаты работы в левом меню выберите вкладку Layers и нажмите на плюсик
Далее новый Layer переименуйте как желаете (на нем будем показывать все достижения)
Нажмите замочек под Layer 1 и снова выберите созданный вами слой
На сцене создаем спрайт, на котором расположим текста с вашими достижениями
Создадим новый текст, настроем его слева Color - На вкус, Text: Ударить по яйцу 10 раз
Horizontal aligment = center, Front - Шрифт и размер на ваш вкус, выше в Common поставьте Opacity на 70. У меня это выглядит так.Далее создадим в Event sheet 1 новую группу: Правая кнопка мыши, Add group с названием Достижения
Создайте новую переменную AllDamage, как создавали ранее (Можно просто скопировать Money и переименовать её в AddDamage)
Скопируем Event с нажатием по яйцу: выделяем его, жмем ctrl + c, далее ctrl + v, после чего перетащим его в нашу группу, выделяем то что у этого Event'а в action и жмем Delete (Удаляем)
Теперь заместо него добавим:
Отлично, теперь создаем sub-event для группы
Action:
Таким образом можете создавать новые достижения

Задаётесь вопросом 'А как создать достижение для магазина'? Это будет описано в следующей статье.
Планы на вторую статью:
1. Разработаем магазин:
 - Автокликер
 - Фон (благодаря которому будет идти множитель на клики)
 - Достижения на купленные предметы

2. Создадим онлайн достижения среди игроков, а также отправим игру на сайт.