Construct 2

О программе

Construct 2 – это популярный игровой конструктор, с помощью которого можно делать 2D игры для разных платформ, включая HTML5, т.е. для интернета. Игры самых разных жанров – от платформеров до РПГ. Конструктор позиционируется как "для пользователей без знания программирования". Это в частности означает, что не надо писать код в виде текста в текстовом редакторе. А есть редактор событий, в котором пользователь проводит основное время разработки – на события навешивает действия.
На самом деле это тоже программирование с логикой, циклами, переменными, функциями… Только в другой визуальной форме. Так что, с популистской формулировкой "без знания программирования" я не согласен.

Интерфейс

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

1. Меню. Устроено по типу закладок ribbon. Совершенно не перегружено кнопками, т.к., почти все действия можно проворачивать в других окнах интерфейса.
2. Макет. Layout. Основное окно для визуальной настройки интерфейса игры. Является аналогом уровня в игре, слайда в презентации или сцены в каком-нибудь мультимедиа проекте. Это на скриншоте здесь макет. Также на этом месте может открываться окно событий Event sheet. Между макетом и событиями можно переключаться по закладкам в верхней половине этого окна.
3. Проекты. Projects. На эту панель вынесены все объекты, используемые в проекте во всех макетах. Отсюда можно объекты добавлять, удалять, выделять. Это место панель Проекты делит с панелью слоев Layers.
4. Свойства. Properties. Здесь находятся все свойства, эффекты и поведения выделенного объекта.
5. Объекты. Objects. На этой панели видны только те объекты, которые добавлены на текущий макет. Это место также бронирует панель Tilemap, куда загружается картинка с тайлами.

Процедура работы

Начинается проект с его создания – на Start page нажмите New Project. В открывшемся окне будут предложены шаблоны или возможность открыть пустой проект. В пустом проекте макет сначала пуст. Новый объект добавляется по двойному клику, или по ПКМ, или из панели Projects. Картинки, тайлы, звуки, тексты, кнопки, массивы, частицы… это всё отдельные типы объектов. Добавив объект и выделив его, вы сможет отрегулировать его свойства на панели Properties. Для сцены или для объекта события и отклики на события добавляются на закладке Event sheet – здесь создается вся логика игры.

Проверяется работа макета по кнопке меню Run layout.

Экспортируется проект по кнопке меню Export project.

Обращу внимание на то, каким будет окно проекта для конечного потребителя. У каждого макета есть свойство Layout Size – это доступное пространство, в пределах которого может перемещаться камера. Именно доступное, но не всё видимое. А размеры сугубо видимого пространства задаются уже в свойствах проекта – это параметр Window Size.

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

Последнее замечание к замечанию по экспорту. Браузер Google Chrome позволяет все-таки запустить экспортированную игру и без локального сервера. Как – читайте в СТАТЬЕ про публикацию в HTML5. Если коротко, то предварительно в Windows надо выполнить команду:

Объекты

Каждый тип отличается от другого оригинальным набором свойств и возможностей. В поставке по умолчанию 44 типа, но можно добавить еще другие типы, которые вне программы зовутся плагинами. Например, есть неплохая коллекция плагинов ЗДЕСЬ. Если плагин имеет расширение c2addon, то добавляется путем простого перетаскивания в окно конструктора. Если плагин является папкой с js-файлами, то надо эту папку скопировать в Construct 2\exporters\html5\plugins\.

Самый часто употребляемый тип объекта – это Sprite. Добавление спрайта всегда осуществляется при посредничестве графического редактора. Если вы не хотите рисовать в нем, то можете загрузить в него картинку с диска, и это будет ваш спрайт. У спрайта есть анимации – это последовательности картинок. При открытии спрайта в редакторе окно анимаций находится справа, а фреймы для выделенной анимации внизу, и это отдельные окошки. Если вы их не видите, подвигайте основное окно редактора туда-сюда. Выделив анимацию, вы сможет добраться до ее свойств в панели Properties и отрегулировать, например, ее скорость. Еще у спрайта есть Collision polygon – это область, которая будет испытывать соударения. Эту область можно вручную задать в редакторе спрайта.

Окно добавления объекта на сцену выглядит так:

Нужный почти в каждой ирге тип объекта – Tilemap. Это фон, пол, стены… Лучше загружать в программу через редактор готовую карту тайлов, ее изображение появится на панели Timemap в нижней правой части окна программы. Это довольно хитрый объект. Он сразу занимает всю площадь видимого окна, но поначалу прозрачен. В его пределах можно рисовать участком(!) тайловой карты. Для этого нажмите кнопку-карандашик на панели Tilemap кликните по участку на карте и рисуйте им на сцене. Размер участка задается через свойства Tile width и Tile height в свойствах объекта Tilemap.

