Аркадные игры

на Click Fusion 2.5

 Урок 9

Infinite Runner

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

Материалы урока прикреплены к данному PDF-файлу. Для досту-

па к материалам, урок необходимо открыть в программе Adobe
Acrobat Reader.

2
 Infinite Runner

Infinite Runner

Д авайте создадим увлекательную игру Infinite Run­

ner! Суть игры заключается в том, что персонаж
бежит и перепрыгивает с одной платформы на
другую, собирая монетки или дополнительные элемен-
ты, уничтожая врагов, или избегая препятствий (рис. 1).

Рисунок 1
Создадим новый проект и зададим приложению раз-
мер окна 800×320 (рис. 2).

Рисунок 2

3
Урок 9

Перейдем к формированию сцены. Зададим фрейму

фон, добавим на сцену главного героя и платформу как
объекты Active (рис. 3).

Рисунок 3
Перейдем к нашему персонажу. Следует добавить ему
фреймы анимации Stopped, Running и Jumping (рис. 4–6).

Рисунок 4

Рисунок 5

4
 Infinite Runner

Рисунок 6
Перейдем к свойствам объекта Player. Зададим объ-
екту тип движения Platform. Поскольку персонаж будет
статичен, зададим параметрам
группы Speed (Speed, Accelera-
tion и Deceleration) значения 0.
Обратим внимание на группу
Jump. Поскольку механика соз-
даваемой игры строится именно
на прыжках персонажа, следу-
ет задать Gravity (гравитация)
значение 50, а Strength (проч-
ность) — 75. Также необходи-
мо выбрать кнопку, нажимая
на которую, игрок будет под-
прыгивать. Выберем Button 1
(рис. 7).
Давайте зададим Space bar Рисунок 7
(пробел) как Button 1. Для этого переходим к свойствам
приложения во вкладку Runtime options. В строке Default
Controls нажимаем кнопку Edit (рис. 8).

5
Урок 9

Рисунок 8
В открывшемся окне следует задать управление кла-
виатурой для игрока 1, щелкнув в ячейке клавиатуры.
В новом окне выбираем Button 1 и нажимаем на клавиа-
туре пробел (рис. 9).

Рисунок 9

6
 Infinite Runner

Теперь скопируем нашу платформу и вставим ее ко-

пии по всей длине сцены.
Перейдем в редактор событий. Создадим состояние
соприкосновения персонажа и платформы, при этом пер-
сонаж должен остановиться.
Добавим состояние Always. Перейдем к ячейке пер-
сонажа и выберем Movement => Set gravity. Введем значе-
ние 70. То есть, значение гравитации всегда будет 70 еди-
ниц (рис. 10).

Рисунок 10
Теперь создадим условие The mouse pointer and the
keyboard => The keyboard => Repeat while key is pressed.
Нажимаем пробел. Затем переходим в ячейку персона-

7
Урок 9

жа и выбираем Movement => Set gravity. Задаем значе-

ние 20 (рис. 11).

Рисунок 11
Соответственно, если зажать пробел, гравитация
персонажа уменьшится до 20. То есть, нажимая пробел,
персонаж будет невысоко подпрыгивать, а зажав его, —
прыгать высоко.
Заставим нашу платформы двигаться. Создаем со-
стояние Always. Теперь Platform => Position => Set X
Coordinate. В открывшемся окне выбираем Platform =>
Position => X Coordinate. К значению следует добавить
-1 (рис. 12).
Соответственно, ряд платформ всегда будет сдвигать-
ся в сторону на 1 (рис. 13).

8
 Infinite Runner

Рисунок 12

Рисунок 13
Однако есть одна небольшая проблема: наш персо-
наж движется вместе с платформой. Чтобы исправить
это, скопируем положения объекта Player по координате
X. В нашем случае это 33 (рис. 14).

9
Урок 9

Рисунок 14
В событие Always переходим Player => Position => Set
X Coordinate. В открывшемся окне вставляем его поло-
жение — 33 (рис 15).

Рисунок 15

10
 Infinite Runner

Перейдем к свойствам приложения во вкладку Val-

ues и создадим Global Value. Назовем ее ticker (рис. 16).

Рисунок 16
Переходим в редактор событий. Создаем условие Al-
ways. Переходим Special conditions => Change a global val-
ue => Add to. Выбираем из списка величин ticker и вво-
дим значение 1 (рис. 17).

Рисунок 17

11
Урок 9

Создадим новое действие: Special conditions => Com-

pare two general values. Следует ввести выражение ticker
mod 32, выбрать метод Equal (равно) и вставить значе-
ние 0 (рис. 18).

