Вы находитесь на странице: 1из 28

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

на Click Fusion 2.5


Урок 10
Создание игры
Pac-Man

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


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

2
Создание игры Pac-Man

Создание игры Pac-Man


Д авайте создадим собственную версию культовой
олдскульной игры Pac-Man (рис. 1).

Рисунок 1
Для начала создаем новый проект и добавляем на
сцену Backdrop-элемент, который и будет нашей стеной.
Зальем объект синим цветом, как в оригинальной игре,
а также зададим размер 16×16 (рис. 2).

3
Урок 10

Рисунок 2
Пришло время выстроить на сцене из объекта wall
стены для нашей игры. Давайте проявим фантазию и
разместим стены на сцене в произвольном порядке, не
забыв создать несколько тупиков.
Прежде чем переходить непосредственно к оформле-
нию сцены, следует включить отображение сетки, щел-
кнув Show Grid и Snap to Grid (рис. 3).

Рисунок 3
Давайте также изменим отображение сетки, задав
размер 16×16 и белый цвет (рис. 4).
Переходим к созданию стен на сцене. Размещаем их
в случайном порядке, например, как на рисунке 5.
Теперь добавим на сцену нашего персонажа — Pac-
Man. Давайте нарисуем его самостоятельно. Для начала
рисуем круг с обводкой и заливаем объект желтым цве-
том, затем добавляем глазки нашему персонажу. Также
следует задать его размер — 32×32 px (рис. 6).
4
Создание игры Pac-Man

Рисунок 4

Рисунок 5

5
Урок 10

Рисунок 6
Копируем фрейм и вставляем его, щелкаем Flip vertically
( ), чтобы отобразить объект вертикально (рис. 7).

Рисунок 7
Теперь сделаем изображения поворота вправо для
нашего персонажа (рис. 8).

Рисунок 8

6
Создание игры Pac-Man

И отображаем фрейм горизонтально, щелкнув Flip


horizontal ( ) (рис. 9).

Рисунок 9
Все направления движения персонажа следует раз-
местить в анимации Stopped в соответствующих ячейках
направления, как показано на рисунке 10.

Рисунок 10
Нам также следует задать анимацию персонажа Walking.
Для этого скопируем фрейм, перенесем его на первое ме-
сто, а затем отредактируем персонажа, сомкнув ему губы.
Такую анимацию следует создать для движения вправо и
влево. Чтобы дважды не отрисовывать персонажа, мож-
но просто отзеркалить содержимое фреймов (рис. 11).

7
Урок 10

Рисунок 11
Что касается анимаций движения вверх и вниз, то
можно копировать те же фреймы, что и для анимации
Stopped, или дополнить их (рис. 12).

Рисунок 12
Теперь следует создать объекты для поворота нашего
персонажа. Для начала добавляем на сцену объект Active,
переходим в графический редактор, очищаем содержи-
мое и рисуем полоску вверх. Давайте назовем данный
элемент Sensor up и зададим ему размер чуть больше на-
шего персонажа (рис. 13).
Также следует задать View hot spot, как показано на
рисунке 14.

8
Создание игры Pac-Man

Рисунок 13

Рисунок 14

9
Урок 10

По тому же принципу рисуем и программируем по-


лоску и для других направлений движения пользователя:
вниз, вправо, влево (рис. 15).

Рисунок 15
Поскольку мы будем управлять Pac-Man, необходи-
мо, чтобы он реагировал на соприкосновения со стеной
и менял направление движения. Именно поэтому возле
каждого угла следует вставить объект corner — квадра-
тик (рис. 16).

Рисунок 16

10
Создание игры Pac-Man

Разместим объекты на сцене (рис. 17).

Рисунок 17
Создадим квадрат — объект center (рис. 18).

Рисунок 18

11
Урок 10

Перейдем к добавлению на сцену объекта Quick Back­


drop (рис. 19).

Рисунок 19
Растянем блок по всей поверхности сцены и зададим
Order=>To Back. Разместим на сцене нашего персонажа
и добавим на него объект center и направляющие объ-
екты (рис. 20).

Рисунок 20

12
Создание игры Pac-Man

Осталось только убрать отметку для всех объектов,


кроме персонажа, стен и фона во вкладке Display Options =>
Visible at start (рис. 21).

Рисунок 21
Теперь сцена выглядит таким образом (рис. 22):

Рисунок 22

13
Урок 10

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


Always. Нам необходимо задать позицию для всех объек-
тов Sensors, а также для объекта center, чтобы они были
связаны с положением Pac-Man (рис. 23).

Рисунок 23
Для дальнейших действий нам следует создать не-
сколько Alterable Values для объекта Pac-Man. Создадим
величину Movement для движений персонажа и зададим
значение 0.
Перейдем в редактор событий и создадим состояние
Reaped while “Up arrow” is pressed. Добавим к нему состо-
яние. Переходим Pac-Man=>Alterable Values=>Compare
to one of the alterable values. В открывшемся окне из спи-
ска величин выбираем Movement и задаем метод равно
и значение 0 (рис. 24).
Также следует добавить проверку, чтобы персонаж
не соприкасался со стеной. Для этого создаем событие
Sensor Up is overlapping a backdrop. Щелкаем по создан-