Аудио – тоже объект. И его тоже сначала надо добавлять в проект, чтобы озвучивать свою игру. После загрузки этого объекта появится возможность манипулировать аудио – создавать события, связанные со звуком, и формировать звуковые действия. Но пока нечего проигрывать, надо добавить звуковые файлы в папки Sound или Music на панели Projects. В Sound рекомендуется добавлять короткие звуки, они при старте игры сразу загружаются в память компьютера. В Music рекомендуется загружать продолжительные композиции, они в память компьютера полностью не загружаются, а проигрываются в режиме потока.

Мышь, клавиатура – тоже объекты. То есть, чтобы ваша поделка реагировала на мышь и клавиатуру игрока, надо сначала эти объекты добавить в макет. Потом формировать события на клик мыши или на нажатие той или иной клавиши, и к этим событиям добавлять действия.

Можно ли в играх на C2 рисовать? Да, можно. После добавление плагина Canvas. Сам разработчик может рисовать програмно с помощью событий. Также он может, комбинируя события мыши и действия Canvas, дать возможность рисовать пользователю его приложения: на событие мыши Left button is down навесить действия канвы Draw point (чтобы точки рисовались под курсором надо X этого действия задавать Mouse.X-Canvas.X и соответственно для Y). Если канва вписана в Layout, то -Canvas.X можно упустить. Объект Canvas поначалу похож на объект Sprite, только для него возможные действия совсем другие, заточенные на рисование.
По большому счету можно рисовать и без этого плагина, но с меньшей функциональностью: если на то же событие Left button is down навесить системное действие Create Object и выбрать спрайт для кисточки.

Поведения

Поведения – это суперспособности объекта, которыми он при создании еще не обладает, их надо добавлять по ссылке Behavious на панели свойств. Наверное, самым значимым и востребованным в играх является Physics, поведение как физического объекта. Обладающий этим поведение объект будет испытывать силу тяжести, силу трения, обладать эластичностью…

Более специфические и простые способности приобретает герой игры-платформера, если ему добавить поведение Platform – может ловко прыгать и передвигаться с помощью клавиатуры, менять гравитацию на отрицательную...

Поведение Drug & Drop дает возможность пользователю хватать объект и перетаскивать его на другое место…

Поведение Scroll To заставляет камеру двигаться за персонажем, держа его все время в фокусе...

Так выглядит окно добавления поведения:

При добавлении события и/или действия на закладке Event sheet появляется возможность оперировать параметрами того или иного поведения, если оно прикреплено к объекту.

Смотри ПЛЕЙЛИСТ по всем(!) поведениям – очень наглядно. На английском. Но там даже вслушиваться не надо, всё понятно из видеоряда.

События

Определенно, ключевая тема движка. Здесь разворачивается сценарий и логика игры. То, что здесь делает разработчик – это аналог программирования. Здесь – это на закладке Event sheet. Первоначально закладка пуста. По двойному клику или по клику на ссылке Add event вызывается окно добавления события. В окне можно выбрать системное событие или событие, происходящее с объектом.

После добавления события в правой части закладки Event sheet можно добавить действие по ссылке Add action, которое должно происходить при наступлении события. Действия также бывают разные по тому же принципу.

В верхней ленте меню есть раздел Events – откройте его, чтобы увидеть полезные для этого раздела кнопки:

• [Add event] – добавляет событие в самый низ списка.
• [Add condition] – добавляет дополнительное к событию условие, обязательное для исполнения. Аналог логического AND.
• [Add action] – добавляет действие в конец списка действий выделенного события.
• [Add sub-event] – добавляет дочернее событие к выделенному событию. Аналог дочернего IF внутри родительского IF.
• [Add group] – создает именованную группу, в которую можно перетащить события для структурирования кода. Группу можно сворачивать/разворачивать.
• [Add variable] – создает переменную. Глобальную в общем случае или локальную для группы.
• [Add include] – включает в код содержание другого Event sheet.
• [Add comment] – вставляет полоску комментария, в исполнении кода не участвующего.

Также [Add condition] можно использовать для логического OR. Для этого надо совершить клик ПКМ на самом левом краешке верхнего события и в контекстном меню выбрать Make 'Or' block.

Эффекты

По умолчанию у объекта, например, Sprite только один эффект Blend mode, который может принимать разные режимы. Мне понравился режим Destination out, с помощью которого можно сделать прожектор так: Сделать спрайт с белым кружком с радиальным градиентом. Поставить ему ему эффект Blend mode = Destination out. В системном событии Every tick (или даже без него) даем этому спрайту Set position (mouse.X, mouse.Y). Демонстрацию такого эффекта вы сможете посмотреть, открыв с домашней страницы тестовый проект Lighting.capx, находящийся на диске в папке программы в подпапке examples.

