Как сделать игру в конструкторе

Обновлено: 28.04.2024

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

Я постараюсь, по шагам, объяснить весь процесс от желания до релиза. Погнали!

Я гейм-дизайнер с 10-летним стажем. Работал в многих компаниях, например в Playgendary. Делал разное: и казуалки для мобилок, и танковый шутер для PC.

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

Как пополнять запас энтузиазма? Смотри документалки, читай истории успеха разработчиков. Это мотивирует!

Например, вот классная документалка о инди-играх Indie Game: The Movie

Смотри по сторонам: на другие игры, фильмы, кино, на новые технологии. Желание изучить что-то новое или сделать что-то похожее — это то, что нужно.

Одному — проще. Проще придумать идею и принимать решения. Не надо спорить и описывать задачи. Сделать игру одному — возможно. Я например сделал 4 игры один.

С командой — лучше. Лучше получается качество. Твои решения критикуются, и результат улучшается. Можно распределить обязанности и сделать игру быстрее. Последнюю игру я делаю в команде со своей женой. Она отвечает за историю, критикует мои решения, помогает с артом, ищет стримеров.

Короче - есть команда, круто! Нет команды — делай всё сам, это не трудно.

Очень важно понять — для чего тебе всё это?

Ну например:

1. Трудоустройство в геймдев компанию.

Продукт — портфолио. Приоритет - качество исполнения.

Вопросы: На какую должность хотим устроиться? В какую компанию(и)? Какими играми занимается компания(и)? Чему нужно научиться?

2. Научиться делать игры, освоить навык.

Продукт — опытный образец. Приоритет- новые знания.

Вопросы: Какой навык освоить? Как сделать какую-то конкретную штуку?

3. Рассказать о чём то важном.

Продукт — манифест. Приоритет - донести идею до масс.

Вопросы: Поймут ли мою идею? Как сделать продукт более массовым?

4. Сделать игру о которой мечтал.

Продукт — мечта. Приоритет — воплотить своё видение.

Вопросы: Что я хочу видеть? Чем можно пренебречь? Как закончить проект?

5. Построить свой бизнес.

Продукт — актив. Приоритет - получить доход.

Вопросы: Какие игры лучше продаются? Сколько времени займет разработка? Как сократить это время?

Цель может быть не одна. Цели могут меняться от игры к игре.

Короче - ты должен ответить на вопрос — зачем я делаю эту игру?

Например, я и моя жена — фанаты фильмов ужасов про пришельцев. Типа «Знаки», «Мрачные небеса», «Секретные материалы». Поэтому нам проще работать над идеями и сценарием для They Are Here

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

Короче - твои умения и увлечения — это твои преимущества. Учитывай их при выборе платформы, движка, жанра игры. А пока, просто подумай над этим.

Если просто, то есть 2 пути: Мобилки или ПК + Консоли.

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

  • Массовая аудитория. Дети, пенсионеры, скучающие продавщицы. Это не геймеры. Всё должно быть очень понятно и просто.
  • Играют по 1 — 5 минут. В перерывах, в очередях, на работе. Чтобы «убить время».
  • Ценится простая яркая графика.
  • Упор на простой, но залипательный кор-геймплей.
  • Некоторые жанры (головоломки, аркады) — наиболее просты в разработке. Можно сделать небольшой прототип (1-5 уровней) и показать его работодателю, например.
  • Не требуется красивая или сложная графика. Главное — чтобы было понятно.
  • Простой геймплей и гейм-дизайн.
  • Будет плюсом, если сам привык к мобильным девайсам и играм.
  • Очень. Высокая. конкуренция. Игр миллионы и почти все они — бесплатные. Игроки приходят только с рекламы. Нет рекламы — нет игроков. Нет денег.
  • Монетизация. Нужно встраивать рекламу или внутри-игровые покупки в игру. Знать куда и как. Тестировать чтобы всё это работало.
  • Аналитика. Нужно понимать что такое LTV. Почему он должен быть > чем CPI. Встраивать аналитику в игру.
  • Будь готов делать по 20 прототипов или улучшать продукт, пока LTV не станет > CPI.
  • Заработать денег небольшой команде, можно только с издателем. Я лично не знаю других путей.

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

Если пофиг на доход — классная, лёгкая платформа.

Если решишься, узнай подробнее про:

  • Хардкорные геймеры.
  • Играют по несколько часов. Дома. Чтобы погрузиться в игру.
  • Ценится реалистичная или стильная графика.
  • Упор на интересную историю или глубокий геймплей.
  • Меньше конкуренция, чем на мобилках. Особенно на консолях.
  • Легче получить игроков и отзывы.
  • Можно хорошо заработать портировав игру на консоли, с помощью издателя.
  • Не надо возится с аналитикой и монетизацией.
  • С детства понятная платформа (ПК / Консоль) и аудитория (Геймеры).
  • Аудитория любит авторские, творческие, интересные игры.
  • Будет плюсом, если сам играешь на компе или приставке.
  • Плохо заходят простенькие игры (головоломки, аркады). Геймеры хотят получить опыт, вжиться в роль. Залипнуть надолго. Игра не должна выглядеть как что-то на пару минут.
  • Игры дольше в производстве. Но можно хитрить — делать маленькие игры, которые выглядят как большие, а также использовать готовые ассеты.
  • Нужно поработать над интересной идеей. Найти отличительные черты (USP), которые выделят проект.
  • Нужно продумать интересную историю или геймплей.
  • Более сложный геймдизайн.
  • Большая требовательность к качеству графики.

Короче - ПК, а особенно Консоли это элитный бутик. На полке лежит то, что пользуется спросом. Это конкуренция качества. Если хочешь заработать, то сделай интересную игру, и обязательно портируй её на консоли (через издателя). Подумай как сэкономить на производстве!

Если решишься, узнай подробнее про:

Интересуйся тем Как делают игры (классный подкаст в твои наушники)

Рекомендую погуглить про:

  • Игровые механики, жанры и сеттинги.
  • Геймдизайн. Есть книга Джесси Шелла, она хорошая, но большая. Можешь гуглить про конкретный жанр.
  • Кор-геймплей и Мета-геймплей.
  • Левел-дизайн. Лучше гуглить про отдельный жанр.
  • Пользовательский интерфейс (UI) в играх.
  • Ассеты и маркетплейсы.

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

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

