Главная › Игры

Как создать базовую платформу Unity —

В этом эксклюзивном руководстве по Appual мы расскажем, как настроить Unity (с поддержкой WebGL) и создать свой первый игровой проект. Для этого урока вы можете клонировать другую онлайн-игру, но если вы хотите создать свои собственные браузерные игры, у вас должен быть некоторый опыт программирования на HTML5 / JavaScript (и, возможно, C ++, если вы хотите быть модным).

Создание игр на основе браузера в Unity WebGL может быть весьма полезным — существует множество сайтов игровых порталов, которые будут разделять с вами доход от рекламы или покупать ваши игры напрямую у вас. Если вы талантливы, вы можете легко зарабатывать несколько тысяч долларов в месяц в виде доли дохода от рекламы. Unity с WebGL является одним из лучших инструментов для этого, а с помощью плагинов WebVR вы также можете довольно просто обеспечить поддержку VR в своих играх.

Так что, если вам интересно, как создавать игры Unity WebGL, читайте дальше!

Требования

  • Единство
  • Знание HTML5 / JavaScript
  • (Необязательно) Хороший текстовый редактор, такой как NotePad ++

Для начала загрузите и установите Unity и убедитесь, что вы установили компонент поддержки WebGL.

Когда Unity запускается в первый раз, потратьте минуту, чтобы привыкнуть к пользовательскому интерфейсу и меню, особенно к панели «Иерархия» — она ​​содержит все текущие элементы сцены. Это в основном основной вид того, над чем вы работаете, будь то игровой уровень или главное меню.

У вас также есть вкладка Game (для тестирования игры внутри редактора), а справа — панель Inspector. Здесь можно редактировать элементы, например, свет, актеров и т. Д.

Если вы нажмете кнопку «Направленный источник света» в меню «Иерархия», она даст вам кучу информации об этом конкретном источнике света, и вы сможете включить / отключить отбрасываемые тени.

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

Немного ознакомившись с пользовательским интерфейсом, продолжайте и сохраните текущую сцену. Перейдите в File> Save Scene, и он откроет диалоговое окно для папки «Assets». При разработке игр общепринятая практика состоит в том, чтобы все было организовано в подпапки, поэтому создайте подпапку «Сцены» и сохраните в ней сцену.

Теперь мы собираемся создать что-то действительно простое — игру типа «платформер», где наш персонаж просто скачет по платформам. Падение означает смерть. Мы будем делать это в 3D / от первого лица, поэтому персонаж действительно не моделирует — фактически, мы просто собираемся использовать простой «сферический» объект для нашего персонажа, потому что его проще всего создавать.

Поэтому на панели «Иерархия» нажмите «Создать» и измените следующие свойства:

  • Положение {X: 0, Y: 2,5, Z: 0}
  • Шкала {X: 0,3, Y: 0,3, Z: 0,3}

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

Поэтому на панели «Инспектор» добавьте компонент в сферу и выберите «Жесткое тело» — также мы не хотим, чтобы сфера вращалась, поэтому перейдите в «Содержимое»> выберите все оси в области «Поворот».

Теперь нам нужно создать какую-то платформу, чтобы наш персонаж не падал бесконечно в течение игры. Так что добавьте куб и установите значение Масштаб Y в 0,1 — теперь, если вы снова «сыграете» сцену, наш персонаж должен «упасть» на куб.

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

Создайте новую подпапку в каталоге Assets и назовите ее как-нибудь «Материалы», а затем создайте новый физический материал. Назовите это «Bouncy_blob» или как хотите.

Теперь на панели «Инспекция» добавьте эти значения в надувной материал:

  • Динамическое Трение: 10
  • Статическая фантастика: 10
  • Бодрость: 1
  • Комбинация трения: Максимум
  • Bounce Combine: Максимум

Мы также должны добавить физический материал на платформу под нашей сферой — это будет так, что наша сфера будет подпрыгивать с увеличением высоты при каждом отскоке. Поэтому создайте другой материал, назовите его как-то как «Platform_bouncing» и присвойте ему значения:

  • Динамическое трение: 0,9
  • Статическая беллетристика: 0,9
  • Бодрость: 1
  • Фрикционный комбайн: средний
  • Отказов комбинат: умножить

Теперь, когда вы нажмете кнопку «Play», вы заметите, что наш персонаж подпрыгивает выше при каждом отскоке.

Чтобы добавить цвет / текстуру на платформу, создайте новый материал и нажмите вкладку «Альбедо», а затем присвойте ему цвет. Вы можете перетащить этот материал на платформу, и он изменит цвет.

Для перспективы от первого лица вам просто нужно перетащить камеру с панели «Иерархия» на нашу сферу — это заставит камеру всегда следовать за нашим персонажем. Эта предпосылка остается той же для любой игры Unity от первого лица — но если вы создаете многопользовательскую FPS-игру, такую ​​как Leader Strike, она становится немного более продвинутой, поскольку у вас будет несколько камер, настроенных на одну модель.

