Откроем Construct. В самом начале мы видим следующее:

то окно создания игр в Construct. Но долго на него смотреть не будем) Приступим к делу.



Прежде чем создавать свою первую игру, нам нужно произвести некоторые настройки. По умолчанию программа создаёт проект с шириной и высотой уровня 640х480, но наш первый уровень будет иметь размер немного больше. Поэтому, первым делом нам нужно настроить уровень: на панели Properties (Свойства), которая располагается слева (смотрите рис. 1), во вкладке Layout Properties (Свойства Уровня) напротив Wight (Ширина) установите значение 2000, а напротив Height (Высота) — 600. Теперь наш уровень будет иметь длину в 2000, а высоту в 600 пикселей.

Далее нам нужно настроить размер окна, через которое мы, подобно видеокамере, будем наблюдать за персонажем и окружающими его объектами в игре. Для этого во вкладке Layout Properties (Свойства Уровня) напротив Application (Приложение) кликните по ссылкеProperties (Свойства). Откроется ряд новых опций, среди которых нам нужно найти Window Properties (Свойства Окна) — смотрите рис. 2. Напротив Window Width (Ширина Окна)установите значение 800, а напротив Window Height (Высота Окна) установите 600. Теперь при запуске приложения, размер игрового окна будет 800 на 600 пикселей.

Кстати, на панели Properties (Свойства), чуть выше есть вкладка Information Properties (Информация), где напротив Name (Имя) вы можете написать название вашей игры, а напротив Creator (Создатель) вписать своё имя — смотрите рис. 3.

Также я рекомендую включить опцию FPS in caption (FPS в заголовке), которая располагается чуть ниже, во вкладке Runtime Properties (Опции Запуска) — смотрите рис. 4Эта опция помогает отслеживать количество кадров в секунду и загруженность видеопамяти при запуске приложения.

Если вы хотите, чтобы при запуске ваша игра открывалась на полный экран, установите флажок Fullscreen (Полный экран).

Создаем каркас


Объекты в сцене можно условно разделить на два типа — каркас и декорации. Каркас является основой взаимойдействия объекта с другими телами, именно к нему применяются все поведения, но он не виден в сцене. Декорации — это то, что мы видим в игре на экране, например, анимация персонажа. Обычно они привязаны к каркасу и наследуют его поведение. Такое разделение создано по одной простой причине — чтобы столкновение объектов всегда происходило одинаково. Анимированый персонаж, или спрайт, постоянно меняющий размер, может пересекаться с объектами абсолютно неожиданным образом, что обычно приводит к его телепортации. Но если персонаж будет привязан к невидимому боксу, который имеет всего 1 кадр анимации и 1 направление, и именно этот бокс будет сталкиваться со всеми объектами — столкновение всегда будет работать одинаково корректно.

Для начала добавим спрайт, который будет выполнять роль невидимого препятствия и через который наш персонаж не сможет провалиться. Скачайте изображение спрайта по этой ссылке — platforma01.png.

В центре экрана располагается белое поле, это Layout Editor (Редактор Уровня), тут мы и будем собирать весь уровень в игре. Чтобы добавить спрайт, кликните на белом поле правой кнопкой мыши (далее сокращенно ПКМ), откроется всплывающее меню, в котором нужно выбрать команду Insert an object (Вставить объект), кликнув на ней левой кнопкой мыши (далее сокращенно ЛКМ). Смотрите рис. 5.

Откроется окно с заголовком Insert new object (Вставить новый объект), где содержатся все объекты программы. Среди них найдите объект под названием Sprite (Спрайт) — смотрите рис. 6. Кликните по нему 2 раза ЛКМ, и вместо курсора на поле появится крестик. Кликните ещё 1 раз ЛКМ в том месте, где хотите разместить объект на поле.

Откроется окно редактора Picture Editor (Редактор Изображений) — смотрите рис. 7. В самом верху есть иконка с изображением открытой папки — это кнопка Open (Открыть), кликните на неё и, указав нужный путь к файлу platforma01.png, нажмите Открыть. В редакторе появится спрайт. Закройте окно редактора, кликнув на крестик (справа вверху), вас спросят Do you want to save changes to this images? (Вы хотите применить изменения к изображениям?) — нажмите кнопку Да.

На белом поле появится спрайт. Давайте зададим ему имя.

Чтобы назначить имя спрайту, перейдите на панель Properties (Свойства), и там во вкладкеCommon (Общие), напротив опции Name (Имя) впишите имя спрайта — назовите егоplatforma01. Смотрите рис. 8.

Теперь нужно задать спрайту дополнительный атрибут, чтобы наш персонаж не смог проваливаться сквозь объект. Найдите чуть ниже вкладку Groups (Группы), а в ней ещё одну под-вкладку Attributes (Атрибуты) и установите галочку напротив опции Platform (Платформа) — смотрите рис. 9. Данный параметр создает одностороннее столкновение персонажа и платформы, т. е. персонаж не сможет провалится сквозь платформу, но он всегда сможет запрыгнуть на нее снизу.

Рис. 9 — Атрибут Platform (Платформа).

Так как этот спрайт является каркасом, по которому будет ходить наш персонаж, нужно сделать его невидимым. Для этого спуститесь ещё ниже по списку, найдите вкладкуAppearance (Появление) и напротив опции Invisible on start (Невидимый при старте)поставьте галочку — смотрите рис. 10. Теперь при запуске игры спрайт platforma01 будет невидимым.

