Урок по созданию платформера.

уроки, мануалы и прочая документация по Clickteam Fusion

Сообщение Урок по созданию платформера.
» 13 авг 2016, 09:19

Создание платформера в Clickteam Fusion 2.5.
Изображение
В этом уроке мы разберем тонкости создания платформера в Clickteam Fusion 2.5.
Будут затронуты вопросы:
1) общие вопросы (настройка приложения, сцены, создание обьектов, загрузка спрайтов, создание анимаций
2) различные способы создания платформера. (через поведение платформа (platform movement), через объект платформер (platform movement object), через физику)
3)Создание движущейся платформы
4)Создание платформера используя физику

По мере написания, я буду создавать посты с продолжением, прокручивайте тему)

Для этого урока нам понадобится пак графики от Kenny
platformerGraphicsDeluxe_Updated.rar
(1.97 МБ) Скачиваний: 331



 Первые шаги
Начнем с создания нового приложения и с настройки основных моментов. Я использую русификатор, viewtopic.php?f=101&t=7240 , очень удобно =)
Введите название вашей игры. Если вы щелкните на “приложение” либо на сцену в панели рабочей области то внизу вы увидите панель свойств.
Изображение


В свойствах приложения в первой вкладке свойства установите приложение windows EXE так как мы будем компилировать игру под windows.
Во второй вкладке окно установите размер окна 800 на 600 пикселей (кликтим спросит вас желаете ли вы установить размер сцены равный размеру окну), остальные настройки приложения пока трогать не будем.

Откроем настройки сцены. Установите размер сцены 2000 на 2000 пикселей.
размер сцены можно выставить и здесь:
ИзображениеТам же установите цвет фона.
Дважды щелкните на вашу сцену в перечне сцен. Чтобы изменить масштаб сцены для просмотра зажмите ALT и крутите колесико. Чтобы прокручивать уровень используйте либо бегунки по краям либо зажмите пробел и с нажатой левой кнопкой мыши протягивайте уровень в нужное вам направление.
Если вы зажмете CTRL и будете крутить колесо мыши то уровень будет прокручиваться по горизонтали.
Если вы зажмете CAPS LOCK и будете крутить колесо мыши то уровень будет прокручиваться по вертикали.
Чтобы запустить приложение на выбранной сцене нажмите F8.

Теперь научимся создавать обьекты в кликтиме. Дважды щелкните на рабочее поле (или правой кнопкой мыши на рабочее поле и выберете вставить обьект либо нажмите CTRL+J).
Изображение
Выберете активный обьект
Изображение
Дважды щелкните на ваш активный обьект. Откроется редактор
Изображение
В редакторе нажмите на иконку папки чтобы выбрать ваше изображение.
У нас есть возможность загрузить либо секвенцию спрайтов либо загрузить спрайт лист.
Обратите внимание, что в нижнем левом углу перечень разных анимаций (стоять, идти,итд)куда следует загружать ваши спрайты. Также вы можете создать свои анимации.

 Графический редактор, загрузка анимаций
Первый способ, загрузка секвенции кадров:
Загрузим спрайт стойки как отдельный png файл p1_front из папки player пака графики.
Изображение
Слева в меню установите галочку импортировать как анимацию и установите интервал, с какого кадра по какой, если вам нужно загрузить анимацию.
Изображение
Изображение
Изображение
Установите скорость анимации 24 кадра в секунду и поставте повтор. И удалите 11 кадр из обоих направлений движения, так как они повторяются с первым.
В направлении просто копируете ваши спрайты и отражаете их слева направо.
(спрайты выделяются и просто копируются горячими клавишами, либо через контекстное меню открывающееся правой кнопкой мыши. Функция отразить также находится в этом меню)
Изображение
Чтобы просмотреть вашу анимацию нажмите кнопку запуск

Второй способ загрузки спрайтов, из спрайтлиста:

