Конструктор игр Clickteam Fusion

Создадим новый объект – землю для нашего героя. Как и в прошлом уроке, мы можем создать её из вкладки Background – Backdrop, но можно использовать в качестве земли и активный объект. Тогда наше условие соприкосновения (предотвращение падения объекта) будет выглядеть так (Collision – Another object):

Дополнительно добавим к нашей скупой поверхности траву, создав её в качестве ещё одного активного объекта, разместим её над землёй и растиражируем на всё оставшееся незаполненное место через функцию Duplicate.

Казалось бы, наш урок должен быть завершён, ведь при запуске проекта по F8 мы увидим корректную работу программы. Однако при создании героя мы использовали движущиеся объекты, а это значит, что при соприкосновения движущейся руки, ноги или иной части героя с более-менее вертикальной плоскостью, герой будет совершать непредвиденные движения, например, подлетать вверх. Герой сможет взбираться на вертикальные стенки, совсем как человек-паук, и существенно нарушить игровой процесс. Проверим это, создав посредине нашей земли выступающий прямоугольник и указав это в редакторе событий (условие, аналогичное остановке объекта с землёй):

Чтобы этого не происходило, укажем для нашего героя Диззи тип перемещения Stop (он изначально таковым и был), и создадим новый активный объект прямоугольной формы, которому мы и присвоим тип Platform и все те же свойства главного героя.

Соответственно в редакторе событий заменим все условия соприкосновения с объектами с Диззи на наш новый прямоугольник. Делаем это просто: в редакторе событий дважды кликаем на иконку Диззи и выбираем вместо него новый объект.

Проверим работу игры. Если при запуске проекта наш прямоугольник сможет перемещаться по земле, продолжим работу и перейдём в редактор событий.

Кликнем снова на надпись New condition и выберем из выпадающего меню пункт Always («Всегда»):

В столбце напротив героя выберем Position – Select Position, а затем в новом окне надпись Relative to:

В новом окне выберем нашего героя – Диззи. Таким образом, анимации нашего героя будут находиться поверх нашего нового прямоугольника.

Теперь, если запустить игру, станет ясно, что осталось направить анимации героя в нужную сторону. Сделаем это, определяя направление движения героя и устанавливая соответствующую анимацию. Если герой стоит, будем присваивать ему анимацию Stopped:

В последующем мы для удобства будем приводить такой листинг (Ctrl-L). Он удобен тем, что показывает нам все действия, которые запрограммированы в редакторе событий. В левой колонке указан номер события, напротив чёрной точки – условия, а ниже с небольшим абзацем – сами действия.

Разберём ещё раз действия нашей программы по условиям.

1: Проверяем соприкосновение нашего основного объекта с типом Platform с землёй. Если он соприкасается, мы останавливаем движение.

2: Проверяем соприкосновение нашего основного объекта с типом Platform с препятствием аналогично пункту 1.

3: Всегда делаем так, чтобы персонаж с анимациями (Диззи) находился в центре нашего основного объекта.

4: Если основной объект, которым мы управляем, стоит, показываем анимацию персонажа Stopped.

5: Если направление движения объекта вправо, при этом объект движется, направляем Диззи вправо, при этом выбираем анимацию ходьбы.

6: Аналогично для движения влево.

Вот и всё, взаимодействие персонажа с окружающим миром закончено. Как обычно, клавиши управления: стрелки лево, право, Shift = прыжок.

Урок 3. Стартовое меню

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

Как обычно, создадим новый документ, дважды кликнем левой кнопкой мыши по появившемуся окну и найдём текстовый объект «String». Чтобы его найти быстрее, достаточно ввести начальные буквы в строке поиска.

Объект можно найти и другим способом: кликнуть в правом меню по группе «Text».

Растянем побольше наш объект до размера читаемого пункта и перейдём в окно свойств. Обращаю внимание на слово «Paragraph» в окне свойств – в данном случае мы могли бы ввести несколько вариантов строки через кнопку «New», если бы делали, скажем, игру на разных языках.

Но мы идём дальше в текстовые опции и изменяем тип и размер шрифта. Например, выберем шрифт Tarzan 24-го размера.

Поменяем, чтобы не забыть, и имя объекта. Вместо стандартного «String» напишем имя объекта, пусть это будет «Easy» – лёгкий уровень сложности нашей игры. Кроме него, у нас будут уровни «Medium» и «Hard».

Давайте будем учиться всегда при создании нового объекта менять имя по умолчанию («String», «Active» и др.) на осмысленное, соответствующее функциональности нашего объекта. Поверьте, это очень поможет в дальнейшем!

Выберем пункт «Клонирование объекта» и введём количество строк – 3. Мы видим три одинаковых объекта, но с разными именами в окне свойств. Поменяем имена объектов, как мы только что сделали выше, а затем и текст в самих строках.

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

Теперь поговорим о переменной, которая будет иметь значение текущего уровня. Во-первых, для нашей задачи мы можем использовать глобальные переменные. Они расположены во вкладке «Values» свойств нашего документа (не фрейма!).

Они имеют значения вида «1 – Global Value A», и их можно переименовывать. Например, на рисунке выше мы создали три переменные и указали имя первой из них «Level». Их количество ограничено.

Также, мы можем использовать переменных из свойств объекта. Возьмём, например, наш активный объект, в котором мы нарисовали оранжевый круг, и заглянем в его свойства на вкладку «Values».

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

И наконец, для этой цели мы можем использовать счётчики. Это самый наглядный способ, и их значение проще всего отслеживать, если разместить их в рабочей области фрейма.

Сейчас мы используем первый способ, то есть перейдём к названию нашей игры в окне рабочего пространства и выберем имя нашей переменной – Level. Присвоим ей значение 1.

Вызываем редактор событий.

Создадим первое условие. Если наша переменная равна единице, то значение Y для нашего оранжевого круга должно равняться значению Y нашего объекта с текстом.

То же самое делаем и для остальных значений.

Создадим условия перемещения оранжевого круга.Добавляем ещё одно условие – если нажата клавиша «Вниз» на клавиатуре.

В этом случае к переменной Level мы прибавляем единицу.

Копируем предыдущее условие и изменяем его так, чтобы при нажатии клавиши «Вверх» из переменной Level вычитали единицу.

Теперь всё? Давайте подумаем. Согласно нашему алгоритму значение Level может вырасти больше трёх или уменьшиться до минусовых значений. Что делать? Так как мы работаем с шагом на один, то есть прибавляем или отнимаем единицу, то следующее значение после трёх будет 4, а до 1 – 0. Так мы и поправим.

Если значение Level равно 0, устанавливаем его в 3 (чтобы цикл работал по кругу), а если 4 – то одному. Проверяем работу.

Оранжевый круг стоит не совсем ровно по отношению к надписям. Дело в том, что в этой версии редактора точка объекта, по которой идёт расчёт положения в пространстве, по умолчанию находится в центре. А для текста – в левом верхнем углу. Поэтому дважды кликнем по оранжевому кругу и в настройках поменяем положение этой точки (на изображении глаза) в левый верхний угол. Проверим работу, теперь всё нормально.

Давайте теперь проверим, а сохраняется ли в новом фрейме наша переменная Level. Создадим новый фрейм и создадим в нём надпись об успешном окончании работы программы. И надпись о значении счётчика. Отмечу, что название можно менять и не в самом объекте, кликая дважды по нему, а и в окне свойств. Теперь нужно создать счётчик.

Найти его сложно, поэтому просто используем строку поиска.

Перейдём во второй фрейм в редактор событий и создадим условие – при начале работы фрейма значение счётчика нужно установить равное переменной Level.

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

Итак, всё работает, а покажу ещё один способ. Как можно сделать выбор меню при левом клике мыши на каждой из строк.

Создаём условие. Если пользователь кликает по первому объекту, причём делает это левой кнопкой мыши и одинарным кликом, значит, значение переменной мы установим в 1. И перейдём в следующий фрейм.

То же самое мы сделаем для второго и третьего объекта.

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

Урок 4. Инвентарь в игре

В этом уроке мы рассмотрим наиболее сложный момент, который встречается при создании игр, – инвентарь.

Создадим новый документ. Сначала нарисуем поверхность и героя, как мы уже делали в уроке 2. Ничего страшного, повторение – мать учения. Растянем первое изображение в длинный прямоугольник, нажмём Clear и воспользуемся зелёной заливкой.

Создадим героя, назовём его “Hero” и загрузим для него спрайт Диззи. В Animations – Stopped установим:

Для Walking установим следующие значения для движения вправо и влево (а также загрузим по 3 анимации Диззи для движения в этих направлениях):

Точно такие же значения зададим для Jumping и загрузим по 7 анимаций. Для Falling будут те же значения и по 3 анимации.

Теперь создадим два предмета, которые будем брать в инвентарь. Пусть это будут жёлтый и красный круги.

Вот что у нас пока получилось:

Кликаем на Event Editor – New condition – Hero – Collisions – Another object и выбираем нашу поверхность. Затем задаём для нашего героя Movement – Type – Platform. Возвращаемся в Event Editor, кликаем на столбец героя и задаём Movement – Stop.

Создаём еще один объект Active. В его окне выбираем Fill tool, Clear, Brush tool и рисуем фрагмент травы.

Называем её Green и с помощью функции Duplicate создаём 22 таких же изображения. Размещаем их так, чтобы они располагались на нашей поверхности от одного конца экрана до другого.

Запускаем приложение (F8) и убеждаемся, что Диззи может ходить вперед и назад по траве.

Теперь создадим 2 предмета, которые будем брать в инвентарь. Пусть это будут жёлтый и красный круги. Создаём новые предметы, называем их Item 1 и Item 2, рисуем круги и раскрашиваем их в жёлтый и красный цвета соответственно.

Находим в списке объектов (All objects) Popup menu и сразу же вводим первую позицию (Add). Пусть она будет называться Nothing («Ничего»). Мы дадим нашему герою возможность выбора – ничего не брать и закрыть меню.

Привыкайте, что сами предметы лучше сразу включать в группы. Тогда мы сможем обращаться не к конкретному объекту, а к любому объекту в группе. Следующий пример покажет, как это работает.

Кликаем на красный круг, Events – Qualifier(s) – Edit – Add – Friends.

А пока откроем редактор событий. Создадим первое условие, чтобы наш герой не падал вниз, а перемещался по земле. New condition – The mouse pointer and keyboard – The keyboard – Upon pressing a key, нажимаем клавишу Enter.

И сразу создаём второе условие. Давайте при нажатии клавиши Enter выводить наше меню в заранее указанное место. Кликаем на столбец Popup menu, выбираем Show At и перетаскиваем меню в нужное место.

Копируем второе условие и создаём третье. Ведь если мы нажали Enter и в это время герой перекрывает объект, его нужно добавить в наше меню. Так мы и поступим: кликаем на Upon pressing “Enter” – Insert – Hero – Collision – Overlapping another object – Item 1 (жёлтый круг). Далее кликаем на столбец Popup menu – Add item.

Присвоим жёлтому кругу номер 2 (первый у нас уже есть – это «Ничего») и название “Yellow circle” (в появляющихся окнах нужно написать 0, 2 и Yellow circle соответственно). Сам объект перенесём в область за пределы игрового пространства: кликаем на столбец жёлтого круга, Position – Select position и задаем его координаты.

Создадим следующее условие на основе предыдущего: вновь скопируем строку условия, поменяем в ней жёлтый круг на красный и переставим галочку на столбец красного. При этом мы изменим номер объекта (3) и его название (Red circle).

Теперь научим программу выкладывать предметы: New condition – Popup menu – Item selected – 2. Если в нашем меню выбран Item 2, удалим его из меню и перенесём его снова рядом с главным героем: кликаем на столбец жёлтого круга – Position – Select position – Relative to – Hero. Далее перетащим квадрат с изображения героя на положение справа от него.

Теперь в столбце Popup menu выберем Delete item – 2. Всё то же самое сделаем и для красного круга.

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

Закроем этот проект и создадим новый, в котором мы создадим наглядный инвентарь для квестовой сцены. Создадим объект (Active).

Загрузим заранее приготовленную картинку с пустыми окнами для предметов и два предмета. В данном примере использовалось изображение игры «Secrets of the Dark: Eclipse Mountain», взятое с сайта www.metacritic.com. Давайте узнаем размер картинки, создадим экран такого же размера (для картинки ниже это Frame 1 – Settings – 560 x 420), а саму картинку установим в координаты 0:0, то есть она должна полностью совпасть с экраном.

Назовем картинку “Font”.

Создадим два активных объекта, загрузим заранее заготовленные изображения предметов и назовём их Item 1 и Item 2. Не забываем поместить их в общую группу (Events – Qualifier(s) – Edit – Add – Friends).

Перетаскиваем их на нашу картинку.

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

Кстати, не забудем указать для наших предметов инвентаря тип перемещения Bouncing ball («прыгающий мяч»).

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

Создаём первое условие: New condition – Storyboard controls – Start of frame, в столбцах Item 1 и Item 2 выбираем Movement – Stop. Так при старте фрейма мы останавливаем наши объекты, так как изначально скорость движения у них указана 60 (в настройках типа перемещения).