Рисунок 18
Переходим Create => Create new object => Create ob-
ject => Platform и выставляем значение 832×200. То есть,
платформа будет появляться в указанной точке на за-
данной высоте (рис. 19).
Давайте добавим еще одну величину нашему при-
ложению. Назовем ее run_speed и зададим значение 4
(рис. 20).
Перейдем к событию . Давайте
вставим вместо -1 величину run_speed (рис. 21). Соответ-
ственно, скорость движения платформы будет меняться.
12
 Infinite Runner

Рисунок 19 Рисунок 20

Рисунок 21
Отредактируем состояние Ticker mod 32 = 0, как по-
казано на рисунке 22.

13
Урок 9

Добавим такие Global Value: platform_length и gap_

length со значением 0, height со значением 1 и death со
значением 0 (рис. 23).

Рисунок 22

Рисунок 23

14
 Infinite Runner

Изменим размер нашей платформы. Растянем каж-

дый квадрат вниз (рис. 24).

Рисунок 24
Вернемся в редактор событий. Копируем состояние
Ticker mod (32\run_speed) = 0, переносим скопированное
состояние выше. Переходим Special conditions => Change
a Global value => Subtract from. Из значений выбираем
gap_length и вводим значение 1 (рис. 25).
Переходим к первоначальному состоянию Ticker mod
(32\run_speed) = 0, щелкаем правой кнопкой мыши и вы-
бираем Insert => Special conditions => Compare to a global
value. Задаем параметры, как указано на рисунке 26.

15
Урок 9

Рисунок 25

Рисунок 26

16
 Infinite Runner

Добавим к первоначальному состоянию Ticker mod

(32\run_speed) = 0 еще одно состояние. Insert => Special
conditions => Compare to a global value. Только в этот раз
выбираем величину gap_length, Lower or Equal и задаем
значение 0 (рис. 27).

Рисунок 27
Добавляем условие Insert => Special conditions =>
Compare to a global value. Выбираем величину death, ме-
тод Equal и задаем значение 0 (рис. 28).
Создадим результат условия. Переходим Special
conditions => Change a Global value => Subtract from.
Выбираем величину platform_length и задаем значе-
ние 1 (рис. 29).

17
Урок 9

Рисунок 28

Рисунок 29

18
 Infinite Runner

Также перейдем в ячейку Create new object и выберем

Create object. Пускай наш объект появляется за предела-
ми сцены в точке 832×200 (рис. 30).

Рисунок 30

Рисунок 31

19
Урок 9

Зададим Y координату для нашей платформы. Пе­рей­

дем к ячейке platform => Position => Set Y Coordinate. В от-
крывшемся окне вводим значение 321 – height*64. Т.е., мы
установили высоту появления нашей платформы (рис. 31).
В списке событий это выглядит следующим обра-
зом (рис. 32).

Рисунок 32

Рисунок 33

20
 Infinite Runner

Перейдем к условию Always и отредактируем его. Пу-

скай вместо Always действие происходит только когда
death=0. Для этого выбираем Special conditions => Change
a global value=> Set. Выбираем death, Equal и вводим зна-
чение 0 (рис. 33). В списке событий это выглядит следу-
ющим образом (рис. 34).

Рисунок 34
Создаем состояние Special conditions => Compare to
a global value. Выбираем platform_length, Equal и вводим
значение 0 (рис. 35).

Рисунок 35
21
Урок 9

В созданном состоянии щелкаем правой кнопкой

мыши и выбираем Insert. Переходим Special conditions =>
Compare to a global value. Выбираем gap_length, Equal
и задаем значение 0 (рис. 36).

Рисунок 36
Переходим к ячейке Special conditions данного ус-
ловия и выбираем Change global value => Set. В открыв-
шемся окне выбираем platform_length и вводим значе-
ние 15+Random(6). Соответственно, когда значения plat-
form_length и gap_length будут равны 0, то длина плат-
формы будет от 15 до 21 единицы (рис. 37).
Добавим еще одно действие. Переходим в ячейку
Special conditions и выбираем Change global value => Set.
Выбираем height и задаем выражение height – 1 + Ran-
dom(3) (рис. 38).

22
 Infinite Runner

Рисунок 37

Рисунок 38
23
Урок 9

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

Рисунок 39
Добавим условие Special conditions => Compare to
a global value. Выбираем platform_length, Equal и зада-
ем значение 0. Добавим еще одно условие: Special condi-
tions => Compare to a global value. Выбираем gap_length,
Lower or equal и вводим значение 0 (рис. 40).

