Как сделать игру flappy bird

Flappy Bird за 30 минут

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Введение

Не так давно была популярной такая мобильная игра, как Flappy Bird. Причем по разным причинам из магазинов она пропала также неожиданно, как и появилась. Однако, учитывая ее популярность, сразу образовалось множество клонов. Не столь качественных, конечно. Но почему их было много? Все из-за того, что сама игра делается довольно просто и быстро.

И в этой небольшой статье мы, разумеется, рассмотрим, как же сделать такую игрушку, как Flappy Bird. Все ресурсы (спрайты, шрифты) принадлежат непосредственно их авторам.

Ресурсы

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

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Спрайты найдены на просторах интернета.

Подготовка игровых объектов

Сначала сделаем префаб игрока, то есть птичку. Для этого создаем на сцене пустой объект с именем Bird. Внутрь него помещаем объект-спрайт с именем Body и в свойство Sprite компонента Sprite Renderer помещаем спрайт нашей птички (из папки Sprites).

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Теперь на саму птичку (объект Bird) прикрепляем компонент Circle Collider 2D и задаем его радиусу значение 0.45.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy birdКак сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Также необходимо прикрепить компонент Rigidbody 2D. Здесь, пожалуйста, не перепутайте. Нам необходим именно 2D компонент, а не обычный Rigidbody. Ему задаем значение гравитации (Gravity Scale) равным 2.45 и запрещаем передвижение по оси X, чтобы наша птичка неожиданно не улетела куда-то в сторону.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Теперь создаем C# скрипт c именем BirdHelper и тоже прикрепляем его к птичке (объект Bird).

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

После всего этого перетягиваем объект Bird из окна Hierarchy в окошко Project, создав таким путем префаб птички. То есть в итоге на префабе Bird должно быть четыре компонента: Transform, Circle Collider 2D, Rigidbody 2D и скрипт Bird Helper.

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

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Что ж, дабы заделать префаб преграды, создаем на сцене пустой объект с именем Pipes и помещаем внутрь него два объекта-спрайта с именами TopPipe и BottomPipe. В Каждому из них в свойство Sprite компонента Sprite Renderer перетаскиваем спрайт Pipe (из папки Sprites).

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

С объектом TopPipe проделываем аналогичные манипуляции, но позиция по оси Y будет 4.5, и еще необходимо повернуть его на 180 градусов вокруг оси Z.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Почти готово. Осталось только настроить коллайдеры и прикрепить скрипт. Начнем с коллайдеров. Прикрепим на объект Pipes компонент Box Collider 2D. А лучше сразу три.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Следующий Box Collider 2D настроим аналогично предыдущему, только позиция по оси X будет 4.5.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

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

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

И под конец создаем скрипт с именем PipesHelper и прикрепляем его на объект Pipes.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Теперь перетягиваем объект Pipes из окна Hierarchy в окно Project, создав таким путем префаб для препятствий.

Остался только фон. Создаем пустой объект с именем Background. Помещаем в него два объекта-спрайта с именами Part1 и Part2 и в свойство Sprite компонента Sprite Renderer помещаем спрайт Background.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Объекту Part1 задаем размеры X: 2.6, Y: 2.6. С объектом Part2 выполняем такие же действия, но еще сдвигаем его вправо на 7.2 юнитов по оси X.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy birdКак сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

После этого в объект Background помещаем еще два объекта-спрайта с именами Ground1 и Ground2. Им назначаем спрайты Ground из папки Sprites.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Вот так должны выглядеть настройки объектов Ground1 и Ground2.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy birdКак сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Напоследок необходимо добавить коллайдер для земли и создать анимацию движения фона.

Прикрепляем компонент Box Collider 2D на объект Background.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Для того, чтобы создать анимацию, выделяем Background в окне Hierarchy и в окошке Animation нажимаем кнопку Create. Назовем ее BackgroundFloating.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Вся задача данной анимации – передвижение фона влево, чтобы создать эффект, как будто игрок на самом деле летит вправо. После того, как анимация будет создана, на объект Background автоматически прикрепится компонент Animator и будет создан Animator Controller. Нам осталось только перейти в окно Animator и установить значение скорости анимации 0.2.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Под конец создаем скрипт GameHelper и цепляем его на игровую камеру. На этом, пожалуй, все игровые приготовления завершены.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Непосредственно сам процесс разработки

Начнем, я так думаю, из скрипта главного персонажа. То есть BirdHelper’a. Реализация полета птички, как в оригинале, довольно проста. Под действием силы гравитации она будет постоянно падать, а при нажатии клавиши, допустим, Space, мы применим к ней силу по направлению вверх, используя метод AddForce на компоненте Rigidbody2D.

public class BirdHelper : MonoBehaviour

public float force;

private new Rigidbody2D rigidbody;

rigidbody = GetComponent Rigidbody2D >();

С помощью метода MoveRotation мы совершаем поворот птицы в зависимости он величины и знака значения текущего ее ускорения. Поле force у нас открытое и, разумеется, отобразится в окне Inspector. Напишем там 8. Это будет сила “прыжка”.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

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

public class PipesHelper : MonoBehaviour

private float speed;

Vector2 position = transform.position;

При появлении препятствие будет выбирать случайную позицию по оси Y, но такую, чтобы не было видно конца верхней или нижней трубы. Затем каждый кадр будет двигаться влево. Для этого, задавая конечную точку движения, мы вычитаем из текущей позиции препятствия вектор, направленный вправо от него. Также через 6 секунд объект Pipes будет уничтожен, чтобы не нагружать устройство, так как он свою задачу уже выполнил.