14
Создание игры Pac-Man

ному событию правой кнопкой мыши и выбираем Negate.


То есть, действие будет совершаться, только если сенсор
не соприкасается со стеной.

Рисунок 24
Также следует добавить проверку, чтобы персонаж
не соприкасался со стеной. Для этого создаем событие
Sensor Up is overlapping a backdrop. Щелкаем по создан-
ному событию правой кнопкой мыши и выбираем Negate.
То есть, действие будет совершаться, только если сенсор
не соприкасается со стеной.
Теперь перейдем к ячейке персонажа и выбираем
Direction=>Select direction и выбираем стрелочку вверх
(рис. 25).

15
Урок 10

Рисунок 25

Рисунок 26

16
Создание игры Pac-Man

Также следует добавить значение к Movement. Для это-


го в ячейке Pac-Man переходим Alterable Values=>Set. Из
списка выбираем Movement и задаем значение 1 (рис. 26).
По тому же принципу следует создать события и для
остальных направлений движения (рис. 27).

Рисунок 27
Соответственно, игрок будет двигаться по заданному
направлению, а значение величины Movement станет 1,
когда пользователь будет нажимать стрелочки на клави-
атуре, значение Movement будет равно нолю, а направ-
ляющие персонажа не будут соприкасаться со стенами.

17
Урок 10

Рисунок 28

Рисунок 29

18
Создание игры Pac-Man

Копируем состояния Reaped while “Up arrow” is pressed


и movement of Pac-Man = 0.
Добавляем к ним состояние Pac-Man=>Direction=>
Compare direction of “Pac-Man”. В открывшемся окне ста-
вим стрелочку вниз (рис. 28).
Создаем действие. Переходим к ячейке персонажа
и создаем Set direction to и задаем противоположное на-
правление, чем мы задали (рис. 29).
Повторим те же действия для остальных направле-
ний (рис. 30).

Рисунок 30

19
Урок 10

Соответственно, направление пользователя изменит-


ся на противоположное, когда пользователь будет нажи-
мать стрелочки на клавиатуре, значение Movement будет
равно 1, а персонаж будет двигаться по определенному
направлению.
Создадим новое состояние Movement of Pac-Man = 1.
Добавляем к нему состояние Pac-Man=>Direction=>Compare
direction of “Pac-Man”. В открывшемся окне ставим стре-
лочку вверх.
Следует создать действия для нашего персонажа. Пе-
реходим Pac-Man=>Position=>Set Y Coordinate. Следует
выбрать Pac-Man=>Position=>Y Coordinate и задать зна-
чение –2 (рис. 31).

Рисунок 31

20
Создание игры Pac-Man

Также следует изменить анимацию персонажа на


Walking (рис. 32).

Рисунок 32
Соответственно, положение пользователя немного
изменится, а также запустится анимация Walking, когда
величина Movement будет равна 1, а персонаж будет дви-
гаться в определенном направлении.
Теперь создадим состояния Pac-Man is overlapping
a backdrop и Pac-Man is overlapping corner. Перейдем
в ячейку персонажа. Для начала зададим положение
Pac-Man относительно объекта corner. Также следует
задать Movement = 0 и изменить анимацию на Stopped
(рис. 33).

21
Урок 10

Рисунок 33
Создадим еще одно состояние Reaped while “Up arrow”
is pressed. Добавим к нему событие Movement of Pac-Man
= 1. Необходимо также задать условие, в котором выбрать
направления движения нашего персонажа. Переходим
Pac-Man=>Direction=>Compare direction of “Pac-Man”
и выбираем два направления — вправо и влево (рис. 34).

Рисунок 34
22
Создание игры Pac-Man

Теперь создаем условие: объект center is overlapping


corner.
Необходимо задать также позицию нашего персо-
нажа по координате X. Для этого переходим Pac-Man=>
Position=>Compare X position to a value. Выбираем ме-
тод Greater or Equal, переходим Pac-Man=>Position=>X
Coordinate и добавляем к значению –2 (рис. 35).

Рисунок 35
Копируем созданное состояние и редактируем его.
Вместо метода Greater or Equal следует использовать

23
Урок 10

Lower or Equal, а также добавить к значению +2, вместо


–2 (рис. 36).

Рисунок 36
Перейдем к ячейке персонажа и зададим направле-
ние вверх, а также положение персонажа относительно
объекту corner.
Теперь по аналогии с созданным событием созда-
дим условия и результат их выполнения и для других
направлений движения. Однако, что касается направле-
ний влево и вправо, то следует задать для них позицию
на координате Y.

24
Создание игры Pac-Man

В списке событий это выглядит как на рисунке 37:

Рисунок 37
Мы создали механику движений персонажа Pac-Man
(рис. 38)!

25
Урок 10

Рисунок 38
Существует множество аналогов культовой игры Pac-
Man, давайте рассмотрим некоторые из них!
1. Pac-Man Championship Edition (рис. 39).

Рисунок 39
26
Создание игры Pac-Man

2. PAC-MAN 256 (рис. 40).

Рисунок 40
3. EVAC (рис. 41).

Рисунок 41

27
Урок 10
Создание игры Pac-Man

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


www.itstep.org

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


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

Вам также может понравиться