Урок 2. "Движок" для игры

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

Как мы уже умеем из предыдущего урока, создадим новый документ и установим цвет фона, к примеру, голубого цвета. Делаем это в свойствах фрейма:

Кликнем дважды левой кнопкой мыши по любому месту и выберем создание активного объекта (Active). Его мы будем использовать в большинстве случаев.

Разместим его на экране и дважды кликнем теперь по нему, попав в редактор объекта. Об этом окне стоит рассказать поподробнее.

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

Первый ряд.

Clear (Ctrl-N) – очистить текущий рисунок;

Import (Ctrl-O) – импортировать изображение или набор анимаций;

Export (Ctrl-S) – экспортировать текущий рисунок;

Options – выбор предпочтений.

Второй ряд.

Cut (Ctrl-X) – вырезать выделенную часть;

Copy (Ctrl-C) – скопировать выделенную часть;

Paste (Ctrl-V) – вставить предварительно вырезанную или скопированную часть;

Delete – выполнить процедуру удаления.

Третий ряд.

Третий ряд представлен кнопками «Восстановить действие» (Undo Ctrl-Z) и повторить отменённое действие (Redo Ctrl-Y).

Четвёртый ряд.

Flip horizontally (Ctrl-I) – отразить горизонтально;

Flip vertically (Ctrl-J) – отразить вертикально;

Crop (Ctrl-K) – обрезать пустое прозрачное место вокруг объекта;

Transparency (Y) – произвести действия с прозрачностью объекта.

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

Шестой ряд.

Selection tool (B) – выделяет часть объекта с помощью мыши;

Color picker (P) – пипетка, определяет цвет внутри данного окна и устанавливает его в окне цветовой палитры;

Brush tool (D) – кисть для рисования произвольных линий;

Line tool (L) – кисть для рисования прямых линий.

Седьмой ряд.

Rectangle tool (R) – рисование прямоугольника;

Circle tool (E) – рисование окружности;

Polygon tool (G) – рисование многогранников;

Shape tool (M) – создание очертаний.

Восьмой ряд.

Fill tool (F) – инструмент «Заливка»;

Spray tool (S) – инструмент «Аэрозоль»;

Text tool (T) – инструмент для создания текста;

Eraser tool (U) – стирательная резинка.

Девятый ряд.

Size (W) – изменение размера;

Rotate (A) – поворот объекта;

View hot spot (H) – показывает место отсчёта координат объекта;

View action point (Q) – просмотр и изменение «активной точки», например, места, откуда будут вылетать другие объекты.

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

Цветовая палитра в особом представлении не нуждается, поэтому перейдём к рассмотрению редактора анимаций.

В самом левом окне мы видим названия анимаций. Вот они:

Stopped – объект в состоянии покоя;

Walking – объект идёт;

Running – бежит;

Appearing – появляется;

Disappearing – исчезает;

Bouncing – отскакивает;

Launching – запускает;

Jumping – подпрыгивает;

Falling – падает;

Climbing – лезет по лестнице;

Crouch down – наклон вниз;

Stand up – подъём вверх.

Эти названия мы можем переименовывать, а также устанавливать свои с помощью меню, которое можно вызвать щелчком по любому названию правой кнопкой мыши.

Чуть правее находятся стрелки, указывающие направление текущей анимации (для каждого названия можно выбрать не более четырёх – вверх, вниз, влево и вправо). Их мы можем отрисовывать сами, либо импортировать уже готовые. Справа находится кнопка «Play», с помощью которой мы можем проверить работу анимации, не закрывая окна.

Переключим режим средней части с вкладки Frames на Direct Options.

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

Давайте попробуем анимировать нашего героя и заполнить анимации Stopped и Walking. У меня сохранились нарисованные мной анимации персонажа старой игры про Диззи для ZX Spectrum, которые я и использую.

И хотя для понимания нашего урока это необязательно, в будущем мы обязательно будем использовать этот навык.

Для начала нам нужно найти готовые анимации героя. Как правило, это отдельные кадры png с прозрачным слоем или анимации gif. В последнем случае программа автоматически определит и импортирует все кадры. В случае png-кадров убедитесь, что в конце названия каждого кадра присутствует номер в порядке увеличения. Тогда программа сможет импортировать все пронумерованные кадры сразу. В противном случае придётся добавлять их вручную.

Если установлен чекбокс Sprite sheet, то мы сможем вырезать кадры из одного рисунка, предварительно установив ширину и высоту каждого кадра (строка ниже).

Откроем Import (Ctrl-O) – импортировать изображение или набор анимаций, укажем путь, а также дополнительные опции, как представлено на рисунке.

Дополнительно мы можем при импорте осуществить Crop (в последующем нажатием на иконку или горячими клавишами Ctrl-K), установить точку отсчёта координат и «активную» точку, а также произвести импорт выделенной части кадра.

После импорта перейдём из вкладки Frames во вкладку Directions Options и установим цикл и скорость смены кадров, например, в 15.

Аналогичные действия произведём и с серией кадров Walking, только сделаем это уже для направлений «вправо» и «влево».

Заполненные кадры анимации отмечены на окне слева чёрными точками, а незаполненные – контурными.

Если имеются анимации прыжка и падения, заполним и их.

После создания героя мы должны указать его тип перемещения, благо что в программе имеется богатый выбор. Как и в прошлом уроке, мы выставляем тип Platform во вкладке свойств объекта (там, где нарисован синий бегущий человек) и выставляем другие значения скорости, гравитации и силы. Я их выставил по значениям 45, 45 и 80, оставив параметры ускорения – замедления без изменений.

Создадим новый объект – землю для нашего героя. Как и в прошлом уроке, мы можем создать её из вкладки 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. Так мы и поправим.