Про выбор движка написано много статей — погугли.

Если ты один, и не знаешь языков программирования, рекомендую Unreal Engine 4.

  • Там есть Blueprints — это визуальное программирование. Это проще чем писать код.
  • Красивый рендер «из коробки».
  • Есть большой маркетплейс с гововыми ассетами
  • Это популярный коммерчесский движок, на котором сделано очень много игр.
  • Можно сделать игру под все платформы. Можно встроить рекламу, инапы, аналитику.
  • Много уровков. Рекомендую Unreal Engine Rus
  • Классный интерфейс.
  • Куча встроенных функций.
  • Бесплатный до ляма баксов дохода.

Перед началом работы над игрой, сделай пару очень простых подделок «в стол».

Сделай змейку, пинг-понг и т.п. Пофиг на качество, пофиг на геймдизайн. Главное — попрактиковаться «на кошках», пощупать функции движка.

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

Короче - почитай про выбор движка. Потрать время на его изучие.

Жанр — это твоя ниша. Жанр — это очень важно. Есть жанры, в которые никто не играет. А для некоторых нужно изучить много дополнительного материала.

Лучше выбрать жанр который:

  • Популярен на платформе. Игры этого жанра часто покупают или скачивают. Используй сайты для аналитики жанров.
  • Не слишком сложен в производстве. мморпг — не твой выбор.
  • Нравится тебе или команде. Ты разбираешься в нём или много играл в детстве.

Как только ты определилися с жанром — гугли всё по производству игр в этом жанре. Геймдизайн, графика, уровни, звуки. На что сделать акцент?

Поиграй в лучшие игры в этом жанре. Посмотри видео об этом жанре.

Короче - выбери жанр и узнай про него всё что можешь!

Идея — ядро твоей игры. Зерно, из которого вырастет проект.

Какая идея хорошая?

  • Понятная. Должна быть понятна каждому. Например, твоей маме.
  • Интересная. Уже хочется поиграть в это! Люди любят риск и новый опыт, который хотят, но не могут пережить в реальной жизни. Например GTA — это симулятор крутого парня, которым все хотят быть, но не могут.
  • Популярная. Это не артхаус, не что-то странное или специфичное. Идея обращается к понятным образам из жизни или массовой культуры.
  • Выделяющаяся. Такого раньше не было. Или было, но давно. Или в другом жанре. Или в другом стиле. Или плохо сделано.
  • Каталог игр на твоей платформе. Смотри что популярно. Думай как это изменить, подать под другим углом. Хмм…игра про постройку железной дороги в топе. А что если, мы играем за машиниста?
  • Сайты-сервисы с аналитикой тэгов и жанров на платформе. Можно отследить популярность жанра, количество игр в нем. Можно скрестить отдельные тэги между собой.
  • Массовая культура. Фильмы, книги, комиксы, короткометражки, гифки, картинки из интернета.

Скорее всего у тебя будет рождаться много идей. Записывай их. Дай полежать. А потом выбери ту, что не даёт тебе покоя и кажется лучшей.

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

На основе Питча, описываем концепт игры. Более развернутое описание игры на одну страничку. За кого мы играем? В чем цель? Что можно делать? Какие эмоции вызываем?

Продумай ключевые фичи — USP, которые будут продавать твой проект. Они вытекают из твоей идеи.

Например, идея Панка — издевательство над массовой культурой и модой.

Ключевые фичи (USP) Панка: вызывающее поведение, агрессивная музыка и странные прически.

Показывай свои USP везде — в трейлере, скриншотах, постере, описании игры. Говори про них общении с прессой и издателями.Тычь ими в лицо!

Например, у They Are Here — это пришельцы, кукурузные поля как фильме Знаки, и НЛО.

Кароче - почитай про идею, концепцию, питч, USP игры. Сформулируй чёткое видение твоего проекта и доноси это видение до всех. Без него — всё развалится и поплывет.

Ассеты — это кирпичики, из которых состоят игры.

Составь список того, что нужно сделать. Хотя-бы крупными мазками. Сделать уровнь, найти музыку, вставить персонажа. А еще надо 20 видов мечей.

Оцени время, а потом умножь его на 2. Даже если тебе кажется это глупым. Умножь его в 2 раза!

Если видишь, что проект большой — отрезай всё ненужное. Ненужное — всё, что не показывает идею. Или редко появляется на экране.

Например, если идея игры — ультра-насилие, то можно не делать 20 видов мечей, а лучше проработать физику расчленения тела.

Прикинь, что для мобильных гипер-казуалок нужно сделать минимум 30 минут геймплея. А для ПК и Консолей, лучше сделать игру на 2 часа. Если можешь больше — круто!

Настоятельно рекомендую!

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

Записывай, всё что надо сделать. Каждую мелочь. Иначе — забудешь.

Ставь задачи. Себе и команде. Рекомендую Trello (проще) или Asana (функциональнее).

Cобирай инфу по проекту в одном месте. Можно юзать доски типа “Miro” или вики типа Notion.

Если ты один, или у вас небольшая команда, не парься над большой и красивой документацией. Лучше покажи пример, начерти схему, объясни на пальцах ЧЁ НАДО сделать.

Референс — лучшее описание задачи для художника! Например, я сказал жене — хочу обложку как у Слендера, но с пришельцем. Этого — достаточно!

Собирай и храни нужную инфу. Ссылки на классные статьи. Контакты возможных партнёров. Скриншоты багов. И т.п.

Демо-версия / Вертикальный срез / MVP — очень близкие по смыслу понятия. Это маленький кусочек игры финального качества.

Демо-версия решает множество задач:

  • Поможет записать видео, скриншоты, гифки
  • Покажет окупаемость мобильной игры
  • Поможет устроиться на работу
  • Ускорит набор вишлсистов в Steam
  • Получит отзывы от игроков и стримеров
  • Можно участвовать в фестивалях и конкурсах
  • Только с ней можно найти издателя.

Короче - сделай демонстрационную версию игры. Это твоя визитная карточка. Показывай её всем. Говори — я сделаю так-же, только больше.

Не буду вдаваться в подробности о релизе. Всё зависит от игры и платформы.