Загрузите спрайтлист (лежит там же где мы брали спрайты для ходьбы)
Изображение
теперь нам нужно установить размер блоков
Изображение
От правильности собранного спрайтлиста будет зависить правильно ли вы загрузите ваши спрайты. С данным спрайтлистом у вас получится так себе, так как он не для этого =) Попозже напишу как собирать правильные спрайтлисты для кликтима.
Так же можно вырезать в редакторе из спрайтлиста нужный спрайт. Незабывайте использовать функцию обрезать

Загрузим спрайт земли используя обьект быстрый фон (в его свойствах поставте тип плитка)
Изображение


Чуть позже разберем способы создания поведения персонажей платформера в кликтиме:
1)через поведение платформа (platform movement)
2)через объект платформер (platform movement object)
3)через физику
Последний раз редактировалось Microtoon 24 авг 2016, 05:58, всего редактировалось 7 раз(а).
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]

Сообщение Урок по созданию платформера.
» 20 авг 2016, 05:30

Очень хорошо! :ok: :good2: :good:
Для новичков очень полезная статья, я когда разбирался, то наверное неделю-две не мог разобраться с графическим редактором. :smile:
 Мои уроки по CTF 2.5
Урок по обьекту Lacewing: http://c2community.ru/forum/viewtopic.php?f=96&p=97922#p97922,
Урок по обьекту Lacewing (Чат(этот урок лучше предыдущего, но лучше изучить оба урока)): http://www.c2community.ru/forum/viewtopic.php?f=96&t=9834

Четыре примера на Construct

21.5.2017 подал заявку на карантин по причине утраты почты и телефона, к которым привязан аккаунт :)
Gleb-GaerMan - это мой новый аккаунт.
Аватара пользователя

Участник
Сообщений: 258
Я тут с 16 янв 2016
Двиг: CTF 2.5/C2
VK: vk.com/corbot
Репутация 35 [ ? ]

Сообщение Урок по созданию платформера.
» 20 авг 2016, 05:36

Gleb_Master писал(а):Очень хорошо! :ok: :good2: :good:
Я когда через обьект с платформером Марио делал столкнулся с такой проблемой: нельзя сделать что-бы персонаж нормально стоял, а тем более бегал на двигающейся платформе. Может после твоих уроков получится, может даже потом вдвоём что-нибудь великое сделаем. :smile: :drinks:

Я напишу в следующей части урока о том как это исправить. Думаю не стоит расписывать все слишком подробно, и скриншотить только основные моменты? Да, конечно можно будет что нибудь вдвоем замутить.
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]

Сообщение Урок по созданию платформера.
» 20 авг 2016, 09:16

Продолжаем урок по созданию классического платформера.
Вы уже должны к этому моменту сделать главного героя с анимациями и загрузить фоновый объект быстрый фон с тайлом земли и растянуть полученный фон на всю длинну уровня.

Тайл - структурная единица плиточной графики, когда изображение составляется из маленьких фрагментов одинаковых размеров. Лучше всего использовать бесшовные текстуры, тогда изображение выглядит не так монотонно.

первый способ создания платформера - через поведение платформа:
 Первый способ создания платформера
Теперь назначим нашему протогонисту поведение платформа - нажмите на спрайт вашего персонажа, слева внизу будет окно с его свойствами. Нажмите на иконку бегущего человечка и выберете в появившемся меню поведение платформа.
Изображение

Если вы сейчас нажмете клавишу F8 вы увидите как ваш персонаж проходит сквозь землю.
Давайте научим нашего героя ходить по земле.
Для этого откройте редактор событий (горячие клавиши Ctrl+E).
Нажмите на новое условие, далее найдите в появившемся окне спрайт нашего героя и нажмите на него

В появившемся меню выберете столкновения ------> Фон
Теперь посмотрите правее, там будут находится ячейки. Нажмите на пустую ячейку под картинкой с нашим героем правой кнопкой мыши. Далее выберете Движение ----> Остановить
Теперь откройте свойства вашей земли и поставте ей атрибут препятствие (иначе программа будет воспринимать ваш фон просто картинкой бекграундом - это хорошо для создания задников игры)
Изображение
Изображение
То есть вы создаете сценарий в котором персонаж соприкасаясь с любыми фоновыми объектами будет остановлен.
По умолчанию, движение стрелки, прыжок Shift - в этом способе создания платформера нет необходимости управлять анимацией через события, так как кликтим делает это автоматически, главное правильно загрузить свои анимации в соответствующие графы (стоять, идти итд)
В свойствах вашего героя в той же вкладке где вы ставили ему поведение платформа поставьте силу прыжка 100

Теперь нам нужно сделать так чтобы протагонист всегда был в поле зрения.
Для этого в событиях нажмите на новое условие------> Иконка с шестеренками ( это специальные условия)-----> Всегда
В ячейке напротив, под иконкой главного героя правой кнопкой мыши. Далее выберете ячейку под иконкой с шахматной доской и конем (управление историей)------> Прокрутка-------> Положение экрана по центру сцены -----> На объект и выберете Вашего протагониста.
Изображение
Последний раз редактировалось Microtoon 24 авг 2016, 04:48, всего редактировалось 4 раз(а).
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]

Сообщение Урок по созданию платформера.
» 20 авг 2016, 10:39

Как создать движущуюся платформу
 создание движущейся платформы
Добавьте активный объект со спрайтом вашей будущей движущейся платформы. В ее свойствах поставьте ей поведение Путь. Нажмите кнопку редактировать.
Изображение
Нажмите в появившемся окне Настройки траектории движения кнопку Новая линия и поставьте вторую точку пути. Там же включите Инвертировать по окончании и Завершение движения, это позволит платформе бесконечно двигаться вперед - назад по заданной траектории. Нажмите на саму траекторию пути и выставьте скорость движения 10. Нажмите ок.
Теперь откройте события, сделайте так чтобы персонаж не проваливался сквозь платформу (так же как мы это делали ранее).
Нажмите на новое условие, далее найдите в появившемся окне спрайт нашего героя и нажмите на него

В появившемся меню выберете столкновения ------> с другим объектом и выберете движущуюся платформу.
Теперь посмотрите правее, там будут находится ячейки. Нажмите на пустую ячейку под картинкой с нашим героем правой кнопкой мыши. Далее выберете Движение ----> Остановить
Все, ваш персонаж не проваливается сквозь платформу и может по ней ходить.
Последний раз редактировалось Microtoon 24 авг 2016, 04:48, всего редактировалось 1 раз.
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]

Сообщение Урок по созданию платформера.
» 23 авг 2016, 15:26

Хороший урок! ждём продолжения!
Изображение
Совет: Вставь разделы урока в спойлеры; открыл выполнил - закрыл, открыл следующий - полагаю это будет более удобно ведь всё на одной странице. Посмотри как сделал я в: Конвертация формата NSF (NES - Nintendo Entertainment System/Денди)в формат MIDI.
Аватара пользователя

Участник
Сообщений: 198
Я тут с 26 июн 2015
Откуда: Россия
Двиг: Clickteam
Репутация 55 [ ? ]

Сообщение Урок по созданию платформера.
» 23 авг 2016, 15:40

Alex Yu писал(а):Хороший урок! ждём продолжения!
Изображение
Совет: Вставь разделы урока в спойлеры; открыл выполнил - закрыл, открыл следующий - полагаю это будет более удобно ведь всё на одной странице. Посмотри как сделал я в: Конвертация формата NSF (NES - Nintendo Entertainment System/Денди)в формат MIDI.

Спасибо, так и сделаю! Еще наверное изменю некоторые скриншоты, чтобы было нагляднее.
Пишите пожалуйста, что вы хотите увидеть в уроках, постараюсь сделать.
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]

Сообщение Урок по созданию платформера.
» 24 авг 2016, 04:51

Второй способ создания платформера, через физику.

Продолжаем урок по созданию классического платформера.
Физика это сильная сторона Clickteam Fusion 2.5, она позволит создавать вам более интересные миры.
Пример игр с применением физики Box2d: Angry Birds, Limbo.
 Небольшое введение в физику Clickteam Fusion 2.5