Пришло время заняться расстановкой спрайта. Но перед этим нам нужно включить одну очень полезную опцию, которая позволяет точно располагать объекты в сцене. В самом верху программы на главной панели команд выберите вкладку Layout (Уровень), среди открывшихся опций найдите раздел Grid (Сетка), включите сетку, нажав на большой кнопкеToggle Grid (Переключить Сетку), и рядом установите галочку Snap-to moving (Движение с привязкой к сетке). Смотрите рис. 11.

В этой же группе нажмите на кнопку Edit grid (Править сетку), откроется окно Grid settings (Настройки сетки) — смотрите рис. 12. Установите Horizontal width (Горизонтальная ширина) и Vertical height (Вертикальная высота) по 64 пикселя, нажмите ОК.

Теперь расположите спрайт platforma01 в левом нижнем углу сцены Layout Editor (Редактора уровня), он самостоятельно примагнитится к точке и слегка выйдет за границу сцены. Чтобы скопировать спрайт, удерживайте клавишу Control + ЛКМ перетащите его курсором мыши. Спрайт автоматически примагнитится к сетке. Раскопируйте спрайт по всему уровню, чтобы у вас получилось, как на рис. 13 (масштаб уровня уменьшен на 75%).

Теперь создадим спрайт, который будет основой нашего персонажа. Скачать изображение спрайта можно по этой ссылке — basis.png. В Layout Editor (Редактор Уровня) на белом поле кликните ПКМ и добавьте новый объект спрайт. Откроется окно Picture Editor (Редактор изображения), укажите путь к изображению и, загрузив его, закройте редактор. Поместите спрайт чуть выше платформ, которые мы создали до этого. Смотрите рис. 14. (масштаб уровня уменьшен на 50%).

Затем в свойствах спрайта, во вкладке Common (Общие) задайте имя basis. Далее ниже, во вкладке Behaviors (Поведения), напротив опции New behaviors (Новое поведение), нажмите Add (Добавить). Смотрите рис. 15.

Откроется список поведений, среди которых нам нужно выбрать поведение Platform (Платформер). Смотрите рис. 16.

Теперь нам нужно сделать так, чтобы камера в игре всегда следила за нашем персонажем. Для этого ниже ищем вкладку Groups (Группы), открываем под-вкладку Attributes (Атрибуты) и напротив опции Center view on me (Центрировать взгляд на мне) ставим галочку. Смотрите рис. 17.

Так как спрайт basis тоже является лишь каркасом для основного персонажа, нужно сделать его невидимым также как и платформу. Для этого ниже в свойствах, во вкладке Appearance (Появление) поставьте галочку напротив опции Invisible on start (Невидимый при старте).

Итак, основной каркас игры мы построили. Теперь нам нужно создать второй слой уровня, куда мы будем загружать спрайты декораций. В правой части экрана есть панель, где располагаются три вкладки: Project (Проект), Animator (Анимация) и Layers (Слои).Смотрите рис. 18.

Нажмите на третью вкладку Layers (Слои), и на панели отобразится список всех слоев в сцене. Смотрите рис. 19.

Кликните ЛКМ на названии слоя (по надписи Layer 1), слева, на панели Properties (Свойства)появятся свойства слоя. Найдите вкладку Layer Properties (Свойства Слоя) и напротив Name (Имя)впишите новое имя слоя carcass. Смотрите рис. 20.

озвращаемся в правую часть экрана к вкладке Layers (Слои) и создаем новый слой, нажав на зеленую стрелку с направлением вверх (рядом с корзиной). Появится новый слой с названием Layer 2, кликните по нему ЛКМ и переименуйте в свойствах на scenery. У вас должно получится в точности, как на рис. 21.

Пришло время загрузить платформу, по которой будет бежать наш главный герой. Скачать изображение платформы можно по этой ссылке — platforma02.png.

Итак, убедитесь, что слой 2 выделен (если нет, то кликните ЛКМ по названию слоя — scenery), перейдите в Layout Editor (Редактор Уровня), кликните на белом поле ПКМ и создайте новый объект спрайт. Загрузите изображение платформы и переименуйте его в platforma02. Далее раскопируйте и расставьте спрайт таким образом, чтобы копии находились на тех же местах, что и спрайты platforma01 (т.е. перекрывали их). Смотрите рис. 22 (масштаб уровня уменьшен на 75%).

Давайте добавим задний фон. Для этого скачайте его по ссылке — background.png, затем выделите слой carcass (кликнув по названию) и нажмите зеленую стрелку с направлением вниз. У вас появится новый слой. Переименуйте его в background, затем добавьте на этот слой новый объект спрайт и, загрузив в него изображение заднего фона, переименуйте сам спрайт на background. Там же, в свойствах, во вкладке Common (Общие), установите координаты расположения заднего фона в пикселях — значение 1000 напротив надписи X, 300 — напротив Y. Также давайте зададим размер заднего фона, установив параметр Width (Ширина) — 2000, а Height (Высота) — 600. Если ничего не напутали, у вас должно получится как на рис. 23.

Теперь во вкладке Layers (Слои), на слое с названием background, кликните на изображение замка. Смотрите рис. 24. Из зеленого он перекрасится в серый цвет — это означает, что теперь вы не сможете выделить спрайты, находящиеся на этом слое, пока не выключите блокировку. Эта очень полезная опция, которая предотвращает случайное выделение объектов, стоящих на заднем плане.