Лучше дам рекомендации как дожить до релиза:

  • Не меняй идею на ходу. Сильно. По чуть-чуть можно.
  • Не начинай другие проекты. Не распыляйся. Делай, что запланировал.
  • Составь график работы. Работай над игрой постоянно. Хотя бы по 3 дня в неделю, по 2 часа в день. Больше — быстрее!
  • Надоела разработка? Поиграй в похожие игры. Посмотри похожие фильмы. Найди, что было бы круто сделать.
  • Всё равно надоела? Мечтай о релизе. Представь как это будет здорово и вечно!
  • Показывай свою работу — пиши посты, пости гифки, давай поиграть стримерам. Твоя цель — получить позитивную обратную связь. Ну или отрицательную.
  • Узнавай что-то новое про производство игр. Слушай подкасты, смотри доклады. Это мотивирует, помогает в производстве.

Эта статья — вводная. Тебе много предстоит узнать и загуглить на каждом шаге.

Короче - ты можешь сделать это! Реально!

Ошибка выжившего же.

Смотри документалки, читай истории успеха разработчиков. Это мотивирует!

Или демотивирует, когда видишь, что такого результата никогда можешь не достигнуть)

Нет команды - делай всё сам, это не трудно.

Читая Апанасика помните — у него уже 3 месяца нет работы и за плечами пара провалившихся проектов. Как говорится, тоже фильтруйте,)

Тогда купи курс где тебя мотивируют! Что как в первый раз.

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

С чего начать делать игру? Пошаговая инструкция:
1. Начни делать игру
2. . 99. Команда нужна / не нужна, гугл в помощь, ебашь побольше и всё получится
100. Профит!

1.Представь сову
2.Представь как ты рисуешь сову
3.Изучи терминологию для обозначения разных аспектов в рисовании сов
3.Изучи как рисуются совы, как их рисуют другие люди
4.Прочитай книги, разные полезные советы о том, как рисовать сову
5.Выбери с помощью чего ты будешь рисовать сову
6.Задумайся зачем ты рисуешь сову, нужно ли тебе это
.
100.Нарисуй сову

Человек личный бренд качает)

Документалка классная, но меня она демотивировала скорее, причем всерьез и надолго. Смотря на то как чуваки по 5 лет страдают, выгорают и без особого запала выпускают-таки свои игры оставаясь в депрессии не хочется повторять этот путь, даже при том что они выпускают гениальные вещи типа super meatboy. Что для игроков удовольствие и крутота для автора осталось болью. Может я конечно что-то не так запомнил, поправьте.
Меня в каком-то смысле мотивирует история нотча. Чел пилил игры как хобби, работая на обычной работе программистом, пилил много и безуспешно, но потом у него стрельнул майнкрафт и он озолотился, а заодно подарил миру прекрасное развлечение.

А меня подобное наоборот мотивирует.
Я вижу, что каждый, даже в относительно простых проектах, сталкивается с трудностями. И я понимаю, что это не я бездарность, а всего лишь нормальный творческий процесс, и что если я буду продолжать прикладывать силы, то у меня может получиться что-то хорошее.

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

А потом ещё разругались, например, как создатели мясного парня.

Видишь дефолтный заголовок в стиле "как сделать игру, пошаговая инструкция" или "как заработать миллион долларов, пошаговая инструкция" или "как родить ежа, пошаговая инструкция" и фотку автора в шапке, то знай - тебе щас будут впаривать очередные прописные истины и сто раз пережеванную и заново выплюнутую инфу. По факту пиар самого себя под видом якобы образовательной статьи. Мерзко.

но это же с мемааасиками!

ПК + Консоли
Аудитория:
Хардкорные геймеры.
Игроют по несколько часов. Дома. Чтобы погрузиться в игру.
Ценится реалистичная или стильная графика.
Упор на интересную историю или глубокий геймплей.

вот это весьма спорный момент)

Почему вам так кажется?

Но в итоге-то ты будешь продавать игру, а не блупринты из неё.

В любой теме, где упоминаются блупринты, обязательно найдется чел, которым будет кекать над этим. А по факту, в чём разница между лапшой из блупринтов, и лапшой из обычного кода?

Да, сходу предлагать Анриал новичку без знания программирования это немного странно, тем более в примерах змейка и пинг-понг (а в уроках 2-х летней давности видосы для тех кто уже умеет прогать на плюсах)— конечно он это сделает, но это не значит, что теперь можно пилить большую игру.

Ну и приводить маркетплейс и "большое" количество проектов на движке такое себе — хорошо что они есть, но это точно не USP в сравнении с тем же Юнити, где всего этого в разы больше.

Step 1: Find the coder
Step 2: Break his legs and give him computer
Step 3: Injure a adrenaline

Стартовая страница конструктора

Стартовая страница конструктора

Здравствуйте, если вы это читаете, то наверное у вас есть мечта создать свою игру.

А может вы просто странник случайно открывший эту статью? \_^-^_/

Первым делом стоит уточнить. Сегодня мы не будем создавать AAA-игру с открытым миром и огромным сюжетом на 2000 страниц сценария. Нет, сегодня мы создадим обычную игру жанра - платформер в котором не будет ничего сверхъестественного. Ну что же. Приступим!

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


Проект создать не сложно. С самого начала следует выбрать проекту имя, потом выбрать разрешение экрана и наконец ориентацию проекта (Landscape - горизонтальная, portrait - вертикальная)

Далее следует выбрать как мы будем писать логику игры. Есть два варианта.

Использовать внутреннюю систему "листа событий" где вся логика будет строиться на основе простых блоков.

система скриптов на основе языка программирования JavaScript.

Не хочется огорчить опытных программистов, но сегодня мы прибегнем к первому варианту.

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


Создав проект первое что вы увидите, это сцену, на которой и будут находиться все игровые объекты.

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

Во вкладке About необходимо заполнить всю контактную информацию.

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

Думаю с основными настройками мы закончили но подождите. Что это за серый фон? Так не пойдет.

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


Слои в Construct - это настоящая магия.

Мы можем изменить parallax, цвет, прозрачность, эффекты и много много еще того, что сегодня пройдет мимо нас.

Нам будет достаточно выбрать приятный глазу цвет и пойти изучать основы дальше.

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


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

Стоит еще рассказать про лист событий. Лист событий - это среда программирования в Construct. На листе событий мы задаем логику игры и определяем то, как будут себя вести объекты на сцене.

Давайте не будем гнаться за всем и сразу и первым делом создадим первый объект.

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


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