К полю speed, представляющему скорость движения препятствия, мы применили атрибут SerializeField, чтобы оно было отображено в Inspector’e, ведь мы его закрыли.

Перед тем, как перейти к скрипту GameHelper, добавим на игровую сцену объект-текст с именем ScoreText и настраиваем, как на рисунке ниже.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Это будет текст для отображения количества очков игрока.

Еще давайте добавим объект-кнопку с именем RestartButton. Она будет появляться, когда игрок проиграет, то есть при столкновении с каким-либо препятствием. В свойство SourceImage компонента Image нашей кнопки перетащите спрайт Button из папки Sprites. Вот настройки кнопки.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

А вот настройки текста внутри кнопки RestartButton.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

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

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Какая же задача скрипта GameHelper? Он будет отвечать за генерацию новых препятствий, подсчет очков и их отображение. А еще за перезапуск уровня. Давайте глянем код.

public class GameHelper : MonoBehaviour

private Text scoreText;

private GameObject pipes;

public Button restartButton;

Источник

Игра Flappy Bird на Unity 2D. Часть 1

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

В нашем учебнике используется Unity 5.0.0f4. Игра будет работать и в более новых версиях Unity, работа в старых версиях не гарантируется. Бесплатная версия Unity 5 теперь поставляется со всеми функциями движка, поэтому мы рекомендуем именно ее.

Настройка проекта

Запустите Unity и выберите New Project (Новый проект):

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Назовите его flappybird, выберите где он будет храниться, например, на C:\, выберите 2D и нажмите на Create Project (Создать проект):

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Если мы выберем Main Camera (Основная камера) в Hierarchy (Иерархия) то мы можем сделать Background Color (Фоновый цвет) светло-голубым (R=198, G=208, B=230) под цвет неба и задать Size (Размер) как показано на рисунке ниже:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Как сделать фон в Unity 2D

Начнем мы с того, что нарисуем небо на фоне:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Измените Import Settings в Инспекторе:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Давайте добавим фон в игровой мир, перетащив его из Project Area на Main Camera в Иерархии:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Так фон становится потомком для Main Camera:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

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

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

Обратимся к вкладке Инспектор и установим позицию фона Y=-1 так, чтобы он как раз подходил к игре и в дальнейшем:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Если нажать Play, то мы увидим небо на заднем фоне:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Существует еще одна необходимая корректировка. В ближайшее время мы добавим птицу и некоторые препятствия, так что давайте убедимся, что фон на самом деле нарисовал позади всего остального. В Unity используются свойства SpriteRenderer: Sorting Layer (Сортировка Слоя) и Order in Layer (Порядок в Слое), чтобы решить какой слой игры должны находиться впереди, а какие за ними.

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

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

Ландшафт

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

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Щелкните правой кнопкой мыши на изображение, выберите Save As. (Сохранить как. ) и сохраните изображение выше в проекте в папке Assets/Sprites. Выберем землю в Project Area, а затем назначим те же Import Settings (Настройки Импорта), что мы использовали ранее:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

После этого мы перетащим его из Project Area в Hierarchy (Иерархия) снова (обратите внимание: на этот раз мы не будем делать его потомком камеры):

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Ground Physics

Почва должна быть частью игрового мира. Сейчас это просто изображение в игровом мире, только визуальный эффект и больше ничего. Мы хотим, чтобы земля была как стена, с которой птица может столкнуться, поэтому давайте выберем Add ComponentPhysics 2DBox Collider 2D в Инспекторе:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

По идее, на этом можно было бы закончить, но осталось еще одно маленькое «но».. В дальнейшем мы добавим препятствия в нашу игру (как зеленые трубы в оригинальной игре Flappy Bird) и эти препятствия будут перемещаться вверх и вниз. Препятствия и земля будут частью игрового мира и, в соответствии с законами физики, не может быть двух объектов в одной точке (или, в нашем случае, двух Коллайдеров).

Есть несколько способов обойти эту проблему. Как обычно, мы выберем самый простой путь, создав новый слой, который мы будем использовать для земли и препятствий. После этого мы сообщим Unity игнорировать столкновения в/между этим слоем.

Мы можем создать новый слой, выбрав Add Layer (Добавить Слой) в Инспекторе:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

После этого мы добавим один User Layer (Пользовательский Слой), давайте назовем его WeirdPhysics:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Теперь мы можем выбрать землю в Иерархии, а затем снова назначить слой WeirdPhysics:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

Затем мы выберем EditProject SettingsPhysics 2D в верхнем меню и отключим столкновения WeirdPhysics в Layer Collision Matrix, которая определяет как будет себя вести система обнаружения столкновений, привязанных к слоям:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

В Unity редко приходится делать что-то такое, но наша игра как раз является исключением.

Теперь земля никогда не столкнется с каким-либо препятствием. Кроме того, если мы нажмем на кнопку Play, то увидим не только небо, но и землю:

Как сделать игру flappy bird. Смотреть фото Как сделать игру flappy bird. Смотреть картинку Как сделать игру flappy bird. Картинка про Как сделать игру flappy bird. Фото Как сделать игру flappy bird

На этом первая часть нашего урока подошла к концу. В следующем уроке Игра Flappy Bird на Unity 2D. Часть 2 мы поработаем над нашим пернатым героем.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *