avatar

Платформер-экшен в Scirra Construct для начинающих (часть 1)

опубликовал в Construct Classic
От автора: В этой статье я подробно рассказываю как в конструкторе игр Scirra Construct версии r2 создать игру в жанре платформер-экшен. Так как многие новички путаются между версиями 2 и r2, подчёркиваю что версия Scirra Construct именно r2. Копипаст запрещён!

Начинаем.

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



Открываем Construct, создаём новый проект: жмём Файл -> New -> New Direct-X game:



Теперь нам нужно настроить размеры уровня. Слева есть вкладка Properties (свойства):



Чуть ниже во вкладке Layout Properties (свойства уровня) в графе Name (имя) нужно написать название уровня, я напишу Level1, вы можете написать что хотите. В графе Width (ширина) вписываем нужную ширину уровня в пикселах, я написал 2000. В графе Height (высота) вписываем высоту уровня, тоже в пикселах, я написал 600. Как вы увидели белый лист в рабочей зоне увеличился, и на нём видны две серые полоски — это границы камеры:



Размеры камеры нам тоже нужно настроить, для этого во вкладке Layout Properties слева, в конце списка, напротив Application, жмём на Properties:



После этого мы увидим вот это:



Там во вкладке Window Properties (свойства окна) в графе Window width (ширина окна) вписываем нужную ширину, я написал 800. И в графе Window height (высота окна) вписываем высоту 600:



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



Это список объектов. Во вкладке Common находятся объекты которые я чаще всего использую, по этому у вас объекты могут распологаться по другому. В этом окне выбираем Sprite (спрайт):



Окно с объектами исчезнет, а курсор мыши со стрелки изменитя на крестик, кликаем по любому месту, появится редактор изображений:



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



И устанавливаем центр примерно по середине платформы. Закрываем редактор, он спросит что-то типо «сохронить изменения в изображении?», жмём «Да», и у нас на робочем поле появляется наша платформа:



В графе Name пишем имя спрайта, например Platforma



Жмём на платформу, и слева во вкладке Properties (свойства) жмём по плюсику рядом с Common, появятся общие свойства спрайта:



Теперь опускаемся ниже, находим вкладку Groups (группы), и жмём на плюсик рядом с Attributes (атрибуты):



И ставим галочку напротив Platform (платформа), это нужно для того чтобы наш ГГ мог стоять на этой платформе и не проваливался сквозь неё. Давайте расставим платформы. Чтобы спрайты расставлялись ровно нужно включить сетку. В самом верху, во вкладке Layout жмём на Toggle grid, ставим галочку перед Snap-to moving:



потом жмём на Edit grid, появится маленькое окно, в width пишем 57, а в height 10:



Теперь расстовляем платформы, чтобы скопировать спрайт зажимаем Ctrl и перемещаем платформу, делаем из платформ как бы землю:



Отключаем сетку после того как расставили платформы (снимаем галочку перед Snap-to moving).

Так, теперь добовляем ГГ, опять кликаем два раза по свободному полю, выбираем Sprite, открывается редактор, в нём жмём Open и, если вы скачали моего перса, то в папке «Стойка» выбираем первый кадр. Теперь нужно избавиться от этого розового фона, выбираем инструмент Wand tool:



И кликаем по фону, весь розовый цвет выделится, жмём клавишу Delete, фон удалился. Теперь, наверху кликаем по Crop:



В результате должно получиться так:



Закрываем редактор, жмём «Да». Как мы видим, ГГ у нас слишком большой, просто делаем его поменьше. Назовите его как-нибуть, например Player или просто GG. Теперь будем добавлять кадры в анимацию. Кликаем по ГГ и в правом нижнем углу жмём по Animator:



Теперь справа мы видим ЭТО:



Default — это стандартное название анимации, кликаем по Default, и слева мы видим свойства анимации:



Animation name — это имя анимации. Так как эта анимация у нас будет анимацией стойки, вписываем имя Stop (можете писать что угодно, например Stoika). Теперь справа кликаем по Angle: 0(Right). Слева появляются другие свойства:



В графе «скорость анимации» пока напишем 20, а потом отрегулируем. Loop — Это значит зацикленно ли будет воспроизводиться анимация, т.е анимация дошла до конца и началась снова, дошла до конца и началась снова и т.д. Анимация стойки должна проигрываться зацикленно, по этому ставим галочку после Loop. Справа вы далжно быть заметили кадр нашего ГГ:



Здесь должны быть все кадры анимации стойки. В том поле где находится этот кадр жмём правой кнопкой мыши, и выбираем Import frames (импортировать кадры):



Откроется окно выбора, выделяем там все кадры стойки кроме первого, потому что мы его уже добавили:



Жмём Открыть, появится вот такое окно:



Жмём Import, кадры добавлены!



Теперь ВСЕ эти кадры нужно отредактировать так же как и первый кадр. Кликаем два раза по второму кадру и делаем всё тоже самое что и с первым.В конце концов должно получиться так:



Чтобы посмотреть что у нас получилось, жмём по маленькому значку монитора на верху:



По моему анимация стойки воспроизводится слишком быстро, поэтому я изменю её с 20 на 8. Теперь будем добовлять остальные анимации, такие как ходьба, прыжок, падение. Сначала добавим ходьбу. Для этого кликаем по ГГ и справа, во вкладке Animator, под анимацией Stop, жмём правой кнопкой мыши, и выбираем Add new animation (добавить новую анимацию):



Появится новая анимация с названием Animation 1, измените название на moving (перемещение). Здесь также импортируем все кадры ходьбы, из папки Ходьба. НО! Видите тут после того как мы импортировали кадры, есть пустой кадр:



Его нужно удалить! Иначе анимация будет воспроизвдиться не корректно. Выделите его и нажмите Delete. Отредактируйте все кадры. Должно получится так:



Таким же образом добавьте анимацию прыжка (назовите Jump) и падения (назовите falling). Должно получится так:



Добавили? Отредоктировали? Молодцы! Идём дальше. Теперь добавьте ещё один спрайт, любого цвета (в редакторе выберите инструмент Заливка, и залейте поле допустим чёрным цветом). Отредактируйте его так тобы по размерам он был схож с нашим ГГ, и назовите его basisGG (основа главного героя). Все события и поведения мы будем давать основе, потому что без этой основы наш ГГ будет застревать в некоторых местах уровня:



Сейчас мы будем «оживлять» ГГ, чтобы он мог ходить. Кликаем по основе и слева в свойствах найдите слово Behaviors (поведения), нажмите на плюсик рядом с ним, а потом Add (добавить):



Появится окно с поведениями, выбираем поведение Platform:



Основе добавится поведение (Platform) платформа. Если мы сейчас запустим игру, мы сможем управлять основой (стрелки впрво, влево, Shift — прыжок). Нам нужно сделать так чтобы наш ГГ всё время был привязан к основе. Переходим в события! Для этого в самом низу кликаем по Event Sheet Editor (Редактор событий):



Там мы видим чистый лист. Это и есть редактор событий. Чтобы создать новое событие кликаем два раза по свободной зоне, откроетя новое окно:



Нам нужно чтобы ГГ всегда был привязан к основе. В этом окне кликаем два раза по System. Вот что мы видим дальше:



Здесь выбираем условие Always (всегда) (кликаем два раза). Можете вписать две первые буквы в поиске (в верхнем правом углу окна) так будет быстрее найти это условие:



В редакторе появилось новое событие:



Теперь создаём действие. Рядом с событием кликаем по New action (новое действие). Появится новое окно, в нём выбираем ГГ:



В следующем окне выбираем Set position to another object (установить позицию на другом объекте):



В следующем окне, в графе Object выбираем объект basisGG, а в графе Image point пускай остаётся ноль:



Жмём Finish (финиш). Вот что у нас должно получиться:



Теперь если мы запустим игру, то увидим что ГГ привязан к основе. Но основа загораживает ГГ, нам нужно сделать основу невидимой. Кликаем по основе и в свойствах опускаемся в самый низ, и во вкладке Appearance (внешний вид), ставим галочку перед Invisible on start (невидимый при старте):



Теперь основу не видно.

Часть 1 (читаете)
Часть 2
Часть 3
Продолжение следует...

PDF версия

0 комментариев

Чтобы оставить комментарий необходимо .