Нам необходимо добавить объект Sprite и дальше будет интересно.

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


О да. Ещё одно незнакомое нам окно, как же это интригует!

Это графический редактор, здесь вы можете рисовать и настраивать анимации. Так же здесь вы можете выбрать центр спрайта и настроить Collision polygon.

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


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

Ой. Совсем забыл. Я же еще говорил про Collision polygon.


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

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


Ух ты. Мы добавили первый объект на сцену! Я вас поздравляю, но радоваться рано. Слева у объекта появилось множество настроек, давайте познакомимся с ними.

Object type properties - Тут будет достаточно указать имя вашего объекта. Рекомендую называть все объекты на английском языке.

Common - Вот тут интересное, мы можем указать позицию объекта, размеры, его угол наклона, прозрачность, цвет, слой на котором будет этот объект и расположение по Z - координате.

Instance variables - Это локальные переменные объекта, мы можем за счет локальных переменных добавлять перемнные индивидуально для каждого объекта. К примеру можно добавить переменную на игроке, чтобы она хранила в себе информацию о количестве здоровья персонажа. В общем применений может быть много.

Behaviors - поведения объекта. Если говорить проще, то это свойства объекта, буквально в два клика мыши мы можем оживить наш объект и научить его ходить. Я повторю. В два клика!

Effects - Эффекты объекта, за счет них можно сделать красивую воду или к примеру добавить в игру Виньетку. Эффекты очень плохо могут сказаться на производительность.

Ну что же. Не устали? Предлагаю немного отдохнуть и составить формулу Гидроксида кальция. Кхм. Шучу, не расслабляйтесь, впереди интереснее.

Поведение "Platform"


Перейдем в окно behaviors у нашего игрока и добавим туда поведение platform.

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

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


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


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

Давайте попробуем немного программирования :)

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


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


Открыв лист событий можно добавить первое событие, но подождите. Что за события?

Все очень просто. У каждого события есть свои последствия и именно по таким правилам происходит процесс программирования в Construct.

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


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


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

Камера


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


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


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

P.s every tick - Событие будет вызываться каждый кадр.


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

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


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


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

P.s Событие is on-screen выполняется тогда, когда определенный объект находится на экране.


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

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


Вот и все.

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

image

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

Основные и важные моменты:
— Приложение разработано с помощью Construct 2 – игровом движке на HTML5, позволяющем портировать приложение на все популярные мобильные (и не только) платформы;
— Навыки программирования для реализации подобным функционалом не требуются вовсе;
— Повторюсь: статья описывает путь человека неопытного, поэтому если вы хотите начать – эта статья может показаться полезной и вам;
— Описаны следующие этапы создания приложения: разработка, портирование на мобильную платформу Android, интеграция с рекламными сетями, публикация приложения, продвижение (некоторое бесплатное подобие этой активности).
— Все сроки по данным активностям указаны с учетом того, что в данный момент я не занят на основной работе, поэтому мог посвящать этому целые дни.

Начало, Идея, основная концепция

Начало было заложено после прочтения статьи о самом инструменте Construct 2, после чего было принято решение посмотреть на возможности этой программы. Несколько недель ушло на изучение функционала Construct 2. Бесплатной версии Free Edition для этого вполне достаточно. В ней существуют ограничения на количество эффектов, слоев и пр., но для изучения программы это не сильно мешает. Вот портировать на мобильные платформы с бесплатной версией уже нельзя.

Пробы с различным поведением спрайтов и физическим движком помогли неплохо освоиться в программе, а заодно послужили источником вдохновения для нескольких идей. На одной из них я решил остановиться – было решено делать игру, главный герой которой мог бы передвигаться по городу с помощью веревки – по принципу spiderman.

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

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

Создание игры

Для дальнейшей работы потребовалась расширенная лицензия Personal License. Иначе недоступен экспорт на мобильные платформы, а также запрещено использование в коммерческих целях.

Сделал набросок в один экран, продолжил прорабатывать физику главного Героя. В результате получилось следующее: при движении Героя вправо случайным образом генерируются разные по фасаду и размеру здания. При нажатии на здании создается условная веревка, соединяющая Героя и упомянутую точку касания. Остальное делает встроенный в Construct 2 физический движок. При нажатии на свободное от строений пространство условная веревка исчезает, Герой вылетает по касательной. Конец игры при падении на землю.

Впоследствии убогая палка, на которой качался Герой, была заменена на менее убогое подобие веревки (состоящей из последовательно соединенных мелких палок).

После реализации задуманной физики движения (т.е. осознания того, что задуманную игру действительно можно сделать посредством Construct 2) я приступил к внедрению некоторых деталей – необходимого минимума для любой мобильной игры:
— Нормальная графика (в качестве редактора использовал бесплатный Inkscape – очень приятный векторный редактор, работал с ним впервые и с удовольствием);
— Экран меню;
— Кнопки с рестартом уровня, паузой, выходом из приложения и всего такого;
— Экран с информацией об игре;
— Счет и локальное хранение лучшего результата на телефоне;
— Оптимизация «кода»;
— Доработка геймплея, создание препятствий (фонари, рвущие веревку и сбивающие героя голуби);
— Усложнение игры с каждым новым уровнем (голуби становятся быстрей и встречаются чаще, фонарей также становится больше, здания – реже);
— Сделал корректным отображение элементов HUD на устройствах с различным разрешением.

Одной из значительных трудностей была реализация одного бесконечного уровня на всю игру. Проблема заключалась в том, что layout сделать бесконечным нельзя. Игры типа infinite runners делаются по принципу движения космического корабля из небезызвестного сериала Futurama: не герой двигается относительно всего остального, а все окружающее пространство движется относительно героя, а герой стоит на месте. В таких играх физика как таковая отсутствует, поэтому в моем случае это было фактически нереализуемо. В итоге я пошел по пути наименьшего сопротивления – длина layout’а считается одним уровнем, при его достижении с героя снимаются все данные о его движении, спрайт с Героем удаляется, в начале layout создается новый с теми же характеристиками движения, и это считается следующим уровнем.

Большая часть всего перечисленного была сделана за полторы недели (напомню, я делал это не по вечерам, а по 10-12 часов каждый день с перерывами на чай/кофе/потанцуем). Остальное допиливалось на последующих этапах.

