Игра «Шутер»

Настройки приложения

Название приложения может быть «Шутер» или «Стрельба по зомби». Иконку можете подобрать любую, соответствующую стилю. Остальные настройки по умолчанию.

Дизайн-макет

Внешний вид игры:

Список компонентов:

Предварительно потребуется подобрать несколько картинок и пару звуковых файлов:

• фоновое изображение для игры,
• фоновое изображение для экрана победы,
• картинки для игрока и цели (зомби),
• звук выстрела,
• звук для экрана победы.

Названия желательно подбирать такие, которые однозначно определят назначение медиа-файла.

Например, вот так:

После загрузки файлов можно приступать к созданию игры. В игре будет два экрана — один с непосредственно игрой, второй — с финишной картинкой и кнопкой перезапуска.

Первый экран

Настроим Экран:

• Выравнивание по вертикали и горизонтали — Центр.
• Фоновый рисунок тот, что вы подобрали и загрузили в проект.
• Ориентация экрана — широкоформатный (т.е. горизонтальное расположение).
• Отключим показ заголовка и статус-бара.

Добавляем Надпись. В ней будем выводить счет, оформление надписи может быть любым, главное, чтобы она не сливалась с фоном. Компонент можно не переименовывать, так как надпись в проекте будет только одна.

Добавляем горизонтальное расположение. Здесь будет основное игровое поле. Его настройки:

• Выравнивание по вертикали и горизонтали — по центру.
• Высота и ширина — наполнить родительский (чтобы размер подстраивался под размер экрана).

Внутрь расположения добавляем 2 кнопки. Настройки оформления могут быть любыми, но компоненты следует переименовать — левая кнопка будет называться «Вверх», правая — «Вниз». Также следует текст на кнопках заменить на символы «^» и «v», т.к. чем шире кнопка, тем уже будет игровое поле.

Между кнопками добавляем Холст. Высоту сделаем «Наполнить родительский», а ширину — 70 процентов (чтобы оставить место под кнопки). Таким образом, кнопки будут располагаться по краям экрана, чтобы было удобно нажимать их большими пальцами.

На холст добавляем Шар. Настроить тут следует только цвет самого шара, чтобы его было видно на фоне. Остальные настройки можно не менять, они ни на что не повлияют.

Далее добавляем на холст изображение Спрайта. Поместим его слева, это будет спрайт игрока, поэтому компонент также переименуем в «Игрок». Размер спрайта нужно сделать небольшим, чтобы не занимал всю высоту холста и соответствовал пропорциям. Поскольку картинки в нашем примере вертикальные, можно сделать высоту 100 пикселей, а ширину — 50. Установим изображение спрайта из ранее подобранных и загруженных в проект.

Добавим на холст еще одно изображение Спрайта. Это будет спрайт цели, поэтому разместим его у правого края. Переименуем компонент в «Цель», а размеры установим похожим образом, как у Игрока — 100 пикселей на 50 (или другие, если картинка имеет иные пропорции). В качестве изображения установим подобранное изображение зомби.

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

Добавим Часы. Данный компонент будет отвечать за движение пули (шара). Переименуем компонент в Часы-игрок. А в настройках установим интервал таймера равным 100 (чтобы пуля относительно быстро двигалась, чем меньше интервал — тем больше будет скорость).

Добавим еще Часы. Этот компонент будет отвечать за передвижение цели. Поэтому переименуем его в Часы-цель, а интервал поставим равным 500.

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

Дизайн первого экрана закончен, можно переходить ко второму.

Второй экран

Чтобы создать второй экран, нужно нажать кнопку “Добавить экран” в строке под меню:

Появится окно названия экрана. Экран назвать можно как угодно. Как правило, если экранов много, желательно называть их так, чтобы было понятно, за что они отвечают. Но будьте внимательны — переименовать экран уже не получится! После того, как экран добавлен, автоматически откроется макет нового экрана. Переключаться между экранами можно через выпадающий список в строке под меню:

Выглядеть он будет довольно просто — фоновое изображение и кнопка на нем.

Настраиваем экран:

• Выравнивание по горизонтали — Центр.
• Выравнивание по вертикали — Верх.
• Фоновый рисунок — из ранее загруженных.
• Ориентация — широкоформатный.
• Отключим заголовок и статус-бар.

Добавим Кнопку. Название компонента — «Заново», текст кнопки «Заново». Оформление может быть любое.

Добавим Проигрыватель, чтобы при открытии экрана играла победная музыка. В качестве источника установим музыкальный файл.

Теперь можно переходить к программированию.

Программирование

Первый экран

Для начал нужно создать переменную, которая будет считать попадания по цели. Так и назовем её — Попадания.

Когда игра запускается, а происходит это с включением первого экрана, что должно произойти? Игрок должен встать на свое место, цель — на своё. Счёт — обнулиться. Почему, мы же только запускаем игру? Потому что игра у нас будет состоять из двух экранов — основного и экрана выигрыша. В этом случае первый экран будет открываться или при запуске игры, или при переходе со второго экрана. Если мы будем переходить со второго, значит, счет уже какой-то был, следовательно, его нужно обнулись, чтобы игра началась корректно.

Итак, располагаем игрока слева вверху. Тут понадобится немного математики, так как экран мы планировали адаптивный под разный размер устройства. И необходимо подгадать, чтобы игрок располагался не слишком близко к цели, но и не выходил за край холста. Поэтому формула такая:

Если честно, она была получена методом «научного тыка» в попытке подобрать оптимальное расположение спрайта игрока. Если у вас при такой формуле персонаж все же выходит за границу, попробуйте изменить её.

Цель у нас должна располагаться в самом конце холста, но появляться в случайном месте по вертикали, поэтому её первоначальное положение зададим так:

Обнулим счёт и присвоим надписи это значение.

Сделаем Шар (нашу пулю) невидимым.

А таймер Цели установим в значении 500. Это как с обнулением попаданий — в процессе игры интервал таймера будет изменен, и чтобы при рестарте не было проблем, откатим до первоначального значения.

Итого, блок инициации первого экрана будет выглядеть так:

Запустим движение цели — когда заданный интервал таймера пройдет, положение цели по вертикали изменится.

Если цель достигнет края экрана (низа), то она не должна пропадать за ним, а переместиться вверх.

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

Напомним, что начало координат на экране — левый верхний угол. Поэтому увеличение координаты Y — это движение вниз, а уменьшение — движение вверх.

Стрелять будем касанием по игроку: тапнули — пуля появилась возле игрока и начала движение.

Движение будет осуществляться по таймеру игрока.

А если пуля дошла до края экрана и так и не встретилась с целью, она должна исчезнуть.

Теперь самое интересное — попадание по цели. Когда шар касается цели, то:

1. он должен исчезнуть,

2. счет должен измениться и отобразиться на экране,

3. проигрывается звук попадания,

4. теперь считаем попадания, если удалось попасть 5 раз, ускоряем движение цели (делаем интервал таймер меньше), чтобы усложнить игру. Если удалось попасть 10, то мы победили, открываем второй экран.

Целый блок будет выглядеть следующим образом:

Можно переходить к программированию второго экрана.

Второй экран

Когда включится второй экран, запустим проигрыватель:

А если будет нажата кнопка Заново, переходим на первый экран.

Программирование закончено, можно пробовать игру в действии.

Самостоятельная работа

Попробуйте усложнить игру, например:

• Добавить эффект исчезновения цели (в случайный момент времени компонент цель становится невидимым).
• Добавить возможность цели отстреливаться (понадобиться еще один шар и, опционально, таймер для этого компонента).
• Как более сложный этап — жизни персонажа и экран проигрыша, если жизни = 0.