Уроки Unity 3d

Как сделать похожую на Jetpack Joyride игру с помощью Unity 2D – часть 1

В первой части этого самоучителя вы узнаете, как создать игру в стиле Jetpack Joyride с помощью Unity 2D.

Версия

C# 3.5, Unity 2017.x, Unity

С выходом Unity 2017.3, разработчикам больше не нужно использовать сторонние ресурсы для создания 2D игр. Теперь целый набор инструментов есть прямо в библиотеке Unity. В сочетании с уже имеющимися стандартными инструментами и обновленным пользовательским интерфейсом процесс создания 2D игр в Unity стал еще более простым и увлекательным процессом.

Игра Jetpack Joyride была выпущена Halfbrick Studios в 2011 году. Это довольно простая в управлении игра, в которой нужно бегать и использовать реактивный ранец для прохождения локаций попутно собирая монеты и уклоняясь от препятствий.

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

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

Это первый урок серии, которая состоит из трех частей. В этом уроке вы узнаете, как:

  • Работать с физикой в Unity.
  • Использовать сортировку слоев, чтобы организовать спрайты.
  • Использовать коллайдеры, чтобы определить границы игрового пространства.

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

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

Введение

Для этого урока вам понадобится некоторые изображения, звуковые эффекты и музыка. Загрузите материалы, используя эту ссылку. Вам также потребуется Unity 2017.3 или более поздняя версия, установленная на вашем компьютере.

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

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

Откройте Unity и выберите «New project» в окне «Project» или нажмите кнопку «New» в правом верхнем углу, если ранее вы уже создавали проекты в Unity.

Примечание: если вы уже создали несколько проектов Unity 2D, не стесняйтесь использовать стартовый проект RocketMouse Part 1 в материалах. Кроме того, вы можете использовать множество различных платформ при создании игры в Unity, однако в рамках этого урока вы будете работать с настройками, предназначенными для iPhone Retina.

Введите RocketMouse в поле Project name и укажите дирректорию, в которой вы хотите сохранить проект. Кнопка с многоточием в конце поля позволит вам перейти в каталог по вашему выбору. Выбрав место, нажмите «Select folder», чтобы задать местоположение. Выберите опцию 2D и нажмите «Create Project».

Если вы не загрузили стартовый проект, создайте папку с именем RW в окне «Project» с помощью AssetsCreateFolder или используйте раскрывающийся список «Create» в верхнем левом углу окна «Project». В этом месте будут храниться все последующие папки и файлы, созданные в этом каталоге.

Создайте еще одну новую папку с именем Scenes в каталоге RW в окне «Project». Затем откройте диалоговое окно «Save Scene», выбрав File Save Scene или воспользовавшись сочетанием клавиш S (Ctrl + S в Windows). Перейдите в папку Scenes, которую вы только что создали, назовите сцену RocketMouse.unity и нажмите «Save».

Настройка внешнего вида игры

Переключитесь в режим «Game» и установите фиксированное разрешение размером 1136 × 640. Если у вас нет этого параметра в списке, создайте его и назовите iPhone Landscape.

Выберите Main Camera в меню Hierarchy и в окне Inspector, внутри компонента «Camera», установите значение «Size» = 3.2.

Сохраните сцену.

Создание игрового персонажа

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

Импорт игровых активов

Чтобы добавить новые ресурсы, откройте папку RocketMouse_Resources, выберите папки Sprites и Audio и перетащите их в папку Assets в окне Project.

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

Добавление игрока на игровую сцену

Многие анимированные игровые спрайты поставляются в виде спрайт-листа, и ваша мышка не является исключением.

Нарезка кадров спрайта мыши

Кадры для анимации полета, бега и гибели содержатся в листе mouse_sprite_sheet и ваш первый шаг — правильно его нарезать.

Откройте папку Sprites в окне Project и найдите mouse_sprite_sheet. Выберите его и установите для Sprite Mode значение «Multiple» в меню Inspector, а затем нажмите «Apply».

Теперь вам нужно нажать на кнопку Sprite Editor, чтобы открыть редактор спрайтов.

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

  1. Установите в поле Type значение Grid By Cell Size.
  2. Установите размер пикселя 162х156.
  3. Нажмите кнопку «Slice».
  4. На экране должна появиться сетка. Не забудьте нажать кнопку «Apply», чтобы сохранить изменения.

Также в редакторе спрайтов, выберите верхнее левое изображение, чтобы отобразить его детали. Щелкните в поле «Name» и присвойте спрайту более подходящее имя: mouse_run_0.