Ниже представлены иллюстрации эволюции игры:



Экспорт

Игру, созданную на Construct 2, можно портировать на Android, iOS, Windows Phone. Это помимо не интересующих меня в данный момент Facebook Games, Chrome Web Store и пр.

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

Для экспорта есть несколько альтернатив, мой выбор пал на Intel XDK. Удобный и понятный XDK, быстрое тестирование на телефоне без необходимости переустанавливать приложение после каждого изменения.

Однако в моем случае результат оказался весьма плачевным – игра жутко тормозила, играть в нее было очень грустно, прорисовка графики также оставляла желать лучшего. Протестировал то же приложение на iphone брата – результат отличался колоссально.

Очень много времени я потратил на изучение форумов, пытаясь решить проблему с производительностью, по максимуму оптимизировал и упростил «код», на эту тему написано немало статей – открыл для себя множество интересных мелочей. Например, что отображение постоянно изменяющегося текущего результата (score) посредством текста очень сильно грузит приложение, и вместо текста нужно обязательно использовать Fonts.

В результате оказалось, что Intel XDK ведет себя так только в случае использования физического движка Box2D web. Для решения этой проблемы они создали отдельный движок Box2D asm.js, однако мое приложение с этим движком упорно отказывалось запускаться. В результате в качестве инструмента экспорта я переключился на CocoonJS. Construct 2, насколько я понял, уже не особо с ними сотрудничает (в самом конструкторе в перечне инструментов экспорта CocoonJS скрыт как deprecated exporter). Однако в случае использования физики это единственный работающий (хорошо работающий) вариант. Да и со стороны CocoonJS плагины для Construct 2 все еще создаются и обновляются.

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

На поиски и изучение способов экспорта, оптимизацию “кода”, внесение доработок в приложение после тестирования на телефоне, а также адаптацию под различные возможные разрешения ушло около двух недель.
Надеюсь, моя статья сэкономит некоторым из вас это время.

Монетизация

В качестве способа монетизации я решил использовать наименее простой, на мой взгляд, способ – рекламу.

Я решил, что рекламу обязательно подключить сразу. Было бы подло выкладывать впоследствии обновление бесплатного приложения, после установки которого у пользователя появляется отсутствующая ранее реклама.

Единственный способ подключения рекламы к созданной в Construct 2 игре под Android и экспортируемой через CocoonJS – это связка рекламных сетей Mopub + Admob и остальные. Реклама MoPub подключается к приложению при экспорте в CocoonJS. Однако эта рекламная сеть, помимо своих объявлений (которых у нее мало, и оплата за них небольшая), может служить посредником между другими сетями, выставляя при этом для каждой сети минимальную стоимость за показ. Таким образом, можно в одном приложении показывать рекламу нескольких рекламных сетей, и для показа будет выбрана одна из наиболее дорогих. Admob, безусловно, является фаворитом среди рекламных сетей для Android, поэтому в качестве дополнительной я остановился на ней.

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

Мой выбор формата показа рекламы пал на Full screen ads в момент нажатия кнопки Back или Restart, но не чаще чем раз в 2 минуты. Использование баннеров на экранах меню бессмысленно, ибо никто там надолго не задерживается; баннер на экране с уровнем в случае с динамичной аркадной игрой еще более бесполезен.

По данной причине я решил не ждать и выйти из сложившейся ситуации достаточно простым способом. Очевидно, никто не будет показывать рекламу в приложении каждые 10 секунд. Независимо от реализованного вами способа выбора момента показа рекламы (будь то нажатие определенной кнопки, или показ каждые n минут), между двумя показами проходить сколько-нибудь существенное время. Допустим, 2 минуты. В Construct 2 при подключении рекламы делаем следующую вещь: заводим переменную AdsLoadTrigger, обозначающую, была ли подгружена реклама, и, если нет – каждые 10-20 секунд пробуем загрузить снова, вплоть до удачной попытки. Таким образом, при фактическом Fill Rate в 20% можно без труда достичь близкой к 100% вероятности показа рекламы в нужный вам момент.

На подключение рекламы я потратил уйму времени. Анализ множества различных рекламных сетей, регистрация и освоение в каждой из них, интеграция рекламы в приложение, ее тестирование и настройка оптимальных мест и частоты показа занимают очень много времени. Однако если вы сразу пойдете по указанному выше пути – справитесь за несколько дней.

Публикация

Напомню, что портирование производил на устройство под Android: разумеется, самой популярной площадкой для распространения мобильных приложений является Google Play, однако существует немало альтернатив, про которые не стоит забывать. Таким образом, помимо очевидного выбора в пользу Google Play, я использовал также одни из наиболее популярных альтернативных магазинов: SlideMe и GetJar.

Учитывая, что для продвижения в наиболее перспективном Google Play очень важен мощный уверенный старт (для попадания в топы разделов) – альтернативные площадки можно использовать для обкатки приложения на пользователях, устранения основных замечаний и сбора данных для аналитики (конечно, если такая возможность была учтена в приложении).

Несколько слов о локализации: как минимум описание игры следует перевести на 4 языка – японский, английский, корейский и китайский. Таким образом, Вы охватите больше половины всех потенциальных пользователей Вашего продукта.

Продвижение

Как водится, я решил не тратить деньги на продвижение вовсе. Учитывая, что это первый опыт публикации мобильного приложения – я бы не стал возлагать особые надежды на финансовый успех этого предприятия, и потому деньги тратить посчитал бессмысленной затеей. Главное – набраться опыта.

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

В качестве примера приведу полезную, на мой взгляд, ссылку на перечень платных и бесплатных сайтов-ревьюверов приложений для Android, iOS и Windows Mobile.

К описанию игры во всех магазинах приложений была указана ссылка на необоснованно-патетический промо ролик игры с изображением основных моментов геймплея. При создании промо ролика использовался видеоредактор «Camtasia Studio 8». Его возможностей более чем достаточно для создания подобного материала, при этом в программе можно очень быстро и самостоятельно разобраться. Для меня приятной особенностью является то, что в ней возможна запись экрана компьютера (я делал запись геймплея, запуская созданную игру в браузере) с возможностью удаления курсора. К сожалению, программа не бесплатна, однако 30 суток на пробу этого продукта вы имеете.

Затраты


