Разработка первой игры на Construct 3

Kate

Administrator
Команда форума
Стартовая страница конструктора
Стартовая страница конструктора
Здравствуйте, если вы это читаете, то наверное у вас есть мечта создать свою игру.
А может вы просто странник случайно открывший эту статью? \_^-^_/
Первым делом стоит уточнить... Сегодня мы не будем создавать AAA-игру с открытым миром и огромным сюжетом на 2000 страниц сценария... Нет, сегодня мы создадим обычную игру жанра - платформер в котором не будет ничего сверхъестественного. Ну что же... Приступим!

Первый проект​

8e4d91ab24691435c053e68ea844266f.png

Проект создать не сложно. С самого начала следует выбрать проекту имя, потом выбрать разрешение экрана и наконец ориентацию проекта (Landscape - горизонтальная, portrait - вертикальная)
Далее следует выбрать как мы будем писать логику игры. Есть два варианта...
  1. Использовать внутреннюю систему "листа событий" где вся логика будет строиться на основе простых блоков.
  2. система скриптов на основе языка программирования JavaScript.
Не хочется огорчить опытных программистов, но сегодня мы прибегнем к первому варианту.

Настройки сцены​

aee1dea891c8d059d53ed614ebe4e7b5.png

Создав проект первое что вы увидите, это сцену, на которой и будут находиться все игровые объекты.
Долго по настройкам проходится не буду, ведь это и правда долго, но все же без них никуда...
Во вкладке About необходимо заполнить всю контактную информацию.
На вкладке Startup следует выбрать первую сцену, которая будет запускаться в начале и загрузочный экран, который будет показываться в самом начале игры. Рекомендую вам его убрать, чтобы никакие знаки в начале игры не всплывали и не отвлекали внимание игрока от основной сути происходящего.
Думаю с основными настройками мы закончили но подождите... Что это за серый фон? Так не пойдет...

Слои и их свойства​

d49f2b4752948bd4759076b79b43eff2.png

Слои в Construct - это настоящая магия.
Мы можем изменить parallax, цвет, прозрачность, эффекты и много много еще того, что сегодня пройдет мимо нас...
Нам будет достаточно выбрать приятный глазу цвет и пойти изучать основы дальше.

Сцена и видимая область​

50139a6d00868d28bf9aeb187df12bbd.png

Обратите ваше внимание на контур в сцене. Видите? Так вот... Это та область, которую мы указывали еще при создании проекта, вопрос... За что она отвечает? Все просто... Эта та территория, которую видит игрок на своем экране, все остальное - размер сцены, проще говоря размер уровня. Давайте размер сцены уменьшим и поставим значения к примеру 1560 x 720
Стоит еще рассказать про лист событий... Лист событий - это среда программирования в Construct. На листе событий мы задаем логику игры и определяем то, как будут себя вести объекты на сцене.
Давайте не будем гнаться за всем и сразу и первым делом создадим первый объект.

Первый объект​

f30a3cb00bd59d9093f777461dd03dbd.png

Двойным кликом мыши и взмахом волшебной палочки мы открыли меню объектов и плагинов. Здесь мы можем добавить в наш проект плагины и объекты. Так же можно подключить устройства ввода и вывода. В общем... Это меню вы будете открывать часто при разработке игры.
Нам необходимо добавить объект Sprite и дальше будет интересно...

Графический редактор​

c522610882c0a5211b6c485916a69151.png

О да... Ещё одно незнакомое нам окно, как же это интригует!
Это графический редактор, здесь вы можете рисовать и настраивать анимации. Так же здесь вы можете выбрать центр спрайта и настроить Collision polygon
Обо всем по порядку... Справа сверху вы видите анимации, а справа снизу настройки этой самой анимации. Вы можете настроить скорость анимации, её имя, включить или выключить зацикленность и число повторений анимации. Далее по центру внизу вы можете увидеть кадры анимации, в этой панели будут отображаться все кадры, которые вы добавите в анимации. Слева вы видите цветовую палитру, но это не все... Совсем ненадолго я упомянул про центр спрайта. Так вот...
975ea4fa29dc51f42a90d1d0d0634a81.png

центр спрайта - origin. Он определяет центральную точку вашего спрайта. По этой точке конструктор смотрит координаты объекта и его угол поворота. Рекомендую ставить origin по центру снизу, так будет проще работать.
Ой... Совсем забыл. Я же еще говорил про Collision polygon.
64cb14958bf5de144925f0dbcf943cba.png

Конструктор не видит границ объекта если вы их не укажите сами. Это границы объекта, за счет них и определяется то, где у персонажа ноги, а где голова. Рекомендую много точек в коллизии не ставить, ведь это может плохо повлиять на оптимизацию игры, но если это необходимо, то так уж и быть...

Поведения и их свойства​

e4b4bed9615e562bb2d21cccdd9c9136.png

