
Платформер-экшен в Scirra Construct для начинающих (часть 1)
dilovar50
опубликовал в
Construct Classic
Начинаем.
В качестве ГГ (сокращённо Главный Герой) я буду использовать своего персонажа. Платформу, я нарисовал такую:

Открываем 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 комментариев