Ниже приведен минимальный перечень финансовых затрат, с которыми нужно будет смириться:
— Personal license для Construct 2: 130 USD;
— Аккаунт разработчика Google Play: 25 USD;
— Лицензия разработчика Apple: 100 USD/year (она только в планах);
— Время – бесценно. Хотелось бы сразу отметить, что не стоит питать иллюзий насчет временных затрат на основании потраченного на саму разработку игры времени. В моем случае оно оказалось существенно меньше, по сравнению с остальными пунктами. Однако я уверен, что с последующими играми разница уменьшится.


Первое знакомство

Однажды мне довелось побывать на мастер-классе по прототипированию у одного известного левел-дизайнера, работавшего в одной из крупнейших IT-компаний в России. На мастер-классе каждому участнику предложили создать свою игру за 1 час, а в конце часа показать игру остальным. То есть я первый раз запускаю программу и через час должен создать игру? Обладая некоторым опытом работы в программах, где необходимо писать код, я не поверил, что такое возможно. К моему удивлению, все (я в том числе) успели сделать свою первую маленькую игру. Пусть и простую, но в нее можно было играть. Так во мне зародилась любовь к конструктору под названием Clickteam Fusion 2.5 (раньше назывался Multimedia Fusion). Ещё популярными конструкторами являются Game Maker Studio и Construct 2. В основном, я работаю в Clickteam Fusion 2.5 (далее CF 2.5). На её примере раскрою принцип работы таких программ и их возможности.

image

Как это работает

Сразу отмечу, что конструкторы предназначены для работы в 2D. Уверен, в ближайшее время появятся и полноценные 3D-аналоги. Если вы настроены попробовать себя в 3D, то без знания программирования, вы сможете создать только карты для популярных игр, которые имеют редакторы-карт. Это уже другая тема, а сейчас я расскажу, как же работать в конструкторе.

При создании новой игры необходимо определить, для какой платформы хотите творить. Конструкторы дают возможность создавать игры для PC, IOS, Android, Html 5, Flash и т.д. Например, чтобы создать игру не только для PC, но и для IOS в программе CF 2.5, придётся докупить или скачать export module ios. Модуль конвертирует игру в код платформы – Xcode. Затем, через несколько нажатий, вы уже сможете тестировать игру на устройствах Apple (также нужен аккаунт разработчика Apple).


Ваша игра будет состоять из кадров (сцен). В каждом кадре можно создавать объекты, которые помогут вам решить любую задачу. Например, если это главное меню и вы хотите создать кнопку «Start», вам необходимо создать объект «active».


Окно «Редактор кадра».


Нажимаем правую кнопку мыши и выбираем «Insert object».


Выбираем объект «active».

Затем, нужно вставить в объект изображение кнопки или нарисовать во встроенном редакторе. В этом окне также можно создать покадровую анимацию. Один объект может иметь несколько анимаций (герой стоит, герой бежит, герой летит).


Окно «Графический редактор».

Осталось придумать событие, которое будет происходить с этим объектом.
Для этого, переходим с вкладки «редактор кадра» на вкладку «редактор событий».


Выбираем из списка необходимые события (условия), при которых, произойдут установленные вами действия над выбранным объектом, группой объектов, кадром.



Если игрок нажимает левой кнопкой мыши на объект «Start», то —

— происходит переход на следующий кадр.


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

Ещё несколько примеров:
— Если объект «шар» коснулся объекта «шип», то на экране появляется надпись «вы проиграли», а объект «шар» меняет анимацию на «шар лопнул».
— Если прошло более 5 секунд с начала запуска кадра, то в правом верхнем углу появляется объект «аптечка».
— Если объект «птичка» коснулся объекта «червяк», то «червяк» исчезает, в объект «счётчик очков» прибавляется единица и один раз проигрывается звук «жалобный крик червя».

Не изучая программирование, вы сможете создавать самые разные механики, используя фантазию и большое количество вспомогательных объектов. Перечислю некоторые из них:

Active object – самый популярный объект, его используют для создания объектов взаимодействия (главный герой, враги, платформы, ящики и т.д.). Он может содержать много разных анимаций (герой стоит, герой бежит, герой стреляет), иметь встроенные стандартные механики движения и управления.

Counter object – создает всевозможные счётчики жизней, денег, очков и т. д. Может быть представлен как в виде цифр, так и в виде шкалы.

INI object – сохраняет данные после выхода игрока из игры. Можно использовать для сохранения месторасположения любых объектов в кадре.

Physic engine object – появление этого объекта в кадре создаёт гравитацию, параметры которой можно регулировать.

Joystick control object– для touch-устройств создаёт эмулятор джойстика.

IOS store object – даёт возможность сделать внутриигровые покупки для AppStore.

Admob object – позволяет поместить баннерную рекламу в игру.

Touch object – учитывает все касания к экрану touch-устройства. Например, можно создать такое событие:
если игрок одновременно коснулся экрана тремя пальцами, то игра останавливается на паузу.

Если что-то не получается


Список популярных игр созданных на конструкторах

  • Five nights at fraddy's
  • Hotline miami
  • Uncanny valley
  • Hiper light drifter
  • Gods will be watching
  • Echo of the wilds
  • Arcane Soul
  • Savant – Ascent
  • Brazin' Aces
  • Super Ubie Land
  • Airscape: The Fall of Gravity
  • Our Darker Purpose
  • Mortar Melon
  • Who Is The Killer (Episode I)
  • Magnrtized
  • The Next Penelope
  • Concert jungle
  • Fort meow
  • Pitiri 1977


Конструкторы открывают огромный потенциал для создания игр. Особенно для мобильных устройств, на которых есть большой спрос на маленькие игры. Я уверен, что в ближайшем будущем такие компании, как Unity, приведут свой движок к ещё более простому виду. И люди, которые хотят делать игры, больше не будут беспокоиться о коде.

Звезда активна
Звезда активна
Звезда активна
Звезда активна
Звезда активна

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

Прежде чем добавлять второй уровень уберём мешающиеся общие объекты «ResultText» и «Light» на макет «Empty». Для этого выбелите экземпляры этих объектов на макете «Level1», вырежьте их (контекстное меню «Cut» или Ctrl+X), переключитесь на макет «Empty» и вставьте их туда (контекстное меню «Paste» или Ctrl+V).

Вырежьте объекты ResultText и Light с макета Level1