Изображение
Clickteam Fusion 2.5 использует физический движок Box2D, что позволяет имитировать в игре поведение физических объектов. То есть мы можем оперировать понятиями скорость, эластичность, плотность, трение, сила тяжести, импульс итд.

Физика работает со всеми экспортами кликтима, кроме XNA и JAVA. Маски коллизий спрайтов соответствуют геометрическим примитивам (круг, квадрат).
Кликтим дает нам следующие физические объекты:

Вентилятор- имитирует работу вентилятора, "сдувает" объекты в нужное направление.
Земля - физическая земля, именно ее мы будем использовать в нашем платформере.
Соединение - работает как булавка, можно "приколоть" один объект к другому.
Веревки - имитация физики цепей и веревок
Магнит - магнитит)
Частицы - создает физические партиклы
Двигатель - необходимый объект, для введения в игру физики.

Так же есть различные поведения, которые можно назначить объекту.


 Второй способ создания платформера, через физику.
Первым делом разместим на сцену объект физический двигатель.
Теперь назначьте вашему главному герою поведение Движение Платформа
Изображение
Теперь нам нужна поверхность по которой на персонаж будет ходить. Мы можем использовать быстрый фон или физический объект Земля. Давайте сделаем и так и так.
Разместите на сцену объект физическая Земля.
Теперь просто копируйте его и расставляете копии так чтобы они визуально находились по той линии по поверхности которой должен ходить ваш персонаж.
Изображение
Я нарисовал красную линию на скриншоте чтобы вам было понятнее по какой траектории будет двигаться персонаж.
Этот объект физическая земля идеален для создания платформера с изометрией. Вы просто размещаете на задний план картинку с нарисованными платформами а потом просто обводите их сверху копиями этого объекта.
Теперь откройте редактор событий и напишите:
Новое условие, Ваш персонаж ------> Столкновение ------> Фон и поставьте галочку справа под картинкой с вашим персом Движение ------> Остановить
Все, ваш персонаж может ходить)
Точно также поступаем с другим фоновым объектом - Быстрый фон, как с ним работать я писал выше.

 Внимание
Обратите внимание, что у вашего персонажа горячая точка должна быть размещена в самом низу вашего персонажа, так как именно с помощью координат горячей точки, кликтим позиционирует спрайты при коллизии в физическом мире при поведении платформер.
Горячую точку следует выставлять в самом начале, когда вы загружаете кадры вашей анимации - тогда она применяется ко всем кадрам. Если вы это не сделаете горячую точку придется выставлять вручную.
Изображение
Изображение


Вы можете, наравне с физическими спрайтами добавлять обычные. Например если вы сделаете здесь движущуюся платформу, как я писал выше, то все будет работать как надо.
Как двигать ящики, создавать физические подвесные мосты с помощью веревок и пользоваться остальными физическими объектами я напишу позже, когда мы будем разбирать различное игровое окружение.
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]

Сообщение Урок по созданию платформера.
» 24 авг 2016, 15:55

Третий способ создания платформера, через platform movement object.


Этот объект позволяет нам настраивать возможность совершать прыжки на платформу из под нее и позволяет более тонко настраивать анимации персонажа при различных событиях (например нажатие кнопок). Но самое главное - проверять коллизии (проверка перекрытия препятствия)

 небольшая хитрость, введение базиса
До этого момента мы прописывали коллизии нашего персонажа непосредственно с ним. Теперь сделаем немного правильнее: создадим невидимый спрайт basis, к которому прикрепим активный объект с нашими анимациями главного героя.
Это даст нам более точные определения столкновений окружающего мира с базисом, а анимации будут просто крепится сверху к базису.
Чтобы сделать спрайт невидимым, в свойствах его активного объекта в первой вкладке параметры отображения снимите галочку видимый при загрузке

В редакторе событий напишите событие благодаря которому камера центрируется на базисе (как это сделать мы рассматривали выше).


 настраиваем platform movement object
