Урок 3

Pixel Art и анимация. Часть 2

План лабот.¾Изменение размера экрана. Создание кастомно-го курсора. Программирование выстрела по на-правлению курсора. Программирование отскока астероидов при попадании друг в друга и кора-бля. Добавление новой сцены. Программирование перехода при соприкосновении со специальным объектом или при уничтожении всех астероидов. Сцена Game Over.

2

Материалы урока прикреплены к данному PDF-файлу. Для досту-па к материалам, урок необходимо открыть в программе Adobe Acrobat Reader.

3

Pixel Art и анимация. Часть 2

Pixel Art и анимация. Часть 2

Продолжим создание космического шутера! Откро­ем создаваемый на прошлом занятии файл.

Давайте изменим размер нашего экрана. Это мож­но сделать, кликнув по «Application», затем переходим «Properties => Window => Size». Здесь можно задать не­обходимый размер (рис. 1).

Рисунок 1

При этом следует помнить о размерах для десктопных и мобильных игр: 480×320, 640×480, 1280×800, 1920×1080, 480×800, 720×1280, 1300×1920.

Изменим также цвет фона нашего фрейма. Для это­го переходим в настройки нашего фрейма и выбираем «Background color» (рис. 2).

4

Урок 3

Теперь давайте зададим космическому кораблю тра­екторию движения, чтобы он мог свободно двигаться по сцене, уничтожая астероиды. Щелкаем по объекту, пере­ходим к «Movement => Type», выбираем «Eight Directions» и устанавливаем все направления (рис. 3).

Теперь пришло время запрограммировать произведе­ния выстрела от нажатия кнопки мыши и движения вы­стрелов по ее направлению. Для этого переходим в «Event Editor» и создаем новое состояние «The mouse pointer and keyboard => Mouse => User clicks». Зададим левую кнопку мыши и один клик для выстрелов (рис. 4).

Рисунок 2 Рисунок 3

5

Pixel Art и анимация.Часть 2

Рисунок 4

Теперь пришло время настроить сами взрывы. Для этого в этой же строке в клеточке с нашим космическим кораблем выбираем «Lauch an Object», из списка выби­раем нашу ракету и щелкаем «Ok». Пришло время вы­брать направление выстрелов и их скорость. Для того, чтобы ракеты следовали по направлению курсора, в от­крывшемся окне следует выбрать «Launch in direction of» и выбрать наш курсор (рис. 5–6).

Рисунок 5

6

Урок 3

Рисунок 6

Наш космический корабль теперь двигается по все­му игровому полю и стреляет по направлению курсора.

Перейдем к проектированию астероидов. Для начала создаем новый объект, дублируем его и размещаем дубли в ряд немного выше сцены, как показано на скриншоте ниже (рис. 7).

Рисунок 7

7

Pixel Art и анимация.Часть 2

Для того, чтобы запрограммировать астероидов сле­дует создать новое состояние Выбираем «Timer => Every» и выставляем значение для падения астероидов (рис. 8).

Рисунок 8

Рисунок 9

8

Урок 3

Теперь добавим к этому состоянию еще одно. Выби­раем созданный нами элемент — «Pick or count => Pick “Active” at random» (рис. 9).

Теперь необходимо в клеточке созданного объекта «Launch an object», выбираем астероид, задаем ему ско­рость и направление.

Перейдем к проектированию соприкосновения ра­кеты и астероида. Создаем новое состояние. «Missile => Collision => Another object». Выбираем астероид. Теперь в клеточке астероида добавляем «Visibility => Make object invisible». Затем там же следует добавить «Lauch an object» и выбрать созданный нами взрыв. Теперь нужно задать скорость взрыва, а также направление астероида (рис. 10).

Рисунок 10

В этой же клеточке наконец добавим астероиду функ­цию «Destroy». Дополнительно следует добавить «Destroy» и к нашей ракете в строчке создаваемого состояния.

Пришло время добавить новый фрейм по аналогии с прошлым занятием. Создаем новый фрейм, добавляем в сцену «String» и вписываем «Game over!». Оформите

9

Pixel Art и анимация.Часть 2

сцену, как вам хочется. К примеру, сделайте фон сцены черным, а текст — фиолетовым (рис. 11).

Рисунок 11

