Платформер-экшен в Scirra Construct для начинающих (часть 1)
Тема для обсуждения. От автора: В этой статье я подробно рассказываю как в конструкторе игр 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 (красная точка):
И устанавливаем центр примерно по середине платформы. Закрываем редактор, он спросит что-то типо "сохронить изменения в изображении?", жмём "Да", и у нас на робочем поле появляется наша платформа:
Жмём на платформу, и слева во вкладке Properties (свойства) жмём по плюсику рядом с Common, появятся общие свойства спрайта:
В графе Name пишем имя спрайта, например Platforma.
Теперь опускаемся ниже, находим вкладку 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 (невидимый при старте):
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:
Игровые объявления и предложения:
Если вас заинтересовал материал «Платформер-экшен в Scirra Construct для начинающих (часть 1)», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела.
Предлагаются такие схожие материалы:
Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.
не судьба сразу рисовать спрайты с прозрачным фоном? на мой взгляд это жуткий геморрой обрабатывать каждый кадр, избавляясь от хромокея... статья хорошая) если бы мне сразу такая попалась, когда я только знакомился с Construct'ом, было бы гораздо проще
1
Молодец 
спасиб 
не судьба сразу рисовать спрайты с прозрачным фоном? на мой взгляд это жуткий геморрой обрабатывать каждый кадр, избавляясь от хромокея... статья хорошая) если бы мне сразу такая попалась, когда я только знакомился с Construct'ом, было бы гораздо проще 
Ненавижу конструкторы(((
