Как сделать игру Pong - hyperPong

Примечание: Файл завершенного проекта для этого урока можно найти в конце статьи.

Введение

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

Pong — это простая игра для двух игроков, которая состоит всего из двух ракеток и мячика, и ее можно рассматривать как простую цифровую версию настольного тенниса. Каждый игрок управляет ракеткой, расположенной по разные стороны стола. Ракетки могут двигаться только вперед и назад, отбивая мяч к сопернику. Если игрок не успевает подхватить мяч, другой игрок получает очко. Первый игрок, набравший 11 очков, выигрывает!

В нашей игре Pong мы включим возможность игры в однопользовательском режиме (Игрок против ИИ), в режиме двух игроков (Игрок против Игрока) или в режиме «Наблюдение» (ИИ против ИИ).

Часть 1: Настройка проекта и главное меню

Давайте начнем с создания нового проекта.

Откройте меню проектов в hyperPad и нажмите на Новые проекты. Дайте вашему проекту название и нажмите Далее. Ориентация может оставаться по умолчанию — пейзаж. В этом уроке поддержка устройств установлена на iPad 4:3. На следующем экране выберите «С высоты птичьего полета» и оставьте остальные параметры по умолчанию.

Теперь, когда у нас есть новый проект, готовый к работе, давайте быстро настроим главное меню, прежде чем перейти к самой игре. Первое, что мы сделаем, это переименуем нашу сцену в «Главное меню».

Нажмите на меню Проект/Сцена и нажмите на кнопку шестеренки рядом с нашей «Сцена 1».

Нажмите на опцию Настройки и переименуйте нашу сцену в «Главное меню». Нажмите Сохранить, чтобы сохранить и закрыть окно настроек.

Затем, чтобы оставаться в традициях ранних ретро-игр, таких как arcade Pong, мы можем сделать цвет фона черным.

Нажмите кнопку Настройки сцены и выберите Фон. Нажмите кнопку «Изменить цвет» и установите его в черный (#000000FF).

Теперь давайте добавим заголовок на наш главный экран. Нажмите кнопку Специальные объекты и выберите Надпись.

Введите название вашей игры в текстовом поле («hyperPong» было введено для этого урока), установите размер шрифта чем-то большим, но не слишком большим. Для заголовка «hyperPong» 72 пункта — это хороший размер. Измените цвет на белый (#FFFFFFFF) и поместите его в центр меню ближе к верху.

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

Часть 2: Настройка игровой сцены и ракетки

Нажмите кнопку Меню проекта и нажмите «Добавить сцену». Назовите ее «Игра» и нажмите Создать. Теперь в игровой сцене вы должны увидеть пустой холст. Как и в сцене главного меню, нажмите кнопку Настройки сцены еще раз и измените фон на черный (#000000FF).

Приступим к работе над созданием игровых ракеток. Создайте пустой объект, перейдя в кнопку Специальные объекты и выбрав «Пустой объект». Измените его цвет на белый (#FFFFFFFF) и убедитесь, что ползунок прозрачности полностью включен.

Переименуйте объект в «Игрок-1» и установите его режим физики на Физика, оставив Пропускаемость включенной.

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

В свойствах объекта Игрок-1 перейдите на вкладку Преобразование и установите масштаб X на 25%, переместив его влево от игрового поля.

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

Поместите поведение Joystick Analog, найденное в разделе Взаимодействие (если вы не можете его найти, возможно, вам придется перейти на вкладку Расширенные). Это автоматически создаст джойстик для вас в редакторе сцены.

Но мы не хотим, чтобы ракетка двигалась только с помощью джойстиков. Мы также хотим, чтобы ИИ мог выполнять движения.

В разделе Пользовательское поведение добавьте контейнер Box. Этот контейнер будет хранить, в каком направлении будет двигаться ракетка. Таким образом, как игрок, управляющий джойстиком, так и ИИ, выполняющий вычисления, смогут двигаться, изменяя это одно значение. Его начальное значение должно быть установлено на 0. Также неплохо дать ей хорошее имя, «Направление движения» кажется подходящим.

С выделенным контейнером Box нажмите кнопку «Изменить поле ввода» и выберите Да. Это создаст поведение Set Input Field для контейнера, чтобы мы могли изменить его значение, когда это необходимо. Подключите Set Input Field к Joystick Analog.

С выделенным поведением Set Input Field перетащите выходное значение из Joystick Analog в поле New Value. Выберите свойство