Как сделать Tappy Plane (клон Flappy Birds)

Введение:

Здравствуйте и добро пожаловать в учебник по созданию собственной игры в стиле "Flappy Birds" в hyperPad.

Наша версия немного отличается, поэтому мы называем её Tappy Plane.

Этот учебник предназначен для начинающих, которые хотят глубже изучить нашу систему поведения и научиться визуальному программированию. В течение учебника вы также узнаете, как работать с интерфейсом hyperPad.

В этом учебнике мы создадим простую игру в стиле Flappy Bird. Игровой процесс будет заключаться в том, что игрок касается экрана, чтобы управлять самолётом, заставляя его подниматься и опускаться, избегая серии утесов. Каждое пройденное препятствие даст одно очко, и с достаточным количеством очков игроки получат медаль. Медали увеличиваются в ценности по мере повышения счёта, вплоть до блестящей золотой медали! А кто не любит блестящие вещи!?

Если у вас ещё нет hyperPad, вы можете скачать его из App Store: https://itunes.apple.com/app/apple-store/id886106438?mt=8

Вы можете узнать больше о hyperPad на нашем сайте: http://www.hyperpad.com

Итак, без лишних слов, давайте начнем!

Часть 1: Начало работы

Создание проекта:

Первое, что нам нужно сделать, это начать новый проект. При загрузке hyperPad вы должны увидеть экран проектов. Здесь вы найдёте все проекты, которые вы создали, а также любые, которые вы скачали. На данный момент мы хотим начать новый проект. Нажмите кнопку "Новый проект" в правом верхнем углу экрана, как показано ниже.

После этого должно появиться окно с предложением. Здесь мы назовем проект и создадим резервную копию в облаке, если это желательно. Кроме того, вы можете нажать кнопку "Начать с образца вместо этого", чтобы импортировать один из наших базовых проектов. Однако на данный момент мы этого не будем делать. Назовите проект Tappy Plane и затем нажмите кнопку "Далее".

На этом новом экране мы определим устройство, для которого мы проектируем, и ориентацию. Для этого проекта установите ориентацию на ландшафтную и поддержку устройства на iPad. Не беспокойтесь, если вам нужно изменить что-то позже. Эти настройки можно изменить в любое время в меню Глобальные настройки.

Наконец, мы можем выбрать, какой тип игры мы хотим создать. В настоящее время hyperPad поддерживает два типа режимов: вид сверху и боковой вид. Вид сверху, или наша игра с птичьего глаза, обычно используется для игр, таких как The Legend of Zelda, прежде чем она перешла на 3D, головоломок, таких как Bejeweled, и шутеров с видом сверху. Боковой вид обычно используется для платформенных игр, таких как Super Mario Bros.

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

Для этого учебника мы будем использовать боковой вид, поэтому убедитесь, что он выбран. Далее, у нас есть настройки гравитации и PTM Ratio. По умолчанию, гравитация будет установлена на 0 и -25.

Это значения x и y, или проще говоря, горизонтальные и вертикальные значения нашего игрового мира. X представляет горизонтальное направление, или влево и вправо, в то время как Y представляет вертикальное направление, или вверх и вниз. Значения по умолчанию 0 и -25 означают, что не будет никаких гравитационных сил, притягивающих объекты влево и вправо, но они будут падать вниз со скоростью 25 метров в секунду. Для этого учебника значения по умолчанию вполне подходят.

PTM Ratio означает "точки на метр" или проще говоря, сколько пикселей (точек) в 1 метре hyperPad. По умолчанию это установлено на 32 pt/m или 32 пикселя на метр. Это важно знать при создании художественных активов, и все художественные активы должны следовать этой шкале. В этом учебнике мы будем использовать бесплатные активы из библиотеки активов hyperPad, поэтому нам не нужно менять масштаб.

Когда всё будет готово, нажмите кнопку создать, и мы начнём!

Редактор:

Теперь, когда мы в проекте, вы должны увидеть экран, который выглядит так:

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

