Создание игры WebGL с Unity 5 и JavaScript

 #pragma strict public var Hero : GameObject; private var halfScreenWidth : float; private var halfScreenHeight : float; function Start () {} function Update () {} 

Первая переменная является публичной и имеет тип GameObject ; оно должно ссылаться на сферу. Переключаясь обратно в Unity с выбранной камерой, мы видим эту общедоступную переменную рядом с полем ввода с пустым значением. Давайте перетащим сферу в этот слот и назначим значение переменной.

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

 function Start () { halfScreenWidth = Screen.width / 2; halfScreenHeight = Screen.height / 2; } 

Единственное, что осталось сделать в скрипте InputController это получить значения от мыши, когда бы она ни перемещалась. Для этого мы используем функцию Update , которая вызывается для каждого кадра:

 function Update () { var x : float = 0.0; var z : float = 0.0; x = ( Input.mousePosition.x - halfScreenWidth ) / halfScreenWidth; z = ( Input.mousePosition.y - halfScreenHeight ) / halfScreenHeight; Hero.GetComponent( HeroController ).SetPosition( x, z ); } 

Обе новые переменные x и z обозначают соответствующую ось. Когда мы смотрим вниз по оси Y, мы видим горизонтальную ось X и вертикальную ось Z. На этих осях мы хотим отрегулировать положение героя после получения ввода мышью. Для этого мы используем Input.mousePosition , который возвращает двумерный вектор . Вектор, нулевое значение которого находится внизу слева, должен быть обработан в нашей системе координат с началом координат в середине экрана. Это происходит в следующих строках. В заключение мы вызываем функцию setHeroPosition с обоими вычисленными значениями в качестве аргументов. Мы напишем эту функцию в новом скрипте под названием HeroController прикрепленном к сфере:

 #pragma strict public function SetPosition ( x : float, z : float ) { transform.position.x = x; transform.position.z = z; } 

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

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

Для автоматического создания платформ нам нужен какой-то шаблон платформы. Это называется «сборным» в Unity. Чтобы создать префаб, нам нужно перетащить платформу из Иерархии в новую папку assets , которая (в соответствии с нашим соглашением об именах) называется Prefabs . Сборные могут быть распознаны в Иерархии по их синему цвету. Все платформы (за исключением первой) будут созданы с помощью нового скрипта под названием GameManager , который прикреплен к камере. Мы запускаем этот скрипт, ссылаясь на необходимые переменные:

 #pragma strict public var Platform : GameObject; public var Hero : GameObject; private var boundary : float; private var rotation: Quaternion; private var lastPlatformPosition : Vector3; function Start () { boundary = 1.0; rotation = Quaternion.identity; lastPlatformPosition = new Vector3( 0, 0, 0 ); } function Update () {} 

Нам нужно сослаться на готовую панель и сферу, поэтому оба должны быть перетащены в соответствующие слоты в редакторе. Мы также создаем три приватные переменные, которые будут использоваться для создания экземпляра сборной панели:

1. Граница обозначает ограничение по оси Y. Всякий раз, когда герой прыгает выше этого уровня, должна быть создана новая панель.
2. Вторая переменная — это поворот, необходимый для создания префабов. Значение Quaternion.identity приводит к тому, что вращения вообще не происходит , а это именно то, что нам нужно.
3. Переменная lastPlatformPosition сохраняет положение последней платформы в виде трехмерного вектора .

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

 function Update () { if ( Hero.transform.position.y > boundary ) { var position : Vector3; boundary += 1.0; position = getNextPlatformPosition(); Instantiate( Platform, position, rotation ); } } 

Далее мы можем добавить код, чтобы получить следующую позицию панели. Мы поместим это в дополнительную функцию, чтобы обеспечить читабельность:

 private function getNextPlatformPosition () { var position : Vector3; do { position = new Vector3( Random.Range( -1, 2 ), boundary, Random.Range( -1, 2 ) ); } while ( position.x == lastPlatformPosition && position.z == lastPlatformPosition ); lastPlatformPosition = position; return position; } 

Чтобы убедиться, что новые значения x и z вектора положения не совпадают с предыдущими, мы используем цикл do while while. Функция Unity Random.Range является правильным способом получения случайных значений для значений x и z . В обоих случаях мы хотим, чтобы они были между -1 и 2. Наконец, мы сохраняем новую позицию как последнюю позицию панели и возвращаем ее.

Добавить игровое меню

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

Сначала давайте проверим, падает ли герой ниже определенной точки. Для этого давайте отредактируем оператор if в функции update скрипта GameManager . Оператор else if проверит, находится ли y-позиция сферы ниже -2.0 единиц. В этом случае мы вызываем приватную функцию gameOver :

 function Update () { if ( Hero.transform.position.y > boundary ) { var position : Vector3; boundary += 1.0; position = getNextPlatformPosition(); Instantiate( Platform, position, rotation ); } else if (Hero.transform.position.y < -2.0) { gameOver(); } } 

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

 private function gameOver () { Application.LoadLevel( 'Menu' ); } 

Здесь мы используем класс приложения Unity, который дает нам доступ к методу LoadLevel который мы можем использовать для загрузки новой сцены с именем Menu . Чтобы заставить этот код работать, мы сначала должны создать сцену через File> New Scene, а затем сохранить ее с именем Menu . После этого нам нужно добавить обе сцены в процесс сборки. Настройки сборки можно открыть в меню «Файл»> «Настройки сборки» . Сцена меню все еще должна быть открыта, поэтому давайте нажмем кнопку Add Current , чтобы добавить сцену в настройки сборки. Повторите это действие с открытой сценой уровня. Теперь, когда мы закончим игру, мы должны перейти на вновь созданную сцену игрового меню.

Добавить кнопку для запуска игры

Чтобы сделать игру доступной, нам нужно создать игровое меню с кнопкой воспроизведения. Давайте переключимся на игровое меню и сначала изменим настройки камеры в Инспекторе, чтобы:

 Clear Flags: Solid Color Background: #000 Width: 200 Height: 60 

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

• элемент EventSystem и
• элемент Canvas с
• дочерний элемент Button и
• его дочерний элемент Text .

Холст — это контейнер для всех элементов пользовательского интерфейса, и его можно сделать адаптивным. Для этого нам нужно изменить настройку Canvas Scaler: UI Scale Mode в Инспекторе с Постоянного размера пикселя на Масштабирование с размером экрана . Теперь мы можем изменить положение кнопки:

 Rect Transform { Pos X: 0, Pos Y: 0, Pos Z: 0 } Rect Transform { Width: 200, Height: 60 } 

Удаление исходного изображения кнопки и установка цвета #C8FF00 сделают меню немного приятнее. Наконец, мы изменим текст, отредактировав текст элемента «Текст» на «PLAY PREJUMP» и установив размер шрифта 16. Чтобы кнопка работала, мы будем использовать новую функцию, которую добавим в новый скрипт UIController на кнопке элемент. Он состоит из одной функции для загрузки уровня сцены:

 public function StartGame () { Application.LoadLevel( 'Level' ); } 

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

Опубликуйте свой проект как браузерную игру WebGL

Unity может экспортировать проект как приложение WebGL. Открыв настройки сборки, мы выбираем WebGL в качестве платформы. Затем мы переключаем место экспорта, нажав кнопку « Переключить платформу» . После этого нам просто нужно нажать кнопку Build и выбрать название для нашей игры. Когда процесс сборки завершится, мы можем открыть html-файл с помощью браузера для настольных ПК с поддержкой WebGL.

Куда мы идем отсюда?

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

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