Рисунок 40

24
 Infinite Runner

Переходим к ячейке Storyboard controls и выбираем

Change global value => Set. Затем задаем gap_lenght выра-
жение 4+Random(3) (рис. 41).

Рисунок 41
Создадим два новых условия: Height = 5 и Height =
-1. Зададим им действия Set height to 3 и Set height to 1
соответственно (рис. 42).

Рисунок 42

25
Урок 9

Создадим состояние Special conditions => Limit con-

ditions => Restrict actions. Вводим параметру значение
5 секунд. То есть, каждые 5 секунд будут ограничены
определенные действия (рис. 43).

Рисунок 43
Добавляем условие Gap_lenght > 0 с помощью пара-
метра Insert. В ячейке Special conditions выберем Add to
global value и добавим 1 к параметру run_speed (рис. 44).

Рисунок 44
Создадим состояние Player is overlapping platform.
При этом условии будет совершаться действие: Set glob-
al value death to 1 (рис. 45).
26
 Infinite Runner

Рисунок 45
Для формирования нормальной механики, следу-
ет создать состояние Death = 1, игрок при этом должен
остановиться.
В списке событий эти состояния выглядят таким об-
разом (рис. 46).

Рисунок 46
Теперь давайте создадим такое событие, чтобы, при
остановке игрока можно было нажать клавишу Enter,

27
Урок 9

и игра начиналась заново. Сперва создаем состояние

Death = 1. И добавляем к нему событие Upon pressing
“Enter”. Далее уже знакомым нам способом, через Special
conditions=>Set, добавляем такие действия:
■■ Set ticker to 0.
■■ Set run_speed to 4.
■■ Set platform_lenght to 0.
■■ Set gap_lenght to 6.
■■ Set height to 1.
■■ Set death to 0.
Также следует добавить, собственно, действие нача-
ла фрейма заново. Для этого переходим Storyboard Con-
trols => Restart the current frame.
Посмотрим на рисунок 47, чтобы увидеть, как данное
состояние выглядит в списке событий.

Рисунок 47
Давайте добавим к создаваемой игре подсчет очков.
Для этого вставим на сцену объект Counter и разместим
его в правом верхнем углу (рис. 48).

28
 Infinite Runner

Рисунок 48
Перейдем к его программированию. Пускай, когда
выражение death равно нолю, к объекту Counter будет
добавляться значение run_speed (рис. 49).

Рисунок 49
Наконец, давайте изменим внешний вид объекта
Platform. Переходим в редактор объекта и импортиру-
ем необходимое изображение из референсов. Осталось
только изменить значение параметра View hot spot, что-
бы платформа, состоящая из множества элементов, вы-
глядела цельно. Для этого ставим точку обзора в x = 32,
y = 0 (рис. 50).
Теперь наш персонаж перепрыгивает с платформы на
платформу, меняя скорость движения (рис. 51).

29
Урок 9

Рисунок 50

Рисунок 51
Рассмотрим примеры других игр в стиле Infinite Run­
ner, чтобы проанализировать, какие элементы можно до-
бавить в создаваемую игру (рис. 52–54).

30
 Infinite Runner

Рисунок 52

Рисунок 53

31
Урок 9

Рисунок 54

32
 Infinite Runner

33
Урок 9
Infinite Runner

© Компьютерная Академия «Шаг»

www.itstep.org

Все права на охраняемые авторским правом фото-, аудио- и видеопро-

изведения, фрагменты которых использованы в материале, принадле-
жат их законным владельцам. Фрагменты произведений используются в
иллюстративных целях в объёме, оправданном поставленной задачей, в
рамках учебного процесса и в учебных целях, в соответствии со ст. 1274
ч. 4 ГК РФ и ст. 21 и 23 Закона Украины «Про авторське право і суміжні
права». Объём и способ цитируемых произведений соответствует
принятым нормам, не наносит ущерба нормальному использованию
объектов авторского права и не ущемляет законные интересы автора
и правообладателей. Цитируемые фрагменты произведений на момент
использования не могут быть заменены альтернативными, не охраня-
емыми авторским правом аналогами, и как таковые соответствуют
критериям добросовестного использования и честного использования.
Все права защищены. Полное или частичное копирование материалов
запрещено. Согласование использования произведений или их фраг-
ментов производится с авторами и правообладателями. Согласованное
использование материалов возможно только при указании источника.
Ответственность за несанкционированное копирование и коммерческое
использование материалов определяется действующим законодатель-
ством Украины.