Четверг, 16 Августа 2018, 04:11

Приветствую Вас Гость

Меню сайта
Категории каталога
Создание игр [309]
Статьи об общих понятиях связанных с созданием игр.
Программирование [69]
Гайды по программированию на разных ЯП.
Движки и Гейммейкеры [123]
Статьи о программах для создания игр, уроки и описания.
Софт [27]
Различные программы, в том числе в помощь игроделам.
2D-графика [11]
Уроки по рисованию, растр, пиксель-арт, создание спрайтов и пр.
3D-графика [10]
Уроки по моделированию, ландшафт, модели, текстурирование и пр.
Моддинг игр [4]
Модификация компьютерных игр, создание дополнений, перевод, хакинг.
Игры [81]
Статьи об играх, в том числе и сделанных на гейммейкерах.
Разное [63]
Статьи, которые не вошли в определённые разделы.
Наш опрос
Сколько вы уже создали своих игр?
Всего ответов: 16220
Главная » Статьи » Создание игр

Платформер-экшен в 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 (невидимый при старте):



Теперь основу не видно. Продолжение тут.
Категория: Создание игр | Добавил: dilovar50 (14 Ноября 2012) | Автор: Давлятов Диловар
Просмотров: 12873 | Комментарии: 5 | Рейтинг: 3.9/10 |
Теги: 2d, Статья, Scirra Construct, констракт, начинающим, скирра, платформер, экшен, создаем игру, урок
Дополнительные опции:
Также если вы считаете, что данный материал мог быть интересен и полезен кому-то из ваших друзей, то вы бы могли посоветовать его, отправив сообщение на e-mail друга:

Игровые объявления и предложения:
Если вас заинтересовал материал «Платформер-экшен в Scirra Construct для начинающих (часть 1)», и вы бы хотели прочесть что-то на эту же тему, то вы можете воспользоваться списком схожих материалов ниже. Данный список сформирован автоматически по тематическим меткам раздела. Предлагаются такие схожие материалы: Если вы ведёте свой блог, микроблог, либо участвуете в какой-то популярной социальной сети, то вы можете быстро поделиться данной заметкой со своими друзьями и посетителями.

Всего комментариев: 5
+1-
5 Slavker   (16 Декабря 2012 00:14)
Отличная статья, все проиллюстрировано, наверное много стараний вложил, очень хорошая статья. 5 из 5.

+1-
3 XeoDoz   (03 Декабря 2012 18:29)
XeoDozМолодец smile

+1-
4 dilovar50   (03 Декабря 2012 19:39)
dilovar50спасиб smile

+5-
2 cnstntn   (28 Ноября 2012 18:41)
cnstntnне судьба сразу рисовать спрайты с прозрачным фоном? на мой взгляд это жуткий геморрой обрабатывать каждый кадр, избавляясь от хромокея... статья хорошая) если бы мне сразу такая попалась, когда я только знакомился с Construct'ом, было бы гораздо проще yes

+-15-
1 Anifest   (19 Ноября 2012 03:08)
AnifestНенавижу конструкторы(((

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
10 случ. движков
  • Starling
  • Game Creator
  • Luxinia
  • Bitsy
  • lifeEngine
  • Point&Click Dev Kit
  • PointJS
  • Ignifuga
  • VCMI
  • LuxRender
  • Друзья сайта
    Игровой форум GFAQ.ru Перевод консольных игр
    Все права сохранены. GcUp.ru © 2008-2018 Рейтинг