Переименуйте оставшиеся спрайты сверху вниз слева направо следующим образом:

  • mouse_run_1
  • mouse_run_2
  • mouse_run_3
  • mouse_fly
  • mouse_fall
  • mouse_die_0
  • mouse_die_1

Нажмите Apply еще раз, чтобы сохранить изменения.

Закройте редактор спрайтов и разверните mouse_sprite_sheet в окне Project. Посмотрите, теперь он разделен на восемь различных спрайтов.

Настало время добавить что-то еще в область игровой сцены. Выберите спрайт с именем mouse_fly и перетащите его в рабочую область сцены.

Сделав это, вы создадите объект в Hierarchy с именем mouse_fly.

Выберите mouse_fly в Hierarchy и внесите следующие изменения в окне Inspector:

  1. Измените объекта на mouse, так как это название отображает описание персонажа.
  2. Установите значение координат для Position = (0, 0, 0). Вы переместите мышь в конечное положение чуть позже, но сейчас лучше расположить ее прямо в центре экрана, чтобы лучше видеть.
  3. Добавьте 2D-компонент Circle Collider, нажав кнопку «Add Component» окне Inspector. В раскрывающемся меню выберите Physics 2D, а затем выберите Circle Collider 2D.
  4. Установите для компонента Radius значение 0,5.

  1. Добавьте компонент Rigidbody 2D, нажав кнопку Add Component и выбрав Physics 2D Rigidbody 2D.
  2. Разверните раздел constraints в компоненте Rigidbody 2D и установите флажок Freeze Rotation Z.

Посмотрите, как все должно выглядеть:

Зеленый кружок в окне «Scene» обозначает коллайдер – обратите внимание на то, что его размер изменился, когда вы изменили свойство Radius компонента Circle Collider 2D.

Коллайдеры определяют форму, которая используется физическим движком для определения столкновений с другими объектами. Вы могли бы создать более точный пиксельный коллайдер, используя 2D компонент Polygon Collider, как показано на скриншоте ниже:

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

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

Фактически, столкновения между двумя объектами GameObject будет незаметным, если ни у одного из них не будет компонента Rigidbody. Если вы хотите, чтобы мышь подверглась воздействию силы тяжести и сталкивалась с другими объектами, вам нужно использовать свойство Freeze Rotation компонента Rigidbody 2D.

Запустите сцену и наблюдайте, как мышь падает вниз под действием силы тяжести:

Фактически, когда вы добавили компонент Rigidbody 2D, ему была присвоена гравитационная шкала по умолчанию, равная 1.

Создание скрипта для управления полетом

Вам нужно добавить скрипт, который активирует реактивный ранец и даст возможность вашей мышке по настоящему летать.

Для этого вам нужно:

  1. В меню Project browser создать новую папку в каталоге RW с именем Scripts, таким же образом, как ранее вы создавали папку Scenes. Убедитесь, что у вас выбрана эта папка, поскольку Unity добавит новый скрипт только в текущую выбранную папку.

  1. Выберите CreateC# Script в верхнем меню и назовите скрипт MouseController.
  2. Перетащите скрипт MouseController на мышь в меню Hierarchy. Это добавит компонент Script и установит его свойство для скрипта MouseController.

Примечание: обязательно убедитесь, что вы правильно называете скрипт при первом его создании. В противном случае вы получите следующую ошибку при попытке добавить этот скрипт в GameObject:

Невозможно добавить поведение скрипта MouseController. Имя файла скрипта не совпадает с именем класса, определенного в скрипте!

Теперь пришло время написать код. Откройте скрипт MouseController, дважды щелкнув его в окне «Project» или в меню «Inspector». Этаким образом вы откроете MouseController.cs в любом удобном вам редакторе.

Добавьте следующую переменную jetpackForce:

public float jetpackForce = 75.0f;

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

Чуть ниже jetpackForce добавьте следующую переменную:

private Rigidbody2D playerRigidbody;

Затем добавьте следующий код в автоматически сгенерированный метод Start:

playerRigidbody = GetComponent<Rigidbody2D>();

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

Затем добавьте еще один метод:

void FixedUpdate()

{

    bool jetpackActive = Input.GetButton("Fire1");

    if (jetpackActive)

    {

        playerRigidbody.AddForce(new Vector2(0, jetpackForce));

    }

}

FixedUpdate () вызывается Unity через фиксированный интервал времени.

Примечание: Разница между методами Update и FixedUpdate в том, что FixedUpdate вызывается через равные промежутки времени, в то время как Update вызывается для каждого кадра. Так как, частота смены кадров может меняться, время между вызовами Update — методов может также меняться, однако физические движки плохо работают с переменным шагом времени. Вот почему метод FixedUpdate существует и должен быть использован, чтобы написать код, связанный с моделированием физики (например, применение силы, задание скорости и так далее).

