Создание браузерных игр в Unity WebGL может быть весьма полезным - существует множество веб-сайтов игровых порталов, которые будут делить с вами доход от рекламы или покупать ваши игры напрямую у вас. Если вы талантливы, вы легко можете зарабатывать несколько тысяч долларов в месяц в виде доли дохода от рекламы. Unity с WebGL - один из лучших инструментов для этого, а с помощью плагинов WebVR вы также можете легко обеспечить поддержку VR в своих играх.
Так что, если вам интересно, как создавать игры на Unity WebGL, читайте дальше!
Требования
- Единство
- Знание HTML5 / JavaScript
- (Необязательно) Хороший текстовый редактор, например Блокнот ++
Для начала загрузите и установите Unity и убедитесь, что вы установили компонент поддержки WebGL.
Когда Unity запускается впервые, потратьте минуту, чтобы привыкнуть к пользовательскому интерфейсу и меню, особенно к Иерархия панель - содержит все текущие элементы сцены. По сути, это основной вид всего, над чем вы работаете, будь то уровень игры или главное меню.
У вас также есть Игра вкладка (для тестирования игры внутри редактора), а справа Инспектор панель. Здесь можно редактировать элементы, например, источники света, актеров и т. Д.
Если вы нажмете на Направленный свет в меню Иерархия, она предоставит вам информацию об этом конкретном источнике света, и вы сможете включить / отключить отбрасываемые от него тени.
Наконец, у вас есть Проект окно внизу, в котором просто хранится вкладка с файлами, которые используются для создания вашего проекта.
Немного ознакомившись с пользовательским интерфейсом, сохраните текущую сцену. Идти к Файл> Сохранить сцену и откроется диалоговое окно для папки «Активы». Стандартной практикой является хранение вещей во вложенных папках при разработке игр, поэтому создайте вложенную папку с именем « Сцены » и сохраните в нем сцену.
Теперь мы собираемся создать что-то действительно простое - игру типа «платформер», в которой наш персонаж просто прыгает по платформам. Падение означает смерть. Мы будем делать это в 3D / виде от первого лица, поэтому персонаж на самом деле не моделирует - на самом деле, мы просто собираемся использовать простой объект «сфера» для нашего персонажа, потому что его проще всего создать.
Так что в Иерархия панели, нажмите «Создать» и отредактируйте эти свойства:
- Позиция {X: 0, Y: 2,5, Z: 0}
- Масштаб {X: 0,3, Y: 0,3, Z: 0,3}
Если вы нажмете кнопку « Играть в », Он должен отобразить простую сферу в поле зрения камеры. Теперь мы хотим добавить нашему «персонажу» гравитацию и физику прыжков.
Так что в Инспектор панели, добавьте компонент в сферу и выберите Жесткое тело - также мы не хотим, чтобы сфера вращать , поэтому перейдите в Constaints> выберите все оси в Вращение площадь.
Теперь нам нужно создать некую платформу, чтобы наш персонаж не падал бесконечно через игру. Итак, добавьте куб и установите Масштаб Y ценность для 0,1 - теперь, если снова «сыграть» сцену, наш персонаж должен «упасть» на куб.
Теперь мы собираемся добавить немного физики, чтобы наш персонаж немного «подпрыгивал», когда ударялся о платформу куба. Нам нужно создать новый физический материал и применить его к сфере, чтобы наш персонаж имел упругие свойства.
Создайте новую подпапку в Активы каталог и назовите его что-то вроде «Материалы», а затем создайте новый физический материал. Назовите это «Bouncy_blob» или как хотите.
Теперь в Осмотр панель, добавьте эти значения к надувному материалу:
- Динамическое трение: 10
- Статическая фантастика: 10
- Бодрость: 1
- Комбинация трения: максимум
- Комбинация отскока: максимум
Мы также должны добавить физический материал к платформе под нашей сферой - это будет так, чтобы наша сфера отскакивала с увеличивающейся высотой при каждом отскоке. Итак, создайте другой материал и назовите его как-то вроде «Platform_bouncing» и присвойте ему значения:
- Динамическое трение: 0,9
- Статическая фантастика: 0.9
- Бодрость: 1
- Комбайн трения: средний
- Bounce Combine: Умножение
Теперь, когда вы нажмете кнопку «Play», вы заметите, что наш персонаж подпрыгивает выше при каждом отскоке.
Чтобы добавить цвет / текстуру к платформе, создайте новый материал и щелкните вкладку «Альбедо», затем задайте цвет. Вы можете перетащить этот материал на платформу, и он изменит цвет.
Для просмотра от первого лица вам просто нужно перетащить камеру в Иерархия панель на нашу сферу - это заставит камеру постоянно следить за нашим персонажем. Эта предпосылка остается той же самой для любой игры Unity от первого лица, но если вы создаете многопользовательскую игру FPS, например Лидер забастовки , Он становится немного более продвинутым, так как у вас будет несколько камер для каждой модели.
В любом случае нужно отредактировать камеру так:
- Позиция {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}
Теперь мы хотим запрограммировать элементы управления игрой, чтобы мы могли использовать мышь для управления движением персонажа. Для этого нам понадобится скрипт.
в Проекты панели, добавьте новую папку и назовите ее «Сценарии». Теперь добавьте JavaScript в Камера и назовите его «InputController», а также добавьте его в только что созданную папку «Scripts». Теперь, дважды щелкнув скрипт, вы можете редактировать его свойства.
Когда вы открываете скрипт в редакторе скриптов Unity по умолчанию, он должен выглядеть так:
Итак, мы хотим, чтобы переменная GameObject ссылалась на нашего персонажа - для этого вы можете просто переключиться обратно в вид камеры Unity и перетащить нашу сферу в поле ввода.
Теперь мы хотим назначить половина ширины и высоты экрана в функцию Start. Итак, отредактируйте сценарий, чтобы он выглядел так:
Итак, теперь нам просто нужны значения мыши (всякий раз, когда он перемещается игроком). Для этого нам нужно будет вызвать функцию Update. Так что настройте скрипт под переменной Update:
Чтобы немного пояснить, переменные X и Z предназначены для оси контроллера - мы хотим, чтобы они управляли положением нашего персонажа, когда мы отправляем данные контроллера в игру. Нам нужно ссылаться на переменную Input.mousePosition, которая дает нам 2D-вектор. Этот 2D-вектор нужно добавить в отслеживание координации, поэтому мы вызовем функцию setHeroPosition со значениями в качестве аргументов.
Итак, создайте новый скрипт, назовите его HeroController и прикрепите его к нашей сфере / персонажу. Отредактируйте скрипт, чтобы он выглядел так:
Теперь, когда вы нажимаете кнопку «Играть», вы должны иметь возможность перемещать персонажа по платформе с помощью мыши и даже падать с платформы! Наша конечная цель - создать платформер, похожий на Короткая жизнь , Так что в следующем руководстве мы доработаем эту игру.
На этом мы завершаем основы создания очень простого игрового процесса в Unity - в следующей части этого руководства мы рассмотрим, как добавить больше пейзажей на уровень, добавить игровое меню и экспортировать все это на веб-сайт с помощью WebGL. , для игры в браузере.
Создание процедурных платформ
Итак, в первой части этого урока мы просто создали базовую платформу, на которой ваш персонаж может прыгать ( и падают на свою гибель) - но для настоящего платформера нам нужно добавить дополнительные платформы. Но мы не хотим добавлять миллион платформ - мы хотим, чтобы Unity автоматически Создайте платформы, пока наш персонаж подпрыгивает.
Для этого нам понадобится шаблон платформы, также известный как «сборный». Prefab - это сокращение от сборные, и это просто означает «готовый» - обычно это копия игрового объекта, которую вы можете повторно использовать снова и снова. Фактически, префабы могут содержать иерархии игровых объектов, что означает, что вы можете «собрать» целую сцену из игровых объектов.
Итак, что вам нужно сделать, это создать новую папку с ресурсами с именем Сборные , затем перетащите нашу платформу из Иерархия панель в эту новую папку. Префабы будут узнаваться на панели Иерархия по синему цвету.
Теперь, чтобы проинструктировать Unity о создании процедурных платформ, нам нужно создать скрипт под названием GameManager и прикрепить его к камере. Скрипты GameManager в основном содержат важные инструкции для движка, которые будут передавать игровой процесс - в этом случае он будет генерировать платформы по мере продвижения нашего персонажа.
Причина, по которой мы прикрепляем его к камере, заключается в том, что камера никогда не разрушается и остается неизменной - поэтому скрипт никогда не разрушается и остается постоянным, будучи прикрепленным к нему.
Вот что нужно включить в сценарий:
Чтобы немного объяснить этот код, нам необходимо создать ссылку как на сборную панель, так и на сферу (наш персонаж), поэтому вам нужно перетащить их в соответствующие слоты в редакторе.
Этот код также содержит три закрытые переменные - строки, начинающиеся с частный вар. Они будут создавать (ссылаться) на сборную панель следующими способами:
- Граница частного var: float устанавливает ограничение на ось Y, поэтому, когда наш персонаж прыгает выше чем эта граница, будет создана новая панель.
- Частное вращение var: Quaternion; просто добавляет необходимое вращение для создания наших префабов, однако мы добавляем вращение = Quaternion.identify; потому как это указывает движку не вращать игровой объект. Объект (наши сборные панели) буквально «идеально выровнен» с миром.
- Последняя частная переменная lastPlatformPosition запомнит и сохранит положение последней платформы как трехмерный вектор (в основном, платформы не исчезают за вами, поэтому вы можете вернуться назад по игровому миру, если хотите).
В следующем фрагменте скрипта мы добавим проверку для каждый кадр находится ли наша сфера (персонаж) над границей (которая генерирует новые платформы) - если наш персонаж находится выше границы, мы будем поднять границу создать новую панель / платформу выше предыдущей.
Наш следующий шаг - добавление кода, который определяет следующую позицию панели:
Мы используем делать пока цикл в этом коде, чтобы гарантировать, что значения X и Z вектора (его положение в игровом мире) не идентичны предыдущим платформам, поэтому наши процедурно сгенерированные платформы всегда будут увеличиваться в высоте.
Конечно, мы не хотим, чтобы эти ценности были строго размещены - немного случайности - это хорошо, иначе мы просто делаем идеальную лестницу. Итак, мы используем Random.Range между значениями -1 и 2, чтобы вызывать случайные значения для X и Z. Вы можете немного поиграть с этими числами, если хотите пошалить.
Создание игрового меню
Пока что мы создали «игру», в которой вы можете прыгать с увеличением высоты и перемещать мышь, чтобы контролировать направление. Проблема в том, что если вы упадете с платформы, вы просто будете бесконечно падать - нам нужно добавить сценарий в меню «смерть» / игра, чтобы начать все сначала.
По сути, мы напишем скрипт, который проверяет, падает ли наша сфера (персонаж) ниже первая платформа игры . Если это так, скрипт загрузит новую сцену.
Нашим первым шагом будет проверка, упала ли сфера ниже определенного порога. Войдите в GameManager сценарий, который мы создали ранее, и обратите внимание на если заявление Обновить функция.
Мы собираемся использовать иначе если здесь, чтобы проверить, находится ли положение нашей сферы ниже -2,0 единиц позиции Y - если это так, наша частная функция игра завершена будет ... ну, этот фрагмент сценария не требует пояснений.
Последний фрагмент скрипта - это функция, которая используется для обработки состояния «игра окончена» и загрузки нашего игрового меню.
Это напоминает о Unity заявка класс - мы можем вызвать LoadLevel функция для вызова новой сцены, которая в данном случае является просто нашим игровым меню - помните, что в основном все в Unity - это «уровни». Основные меню («Начать игру» - «Параметры» - «Авторы» и т. Д.) - это в основном уровни / сцены с фрагментами интерактивного текста. Вроде как загрузочные экраны Скайрима, а? Это просто 3D-модели в пустом мировом пространстве с полосой загрузки.
В любом случае нам нужно создать сцену через Файл> Новая сцена , и дайте ему имя Меню при сохранении. Затем мы добавим обе сцены в процесс сборки. Это делается через Файл> Параметры сборки .
Наша сцена меню все еще должна быть открыта, поэтому просто нажмите кнопку «Добавить текущий» и добавьте сцену в свой Настройки сборки - проделайте то же самое с сценой уровня.
Когда мы умираем в игре, созданный нами скрипт должен перевести нас с уровня игры на сцену меню.
Добавить кнопку «Пуск» для игроков
Теперь мы можем играть в игру в тестовом режиме, но на данный момент у игроков нет возможности запустить игру, если мы куда-то загрузим эту игру. Итак, нам нужно создать игровое меню, в котором есть кнопка для запуска игры.
Так что переключитесь на сцену игрового меню и добавьте этот бит в камеру ( в панели Inspector, помните из pt. 1 этого руководства?).
- Очистить флаги: сплошной цвет
- Справочная информация: # 000
- Ширина: 200
- Высота: 60
Это даст нам сплошной черный фон для нашего игрового меню - это делается в Значения RGB , не шестнадцатеричный - таким образом, синий будет 001, зеленый - 010, красный - 100 и т. д. Я мог бы объяснить это вам, но все, что вам нужно сделать, это Google «Выбор RGB», если вы хотите определенный цвет.
Двигаясь дальше, нам нужно добавить нашу кнопку, чтобы начать игру. Это делается через Элементы пользовательского интерфейса - в основном, мы можем добавлять элементы пользовательского интерфейса так же, как мы добавляем 3D-элементы, через Иерархия панель. Так что вперед и создайте Кнопка пользовательского интерфейса , и вы увидите несколько новых элементов в Иерархия панель:
- EventSystem
- Холст
- Кнопка
- Текст
Чтобы сломать это - холст это наш контейнер для всех элементов пользовательского интерфейса, и мы можем сделать его адаптивным ( Под адаптивным я подразумеваю «масштабирование до размера экрана», а не отзывчивым, как будто он отвечает на вопросы, которые вы задаете. Лучше оставить это сценариям AI). В любом случае мы собираемся изменить положение кнопки на это:
- Rect Transform {Pos X: 0, Pos Y: 0, Pos Z: 0}
- Rect Transform {Ширина: 200, Высота: 60}
Чтобы сделать это немного более элегантным, вы можете удалить «исходное изображение» кнопки и установить для него цвет. А чтобы изменить текст кнопки, просто отредактируйте Текст на что-то вроде «НАЧАТЬ ИГРУ» и задайте ему размер шрифта около 16.
Сделать кнопку кликабельный , мы добавим функцию в скрипт UIController в Кнопка элемент. Просто добавьте этот фрагмент кода ниже:
Примените эту функцию к кнопке Инспектор настройки, а в Кнопка (сценарий) в настройках компонента, мы просто добавим функцию, которая будет выполняться, когда игрок нажимает нашу кнопку «Пуск». Так что просто добавьте функцию в По щелчку() событие и перетащите кнопку «Начать игру» в поле ввода. Наконец, выберите только что созданную функцию из скрипта UIController ( UIController.StartGame)
Мы можем применить эту функцию в кнопке Инспектор настройки. В настройках компонента Button (Script) мы можем выполнять функцию всякий раз, когда игрок нажимает на нее. Для этого мы добавляем новую функцию к событию On Click (), щелкнув + икона. Теперь мы можем перетащить саму кнопку в поле ввода. Затем мы выбираем только что написанную функцию из скрипта UIController (UIController.StartGame).
Как экспортировать / опубликовать игру в браузере WebGL
Откройте настройки сборки и выберите WebGL в качестве целевой платформы. Теперь щелкните Платформа переключения кнопку и, наконец, нажмите кнопку Построить и присвойте игре название. После сборки он будет экспортирован / сохранен как файл .HTML, который можно открыть / просмотреть в любом браузере с поддержкой WebGL. Хотя если хочешь публиковать в вашей игре есть два способа добиться этого:
- Загрузите игру на какой-нибудь файловый хост (Dropbox, Google Drive и т. Д.), Затем поделитесь ссылкой. Это полезно для небольших демонстрации вы хотите показать друзьям или потенциальным клиентам ( веб-сайты игровых порталов, которые либо купят вашу игру, либо будут получать от вас доход от рекламы).
- Загрузите свою игру на свой FTP-сервер и вставьте ее в