В любом случае вам нужно отредактировать камеру следующим образом:

  • Положение {X: 0, Y: 1, Z: 0}
  • Вращение {X: 90, Y: 0, Z: 0}
  • Шкала {X: 2,5, Y: 2,5, Z: 2,5}
  • Очистить флаги: сплошной цвет
  • Фон: # 000
  • Поле зрения: 80,3

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

  • Вращение {X: 90, Y: 0, Z: 0}


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

На панели «Проекты» добавьте новую папку и назовите ее «Scripts». Теперь добавьте JavaScript в камеру и назовите его «InputController», а также добавьте его в папку «Scripts», которую вы только что создали. Теперь, когда вы дважды щелкните скрипт, вы можете редактировать его свойства.

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

Поэтому мы хотим, чтобы переменная «GameObject» ссылалась на нашего персонажа — для этого вы можете просто переключиться обратно в вид камеры Unity и перетащить нашу сферу в поле ввода.

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

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

 Чтобы пояснить немного, переменные X и Z предназначены для оси контроллера — мы хотим, чтобы они манипулировали положением нашего персонажа, когда мы посылаем вход контроллера в игру. Нам нужно сослаться на переменную Input.mousePosition, которая дает нам двухмерный вектор. Этот 2D-вектор необходимо добавить в наше отслеживание координации, поэтому мы назовем функцию setHeroPosition со значениями в качестве аргументов.

Так что создайте новый скрипт, назовите его HeroController и прикрепить его к нашей сфере / персонажу. Отредактируйте скрипт так, чтобы он выглядел так:

 Теперь, когда вы нажимаете кнопку «Play», вы должны иметь возможность перемещать персонажа по платформе с помощью мыши и даже упасть с платформы! Наша конечная цель — создать платформерную игру, похожую на Short Life, поэтому мы подробнее остановимся на этой игре в следующем руководстве.

На этом завершаются самые основы создания очень простого игрового процесса в Unity — в следующей части этого руководства мы рассмотрим, как добавить дополнительные декорации к уровню, добавить игровое меню и экспортировать все это на веб-сайт с помощью WebGL. , для игры в браузере.

Создание процедурных платформ

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

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

Поэтому вам нужно создать новую папку ресурсов с именем Prefabs, а затем перетащить нашу платформу с панели «Иерархия» в эту новую папку. Префабы будут распознаваться на панели Иерархия синим цветом.

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

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

Вот что нужно включить в скрипт:

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

Этот код также содержит три приватные переменные — строки, начинающиеся с приватной переменной. Они будут создавать (ссылаться) на сборную панель следующими способами:

  • Закрытая граница var: float накладывает ограничение на ось y, поэтому, когда наш персонаж прыгает выше этой границы, будет создана новая панель.
  • Частное вращение вар: Quaternion; просто добавляет необходимый поворот для создания наших префабов — однако мы добавляем вращение = Quaternion.identify; потому что это инструктирует движок не вращать игровой объект. Объект (наши сборные панели) буквально будет «идеально выровнен» с миром.
  • Последняя закрытая переменная lastPlatformPosition запомнит и сохранит положение последней платформы в виде трехмерного вектора (в основном платформы не исчезнут позади вас, поэтому вы можете вернуться назад в игровой мир, если хотите).

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

Наш следующий шаг — добавление кода, который определяет следующую позицию панели:

Мы используем цикл do while в этом коде, чтобы гарантировать, что значения X и Z вектора (его позиция в игровом мире) не идентичны предыдущим платформам, поэтому наши процедурно сгенерированные платформы всегда будут увеличиваться по высоте.

Конечно, мы не хотим, чтобы эти значения были строго размещены — немного случайности — это хорошо, иначе мы просто делаем идеальную лестницу. Поэтому мы используем функцию Random.Range между значениями -1 и 2, чтобы вызывать случайные значения для X и Z. Вы можете немного поиграть с этими числами, если хотите дурачиться.

Создание игрового меню

До сих пор мы создали «игру», в которой вы можете прыгать с ростом высоты и перемещать мышь, чтобы контролировать направление. Проблема в том, что если вы упадете с платформы, вы просто упадете бесконечно — нам нужно написать сценарий в меню «смерть» / игры, чтобы начать все сначала.

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

Нашим первым шагом будет проверка того, не упала ли сфера ниже определенного порога. Зайдите в скрипт GameManager, который мы сделали ранее, и посмотрите на оператор if функции update.

Мы собираемся использовать здесь оператор else if, чтобы проверить, находится ли позиция нашей сферы ниже -2,0 единиц Y-позиции — если это так, наша частная функция gameOver … ну, этот фрагмент сценария говорит само за себя.