В FixedUpdate вы проверяете, нажата ли кнопка Fire1. Эта кнопка определяется по умолчанию в Unity как левая кнопкой мыши, левой клавиша Ctrl на клавиатуре, или просто касанием экрана для сенсорного устройства (в данном случае). Поэтому, если в данный момент нажата Fire1, код применит к мыши подъемную силу. Свойство rigidbody2D просто возвращает компонент Rigidbody 2D, прикрепленный к текущему объекту игры, или null если компонент отсутствует.

Метод AddForce просто применяет силу к rigidbody. Он принимает Vector2, который определяет направление и величину приложенной силы.

Запустите сцену и удерживайте левую кнопку мыши, чтобы включить ракетный ранец и посмотреть, как летает мышь.

Регулировка силы тяжести

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

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

Для глобального изменения силы тяжести выберите Edit Project Settings Physics 2D. Это откроет настройки Physics 2D проекта в меню Inspector. Найдите поле Gravity и установите значение Y равным —15.

При повторном запуске сцены вам должно быть намного проще удерживать мышь на экране.

Не волнуйтесь, если вы по-прежнему испытываете трудности по поддержанию мыши в пределах экрана игры. Попробуйте сделать вашу вкладку Game немного больше, настроить jetpackForce, или гравитацию. Значения, рекомендуемые здесь, будут правильно работать, когда вы запустите игру на iPhone. Пол и потолок помогут лучше держать мышь в поле зрения, поэтому вам нужно их добавить в следующей главе.

Добавление пола и потолка

Добавление пола и потолка — относительно простой процесс и все, что вам нужно, это указать объект, с которым мышь сталкивается в верхней и нижней части сцены. Однако пол и потолок могут быть представлены пустыми объектами GameObject, поскольку они никогда не перемещаются, и их расположение вполне очевидно для игрока.

Выберите GameObjectCreate Empty, чтобы создать пустой объект. Имейте ввиду — вы не увидите его на экране.

Выберите новый GameObject в меню Hierarchy и внесите следующие изменения в окне Inspector:

  1. Измените название на floor.
  2. Установите координаты Position в (0, -3,3, 0).
  3. Установите значение Scale (4, 1, 1).
  4. Нажмите Add Componentи добавьте компонент Box Collider 2D, выбрав Physics 2DBox Collider 2D.

Теперь вы должны увидеть зеленый коллайдер внизу сцены, как показано на следующем изображении:

Примечание: вы не добавили 2D-компонент Rigidbody в игровой объект пола, потому, что пол должен ограничивать только движение мыши, но гравитация на него при этом не должна никак влиять

Запустите сцену. Теперь мышь должна падать на пол и оставаться на месте.

Однако, если вы сейчас активируете реактивный ранец, мышь все равно покидает комнату, поскольку потолка в локации все еще нет.

Попробуйте добавить потолок самостоятельно, установив координаты Position в (0, 3.7, 0), и переименовав объект в ceiling. Вы также можете воспользоваться подсказкой ниже:

Выберите GameObject Create Empty, чтобы создать новый объект. Выберите его в меню Hierarchy и внесите следующие изменения в окне Inspector:

  1. Измените название на ceiling.
  2. Установите координаты Position в (0, 3.7, 0).
  3. Установите значение Scale (4, 1, 1).
  4. Нажмите «Add Component» и добавьте компонент Box Collider 2D.

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

Использование системы частиц для создания пламени реактивного ранца

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

Системы частиц используются для создания множества мелких частиц и имитации таких эффектов, как огонь, взрывы, туман — в зависимости от конфигурации системы.

Создание системы частиц

Чтобы добавить систему частиц на сцену, выберите GameObject Effects Particle System. Вы сразу заметите изменение на сцене: система частиц покажет свое поведение, когда будет выбран объект.

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

Теперь, когда система частиц реактивного ранца движется правильно, вам нужно ее настроить таким образом, чтобы она напоминала пламя. Выберите Particle System в меню Hierarchy и измените следующие данные в окне Inspector:

  1. Переименуйте систему частиц в jetpackFlames.
  2. Установите Position в (-0,62, -0,33, 0).
  3. Установите координаты Rotation в положение (65, 270, 270).
  4. Найдите компонент Particle System и установите следующие свойства:
  • Установите Start Lifetime на 0,5
  • Установите Start Size = 0,3
  • Нажмите Start Color и установите Red = 255, Green = 135, Blue = 40 и оставьте Alpha = 255.
  • Разверните раздел «Emission» и установите для параметра «Rate over Time» значение 300.
  • Разверните раздел Shape и убедитесь, что установлено значение Cone. Также установите Angle = 12, Radius = 0.1 и Randomize Direction = 1.

Вот как должна выглядеть ваша система частиц:

Еще раз проверьте, правильно ли вы установили все настройки, как показано на этом изображении:

Улучшение пламени ранца

Теперь вам нужно немного изменить цвет некоторых частиц пламени, чтобы добиться большей реалистичности. Выберите jetpackFlames в меню Hierarchy и найдите раздел под названием Color over Lifetime в компоненте Particle System. Включите его, установив флажок слева от названия раздела и щелкните на заголовок, чтобы развернуть раздел.

Примечание: прямо сейчас цвет просто белый, не смотря на то, что вы настраивали цвет пламени как оранжевый. Однако Color over Lifetime работает немного по-другому — вместо установки цвета этот параметр умножается на значение «Start Color».

Поскольку умножение любого цвета на белый дает исходный цвет, вы всегда видите оранжевый цвет. Но вы также можете изменить Color over Lifetime на градиент и установить конечный цвет на 0 альфа. Таким образом, частицы будут постепенно исчезать.

Щелкните белую рамку цвета в «Color over Lifetime», чтобы открыть редактор градиентов, как показано на изображении ниже:

Выберите верхний ползунок справа и изменив значение Alpha value на 0, закройте окно.

Запустите сцену. Посмотрите — теперь пламя реактивного ранца выглядит намного реалистичнее.

Создание секций уровня

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

Вот так будет выглядеть уровень в дальнейшем:

Процесс создания уровня состоит из трех этапов:

  • Добавление фона
  • Добавление пола и потолка
  • Добавление предметов декора

Добавление фона комнаты

В окне «Project» откройте папку «Sprites» и перетащите спрайт bg_window на сцену в произвольном месте.

Выберите bg_window в меню Hierarchy и установите Position в (0, 0, 0).

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

Найдите bg в окне Project и перетащите его на сцену дважды. Первый раз слева, а второй раз справа от bg_window также в произвольном месте.

Вот что у вас должно получиться:

Примечание: хотите знать, почему вы должны строить комнату вокруг (0, 0, 0) точки? Это делается для того, чтобы вы могли добавить все комнаты к пустому игровому объекту.

Использование инструмента Vertex Snapping

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

Вместо этого вам нужно использовать функцию Vertex Snapping Unity, которая позволяет легко размещать элементы рядом друг с другом.

Чтобы использовать Vertex Snapping, вам нужно удерживать клавишу V после выбора GameObject.

Выберите фоновый объект комнаты, который вы хотите переместить. Затем удерживайте клавишу V и переместите курсор в угол, который вы хотите использовать в качестве точки поворота.

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

Использование сортировки слоев

Выберите mouse в меню Hierarchy и найдите компонент «Sprite Renderer» в окне Inspector. Вы должны увидеть раскрывающийся список «Sorting Layer», который в настоящее время имеет значение «Default», как показано на изображении ниже.

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

Нажмите на опцию Add Sorting Layer…, чтобы добавить больше слоев сортировки. Добавьте следующие слои, нажав кнопку +:

  1. Background
  2. Decorations
  3. Objects
  4. Player

Когда вы закончите, редактор Tags & Layers должен выглядеть следующим образом:

Теперь снова выберите mouse в меню Hierarchy и установите для параметра Sorting Layer значение Player.

Теперь выберите три фоновых фрагмента, bg_window, bg и bg (1) в меню Hierarchy, и установите для Sorting Layers значение Background.

Выберите jetpackFlames меню Hierarchy и в окне Inspector найдите вкладку «Renderer». Установите Sorting Layer в Player и Order in Layer в -1.

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

Объекты для декорации комнаты

Для украшения комнаты вы можете использовать любое количество книжных шкафов и мышиных норок из папки Sprites в Project browser. Располагайте их по своему усмотрению, например, так:

В Project browser найдите изображение с именем object_bookcase_short1. Перетащите его на сцену так же, как вы делали с фоном комнаты.

Выберите object_bookcase_short1 в меню Hierarchy и установите его orting Layer на Decorations. Также установите координаты книжного шкафа в (3.42, -0.54, 0) или поместите его в любое другое место, которое нравится вам.

Что делать дальше?

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

Вы можете скачать окончательный проект для этой части.

Перевод
Оригинал
Показать больше
Закрыть
Закрыть