После вставки центрируйте объекты с помощью пунктов меню «Align -> Layout -> Center horizontal» и «Align -> Layout -> Center vertical». Теперь раз уж экземпляры этих объектов находятся на отдельном макете, сделайте их видимыми при инициализации (свойство «Initial visibility» установите в «Visible») и удалите действия «Set visible» на странице событий.

Теперь нужно создавать объекты «ResultText» и «Light» на макетах с уровнями после прохождения или провала уровня. Откройте страницу событий, и добавьте для событий «On collision with» и «Is outside layout» действия системы «Create object» и объект для создания выберите «Light». Точно так же добавьте действия для создания объекта «ResultText». Координаты при создании укажите такие же, как и для существующих экземплярах объектов на макете «Empty». Добавленные действия перетащите в начало, но после создания объекта «Particles».

Создание экземпляров объекта в макете в Construct 2

Здесь нужно отметить, что события «Is outside layout» особенные. Они будут возникать постоянно, пока объект будет падать за пределами макета и получится, что объекты «Light» и «ResultText» будут создаваться очень много раз. Это нас не устраивает, поэтому для события «Is outside layout» (так же как и для события «On collision with»), добавьте действия для удаления объектов «Red», «Blue», «RedLight» и «BlueLight» и создание экземпляров объектов Particles посередине объектов «Red» и «Blue». Вот, что должно получиться.

Удаление объектов в Construct 2

Запустите выполнение макета «Level1» и проверьте, что теперь при вылете синего кружка за пределы макета, взрываются оба кружочка.

Взрыв кружочков при вылете за границы макета в Construct 2

Но есть одна особенность. Когда дым рассеется, вы можете увидеть, что красный кружочек остаётся на макете. Давайте разберёмся, почему так происходит.

Кружочек не удалён из макета

Дело в том, что при возникновении события, экземпляры объектов, для которых эти события описаны, помечаются. Далее, производятся описанные действия следующим образом. Если объект упомянут в событии, то действия производятся со всеми помеченными экземплярами. Если объект не упомянут в событии, то действие происходит со всеми экземплярами объекта.

В нашем случае это работает так:

- происходит событие;
- в событии участвует объект «Blue», значит для него отмечаются экземпляры, с которыми это событие произошло, т.е. помечается один единственный экземпляр – наш кружочек;
- в событии участвует объект «Red», значит для него отмечаются экземпляры, с которыми это событие произошло, но т.к. единственны экземпляр объекта не вылетел за пределы макета, он не помечается;
- команда «Delete» объекта «Blue» выполняется для объекта, который участвовал в событии, поэтому эта команда выполняется только для выделенных экземпляров объектов, в нашем случае это единственный экземпляр и он удаляется;
- команда «Delete» объекта «Red» выполняется для объекта, который участвовал в событии, поэтому эта команда выполняется только для выделенных экземпляров объектов, в нашем случае нет выделенных экземпляров, поэтому кружочек и не удаляется.

Чтобы эту особенность обойти, сделаем функцию, в которой будет удалять объекты и заодно делать все завершающие действия для уровня. Для этого добавьте на макет объект «Function». При добавлении появится такое же предупреждение, как и при добавлении объекта «Touch», что объект используется для всего проекта в целом. Не обращаем на него внимания.

Добавление функции в Construct 2

После этого на страницу событий начните добавлять новое событие. В диалоге «Add event» на первом шаге выберите объект «Function» и нажмите «Next».

Добавление функции в Construct 2

На следующем шаге выберите событие «On function» и нажмите «Next».

Добавление события On function в Construct 2

На последнем шаге задайте имя для функции и нажмите «Done».

Ввод имени функции в Construct 2

Теперь в функцию перетащите все действия из события «Is outside layout».

Перетащите действия в функцию

Теперь по событию «Is outside layout» нужно вызвать функцию «EndOfLevel». Добавьте такое действие: в диалоге «Add action» выберите объект «Function» и на следующем шаге выберите «Call function» (вызвать функцию).

Вызов функуии в Construct 2

На последнем шаге задайте имя вызываемой функции.

Вызов функции в Construct 2

На странице событий должно получиться так.

Вызов функции в Construct 2

Проверьте работу макета, выполнив его.

Теперь, чтобы ничего не мешало для изменения будущих уровней, уберём объекты «RedLight» и «BlueLight» на макет «Empty» (вырежьте их с макета «Level1» и вставьте в макет «Empty» в любое место). После этого для события «On start layout» добавьте создание этих объектов так, чтобы координаты объекта «Red» совпадали с координатами объекта «RedLight» и аналогично для объектов «Blue» и «BlueLight».

Создание объектов RedLight, BlueLight и выставление координат в Construct 2

Выполните макет «Level1» и удостоверьтесь, что кружочки пульсируют светом.

Теперь давайте сделаем, чтобы при альбомной ориентации экрана фоновая картинка не растягивалась шире игрового пространства. Т.е. будем растягивать её только по вертикали. Чтобы это сделать на макете «Level1» щёлкните по фоновой картинке «Background» и для поведения «Anchor» выставьте свойствам «Left edge» и «Right edge» значение «None».

Выставление свойств поведения Anchor в Construct 2

Выполните макет и убедитесь, что картинка не тянется по ширине.

Фоновая картинка не тянется по ширине в Construct 2

Чтобы теперь закрасить белый фон чёрным цветом, для события «On start layout» добавьте системное действие «Set layer background color» и установите чёрный цвет.

Добавление действия Set layer background color в Construct 2

Установка цвета слоя в Construct 2

Перетащите это действие в самое начало. В результате действие в событии должно выглядеть так:

Установка цвета слоя в Construct 2

Теперь после запуска мы увидим чёрный фон слева и справа.

Чёрный фон в игре при альбомной ориентации

Также нужно предусмотреть, что у нас игра рассчитана на пропорции экрана 16:9, а на iPad пропорции экрана 4:3 и в портретной ориентации в полноэкранном режиме на этом планшете в игре будут появляться наши чёрные поля. Чтобы этого не было можно растянуть картинку по ширине до пропорции 4:3. Подсчитать новую ширину картинки можно так: 1920 * 3 / 4 = 1440. Этот метод работает хорошо, но тогда на экранах с пропорцией 16:9 будет обрезаться картинка и в нашем случае обрежется постепенное затемнение к краям. Это будет выглядеть так:

Обрезка краёв картинки в игре

Если у вас фон, который можно подрезать, то можно сделать так, как здесь описано, но мы пойдём более сложным путём, зато сохраним края фоновой картинки. Будем корректировать ширину картинки по изменению размера окна. Событие об изменении размера окна посылает объект «Browser». Добавьте его на макет.

Добавление объекта Browser на макет в Construct 2

После этого на странице событий добавьте событие «On resized» объекта «Browser».

Добавление события On resized в Construct 2

После этого для события добавьте действие «Set width» нашего объекта «Background».

Установка ширины экземпляру объекта в Construct 2

И будем вычислять конечную ширину по следующей формуле: min(ViewportRight(0) - ViewportLeft(0), 1440).

Вычисление ширины фоновой картинки в Construct 2

Теперь ширина фоновой картинки будет подгоняться под ширину макета, но не более 1440. Аналогично нужно сделать и по событию «On start of layout», т.к. при старте событие «On resized» не срабатывает. Просто скопируйте в это событие новое действие. Проверим, как теперь выглядит игра для пропорции 16:9. Как видим всё прекрасно, края картинки не обрезаются.

Игра в пропорции 16:9

Есть ещё один неприятный момент в событии «On resized». Когда при обработке события мы получаем размеры макета, то иногда возвращаются размеры до изменения, а иногда – размеры после изменения. Чтобы точно получить установленные размеры макета, нужно немного подождать с помощью действия «Wait», например, 1 секунду, и только потом выставлять размер фоновой картинки. Так и сделаем. В итоге должно получиться так:

Ожидание перед изменением размера фоновой картинки в Construct 2

Ну вот, всё и готово для добавления второго уровня. В начале, добавим макет для второго уровня. Для этого щёлкните правой кнопкой мышки по макету «Level1» на панели свойств и в меню выберите «Duplicate».

Клонирование макета в Construct 2

Там же сразу после добавления укажите имя для нового макета «Level2».

Изменение имени макета в Construct 2

Чтобы теперь открыть созданный макет на отдельной закладке, дважды щёлкните по нему на панели проекта. После этого добавьте ещё один прямоугольник на макет и расставьте прямоугольники и кружочки, как показано на рисунке.

Расставьте объекты на втором уровне игры

Когда у нас есть два уровня, можно сделать переходы между уровнями. Чтобы это сделать поменяем действие «Go to», которое происходит по событию «On collision with». Щёлкните по нему дважды, чтобы вызвать диалог изменения действия. Как видите, здесь сейчас указан переход на уровень 1.

Выбор макета для перехода

Нажмите «Back». Так мы вернёмся на этап выбора действия. Выберите здесь действие «Go to layout (by name)» (переход к макету по имени) и нажмите «Next».

Выбор макета по имени в Construct 2

Здесь нам нужно вычислить имя следующего уровня. Для этого в имени макета (у нас это «Level1», «Level2», …) нужно взять число стоящие справа от слова «Level» и прибавить 1. Так и сделаем.

Вычисление имени макета следующего уровня игры в Construct 2

Здесь, функция right возвращает указанное количество символов в строке, находящиеся справа, функция len возвращает количество символов в строке, а функция int преобразует строку в число, чтобы можно было прибавить 1.

Запустим теперь макет «Level1», уберём верхний чёрный блок, чтобы кружочки столкнулись и через 3 секунды после этого появится 2-й уровень. Всё работает.

Точно так же измените действие «Go to layout» для функции «EndOfLevel», но имя макета менять не нужно. Оно должно остаться таким же.

Выполнение макета с начала в Construct 2

Теперь сделаем плавное затемнение и осветление между уровнями, чтобы не было скачков при смене уровней. Для этого нам понадобится чёрный прямоугольный объект. Клонируем объект «BlackBlock». Для этого щёлкните правой кнопкой мышки по этому объекту на панели «Projects» и выберите пункт меню «Clone».

Клонирование объекта в Construct 2

После этого на этой же панели или на панели свойств поменяйте имя на «CoverFadeOut». Затем добавьте этот объект на макет «Empty» (перетащите) и растяните на весь макет и поместите его под все объекты (меню «Z Order -> Send to bottom of layer»). Кстати, чтобы не было никаких миганий в дальнейшем ширину объекта «CoverFadeOut» сразу сделайте равной максимальной ширине фоновой картинки 1440. Затем уберите у этого объекта поведение «Physics» и добавьте поведения «Fade» и «Anchor». Выставьте свойствам поведений следующие значения.

Выставьте следующие значения свойствам поведений Fade и Anchor

Теперь в событие «On start of layout» добавьте действие для объекта «System» действие «Create object» и укажите объект для создания «CoverFadeOut». Координаты выставим по центру макета.

Выставление координат создаваемому объекту в Construct 2

Запустите макет «Level1» или «Level2» и убедитесь, что при запуске окно макета чёрное и за секунду проявляется уровень.

Теперь сделаем затемнение после прохождения уровня. Для этого клонируйте объект «CoverFadeOut» и новый объект назовите «CoverFadeIn». Так же создайте экземпляр нового объекта на макете «Empty», растяните его на весь макет (ширина так же 1440). Установите свойствам «Right edge» и «Bottom edge» значения «Window right» и «Window bottom» соответственно. Затем для нового объекта свойства поведения «Fade» поменяйте так, как показано на рисунке.

Выставьте значения свойств поведению Fade

Теперь для события «On collision with» добавьте действие объекта «System» «Create object» и выберите объект «CoverFadeIn» и так же задайте координаты, как и для объекта «CoverFadeIn».

Чтобы сначала сработало затемнение, а затем произошел переход к следующему уровню, переместите наше новое действие над действием «Go to layout» и добавьте сюда же действие «Wait» на 1 секунду. Вот что должно получиться.

Зтемнение и ожидание в игре в Construct 2

То же самое сделайте для функции «EndOfLevel».

Зтемнение и ожидание в игре в Construct 2

Теперь добавим ещё один уровень. Так же клонируем макет «Level1», даём новому макету имя «Level3» и переставляем объекты, так, чтобы уровень был чуть сложнее. А вот и результат. Кстати теперь можете попробовать игру в полноэкранном режиме и не только на компьютере, но и на планшете и смартфоне.

Читайте также: