Делаем игру в тетрадке - Construct 2. Часть I.⁠⁠

Здравствуйте. Сегодня мы будем клепать игру на Construct 2. Дабы вы могли понять, интересно ли вам это - я предлагаю посмотреть на игру: https://www.scirra.com/arcade/shooting-games/pikabu-copybook...
Ссылка на исходник .capx на rghost - 6SfwkZYs5
Если вы новичок или хотите узнать немного приколов в разработке на Construct 2 - прошу.

Ну, начнем.
Первым делом нам нужен Construct 2: скачаете вы ее и крякнете или купите за N-нную сумму - дело ваше, но я советую не тратить попусту деньги :)
Далее запускаем, создаем новый проект качеством 1080p, Фулл ашди так сказать. Это 16:9, а значит картинка будет удобно смотреться на 95% мониторов.

После этого нам нужен фон. К слову, он может быть разного типа, кубиками или цельный. В разных ситуациях применяется разный, и в угоду оптимизации и минимализму на этот раз мы используем первый тип. Создаем квадрат 64x64/128x128/и т.п. На нем рисуем произвольную бесшовную текстуру, в данном случае - тетрадную клетку.

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

Растягиваем фон до пунктирной линии - это границы видимости для игрока. Также в Layout Properties в поле Layout Size укажите размер больше видимых границ.

В предпросмотре это будет выглядеть примерно так. Далее я делаю скриншот экрана при включенном F11, чтобы перенести игровой фон и начать рисовать детали.

Я долго выбирал между ручкой и карандашом, и решил остановиться на последнем. Нарисовал порталы, пушку, детали UI и вражину. По моей задумке, из порталов будут лезть ужасные твари, а игрок должен их мочить пока не сдохнет. После этого я перенес каждую деталь в отдельное изображение, кадрировал и сохранил в png. Особо заморачиваться не стал, меню-шменю - просто сделал иконку звука и счет.
Заметка: пушку рисуйте ОБЯЗАТЕЛЬНО дулом вправо. Сам остов турели я сделал отдельно от пушки, чтобы она круто вертелась.

Также я нарисовал spritesheet - это изображение, ровно поделенное на N кусков, которое при экспорте образует анимацию. Это - взрыв вражины.

Теперь аккуратно переносим все файлы в проект. Вражин выделите вместе и перенесите - так они сразу влезут в одну картинку, но с кучей фреймов. Это нужно будет потом.
Можно еще и добавлять спрайты через саму прогу, но так название изображения будет сбиваться. Заметьте игру со слоями: фон должен быть на самом нижнем и заблокирован для мыши, UI на самом верхнем, а остальное по усмотрению.

Расставляем все так, как это было "на бумаге", не обращайте внимания на кучу вражин, это я сам протупил в начале.

Вот так происходит импорт фреймов для изображения. Мы не будем заливать два изображения звука, а сделаем одно и добавим к нему второй кадр.

Обратите внимание на image point. Это условный центр для изображения, и, так как иконки включения/выключения разного размера, мы дадим им центр в одной точке, где есть видимость на обоих изображениях. Это делается для того, чтобы когда иконка меняет кадр, она не скакала. Также мы щелкаем на анимацию Default и снижаем скорость до 0, чтобы регулировать вручную смену кадров.

Теперь нам необходимо добавить текст счета убийств. Можно было конечно сделать стилизованный Sprite font, но это те еще игры разума, поэтому обойдемся обычным Arial'ом серого цвета.

Здесь вы выставляем все, как на картинке, и соблюдаем размер.

Теперь пушка. Создаем image point и суем у дула - это место спавна пуль. Нулевой поинт мы естественно перетаскиваем по центру круга, это будет ось

Пока это выглядит вот так.

Теперь даем нашей пуле поведение(Behavior) Bullet.

Добавляем мышку для управлению турелью. Есть еще клавиатура и тач(для смартов/планшетов).

Создаем первое наше событие во вкладке Event Sheet. System - Every X seconds. Пушка - set angle toward Mouse.X Mouse.Y
Эвенты в Construct 2 работают по простейшей схеме программирования: Если, то, иначе(If, Then, Else). То есть мы создаем триггер, по которому срабатывает событие. На этом примере каждые 0.01 секунд пушка меняет свое направление касательно координат указателя мыши.
Таким образом можно заставить пушку следить за чем-то другим. Если вы уже тертый калач в Construct, то слышали об Every Tick и наверняка задаетесь вопросом - а почему бы не использовать его? Все дело в том, что этот триггер запускает событие каждый кадр. Но если начнет лагать, фпс снизится - следовательно снизится и частота, а за ней и плавность. А тут универсальный вариант, скажем так.

Теперь мы настроим стрельбу из пухи. Поведение нашей пули имеет свои настройки, приведите их так, как на скриншоте(за исключением скорости, это ваше решение).
Мы создали событие, что при щелканье левой кнопки мыши объект пушки создает пулю в заданной точке на слое 2 из дула(наш image point). Далее создавшейся пуле дается угол направления относительно угла пушки. Чтобы пушка не охеревала от скорости стрельбы, мы сделаем кулдаун, и он будет равен 0.5 секундам. В настройках пушки мы создаем Instance Variable, то есть локальную переменную, имеющую 0 и 1. При выстреле кулдаун вешается, через 0.5 секунды сбрасывается. В триггере стрелять нельзя, пока висит кулдаун.

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

Самой пуле мы присобачим поведение DestroyOutsideLayout. Это поведение будет уничтожать всякую пулю, вылетевшую за границы экрана. Оптимизация не дремлет. Никогда про нее не забывайте, особенно в этой программе.