Описании и иллюстрирование эффектов ЗДЕСЬ.

Некоторые лайфхаки

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

Перемещение спрайта в положение мыши по клику:
1. Мгновенно:
  Mouse > On any click | Sprite > Set position to (Mouse.X, Mouse.Y)
2. Плавно:
  Создать переменную pere.
  Mouse > On any click | System > Set pere to 1
  System > pere = 1 | Sprite > Set position to (lerp(Sprite.X, Mouse.X, 0.1), lerp(Sprite.Y, Mouse.Y, 0.1))
  System > round(Sprite.X) = round(Mouse.X) | Set pere to 0
  System > round(Sprite.Y) = round(Mouse.Y) |

Сделать прожектор:
Нижний слой – картинки, видимые сквозь прожектор.
Верхний слой. Background = черный. Разместить на нем спрайт прожектора.
Спрайт прожектора – простой черный круг, сделанный кистью с низким уровнем жесткости. Blend mode ему поставить Destination out. Добавить поведение DragDrop.
P.S. Особенность – кнопки и другие Form controls под черным слоем не скрыть.

Оптимизация:
- Настройки проекта: Pixel rounding = on округляет до пикселя без дробей. Актуально для стиля пиксельной графики.
- Событие Every X sec предпочтительней, чем Every tick, если требуется не очень часто проверять, например, раз в секунд.
- Локальные переменные меньше потребляют, чем глобальные.
P.S. См. РОЛИК по оптимизации.

Чтобы физический объект крутился вокруг своего центра и не падал (например доска качель):
Впереди доски разместить спрайт с совпадением центров.
Сделать наложенный спрайт невидимым.
В событиях на Every tick навесить действие для доски Set position to another object и выбрать наложенный спрайт.

Array: Чтобы считывать значения по координатам с помощью At:
Надо задавать значения с помощью Set.
Если же задавать значения на панели Properties, то считывать их можно только по ассоциативному имени Name!

Дубли спрайтов: Если создаются дубли путем перетаскиванием с зажатой Ctrl (это не клоны), то их потом можно прогонять по циклу и пускать во взаимодействие с дублями другого объекта – это взаимодействие будет создано как в цикле (удобно, всего одно событие).

Revolved join для создания качающейся цепочки:
Нижний спрайт_2 присоединить к верхнему спрайту_1.
Спрайту_2 задать новый image poin вверху.
Действие по добавления Revolved join делать от спрайта_2 (выбрать новый image point) и объект привязки выбирать спрайт_1.
В результате спрайт_2 новым поинотом будет прикреплен к нижней части спрайта_1 (поинты у 1-го не нужны) и вращаться вокруг этого низа.
P.S. Первоначально надо выставить на сцене спрайты в правильное положение и дать им поведение Physics.

Полезные мелкие наблюдения:

• Событие объекта Touch > On tap object можно применять вместо события объекта Mouse > On click. Убиваем двух зайцев – на ПК и на мобильнике.
• Если у Слоя (Layer) стоит Global=yes, то его можно размножить между Сценами, например, для единого фона (у др. слоев Transparent=yes): в других Сценах нужно добавить слой с таким же именем.
• Объект Text: Если текст не будет помещаться в отведенную ему область, то он вообще не отобразится на холсте при проигрывании.
• Если для Спрайта добавить Поведение Scroll To, то камера начнет двигаться за ним.
• Нельзя в программу загружать файлы с русскими именами – проблемы с HTML5 после экспорта (при просмотре в прогк проблем нет). Видимо, из-за кодировки.
• Для Particles картинка должна быть квадратной.
• Клик по спрайту считается только в области коллизии.
• В объекте Browser есть действие ExecJS – можно выполнить js-скрипт.

Скачать, почитать, посмотреть

📥 Портабельная сборка Construct 2 r280 (пароль для разархивирования newart.ru) с лицензией и плагинами Canvas и SVG. Без лицензии программу вы можете скачать на официальном сайте и эти сборки немногим будут отличаться, особенно для начинающего пользователя.
📥 Портабельная сборка Construct 3 r397 (пароль для разархивирования newart.ru) с лицензией и прокси-сервером. Сборка на базе Chromium. В 3-й версии есть Timeline и поддержка 3D. Логин (без пароля), аппаратное ускорение, beta-версию можно отредактировать в файле settings.json, или просто его удалите и при первом запуске после этого сделайте настройки в визуальной форме.

📗 Руководство пользователя по Construct 2 на английском. Online.
📗 Руководство пользователя по Construct 2, переведенное на русский (корявенько переведено, но читаемо). PDF.