Последний бит скрипта — это функция, используемая для обработки состояния «игра окончена» и загрузки нашего игрового меню.

Это относится к классу приложений Unity — мы можем вызвать функцию LoadLevel, чтобы открыть новую сцену, которая в данном случае является просто нашим игровым меню — помните, что в Unity в основном все является «уровнями». Основные меню («Начать игру» — «Настройки» — «Кредиты» и т. Д.) — это, в основном, уровни / сцены с фрагментами кликабельного текста. Вроде как загрузочные экраны Skyrim, а? Это всего лишь 3D-модели в пустом пространстве с полосой загрузки.

В любом случае нам нужно создать сцену через «Файл»> «Новая сцена» и присвоить ей имя «Меню» при сохранении. Затем мы собираемся добавить обе сцены в процесс сборки. Это делается через Файл> Настройки сборки.

Сцена нашего меню все еще должна быть открыта, поэтому просто нажмите кнопку «Добавить текущий» и добавьте сцену в свои настройки сборки — сделайте это снова со сценой уровня.

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

Добавить кнопку «Пуск» для игроков

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

Так что переключитесь на сцену игрового меню и добавьте этот бит в камеру (помните, что в палитре «Инспектор» из п. 1 этого урока?).

  • Очистить флаги: сплошной цвет
  • Фон: # 000
  • Ширина: 200
  • Высота: 60

Это даст нам сплошной черный фон для нашего игрового меню — это делается в значениях RGB, а не в шестнадцатеричном — поэтому синий будет 001, зеленый — 010, красный — 100 и т. Д. Я могу объяснить это для вас, но все, что вам нужно чтобы сделать это Google «RGB Picker», если вы хотите определенного цвета.

Двигаясь дальше, нам нужно добавить нашу кнопку, чтобы начать игру. Это делается с помощью элементов пользовательского интерфейса — в основном, мы можем добавлять элементы пользовательского интерфейса так же, как мы добавляем трехмерные элементы, через панель иерархии. Итак, создайте кнопку пользовательского интерфейса, и вы увидите несколько новых элементов на панели «Иерархия»:

  • EventSystem
  • холст
  • кнопка
  • Текст

Чтобы разобраться в этом — холст является нашим контейнером для всех элементов пользовательского интерфейса, и мы можем сделать его адаптивным (под адаптивным я подразумеваю «масштабирование до размера экрана», а не адаптивный, поскольку он будет отвечать на вопросы, которые вы задаете. Лучше оставить для сценариев AI) , В любом случае, мы собираемся изменить положение кнопки на это:

  • Прямое преобразование {Pos X: 0, Pos Y: 0, Pos Z: 0}
  • Rect Transform {Ширина: 200, Высота: 60}

Чтобы сделать это немного более элегантным, вы можете удалить «исходное изображение» кнопки и установить для него цвет. А чтобы изменить текст кнопки, просто измените элемент «Текст» на что-то вроде «НАЧАТЬ ИГРУ» и установите для него размер шрифта около 16.

Чтобы сделать кнопку нажатой, мы добавим функцию в скрипт UIController в элементе Button. Просто добавьте этот фрагмент кода ниже:

Примените эту функцию к настройкам инспектора кнопки, а в настройках компонента Button (Script) мы просто добавим функцию, которая выполняется, когда игрок нажимает на кнопку «Пуск». Поэтому просто добавьте функцию в событие On Click () и перетащите кнопку «Начать игру» в поле ввода. Наконец, выберите вновь созданную функцию из скрипта UIController (UIController.StartGame)

Мы можем применить эту функцию в настройках инспектора кнопки. В настройках компонента Button (Script) мы можем выполнять функцию всякий раз, когда игрок щелкает ее. Для этого мы добавляем новую функцию в событие On Click (), щелкая значок +. Теперь мы можем перетащить саму кнопку в поле ввода. Затем мы выбираем функцию, которую мы только что написали, из скрипта UIController (UIController.StartGame).

Как экспортировать / опубликовать как браузерную игру WebGL

Откройте настройки сборки и выберите WebGL в качестве целевой платформы. Теперь нажмите кнопку «Switch Platform» и, наконец, нажмите кнопку «Build» и дайте название своей игре. После сборки он будет экспортирован / сохранен как файл .HTML, который можно открывать / просматривать в любом браузере с поддержкой WebGL. Хотя если вы хотите опубликовать свою игру, есть два способа добиться этого:

  • Загрузите свою игру на какой-нибудь файловый хост (Dropbox, Google Drive и т. Д.), А затем поделитесь ссылкой. Это полезно для небольших демонстраций, которые вы хотите показать друзьям или потенциальным клиентам (веб-сайты игровых порталов, которые либо купят вашу игру, либо настроят для вас доход от рекламы).
  • Загрузите свою игру на принадлежащий вам FTP-сервер и вставьте ее в