Второе условие: если мы кликаем мышью по объекту, мы направляем его в сторону активного квадрата. New condition – The mouse pointer and keyboard – The mouse – User clicks on an object. Нажимаем ОК.

В появившемся окне выбираем Friends.

Дальше кликаем на столбец друзей – Direction – Look in the direction of – Relative to – Зеленый квадрат. Нажимаем «OK» в следующем окне, подтверждая координаты 0:0. Далее снова кликаем на столбец друзей – Movement – Set speed и указываем скорость движения 60.

Заметьте, мы указываем не конкретный предмет инвентаря, а сразу всю группу.

Теперь давайте остановим объект и разместим его в ячейке. Сделаем это в виде условия накладывания объекта – здесь мы опять используем группу – на наш активный квадрат. При этом мы размещаем предмет по центру квадрата, останавливаем его, а сам квадрат отодвигаем в сторону так, чтобы он был размещён по центру следующей ячейки. New object – Friends – Collisions – Overlapping another object – Зеленый квадрат. Кликаем на столбец друзей – Position – Select position – Relative to – Квадрат. Еще раз кликаем на столбец друзей – Movement – Stop. Далее столбец квадрата – Position – Select position – Relative to – Квадрат.

Проверяем работу – всё должно работать. Предметы летят к квадрату, сам квадрат смещается на одну ячейку.

Но что будет, если будет заполнено всё место в инвентаре?

Сделаем наш квадрат невидимым. Расклонируем любой наш объект, чтобы проверить заполненность инвентаря.

Сначала научим программу удалять объекты из инвентаря. Условие: если мы кликаем левой кнопкой мыши по объекту, при этом объект находится в зоне меню, его можно удалить.

New condition – The mouse pointer and keyboard – The mouse – User clicks on an object – OK – Friends. Далее кликаем на условие – Insert – The mouse pointer and keyboard – The mouse – Check for mouse pointer in a zone и выделяем нижнюю часть нашей картинки (ячейки).

Кликаем на столбец друзей – Destroy.

Следующее условие. При выходе активного квадрата за пределы нашего инвентаря его нужно вернуть на первую позицию. Но сделать это нужно в том случае, если объектов в инвентаре меньше или равно семи. New condition – Квадрат – Position – Compare X position to a value, затем задаем значение и выбираем Greater or equal.

И ещё. Почему на первую позицию, ведь она может быть занята предметом? Посмотрим ещё раз наш алгоритм. Если первая позиция будет занята предметом, то квадрат сразу сместится на вторую, а если занята вторая – на третью, и так далее.

Кликаем на условие – Insert – Friends – Pick or count – Compare to the number or “Group.Friends” objects in a zone и снова перемещаем окно на наши ячейки внизу. В появившемся окне выбираем Lower or equal, 7.

Первую координату Х активного квадрата мы узнаем из его свойств.

Кликаем на столбец квадрата – Position – Set X coordinate и вводим координаты.

Так как у нас уже есть условие по клику мыши, исключим для него возможность срабатывания, когда предмет уже находится в инвентаре (кликнем на координаты и выберем в выпадающем списке Lower). В Start of frame добавим опцию Stop для Item 3-10.

Проверяем. Заполняем инвентарь предметами, удаляем их и снова заполняем. Всё должно работать.

Программу, которую мы создали, можно ещё и оптимизировать. Какие наши действия были лишними?

А в следующий раз мы познакомимся с приближением в играх.

Часть II. Функционал игр

Урок 5. Приближение в играх

В этом уроке мы узнаем, что такое zoom-zoom. Мы рассмотрим три способа, но сначала зайдём на официальный сайт Clickteam – Clickstore и загрузим Mega Shader Pack.

Затем перенесём файлы из архива в папку с Clickteam Fusion.

Первый способ

Откроем новый проект, загрузим любой понравившийся фон (например, свободно распространяемое изображение с сайта 10wallpaper.com) и добавим активный объект и Backdrop.

Добавим для активного объекта эффект линзы: Properties – Effects – Lens – OK.

Также снимем чекбокс в настройках напротив слов «следовать за фреймом».

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

Затем перейдём в редактор событий и будем увеличивать первую переменную при прокручивании колёсика мыши вверх и уменьшать при прокручивании колеса вниз. New condition – The keyboard – When mouse wheel is moved up – OK, повторяем для следующего условия, выбирая «Moved down».

Кликаем на столбец объекта в первом условии – Alterable values – Add to – (вводим 1) – ОК. Повторяем для второго условия, заменяя на «Subtract from».