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

на Click Fusion 2.5

 Урок 6

Doodle Jump

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

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

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

2
 Doodle Jump

Doodle Jump

Д авайте создадим на сегодняшнем занятии свой

аналог популярной и интересной игры — Doodle
Jump.
Для начала зададим размер сцены. Поскольку мы бу-
дем создавать игру для мобильного устройства, пускай
это будет 480×1800 (рис. 1).

Рисунок 1
Теперь следует задать цвет фона для фрейма. Выби-
раем голубой или бирюзовый (рис. 2).

Рисунок 2
Следующий шаг — добавим на нашу сцену несколь-
ко платформ. Наш персонаж должен прыгать по ним, со-
ответственно, следует добавлять платформы как Back-
drop-элементы. После создания нового Backdrop, следует
зайти в него, очистить содержимое и нажать Import. Затем
из референсов выбрать необходимую платформу (рис. 3).

3
Урок 6

Рисунок 3
По аналогии добавим вторую платформу.

Рисунок 4
4
 Doodle Jump

Давайте разместим добавленные элементы на сцене

в произвольном порядке (рис. 4). Однако помните о том,
что персонаж должен беспрепятственно по ним передви-
гаться, перепрыгивая с одной на другую.
Добавим жизни. Для этого на рабочем пространстве
щелкаем два раза и выбираем среди всех элементов Lives
(рис. 5).

Рисунок 5
Переходим к жизням, в редакторе удаляем изначаль-
ный внешний вид и импортируем из референсов изобра-
жение (рис. 6).

5
Урок 6

Рисунок 6
Затем вставляем наши жизни в левом верхнем углу
сцены (рис. 7).

Рисунок 7
Создаем объект Score (рис. 8).
Затем закрашиваем все элементы Score в белый (рис. 9).
И вставляем в правом верхнем углу сцены.

6
 Doodle Jump

Рисунок 8

Рисунок 9

7
Урок 6

Пришло время добавить на наши платформы траву.

Добавляем объект как Active. При этом следует задавать
каждому элементу Order=>To Back (рис. 10).

Рисунок 10
Размещаем пропорционально на сцене (рис. 11).
По аналогии добавим в игру объект — морковку, ко-
торую будет собирать наш главный персонаж. И также
разместим данный объект в произвольном порядке на
платформах (рис. 12).
Теперь добавим на фон сцены грустную тучку. Соз-
даем новый элемент Active и импортируем изображение
тучки из референсов. Затем копируем элемент и также
произвольно распределим его по сцене. Не забудьте при
вставке разместить элемент на задний план (рис. 13).

8
 Doodle Jump

Рисунок 11

Рисунок 12
9
Урок 6

Рисунок 13
Теперь давайте добавим нашего врага. Для этого соз-
даем новый объект Active. И вместо стандартного изобра-
жения импортируем первое изображение нашего врага
(рис. 14).

10
 Doodle Jump

Рисунок 14
Теперь добавим новый фрейм и импортируем в него
изображение второго врага (рис. 15).

Рисунок 15
Теперь перейдем во вкладку Direction Options, поста-
вим галочку возле функции Loop и установим скорость
50. Теперь шипы нашего врага будут крутиться (рис. 16)!

Рисунок 16
11
Урок 6

Нашего врага нужно непроизвольно разместить на

платформах (рис. 17).

Рисунок 17
Теперь добавим на нашу сцену главного персонажа!
Создаем новый объект и переходим в Animation. Выби-
раем вкладку Stopped и импортируем соответственное
12
 Doodle Jump

изображение персонажа. Переходим ко вкладке Walk-

ing и импортируем сначала первое изображение, а затем
во второй фрейм — второе. Эти фреймы автоматически
разместились по направлению вправо. То есть, наш пер-
сонаж сможет передвигаться только вправо. Однако он
должен двигаться в обе стороны. Для этого копируем оба
фрейма и щелкаем по левой стрелочке нашего окна на-
правлений (рис. 18).

Рисунок 18
Вставляем нашего персонажа. Как видите, направле-
ние движения — лево, а персонаж до сих пор движется
вправо (рис. 19).