Ух ты... Мы добавили первый объект на сцену! Я вас поздравляю, но радоваться рано. Как вы видите Слева у объекта появилось множество настроек, давайте познакомимся с ними.
Object type properties - Тут будет достаточно указать имя вашего объекта. Рекомендую называть все объекты на Английском языке.
Common - Вот тут интересное, мы можем указать позицию объекта, размеры, его угол наклона, прозрачность, цвет, слой на котором будет этот объект и расположение по Z - координате.
Instance variables - Это локальные переменные объекта, мы наверное будем их использовать в процессе программирования.
Behaviors - поведения объекта. Если говорить проще, то это свойства объекта, буквально в два клика мыши мы можем оживить наш объект и научить его ходить. Я повторю... В два клика!
Effects - Эффекты объекта, за счет них можно сделать красивую воду или к примеру добавить в игру Виньетку.
Ну что же... Не устали? Предлагаю немного отдохнуть и составить формулу Гидроксида кальция. Кхм... Шучу, не расслабляйтесь, впереди интереснее.

Поведение "platform"​

f1a716bd900b26f0f8c148718dba6b43.png

хо-хо-хо. Вот и все, наш объект стал игровым персонажем и мы научили его ходить, падать, прыгать и так далее... Но почему так просто? В этом и заключается особенность этого конструктора. Однако мы еще успеем взорвать голову в процессе программирования.

Платформа и первый тест​

e9f7ed9c49bfb6d596bde1752eaf2317.png

Давайте добавим второй объект на сцену и вместо поведения platform наденем на него поведение solid. Отлично, теперь игру можно протестировать.Сверху на панели инструментов есть маленький треугольник, нажав на него вы сможете запустить игру и протестировать её.
c1c2e029ca85c9daa938ed25f2104eab.png

Юхуу! Мы сделали это. Нажимая на стрелочки клавиатуры мы можем ходить и прыгать. Однако... Это было слишком просто :(
Давайте попробуем немного программирования.

Лист событий и плагин клавиатуры​

205f624089490450ae4d53a80ffcc7b1.png

Хорошо, давайте научимся строить логику игры и управлять персонажем через кнопки клавиатуры, которые укажем сами. Никаких стрелочек, только WASD!
9f6651498ea71162dfe595d67080fb54.png

Открыв лист событий можно добавить первое событие, но подождите... Что за события?
Все очень просто... У каждого события есть свои последствия и именно по таким правилам происходит процесс программирования в Construct.
Давайте сделаем так, чтобы при удержании какой-либо клавиши наш персонаж бы двигался влево и наоборот.
3e55b1ec5899ad35f843d63cac235910.png

Вот так будет выглядеть наше событие. Но этого мало и поэтому добавим еще несколько событий.
a1386e05a70e6e2c68b3bd6c679af591.png

Теперь мы сделали полноценное управление за счет привычных клавиш на клавиатуре. Но что дальше? Дальше я предлагаю добавить камеру и немного больше платформ.

Камера​

5b182bbeb3a294e2aa7a61be36231c91.png

Давайте добавим еще один объект на сцену и назовем его "camera" Далее установим у этого объекта прозрачность на 0% и добавим новое поведение "MoveTo" а так же "Scroll To"
fcc0d6178e4223b5c718d3d567ea35f2.png

Отлично, теперь перейдем в лист событий и добавим простое событие.
2f949ed5ec313efbe2f18a807970f0bb.png

Добавим событие every tick - каждый кадр и сделаем так чтобы камера постоянно двигалась к объекту (нашему игроку)
71ce647e69f655907826bb20cdee6f3b.png

Вот и все... На самом деле можно просто добавить поведение "Scroll To" на нашего персонажа, но такой способ немного не подходит нам, ведь тогда камера будет следовать за нами не плавно, а это не круто.

Перезагрузка уровня​

dfa45cfd73d9d886ea96a65612e1af4e.png

Что будет если наш персонаж упадет вниз при попытке пройти этот уровень? Хмм... Да, он продолжит падать вниз и игрок не сможет пройти этот уровень с самого начала, давайте это исправим.
b92369786dc14319bb8c6c0d6da36c16.png

Добавим новое событие и инвертируем его. Я знаю, у вас появились вопросы, давайте по порядку. Я добавил событие is on-screen - если на экране. Потом я инвертировал его и звучит оно так: если не на экране. Я надеюсь что вы поняли... Это трудно понять новичкам, но вы уже не новички, вы уже почти создали свою первую игру!
3894b0b2fa07ab1a29b971b8b10b21f8.png

Доделаем это событие и в условии поставим restart layout - перезагрузка сцены. Таким образом если наш игрок будет вне видимости, то сцена просто начнется с самого начала.

Оптимизация игры под разные экраны​

7f50c248051be40fab6828e4f412d551.png

Если развернуть игру на полный экран, то можно заметить неприятную картину.... Это легко исправить. Перейдем в настройки проекта и найдем настройку Fullscreen mode у этой настройки необходимо поставить режим scale inner, либо же scale outer. Если scale inner приближает картинку и заполняет всё недостающее пространство, то вот scale outer добавляет это самое пространство вокруг и оставляет картинку такой, какая она была.

Вот и все...​

Я рад тому, что кто-то дошёл до конца этой статьи и прочел её полностью. Если вам что-то осталось непонятным, то задавайте вопросы в комментариях. Постараюсь помочь. Окей, удачи тебе, странник.


Источник статьи: https://habr.com/ru/post/557030/
 
Сверху