Разместите на сцену platform movement object
Изображение
Настройте показатели как на скриншоте.
Не забудьте поставить галочку прыжки сквозь платформы
Еще я добавил на уровень несколько статичных платформ.

 пишем события
Всегда ----> Центрировать экран на базисе (горячая точка по середине спрайта) - сцена следует за ГГ
----> Позиция ГГ на объект базис (горячая точка так же по середине) (этим мы привязываем один спрайт к другому)


Базис по размеру равен размерам ГГ (главный герой)

Старт Сцены ---------> Установить объект Базис (под значком platform movement object)
В условиях выберете platform movement object и нажмите проверка перекрытия препятствия и сюда же добавьте еще одно условие базис перекрывает фон(для этого нажмите правой кнопкой мыши на первое условие и выберете в появившемся меню вставить) ---------> справа, под значком platform movement object поставьте галочку выбранный объект перекрывает препятствие Этим мы обеспечиваем столкновение с фоном

В условиях, проверка перекрытия препятствия и сюда же добавьте еще одно условие Базис [b]НЕ в игровой зоне[/b] (чтобы это сделать поставьте событие базис в игровой зоне а потом просто инвертируйте его). Этим мы обеспечиваем взаимодействие с границей игрового мира - персонаж не сможет выйти за пределы сцены.

 осуществляем прыжок через платформу
В условиях, проверка перекрытия препятствия и сюда же добавьте еще одно условие Базис перекрывает вашу платформу ------> в событиях, Выбранный объект перекрывает платформу прыжком через нее.

 осуществляем движение базиса вправо-влево
В условиях нажмите на картинку с изображение джойстика и выберете Повторять пока джойстик нажат и поставьте стрелочку указывающую направление горизонтально вправо-------> в событиях, под значком pltform movement object поставьте галочку пользователь удерживает правую кнопку

Сделайте то же самое для движения в левую сторону.

 Научим персонаж прыгать
В условиях нажмите на картинку с джойстиком и выберете Повторять пока джойстик нажат, снимите стрелочку указывающую направление и поставьте галочку Кнопка 1
Изображение
и здесь же, добавьте еще одно условие, platform movement object, объект стоит на земле -------> в событиях, platform movement object, прыжок

 Управляем анимацией
Вначале, в свойствах активного объекта нашего ГГ поставьте Классификатор - Игрок, это нужно для того чтобы впоследствии реализовать выбор персонажа.
Классификаторы позволяют обьединять нам разные объекты общим свойством, к которому мы можем впоследствии обращаться в редакторе событий. После назначения нового классификатора, он появится в редакторе событий наравне с обычными объектами и системными условиями.
реализуйте вот этот код:
Изображение
Суть вот в чем: в условиях мы выставляем события (объект стоит на земли и при этом движется ----> ему назначается одна анимация. Если же объект стоит на земли и при этом НЕ движется ----> ему назначается другая анимация. Точно так же поступаем с Объект прыгает и Объект падает )

Понимаю, достаточно сложно понять все написанное выше, но на самом деле все очень просто.
Чтобы было еще понятнее прилагаю исходник с комментариями:
Platformer.rar
(183.3 КБ) Скачиваний: 190
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]

Сообщение Урок по созданию платформера.
» 29 авг 2016, 11:41

Небольшое дополнение: чтобы автоматически выставить Горячую точку (Hotspot) ко всем кадрам, зажмите Alt. С зажатым альтом хотспот ставится ко всем кадрам в данном направлении.
Изображение Изображение
Аватара пользователя

Участник
Сообщений: 1412
Я тут с 31 янв 2014
Откуда: Хабаровск/Южно-Сахалинск
Двиг: 0,5; 0,7; 0,33
Лицензия: Personal
Skype: microtoonrr
VK: romanov_r_a
Репутация 179 [ ? ]



Вернуться в Уроки по CTF

Сейчас эту тему просматривают

Зарегистрированные пользователи: нет зарегистрированных пользователей

Наверх