Рисунок 19
Чтобы задать объекту правильно направление выде-
ляем по очереди фреймы и в самом фрейме щелкаем Flip
horizontally (рис. 20).
13
Урок 6

Рисунок 20
Как видим, наш персонаж теперь движется в пра-
вильном направлении (рис. 21).

Рисунок 21
14
 Doodle Jump

Если необходимо изменить количество направлений

движения персонажа, можно просто перетянуть бегунок,
который находится под окном направлений (рис. 22).

Рисунок 22
Теперь следует перейти к анимации Jumping и им-
портировать изображения персонажа в полете. Также
не забудьте задать ему направление движения вверх
(рис. 23).

Рисунок 23
Переходим к анимации Falling и также импортируем
соответственное изображение, а также задаем направле-
ние вниз (рис. 24).

15
Урок 6

Рисунок 24
Перейдем к нашей сцене. Если нажать Run application,
то будет проигрываться только та часть сцены, которую
захватывает Application (рис. 25).

Рисунок 25
16
 Doodle Jump

Для того, чтобы игра проигрывалась сначала, следу-

ет перейти в редактор событий и создать новое событие.
Выбираем Special Conditions=>Always (рис. 26).

Рисунок 26
Выбираем нашего персонажа (рис. 27).

Рисунок 27
17
Урок 6

Зададим персонажу тип движения. Поскольку он

должен двигаться по объектам, следует выбрать Platform
и добавить 4 направления движения и параметры прыж-
ка (рис. 28).
Не забудьте задать платформе Obstacle Type=>Obsta-
cle (рис. 29).

Иллюстрация 28 Иллюстрация 29
Теперь настроим событие при соприкосновении пер-
сонажа с элементом Backdrop. И зададим персонажу Move-
ment=>Stop.
Перейдем к программированию события, когда наш
персонаж — зайчик — забирает морковку, при этом мор-
ковка исчезает, а игроку добавляется 5 очков.
Для этого сначала создадим событие при соприкосно-
вении персонажа с морковкой, при этом морковке следует
задать Destroy, а в клеточке Player 1 выбрать Score=>Add
to score и установить значение 5 (рис. 30).

18
 Doodle Jump

Рисунок 30
Запрограммируем нашего врага, чтобы он патрулиро-
вал участок платформы. Для этого в строке Always в кле-
точке врага выбираем Movement=>Set speed и выставля-
ем значение 5 (рис. 31).

Рисунок 31

19
Урок 6

Теперь создадим действие при соприкосновении

персонажа с врагом. В клеточке Player 1 выбираем Num-
ber of Lives=>Subtrack from Number of Lives. И ставим
значение 1. Соответственно, при соприкосновении
с врагом отнимется одна жизнь. Затем следует доба-
вить действие возвращения персонажа на исходную
позицию при соприкосновении с врагом. Для этого
в строке соприкосновения в клеточке персонажа вы-
бираем Position=>Select Position и выбираем исходную
позицию зайчика (рис. 32).

Рисунок 32
Таким образом, после каждого соприкосновения пер-
сонаж возвращается на исходную позицию.
Посмотрите, как выглядит оригинальная игра и раз-
личные ее модификации, подумайте, как можно усовер-
шенствовать созданную на этом занятии игру (рис. 33–36).

20
 Doodle Jump

Рисунок 33

Рисунок 34

21
Урок 6

Рисунок 35

Рисунок 36

22
 Дополнительные материалы

Дополнительные
материалы
Продолжим создание интересной игры — Doodle Jump.
Для начала создадим новый фрейм (рис. 1).

Рисунок 1
Пускай это будет главный
экран нашей игры, на кото-
ром будут размещены назва-
ние игры, кнопки Play, Scores,
Exit, а также наш главный пер-
сонаж и враг.
Перетаскиваем созданный
фрейм выше. Теперь переходим
к добавлению на него изображе-
ния из референсов. Это и будет
наш загрузочный экран (Loading
screen). Вставляем изображе-
ние как Activity и растягиваем
его по размеру экрана (рис. 2). Иллюстрация 2

23
Урок 6