Как только вы будете готовы, нажмите на значок ящика в правом нижнем углу, чтобы открыть Браузер активов.

Библиотека активов:

Это место, где будут храниться все активы для нашей игры. По умолчанию новый проект hyperPad включает лишь несколько стартовых активов. Вам нужно импортировать свои собственные или скачать пакет из магазина активов hyperPad. В этом учебнике мы сосредоточимся на использовании активов, предоставляемых магазином активов hyperPad. Слева будет панель с четырьмя кнопками. Нажмите на кнопку "Получить активы", чтобы открыть магазин Hyperpad.

Здесь вы найдёте бесплатные пакеты активов, созданные нами в Hyperpad, чтобы помочь начать ваши проекты. Найдите и нажмите на пакет активов Tappy Plane.

Теперь просто нажмите кнопку "Получить", чтобы начать импорт (Примечание: если произойдет ошибка, просто нажмите её снова, чтобы перезапустить импорт). После завершения вы получите сообщение, что активы были успешно импортированы. Просто нажмите "Закрыть" в правом верхнем углу экрана, чтобы вернуться в Hyperpad.

И это так просто. Теперь вы должны увидеть новую папку в Браузере активов под названием Загрузки. Нажимая на неё, вы увидите папку Tappy Plane Pack и в ней наши художественные активы.

Теперь мы начнём собирать нашу игру.

Часть 2: Игровой процесс

Если вы знакомы с Flappy Bird, то вы будете знакомы с игровым стилем. Нажмите на экран, чтобы держать птицу, или в нашем случае самолёт, в воздухе, стараясь не врезаться в встречные препятствия. Эти препятствия будут появляться в случайных конфигурациях, поэтому каждая игра будет отличаться от предыдущей. Очки присуждаются за успешное избегание препятствий, и ваш лучший результат будет записан.

Добавление самолёта:

Итак, теперь, когда вы понимаете основной игровой процесс, мы можем начать. Первое, что нам нужно сделать, это вывести нашего персонажа на экран. Зайдите в Браузер активов и откройте папку загрузок и перейдите, пока не увидите ваши художественные активы. Должна быть папка, названная Самолёты.

Откройте эту папку и выберите любой цвет, который вам больше нравится. Затем просто выберите первый графический образ самолёта. Это закроет библиотеку активов и вернет вас на основной экран редактора, где теперь вы должны увидеть самолёт в нижнем объектном доке. Эта часть интерфейса известна как Объектный док. Она будет отображать последние 5 использованных вами активов. Теперь, чтобы поместить наш самолёт в игровую зону, просто перетащите самолёт из дока на холст.

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

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

Падающий самолёт:

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

Первое, что нам нужно сделать для этого, это создать новый слой. Но для этого нам нужно снять выделение с нашего самолёта. Для этого просто нажмите на любое пустое пространство. После того, как выделение будет снято, свойства объекта закроются, и вы должны увидеть вкладку слоёв справа. Если нет, просто проведите пальцем от правой стороны экрана к левой, чтобы показать её.

Как вы можете видеть, по умолчанию в настоящее время есть три слоя. Глобальный интерфейс пользователя, интерфейс сцены и затем Главный, после разделительной линии. Быстрое примечание о том, что что-либо на слое глобального интерфейса пользователя будет появляться в каждой сцене вашей игры. Все остальные слои специфичны для своих отдельных сцен. Для создания нового слоя просто нажмите значок + внизу вкладки слоев. Это предложит нам назвать новый слой. Введите "Кнопка" и нажмите ОК.

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

Теперь, чтобы создать нашу кнопку, это очень просто. Нажмите кнопку Специальные объекты (икона колбы) в правом нижнем углу Объектного дока. Это вызовет меню для создания типа объекта. Нам нужен Пустой объект. Нажимая на него, в центре нашего проекта создаётся маленький пустой квадрат. Однако мы хотим, чтобы он занимал весь экран. Нажмите внутри квадрата, чтобы выбрать его.