Создаем новое состояние: «Spaceship => Collision => Another object». Выбираем астероид. Теперь в строке пере­ходим к «Storyboard conditions» и выбираем «Next frame». То есть, когда астероид соприкоснется с нашим кораблем, игра закончится.

Теперь давайте перейдем к программированию отско­ка астероида от наших «Backdrops». Как вы уже знаете, сперва создаем новое состояние. «Asteroid => Collisions => Backdrop». Затем в клеточке астероида в этой строке вы­бираем «Movement => Bounce». Также следует задать на­правление отскока астероида. Кликаем в той же клеточ­ке и выбираем «Direction => Select direction». Теперь наш астероид отталкивается от элементов фона при сопри­косновении (рис. 12)!

10

Урок 3

Рисунок 12

Рисунок 13

11

Pixel Art и анимация.Часть 2

Также следует добавить отскок астероидов при их со­прикосновении. Сделайте это по аналогии с соприкосно­вением с элементами фона.

У нас осталась одна нерешенная задача: корабль по­кидает нашу сцену. Давайте сделаем так, чтобы корабль находился только в пределах сцены. Для этого создаем новое состояние и выбираем «spaceship => Position => Test position of “spaceship”», а затем отмечаем все направ­ления и щелкаем «OK» (рис. 13).

Переходим в клеточку «spaceship» и добавляем «Move­ment — Stop». Соответственно, корабль не сможет выйти за границы сцены.

Теперь нужно создать особое состояние: при выходе астероида за границы сцены, будет показан фрейм с надпи­сью «Game over». Для этого создаем состояние, выбираем астероид, «Position => Test position of “asteroid”» (рис. 14).

Рисунок 14

12

Урок 3

В клеточке «Storyboard controls => Next frame».Таким образом, когда астероид покинет сцену, игра

закончится.Давайте немного усложним игру. Скопируем пер­

вый фрейм и вставим его в «Application», но теперь он будет называться «Frame 3». Следует немного изменить внешний вид элементов фона и поменять их местопо­ложение (рис. 15).

Рисунок 15Также следует изменить скорость появления асте­

роидов, чтобы усложнить задачу. Также не забудьте из­менить «Next Frame» в строках, где он упоминается, на «Jump to Frame => Frame 2». (или «Previous Frame»). Это необходимо для того, чтобы отображалась сцена с над­писью «Game over» (рис. 16)!

Вернемся ко «Frame 1». Добавим в сцену объект «Activate» — черную дыру (рис. 17).

13

Pixel Art и анимация.Часть 2

Рисунок 16

Рисунок 17

Перейдем в «Event editor», чтобы запрограммировать переход на «Frame 3» при соприкосновении космического

14

Урок 3

корабля с черной дырой. Для этого создаем новое состоя­ние. «Spaceship => Collision => Overlapping another object» и выбираем черную дыру. Переходим в данной строке к «Storyboard controls», выбираем «Jump to Frame 3».

Наша космическая игра готова! Осталось только дать ей название, сохранить и протестировать (рис. 18)!

Рисунок 18Давайте рассмотрим примеры других космических

шутеров:1. Pixel Journey: 2D Space Shooter (рис. 19).

Рисунок 19

15

Pixel Art и анимация.Часть 2

2. Pixel Space Adventure (рис. 20).

Рисунок 20

3. Pixel Craft (рис. 21).

Рисунок 21

Урок 3Pixel Art и анимация. Часть 2

All rights to protected pictures, audio, and video belong to their authors or legal owners. Fragments of works are used exclusively in illustration purposes to the extent justified by the purpose as part of an educational process and for educational purposes in accordance with Article 1273 Sec. 4 of the Civil Code of the Russian Federation and Articles 21 and 23 of the Law of Ukraine “On Copyright and Related Rights”. The extent and method of cited works are in conformity with the standards, do not conflict with a normal exploitation of the work, and do not prejudice the legitimate interests of the authors and rightholders. Cited fragments of works can be replaced with alternative, non-protected analogs, and as such correspond the criteria of fair use.

All rights reserved. Any reproduction, in whole or in part, is prohibited. Agreement of the use of works and their fragments is carried out with the authors and other right owners. Materials from this document can be used only with resource link.

Liability for unauthorized copying and commercial use of materials is defined according to the current legislation of Ukraine.

© Vladislav Sorokopud© STEP IT Academy, www.itstep.org