Теперь создадим еще один фрейм. И переименуем су-

ществующие (рис. 3).

Рисунок 3
Переходим к фрейму Title screen и открываем редак-
тор событий. Создаем новое состояние The mouse pointer
and the keyboard => The mouse => User clicks within a zone
(рис. 4).

Рисунок 4

24
 Дополнительные материалы

Затем выбираем способ клика. В нашем случае пу-

скай это будет один клик левой кнопкой мыши (рис. 5).

Рисунок 5
Выбираем область для клика. Пускай это будет пер-
вый прямоугольник (рис. 6).

Рисунок 6
Теперь в клеточке Storyboard controls выбираем Next
frame.
Соответственно, когда пользователь щелкнет в этой
зоне левой кнопкой мыши, начнется игра.
Скопируем и вставим первое состояния. Однако те-
перь нужно выделить уже прямоугольник с надписью
Score. Переходим к клеточке Storyboard controls и щелка-
ем Jump to frame и выбираем фрейм Score. Соответствен-

25
Урок 6

но, когда пользователь щелкнет в этой зоне, откроется

фрейм Score.
Еще раз вставим первое состояние. Выделим послед-
ний прямоугольник и также перейдем к Storyboard controls.
В этот раз нам нужно добавить End the application. Со-
ответственно, когда пользователь кликнет в этой зоне,
игра закроется.
Перейдем к фрейму Game и запрограммируем зайчи-
ка так, чтобы он не смог выйти за пределы игрового поля
(Test position (top, left, right), Movement => Stop).
Также следует запрограммировать действия при паде-
нии, используя Movement (on the bottom), однако в этом
случае выбираем Player 1 => Number of Lives => Subtrack
from Number of Lives, Position => Select Position и опять
определяем исходную позицию нашего персонажа.
Перейдем ко фрейму Score. Следует добавить на сце-
ну изображение из референсов (рис. 7).

Рисунок 7

26
 Дополнительные материалы

Теперь нажимаем на рабочей области и создаем но-

вый объект Hi-Score (рис. 8).

Рисунок 8
Следует изменить шрифт, начертание и цвет шрифта
Hi-Score по своему усмотрению (рис. 9).

Рисунок 9

27
Урок 6

Теперь немного усложним игру.

Сперва переходим к редактору событий фрейма Game.
Создаем новое состояние Storyboard controls => Start of
frame. Перенесем состояние на первое место в цепочке
событий. Теперь в клеточке игрока щелкаем правой кноп-
кой мыши и выбираем Score => Set score => 0 (рис. 10).

Рисунок 10
Щелкаем в той же клеточке и выбираем Number of
lives => Set Number of Lives => 3 (рис. 11).
Теперь на рабочей области создадим Counter (рис. 12).
Запрограммируем его таким образом, чтобы каждую
секунду к нему прибавлялся один. Создаем новое состо-
яние: Timer => Every — 1 секунда, и в клеточке нашего
Counter выбираем Add to Counter — 1.
Перейдем к редактированию состояния соприкосно-
вения персонажа и морковки, щелкаем в клеточке Add 5
to score и нажимаем Edit. Выбираем Counter => Counter
value. И добавляем к записи –2 (рис. 13).

28
 Дополнительные материалы

Рисунок 11

Рисунок 12

29
Урок 6

Рисунок 13
Это немного усложнит игру, вынуждая игрока быстро
принимать решения о прыжке, ведь за каждую секунду
отнимаются балы.
Теперь следует перейти к фрейму Score. В редакторе
событий следует создать состояний, которые будут пе-
реносить игрока на необходимые фреймы по клику на
соответственные зоны. Сделать это можно по аналогии
с событиями, созданными для Title screen.
Мы создали собственный аналог игры Doodle Jump!
Рассмотри интересные модификации игры Doodle
Jump и проанализируем, какие дополнительные элемен-
ты можно добавить в созданную игру (рис. 14–16).

30
 Дополнительные материалы

Рисунок 14

31
Урок 6

Рисунок 15
32
 Дополнительные материалы

Рисунок 16
33
Урок 6
Doodle Jump

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

www.itstep.org

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

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